Building E-commerce website with Canner & Firebase

In this talk, Leo, Canner's senior frontend engineer, will share how to build an E-commerce website with Canner & Firebase.

Transcript

1. Building E-commerce Web Application with Canner & Firebase
2. @abz53378 Frontend Engineer @canner.io Leo
3. Ecommerce website
4. • Users can login • Users can buy products • Filtered by category • Create new orders • Payment User Stories
5. Firebase A mobile and web application development platform
6. Overview
7. Canner
8. One schema deal with the data and ui Overview
9. Structure Application CMS Data Admin
 • Edit products • Edit categories • Show orders User
 • Show products • Buy products
10. Step 1 Database and CMS
11. • Features • Realtime • Easy to use • Cross-platform SDKs • Data Structure • JSON object • No array Firebase Realtime Database
12. • To one - id • To many - id map Relationship To many To one
13. E-commerce Data Model - Products Relation
14. Canner Schema
15. <root>
16. Data Type Tag • Declare the data type of a field
17. • Declare the data type of a field • 
 
 
 Data Type Tag <string /> <boolean /> <array /> <dateTime /> <object /> <image /> <relation /> <number /> <number />
18. Data Type Tag • Declare the data type of a field • 
 
 
 • Properties • ui: the ui component canner support • uiParams: default setting for ui • keyName <string /> <boolean /> <array /> <dateTime /> <object /> <image /> <relation /> <number /> <number />
19. • Create grids, containers, and blocks in CMS Layout Tag
20. <Tabs /> <Default /> <Blocks /> • Create grids, containers, and blocks in CMS Layout Tag
21. • Add features on array field
 
 Query Tag
22. <filter /> <sort /> <pagination /> Query Tag • Add features on array field • 
 

23. Step 2 Connect Data to Application
24. • Listen events • value • child_added • child_changed • child_removed • child_moved • Get once Read Data
25. Sort 25 orderByKey() orderByChild(‘views’) orderByValue()
26. Limit limitToFirst(1) limitToLast(1) endAt(300) startAt(200) equalTo(300)
27. Cloud Functions
28. Demo