Firebase for the Web

Transcript

1. #DevFest16 FIREBASE FOR THE WEB Prosper Otemuyiwa - @unicodeveloper
2. #DevFest16 #DevFest16 WHO AM I? ❖ Technical Writer at Auth0 ❖ Blogger at goodheads.io ❖ Open Sourcerer ❖ Self-Acclaimed Evangelist ❖ Fire Ambassador ❖ Google Developer Expert @unicodeveloper
3. #DevFest16 #DevFest16 Firebase? what do you mean? LIGHT UP THAT PROJECT!!!!
4. #DevFest16 #DevFest16 Firebase for Web offers what? ❖ Authentication ❖ Dynamic Links ❖ Hosting ❖ Realtime Database ❖ Storage ❖ Web Push Notifications via Cloud Messaging
5. #DevFest16
6. #DevFest16 #DevFest16 Firebase Authentication
7. #DevFest16 #DevFest16 Firebase Authentication => Stop Overthinking it, Just Configure & Move On ❖ Email and password auth ❖ Google ❖ Facebook ❖ Twitter ❖ Github ❖ Custom auth ❖ Anonymous ❖ Account Linking - Link Multiple Auth providers to an acct
8. #DevFest16 #DevFest16 Firebase Authentication var auth = firebase.auth(); Work with Email and Password Authentication auth.signInWithEmailAndPassword(email,pwd); => returns a promise to resolve user’s data auth.createUserWithEmailAndPassword(email, pwd); => returns a promise auth.onAuthStateChanged(user => {} ); => tracks auth state
9. #DevFest16 ….Enable the type of auth provider that you want
10. #DevFest16 ….app.js
11. #DevFest16 ….app.js
12. #DevFest16 ….Email Address Verification ….Password reset
13. #DevFest16
14. #DevFest16
15. #DevFest16 #DevFest16 Firebase Realtime Database => REALTIME EVENTS • Value Event ◦ Add ◦ Edit ◦ Delete • Child Event ◦ Child_added - gets called when a child has been added ◦ Child_changed - Gets called when children have been changed ◦ Child_removed - gets called when children have been removed ◦ Add, Modified, Deleted ◦ Granular control over data synchronization ◦ Great for lists
16. #DevFest16 #DevFest16 Firebase Dynamic links => Use Case • Great Mobile Website • Awesome and Beautiful Native App ...but conversion is higher on native than on the web?
17. #DevFest16 Business Mindset Kicks In: • How do I double conversion rates? • Since native is doing really well, how do I convert more mobile web users to native? What do I do, @unicodeveloper?
18. #DevFest16 …….let’s ask firebase
19. #DevFest16 => Use Firebase Dynamic Links • Make your mobile app deep-linkable • Add “Open in app” links to your web pages • The user will be directed to the corresponding page in your app from the mobile website
20. #DevFest16 #DevFest16 Firebase Dynamic links => Implementation can be found in the docs https://firebase.google.com/docs/dynamic-links/use-case s/web-to-app
21. #DevFest16 #DevFest16 Firebase Storage You need no server, fam!!! Pictures, Video, Audio,.... Cast them upon me for I care for you - Firebase FIREBASE
22. #DevFest16
23. #DevFest16
24. #DevFest16 #DevFest16 Firebase Hosting • Production grade static hosting • Deploy web apps to a global CDN in a single command • Deployed apps automatically provisioned an SSL Certificate - BOOM!!! Install firebase tools to get started: • npm install -g firebase-tools Firebase deploy
25. #DevFest16
26. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Send Push Messages to your users ❖ Get an FCM token ❖ Show a notification when a push message is received ❖ Crash Reporting ❖ Cloud Messaging ❖ Realtime Database ❖ Remote Config
27. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Baby Steps after initiating the Messaging Service • Create a service worker file • Get the FCM token How do you now show a notification: Two ways => • If the web page is closed, the message will be received in your service worker file. • If the web page is opened, the push message will be received inside your web page
28. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Import Firebase into the service worker file ❖ Initialize Firebase in the service worker
29. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Set handler to receive message in the service work. Helps for when the web page page isn’t open!
30. #DevFest16 #DevFest16 Learning Resources https://www.youtube.com/watch?v=k1D0_wFlXgo&list=PLl-K7zZEsYLmnJ_F pMOZgyg6XcIGBu2OX https://github.com/cameronroe/awesome-firebase
31. #DevFest16 #DevFest16 Any Questions?