Build Linkedoff using React Native, Redux, and Backendless — Part 4: RN + Backendless
A Simple Linkedin Clone Android Application
Read the Previous Article — Part3: Backendless Setup
In this series, we’ll try to fetch Backendless REST API into our React Native app. This article goal is to give You basic understanding of how to integrate Frontend technology such as React Native with Backendless via plain REST API. Note that backendless already had its own SDK, so You don’t need to manually consume REST API. Anyways SDK is not good for every case, while REST API will do the trick almost in every case, whether its Web App, Mobile App, Iot or whatever it was.
1. Designing Header Part of Linkedoff using Nativebase
Make sure you already know how to deal with Nativebase. Nativebase is just a cross platform UI for React Native thats run smoothly on both android and ios. If You are new to Nativebase, You can look at the website and try to get started with it first https://docs.nativebase.io/docs/GetStarted.html. Because it super easy to get started with, I think we don’t need to write it here. Anyway, our boilerplate already include Native Base, so You didn’t need to setup anything.
1.1. Adding Native Base Card into Your Component
Let’s adding a Card into our component at “app/profiles/screens/index.js”. First import “native-base” Container, Content, Card, and other needed UI into your Component. Don’t forget to remove basic View, and Text Component that was imported from ‘react-native’.
Then let’s code our Card component into the render method. Remove all inside the render() method before. So Your “app/profiles/screens/index.js” will looks like this.
Reload Your emulator and we’ll getting this result on the screen.
Now try to replace Hello Native Base text inside “Body” tag into these
Reload our app, and it the card content now should looks like this
To make our code more readable especially at the style part, let’s refractor our code a bit like this.
Hmm maybe a bit long, but worth to read.
1.2. React Native State Object
Now instead using “Hard Coded” text, let’s replace it with “state object”. If you are still not familiar with “state” in react-native, You can read it here https://facebook.github.io/react-native/docs/state.html.
If You reload the app, our app will remain the same. But now our code is a bit readable.
1.3. Adding Profile Picture above our Card
We want to mimic Linkedin that has picture above the card. Just for reminder, the Linkedin design are looking like this.
Let’s make something similar in our Linkedoff app. Here I make the code and commenting it step by step. Please look at the comments I made.
Reload our app, and make sure You have the same result as mine.
1.4. Adding bgPicture
Let’s finish design on the header part of Linkedoff. The last design part is the bgPicture.
Reload your app and it will be looking like this.
2. Fetch REST API from Backendless into our Profile Header Part
Although it doesn’t 100% similar to Linkedin, I think we already did a good job. Now let’s time for the fun part! We’ll try to fetch REST API from Backendless via GET One method. The first the we need to do is installing “axios” from npm package.
$ npm i --save axios
Make sure that axios is successfully listed in your “package.json” file. Now open your “app/profiles/screens/index.js” again, and make use of axios to fetch GET ONE Method from Backendless REST API.
I’ll explain the code:
#1. Import axios from the axios module that we already installed
#2. Create method called getProfile() to fetch data from axios. Look at the url part.
const url = `https://api.backendless.com/221BAB21-F149-D2B2-FF55-B2DD8ECDFE00/31717453-DFFE-7469-FF91-D1EAC0C16700/data/profiles/564DD7D4-4F12-B56A-FFD5-1E4B0E7D9D00`
the url String is from the backendless, you can copy it from the rest console on the backendless. But wait, what about the /UUID part after /profiles/? As I said before, I hope you already understand basic of REST API. That is just a hardcoded objectId from my profile. Of course we are not gonna do hardcoded like this in the next part of this article series.
now look at this part of allMethod()
We are simply calling GET Method via above url. Then we use promise to print the result on debug mode. Note that axios always return “result” as the first parameter, and it is an object that contains “data”.
#3. getProfile() method will not run until we call it from componentDidMount lifecycle method. What componentDidMount did is just simply run getProfile method when application DidMounted.
To look what inside “data”, open your emulator (I am using genymotion) and turn on Debug Mode On.
Your browser will be opened, right click or CMD + OPTION + J (MAC) to open the Chrome “Inspect element”.
Look that we got Object Data returned from Backendless. Why Object? If you remember from the 3rd part of this article series, it return an array? Why now Object? It’s because on the const url part we have the UUID that we only need to fetch. So we got only single data object and not all the array of object from the REST API.
Cool! Now we have the Object data from REST API. Then what should we do next? Instead of console logging our “result.data”, we’ll pass it to our “state”.
Reload your app, and it will be looking like this.
If we look carefully, we can see that we miss the position and education fields. To fix this, open the “Backendless GUI” and add 1:n relation for profiles(1):experiences(n), and profiles(1):educations(n).
After adding the schema, input the data as needed.
Now how to fetch the 1:n relations? Simply change the url like this
const url = `https://api.backendless.com/221BAB21-F149-D2B2-FF55-B2DD8ECDFE00/31717453-DFFE-7469-FF91-D1EAC0C16700/data/profiles/564DD7D4-4F12-B56A-FFD5-1E4B0E7D9D00?loadRelations=experiences%2Ceducations`
We simply load the relations via the loadRelations params, and voila we got data like this when we consoling it out.
Cool! Now we have the relation data that we needed. So we can simply print it out in our screen.
Now when we reload the page, the education and position in this code will be from latestEducation and latestExperience.
3. Using Redux to Fetch Data instead of State
In the Real World App, we need redux to fetch the data instead using plain State. If you are not familiar with Redux, or You don’t get the reason of using Redux, Please take some references first. Anyways just think Redux as a global state for all components, so we don’t need to make state in each component.
Help to make this article better by adding some reference you know in comment sections or message me directly :)
Because the boilerplate we used already had Redux setting up for us. We can just focus on code.
3.1. Redux Actions & Middleware
Actions in redux is just a plain method that return an object type and payload that later needed for reducers. Create a new file called “app/profiles/actions.js”.
look at #4 comment, I said that we return payload as a promise. So we need redux-promise-middleware to get the data synchronously in our reducers later. We need to install it first.
$ npm i --save redux-promise-middleware
What we need to do next is registering the redux-promise-middleware in our store. To do that open “app/redux/store.js” and add some of this line.
at #2 comment, you can see that we also need “redux-logger”. This is needed to debug our redux current, and next state while development. This is optional but very important to do debugging. Warning! Please remove redux-logger on production environment! It will slowing down your app performance. To install it simply.
$ npm i --save redux-logger
3.2. Redux Reducers
Reducers is just a plain function to decide what state should be returned by the type passed by the actions. Here is our reducers.
Look at my #2 comment, if you remember, we pass type “GET_PROFILE” from actions. But why there is no “GET_PROFILE”? Why should using prefix “_PENDING” and “_FULFILLED”? Thats all because we used “redux-promise-middleware” which is automatically turning any action type which the payload is a promise with a prefix. If you are confuse with my statement, please refer to this documentation https://github.com/pburtchaell/redux-promise-middleware.
Anyways when “GET_PROFILE_PENDING”, we set the “isLoading” state to true to aware the Linkedoff app to render Spinner Component. When “GET_PROFILE_FULFILLED”, we set “isLoading” back to false to remove Spinner Component, and instead showing the real data from axios “payload.data”. If there is no type, then just return the default state we set above on “initialState”.
Our reducers will not going to work until we register it on “rootReducers” (note that rootReducers already registered on store). So the next step is registering it on it.
3.3. Connect Component with Redux
Now time to make redux shine in our app! open “app/profiles/screens/index.js” and import some component and library that we need.
Now to get the data, we need to call the actions.
Look at #3 comment, I said that we call the actions that we made with ‘dispatch’. So the question is, how come we have “this.props.dispatch” method? The answer is because we connect the Component with redux, so we can have redux props on it. On #1, we also remove the export default on Profile class to be used to connect to redux later. To make it happen, connect it like this.
You can use redux-logger to know what state that we have, so we can map it correctly.
On the image above, we can look the current or next state that we need to map in our Component. So we can 100% sure what should we map. Now after we connect the Component and redux, we have props called “this.props.profiles” and ofc the props from redux such as “this.props.dispatch()” etc. Because of that, now we can easily show the data using props in our screen.
Reload our app, now our app will looks like this.
Cool!! If you aren’t satisfied with the loading, for example you want to still display some pre-displayed content instead of loading, you can simply edit our styling, component etc. All the logic already placed on redux, so in component we only use simple logic such as map, and if else.
You can find the complete source code here https://github.com/DumbwaysDotId/Linkedoff/tree/2.part4. Please use correct branch. If you found any mistake, you can tell me via issue.
Support us by star the repo, share this article, and clap this article. In the next part, we’ll try to completing our Profile Page. So stay tuned! :)