react native firebase

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/category/programming/react-native/

• Score Announcementhttp://bit.ly/its484quizscore

• Facebook Grouphttps://web.facebook.com/groups/ReactNativeThai/

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…

Advanced React Native Component Mounting Lifecycle

constructor(props)

componentWillMount()

render() -> React Element

componentDidMount()

React Native ComponentMounting 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.

React Native ComponentMounting 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).

React Native ComponentMounting 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.

Updating Lifecycle

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)

render() -> React Element

componentDidUpdate(prevProp, prevState)

componentWillUpdate(nextProps, nextState)

React Native ComponentUpdating 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.

React Native ComponentUpdating 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.

React Native ComponentUpdating 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).

React Native ComponentUpdating 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.

Mounting (Opening the App)l12_firebase/bmi.js

Changing Height to 5l12_firebase/bmi.js

Changing Weight to 5l12_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.

• 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.

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)

Firebase span over 2 weeks• Lecture 12

• Real-Time Database Part I

• Lecture 13

• Real-Time Database Part II

• Authentication

• Cloud Messaging / Notification

Getting Start With Firebase1. 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.

Create a Project @ Firebase• Enter https://console.firebase.google.com/

• Login with your Google account

• Press “Create New Project” button

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 code.

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

1.js

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.

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.

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’ into Firebase database

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 authenticated, so the permission error is occurred.

• For development, We can change this behavior by re-configure the Database permission.

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 successfully.

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

Chat Room App• Simple one chat room.

• Showing number of online users.

• Showing conversations publicly.

• Send the chat message.

• Setting the username

2.js

Making Chat Room App UI2.js

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”

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

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”

Listening for State changes2.js

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.

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.

react-native-background-timer

• Installation

• $|> npm install react-native-background-timer -- save

• $|> react-native link

• Usage

Handling # of Online User2.js

2.js

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.

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 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.

Realtime DB Transaction3.js

Realtime DB Transaction3.js

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!

Q/A