Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

React Native Firebase Realtime Database + Authentication

9 247 vues

Publié le

React Native Firebase Realtime Database + Authentication

Publié dans : Logiciels

React Native Firebase Realtime Database + Authentication

  1. 1. Kobkrit Viriyayudhakorn, Ph.D. kobkrit@gmail.com http://www.kobkrit.com Completing Chat Room App
  2. 2. Important Links • Source Codes 
 https://github.com/kobkrit/learn-react-native • Course Materials
 http://www.kobkrit.com/category/programming/react- native/ • Score Announcement
 http://bit.ly/its484quizscore • Facebook Group

  3. 3. Adding Chat Functionality into Application • Chat App is exactly syncing a list of message (chat) through out the members in the chat rooms. • We can use transaction features of Firebase Realtime database that we have done earlier to implement the chat function. • Let’s start with the basic chat implementation.
  4. 4. Adding Chats l12_firebase/4.js Add Reference to 
 chats in Firebase DB
  5. 5. l12_firebase/4.js Listen for chats object changed in Firebase.
 Updated it in the state. Update chats
 transactionally Starting Listening
 once the app is started
  6. 6. l12_firebase/4.js Rendering Chats and add onPress Handler to SendChat
  7. 7. What Currently Look Like? l12_firebase/4.js
  8. 8. Improvement • For each message, it should have • Timestamp, when this chat is sent. • Who is a sender? • Asking for sender name when enter the app. • Better UI in the chat message.
  9. 9. We need MomentJS for this task. • MomentJS, DateTime utility library in Javascript. • Installation • $|> npm install moment -- save • Usage in React-Native • import moment from ‘moment’;
  10. 10. Using MomentJS • Setting time • let time = moment(timestamp); • Format time • moment().format('MMMM Do YYYY, h:mm:ss a'); 
 => November 21st 2016, 6:23:03 pm • moment("20111031", “YYYYMMDD").fromNow();
 => 5 years ago
  11. 11. Add two new state variables • modalVisible - For controlling modal visibility • name - Chatter’s name l12_firebase/5.js
  12. 12. l12_firebase/5.js • Adding Modal UI to ask chatter’s name. • Save it into this.state.name • Open by set this.state.modalVisible=true
 in the constructor.
  13. 13. l12_firebase/5.js Instead of save only a message, We save… • Message • Name of chatter • Timestamp (millisecond since 
 1 Jan 1970)
  14. 14. l12_firebase/5.js • Showing the chatter name at the header • Using MomentJS for display the time. • Showing the chatter name in the chat message.

  15. 15. l12_firebase/5.js
  16. 16. l12_firebase/5.js
  17. 17. Understand Firebase Pricing
  18. 18. Very Easy
 to Fake an user. • This is bad. • We need something to check authority of the chatter. • We need a serious and professional chat app for serious things. • Let’s do the authentication.
  19. 19. Firebase Authentication • Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. • It supports authentication using • Passwords • Federated Identity Providers • Google, Facebook, Twitter, and Github.
  20. 20. React-Native-Firestack • To get full functionality of Firebase Authentication, We can not just using the Firebase NodeJS library like we did in Realtime Database. • It needs more native functionality such as exchanging token with Facebook app. • We need to use native iOS, and Android Firebase library. • Luckily, Somebody make it easy for us to integrate with native library via the automatic link. It is called “React- Native-FireStack” library
  21. 21. Firestack Installation • $|> npm install react-native- firestack --save • $|> react-native link • Firestack have done many things for us • Install Cocaopod • Install firebase native iOS via Cocaopod • Linking with React-Native
  22. 22. .xcworkspace not .xcodeproj • Since we using Cocaopod, we need to use {projectName}.xcworkspace instead of {projectName}.xcodeproj • Why? Because Cocaopod is a package manager for iOS native library (like npm for react-native) • To make user’s project can linked with the installed libraries, Cocaopod need to creating the workspace (.xcworkspace), which make installed libraries and user project to be in the same space.
  23. 23. Authenticate Key for iOS Open firebase console, and click on Add Firebase to your iOS App
  24. 24. Adding iOS Bundle ID Add “org.reactjs.native.example.{nameOfYourProject}”
 while initialize.
  25. 25. Download 
  26. 26. Open in Xcode • $ open ios/l12_firebase.xcworkspace • Copy the GoogleService-Info.plist to root directory
  27. 27. • Click at “Copy Items if needed” • Click “Finish”
  28. 28. Only iOS 8.0 or up • Lastly, due to some dependencies requirements, Firestack supports iOS versions 8.0 and up. Make sure to update the minimum version of your iOS app to 8.0.
  29. 29. Continue in Firebase console • Ignore step 3 and step 4 in Firebase console. • Press continues until the dialog box is close. • We don’t need to install Cocaopod and do pod install since the react-native-firestack’s automatic link have taken care for us already.
  30. 30. Enable Sign-in Method
  31. 31. Enable E-mail Password
  32. 32. Adding Firebase Authentication to Chat App l12_firebase/6.js
  33. 33. l12_firebase/6.js
  34. 34. l12_firebase/6.js • Firebase gives us a reactive method for listening for authentication. That is we can set up a listener to call a method when the user logs in and out. • When user is logout, the login modal will be shown up and reset the name back to the “Anonymous” • When user is login, the name text label at the header of the app is changed.
  35. 35. l12_firebase/6.js • To sign a user in with their email and password, use the signInWithEmail() function. It accepts two parameters, the user's email and password. • After user successfully login, it will hide the login modal, and trigger the listenForAuth() [in the previous slide] to change the name. • If login failed, it will show alert popup with the error message.
  36. 36. l12_firebase/6.js • We can create a user by calling the createUserWithEmail() function. The createUserWithEmail() accepts two parameters, an email and a password. • After an user successfully created, it will hide the login modal, and trigger the listenForAuth() [in the previous 2 slides] to change the name. • If register failed, it will show alert popup with the error message.
  37. 37. GetCurrentUser() • Not used in the Chat App, but it is helpful in other apps. • Although you can get the current user using the getCurrentUser() method, it's better to use this from within the callback function provided by listenForAuth(). • However, if you need to get the current user, call the getCurrentUser() method:
  38. 38. l12_firebase/6.js • To sign the current user out, use the signOut() method. It accepts no parameters • After an user successfully sign out, it will trigger the listenForAuth() [in the previous 3 slides] to show the login modal and change the name back to “Anonymous” • Why? We can’t set it here.. It is because sometime we can kick users out of the system from firebase console or simply timeout expire. • If we set the showing login modal code here, the kicking out case will not trigger the modal show up. • It is better to handle everything in listenForAuth().
  39. 39. l12_firebase/6.js Login UI
  40. 40. l12_firebase/6.js Register UI
  41. 41. • Sign Out UI • And putting them in render() method. l12_firebase/6.js
  42. 42. Login Screen Register Screen l12_firebase/6.js
  43. 43. Register Successfully Register Failed: 
 Using Duplicated E-mail l12_firebase/6.js
  44. 44. Login Successfully Wrong E-mail Wrong Password l12_firebase/6.js
  45. 45. Sign Out Button Clicked.
  46. 46. Manage Users in Firebase Console
  47. 47. Editing E-mail Templates
  48. 48. Q/A