利用Angular+Firebase快速打造MVP。 範例代碼使用技術 Angular/AngularFire2/ngrx(store/effects)

1. 林承翰 JB
Angular+Firebase：
快速建立最小可行性產品

2.  Create a new Firebase project
 Install Angular CLI
 Install Firebase CLI
 Clone this project
 Install npm packages
 Update FirebaseConfig.ts
 Build the app (To /dist)
 Deploy to Firebase
Before we start …

3. 我有個商業模式很棒 ! 我來提供點子，你來開發吧!

4. #%#@&*$… 我講完需求了，什麼時候可以給我測試？

6. Minimum Viable Product
最小可行性產品
需求或點子
MVP使用者回饋
驗證/修正 快速打造
發佈

7. 目的：
 使用者的需求概念驗證
 快速收集使用者回饋
 能不做的功能就不做，找出最有價值的需求 (80/20法則)
Minimum Viable Product
最小可行性產品

8.  初期忽略申請及設定 Server的成本
 利用BaaS快速建立Database和使用者驗證
 資源最大化，前端工程師不必等後端開出API規格
 快速佈署
為什麼我們會使用Serverless在MVP

9.  Serverless for Web and Mobile APP
 SaaS (Development)
 Authentication
 Real-time Database
 Cloud Storage
 Cloud Firestore (beta)
 Hosting
 FaaS
 Cloud Functions (beta)
Google Firebase : 主要產品

10. Google Firebase: Dev & Test

11. Google Firebase: Grow & Audience

12.  Angular:
 A Javascript framework powered by Google
 Typescript
 AngularFire2:
 Official Angular library for Firebase
 Use the power of RxJS, Angular, and Firebase
Angular, AngularFire2

13. Authentication
Real-time Database
Cloud Storage
Hosting
Angular + Firebase 購物車範例

14. Clone Source code
Create your Firebase project
Set authentication and API key
Set database and storage rules
Use Firebase CLI to initial and deploy
Angular + Firebase 購物車範例

15.  $ npm install -g @angular/cli
 $ git clone https://github.com/KarateJB/Angular.Firebase.git
 $ cd Angular.Firebase/sample
 $ npm install
Clone Source code

16. Create your Firebase project

17. Enable auth provider

18. Set database and storage rules
Real-time database

19. Set database and storage rules
Cloud storage

20.  Request
 auth.uid
 auth.token
 path
 resource (name/size/contentType …)
 time
 Resource
 name
 size
 timeCreated
 Updated
 …
Cloud storage rules - variables

21. Set authentication and API key
1. Get API key and config here!Set default authentications
2. Set the information to
FirebaseConfig.ts

22.  $ npm install -g firebase-tools
 $ firebase login
 $ firebase init
 .firebaserc
 firebase.json
 database.rules.json
 storage.rules
 $ ng build --prod --aot=false
 $ firebase deploy
Use Firebase CLI to initial and deploy

23. Database migration?
Cloud functions or backend APIs?
Pricing
Next step …

24. THANK YOU!