Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Kobkrit Viriyayudhakorn, Ph.D.
kobkrit@gmail.com
http://www.kobkrit.com
Making Chat Room App
Important Links
• Source Codes 

https://github.com/kobkrit/learn-react-native
• Course Materials

http://www.kobkrit.com/...
React Native’s Component
Lifecycle
constructor(props)
render() -> React Element
That we have known so far…
It is not compl...
Advanced React Native Component

Mounting Lifecycle
constructor(props)
componentWillMount()
render() -> React Element
comp...
React Native Component

Mounting Lifecycle
• constructor(object props)
• The component class is instantiated.
• The parame...
React Native Component

Mounting Lifecycle
• componentWillMount()
• This method is invoked only once, before rendering
occ...
React Native Component

Mounting Lifecycle
• componentDidMount()
• This method is invoked only once, after rendering
occur...


Updating Lifecycle
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps,
nextState)
render() -> React El...
React Native Component

Updating Lifecycle
• componentWillReceiveProps(object nextProps)
• The parent of this component ha...
React Native Component

Updating Lifecycle
• shouldComponentUpdate(object nextProps, object
nextState) -> boolean
• Based ...
React Native Component

Updating Lifecycle
• componentWillUpdate(object nextProps, object
nextState)
• This method is invo...
React Native Component

Updating Lifecycle
• componentDidUpdate(object prevProps, object
prevState)
• This method is invok...
Mounting (Opening the App)
l12_firebase/bmi.js
Changing Height to 5
l12_firebase/bmi.js
Changing Weight to 5
l12_firebase/bmi.js
Why???
Because…
l12_firebase/bmi.js
• Firebase is a mobile platform that helps you quickly
develop high-quality apps, grow your user base,
and earn more money...
Key Features
• Authentication (User Sign-In, User Registration, Login
by Google, Login by Facebook)
• Realtime Database (S...
Firebase span over 2 weeks
• Lecture 12
• Real-Time Database Part I
• Lecture 13
• Real-Time Database Part II
• Authentica...
Getting Start With Firebase
1. Create Firebase Project in the Firebase console.

https://console.firebase.google.com/ (We n...
Create a Project @ Firebase
• Enter https://console.firebase.google.com/
• Login with your Google account
• Press “Create N...
1. Adding Project Name (Any name is fine)
2. Select Country to Thailand
3. Press Create Project button
• Click at “Add Firebase to your web app” 

(The pink one)
• Press Copy button to copy the apiKey, authDomain,
databaseURL, storageBucket, and messagingSenderId
and paste into the c...
Create New Project and
Install Firebase
• We will install Firebase version 3.6.0
• Open Terminal and change to a working d...
1.js
Realtime Database
• Store and sync data with our NoSQL cloud
database. Data is synced across all clients in
realtime, and ...
Key Differences with Realm
• Realm allows you implement your own database
server. Firebase can’t. You need to use Google
C...
Realtime Database Structure
• All Firebase Realtime Database data is stored as
JSON objects, e.g.,
Basic Writing Operation
• Get a database reference
• Writing something
Save the {text: ‘Hello Text!’} as key ‘notes/1’ 

i...
1.js
1.js
What happen?
• As the default, user who can write the realtime
database must be authenticated.
• Since our user is not yet...
Realtime Database
Permission Rules
1
2
https://console.firebase.google.com/
Sample Realtime DB Rules
• Default (Require Authentication)









• Public / Development (Open to everyone)
Sample Realtime DB Rules
• Private User Database (Which means only owners
can access their information in database)






...
Sample Realtime DB Rules
• Private (No one can access the database, except
admin can access via Firebase console)
Change Realtime DB
permission to Public
• Change the rule to Public permission
• Press “Publish” button
Reload the App again
• At Simulator, Cmd + R or
R,R for reload
• Now there is no warning
sign.
• Realtime database save
su...
Viewing Saved database
• We can view the saved information in Firebase’s
Realtime database at Firebase console.
• https://...
Chat Room App
• Simple one chat room.
• Showing number of online users.
• Showing conversations publicly.
• Send the chat ...
Making Chat Room App UI
2.js
User online / offline
• Conditions
• Online, when the app is active on the screen.
• Offline, when the app is inactive or in...
AppState
• Can tell us whether the app is in foreground (active) on
the screen, or in background (inactive).
• active - Th...
Obtaining State
• Accessing AppState.currentState (it was kept up-
to-date by React Native)
• E.g., If app in the foregrou...
Listening for State changes
2.js
Key Logics for Online User
Counting
• Enter the app
• Read the current onlineUser from Firebase
• Add by 1
• Push it back ...
Want do some operation in
background?
• When user leave the app, the app become into the
background state.
• All JavaScrip...
react-native-background-
timer
• Installation
• $|> npm install react-native-background-timer -- save
• $|> react-native l...
Handling # of Online User
2.js
2.js
On vs Once
• firebaseRef.on(‘value’, callback)
• Listening for data change forever.
• When the data has changed, the call b...
Opening the App
Leaving the App
Enter the App Again..
Modifying DB value in 

Firebase console
Realtime DB Transaction
• Problem occurs!
• When two users open the app at the same time,
when will be happen?
• Both user...
Realtime DB Transaction
3.js
Realtime DB Transaction
3.js
Realtime DB Transaction
• All transaction requests will be queued at the Firebase
server and will be processed one-by-one....
Q/A
React Native Firebase
React Native Firebase
Nächste SlideShare
Wird geladen in …5
×

React Native Firebase

React Native Firebase

React Native Firebase

  1. 1. Kobkrit Viriyayudhakorn, Ph.D. kobkrit@gmail.com http://www.kobkrit.com Making 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
 https://web.facebook.com/groups/ReactNativeThai/

  3. 3. React Native’s Component Lifecycle constructor(props) render() -> React Element That we have known so far… It is not completed. Here is the completed one…
  4. 4. Advanced React Native Component
 Mounting Lifecycle constructor(props) componentWillMount() render() -> React Element componentDidMount()
  5. 5. React Native Component
 Mounting Lifecycle • constructor(object props) • The component class is instantiated. • The parameters to the constructor are the element's initial props, as specified by the parent element. • You can optionally specify an initial state for the element by assigning an object to this.state. • At this point, no native UI has been rendered yet for this element.
  6. 6. React Native Component
 Mounting Lifecycle • componentWillMount() • This method is invoked only once, before rendering occurs for the first time. • At this point, there is still no native UI rendered for this element. • render() -> React Element • The render method must return a React Element to render (or null, to render nothing).
  7. 7. React Native Component
 Mounting Lifecycle • componentDidMount() • This method is invoked only once, after rendering occurs for the first time. • At this point, the native UI for this element has finished rendering, and may be accessed through this.refs for direct manipulation. • If you need to make async API calls or execute delayed code with setTimeout, that should generally be done in this method.
  8. 8. 
 Updating Lifecycle componentWillReceiveProps(nextProps) shouldComponentUpdate(nextProps, nextState) render() -> React Element componentDidUpdate(prevProp, prevState) componentWillUpdate(nextProps, nextState)
  9. 9. React Native Component
 Updating Lifecycle • componentWillReceiveProps(object nextProps) • The parent of this component has passed a new set of props. • This component will re-render. • You may optionally call this.setState() to update this component's internal state before the render method is called.
  10. 10. React Native Component
 Updating Lifecycle • shouldComponentUpdate(object nextProps, object nextState) -> boolean • Based on the next set of props and state, a component may decide to re-render or not to re- render. • The base class's implementation of this method always returns true (the component should re-render). • For optimization, override this method and check if either props or state have been modified, e.g. run an equality test of each key/value in these objects. • Returning false will prevent the render method from being called.
  11. 11. React Native Component
 Updating Lifecycle • componentWillUpdate(object nextProps, object nextState) • This method is invoked, after the decision has been made to re-render. • You may not call this.setState() here, since an update is already in progress. • render() -> React Element • This method is called, assuming shouldComponentUpdate returned true. • The render method must return a React Element to render (or null, to render nothing).
  12. 12. React Native Component
 Updating Lifecycle • componentDidUpdate(object prevProps, object prevState) • This method is invoked after re-rendering occurs. At this point, the native UI for this component has been updated to reflect the React Element returned from the render() method.
  13. 13. Mounting (Opening the App) l12_firebase/bmi.js
  14. 14. Changing Height to 5 l12_firebase/bmi.js
  15. 15. Changing Weight to 5 l12_firebase/bmi.js
  16. 16. Why??? Because… l12_firebase/bmi.js
  17. 17. • Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user base, and earn more money. • The tools and infrastructure you need to build better apps and grow successful businesses • Firebase is made up of complementary features that you can mix-and-match to fit your needs. • It was acquired by Google since 2014.
  18. 18. Key Features • Authentication (User Sign-In, User Registration, Login by Google, Login by Facebook) • Realtime Database (Store and sync app data in realtime) • Cloud Messaging (Send Notification to User’s Mobile) • Crash Reporting (Sending crash report to us) • Analytics (Knowing how much people using our app right now)
  19. 19. Firebase span over 2 weeks • Lecture 12 • Real-Time Database Part I • Lecture 13 • Real-Time Database Part II • Authentication • Cloud Messaging / Notification
  20. 20. Getting Start With Firebase 1. Create Firebase Project in the Firebase console.
 https://console.firebase.google.com/ (We need a Google account for this). 2. Retrieve apiKey, authDomain, databaseURL, and storageBucket from Firebase console. 3. Create a new react-native project. 4. Install Firebase from npm. 5. Add it into a react-native project.
  21. 21. Create a Project @ Firebase • Enter https://console.firebase.google.com/ • Login with your Google account • Press “Create New Project” button

  22. 22. 1. Adding Project Name (Any name is fine) 2. Select Country to Thailand 3. Press Create Project button
  23. 23. • Click at “Add Firebase to your web app” 
 (The pink one)
  24. 24. • Press Copy button to copy the apiKey, authDomain, databaseURL, storageBucket, and messagingSenderId and paste into the code.
  25. 25. Create New Project and Install Firebase • We will install Firebase version 3.6.0 • Open Terminal and change to a working directory • $|> react-native init l12_firebase • $|> cd l12_firebase • $|> npm install firebase --save • $|> atom index.ios.js
  26. 26. 1.js
  27. 27. Realtime Database • Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.
  28. 28. Key Differences with Realm • Realm allows you implement your own database server. Firebase can’t. You need to use Google Cloud server (which is not free if it is a high traffic). • Realms DB is the reactive programming concept (Lazy loading). Firebase’s Realtime DB isn’t. • Realms DB needs to specify database schema, while Firebase isn’t. Firebase will save what ever it got.
  29. 29. Realtime Database Structure • All Firebase Realtime Database data is stored as JSON objects, e.g.,
  30. 30. Basic Writing Operation • Get a database reference • Writing something Save the {text: ‘Hello Text!’} as key ‘notes/1’ 
 into Firebase database
  31. 31. 1.js
  32. 32. 1.js
  33. 33. What happen? • As the default, user who can write the realtime database must be authenticated. • Since our user is not yet authenticated, so the permission error is occurred. • For development, We can change this behavior by re-configure the Database permission.
  34. 34. Realtime Database Permission Rules 1 2 https://console.firebase.google.com/
  35. 35. Sample Realtime DB Rules • Default (Require Authentication)
 
 
 
 
 • Public / Development (Open to everyone)
  36. 36. Sample Realtime DB Rules • Private User Database (Which means only owners can access their information in database)
 
 
 
 

  37. 37. Sample Realtime DB Rules • Private (No one can access the database, except admin can access via Firebase console)
  38. 38. Change Realtime DB permission to Public • Change the rule to Public permission • Press “Publish” button
  39. 39. Reload the App again • At Simulator, Cmd + R or R,R for reload • Now there is no warning sign. • Realtime database save successfully.
  40. 40. Viewing Saved database • We can view the saved information in Firebase’s Realtime database at Firebase console. • https://console.firebase.google.com/project/{your- project-name}/database/data
  41. 41. Chat Room App • Simple one chat room. • Showing number of online users. • Showing conversations publicly. • Send the chat message. • Setting the username 2.js
  42. 42. Making Chat Room App UI 2.js
  43. 43. User online / offline • Conditions • Online, when the app is active on the screen. • Offline, when the app is inactive or in background on the screen. • We need helps from a React Native’s library called “AppState”
  44. 44. AppState • Can tell us whether the app is in foreground (active) on the screen, or in background (inactive). • active - The app is running in the foreground • background - The app is running in the background. The user is either in another app or on the home screen • inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call
  45. 45. Obtaining State • Accessing AppState.currentState (it was kept up- to-date by React Native) • E.g., If app in the foreground (active) state. • AppState.currentState == “active” • If app in the background state. • AppState.currentState == “background”
  46. 46. Listening for State changes 2.js
  47. 47. Key Logics for Online User Counting • Enter the app • Read the current onlineUser from Firebase • Add by 1 • Push it back to the Firebase. • Leave the app. • Read the current onlineUser from Firebase • Remove by 1 • Push it back to the Firebase.
  48. 48. Want do some operation in background? • When user leave the app, the app become into the background state. • All JavaScript code is halted and unloaded from the memory. • All timers (setTimeout) are unable to execute, because their don’t found the codes to run in the memory. • We need an external library for running operation in background.
  49. 49. react-native-background- timer • Installation • $|> npm install react-native-background-timer -- save • $|> react-native link • Usage
  50. 50. Handling # of Online User 2.js
  51. 51. 2.js
  52. 52. On vs Once • firebaseRef.on(‘value’, callback) • Listening for data change forever. • When the data has changed, the call back is called. • firebaseRef.once(‘value’, callback) • Listening for data change only one time. Once it is changed, it called only one time and become inactive.
  53. 53. Opening the App
  54. 54. Leaving the App
  55. 55. Enter the App Again..
  56. 56. Modifying DB value in 
 Firebase console
  57. 57. Realtime DB Transaction • Problem occurs! • When two users open the app at the same time, when will be happen? • Both users read the amount of user as the same value, both users update the database by increasing by 1. Instead of adding by 2. • Number of online user and real online user is mismatched.
  58. 58. Realtime DB Transaction 3.js
  59. 59. Realtime DB Transaction 3.js
  60. 60. Realtime DB Transaction • All transaction requests will be queued at the Firebase server and will be processed one-by-one. • Transaction guarantees that no other operations can write into database during the reading and writing operations in a transaction block. • This behavior, we called it atomic write operations. • Problems of mismatch number of online users when two or more users enter the app at the same time, solved!
  61. 61. Q/A

×