Deploy hosting
ตอนนี้ config ทุกอย่างเรียบร้อย
ตอนนี้ config ทุกอย่างเรียบร้อย
เริ่มต้น Structure project
Document ต้นฉบับ
ทำการใส่ config Firebase Authentication
บทเรียนสำหรับคนที่สนใจอยากเรียนรู้ Vue framework ประกอบกับการใช้งานคู่กับ Firebase เพื่อการ deploy งานจริง
เราจะทำอะไรกัน ?
ตัวอย่าง Book List
การเพิ่ม Custom style ลงไป
เล่าพื้นฐานของระบบ Component เพิ่มเติมก่อน
Document ต้นฉบับ//firebase.google.com/docs/firestore/query-data/listen
Solution อื่นๆของ Firestore
มาทำ Product page กันต่อ
เพิ่ม Add user เข้า collection user ผ่าน onAuthStagedChange
มาทดลองใช้ Firebase ผ่าน Firestore กัน
มาทำความรู้จัก Nuxt กันว่ามันคืออะไร มีความแตกต่างกับ Vue ยังไงบ้าง และเคสแบบไหนควรใช้ Nuxt บ้าง
ทำ `LoginView`
เราจะทำอะไรกันบ้างในฝั่ง User
ทำ `CheckoutView` เพิ่ม
ทำ `Dashboard`
ทำ `stores/admin/order.js` สำหรับลองส่งข้อมูลระหว่างหน้า
ทำ `stores/admin/product.js` สำหรับลองส่งข้อมูลระหว่างหน้า
ทำ `stores/admin/user.js` สำหรับลองส่งข้อมูลระหว่างหน้า
ย้ายฝั่งมาทำหน้า Profile บ้างก่อนจะไปหน้าตะกร้าสินค้า (จะได้เสร็จไปส่วนๆไป)
ทำ store `cart.js`
เริ่มต้นทำ store `product.js`
Document ต้นฉบับ//vuejs.org/guide/essentials/conditional.html
Document ต้นฉบับ//vuejs.org/guide/essentials/reactivity-fundamentals.html
Document ต้นฉบับ//vuejs.org/guide/essentials/event-handling.html
e-commerce-firebase-firestore-pagination
vue-router-pinia
vue-component-core-concept
vue-firebase-intro
Document ต้นฉบับ//vuejs.org/guide/essentials/watchers.html
vue-watch-computed-props
เริ่มลง Vuejs (จากนี้จะขอเรียก Vue)
Step แรกเราจะเริ่มย้าย Zone จาก Emulator ไปที่ตัวจริงก่อนที่เราจะ deploy จริงกัน โดยเราจะค่อยๆย้ายไปทีละ service กัน
หลักการของ Omise เป็นแบบไหน ?
เพิ่ม Trigger function
เปิด Billing
แนะนำ 1 อย่างสำหรับคนที่ยังไม่ค่อยเชี่ยว CSS เท่าไหร่ (ฟัง Session นี้แล้วยังสบสันอยู่)
รู้จักกับ Security rule ใน Realtime database
เราจะทำอะไรกันต่อ
ต้องทำอะไรบ้างสำหรับการเพิ่ม Placeorder ?
เพิ่ม config proxy
เรามาทำทั้ง 2 case กัน โดยเราจะพาใช้ Realtime database ผ่าน 2 feature คือ
รู้จักกับ Security rule ใน Cloud storage
เพิ่ม security rule ให้ order
ต้องเตรียมอะไรบ้างสำหรับทำ webhook
ทีนี้กลับมาที่ Backoffice กันบ้าง (เพื่อทำ project ให้สมบูรณ์) เราจะทำเพิ่มอีก 2 อย่างคือ
รู้จักกับ Getters
e-commerce-vue-backoffice
มาลองแต่ง Todo List ด้วย DaisyUI กัน
e-commerce-firebase-emulator
มาลองทำ Form register กัน
vue-todo-list-api
เรามาทำทั้ง 2 case กัน โดยตอนนี้เราจะยังไม่ set security rule อะไร (ให้ทุกคนสามารถมา upload ภาพได้ก่อน)
e-commerce-firebase-hosting
e-commerce-firebase-authentication
e-commerce-checkout-cloud-function
e-commerce-cloud-storage
Document ต้นฉบับ//vuejs.org/guide/essentials/computed.html
Plugin in tailwind
e-commerce-payment-gateway-cloud-trigger
e-commerce-cart-realtime-datbase
vue-tailwind-daisyui
ย้ายมาฝั่ง Pinia บ้าง
ลองมาทำ Router กันเองก่อน
e-commerce-vue-frontpage
e-commerce-firebase-firestore-crud
ลง Firebase ลง Project กัน
รู้จักกับ Firebase Emulator
มาลองเล่น DaisyUI Component
เพิ่ม productId ลงตะกร้าไป
เราสามารถส่ง Router
และนี่คือทั้งหมดของ Vue Firebase Masterclass
ผลลัพธ์ทั้งหมดของ Session นี้
ผลลัพธ์ทั้งหมดของ Backoffice นี้
Firestore Security Rule คืออะไร ?
ทำ login ด้วย email, password ในหน้า Admin
ทำ login ด้วย gmail ในหน้า User