Build Linkedoff using React Native, Redux, and Backendless — Part 3: Backendless Setup
A Simple Linkedin Clone Android Application
Read the Previous Article — Part2: React Native Setup
In this series, we’ll setup our Backend using Backendless. Using Backendless doesn’t make You ignoring the basic of Backend knowledge such as:
- Basic Relational database Schema and Queries
- REST API concept, and
- Others concept such as of Pub/Sub, Push Notification, File Upload, RBAC, JWT, etc
The difference is, we didn’t need to setup, build, deploy, host, and maintain all of that manually. :)
1. Designing Schema
Before creating any app, as a backend developer you need to understand and designing your database schema. The Linkedoff app schema will looks like this:
2. Getting Started with Backendless
Now let’s do the fun part! Make sure you already have a backendless account. If You didn’t, create your backendless account here https://develop.backendless.com/registration.
After you create an account, Login into backendless and create your first App on Backendless! Give your app name “Linkedoff” or whatever your desired.
3. Designing Backendless Schema
We can’t make our Backendless schema 100% equal to our current design schema which is SQL standard design. Here are example about the differences:
- Standard “id” field In SQL, is written as “objectId” on Backendless.
- Foreign key field in SQL, is written as object field on Backendless. For example when you have foreign key named “profileId” (UUID/Integer), it will bacame “profile” (JSON Object) on Backendless.
- All fields will became serialized JSON value on Backendless. For example Boolean on SQL which is written using 0 or 1, in backendless it written as JSON true or false.
3.1. Users Schema
Cool, now lets make our first schema! Go to Data menu -> System tables-Users -> Schema.
On the image above, we could see that we already have a users schema. It already had some fields that we needs in our “users” table design. Cool!!
3.2. Experiences Schema
To really make your own schema, click plus button above App Tables, then named it “experiences”.
After adding new table, you will be prompted like this
Click yes, to design our schema or you can manually go to schema tab like we did before on Users schema.
Add your first field “position” with type STRING, and constrains Not Null (Required). I hope that you already understand basic SQL, so this thing doesn’t bother You. Click create and add another field by clicking “new” button.
Then create another fields as suggested below:
3.3. Educations Schema
Same as experiences schema, first create a table named “educations”. Then add some fields as suggested below:
3.4. Profiles Schema
Profiles is a parent table from “experiences” and “educations”. Anyways we hadn’t create the relation just yet. For now let’s just create table named “profiles”, then add some fields as suggested below:
3.5. Adding Relation — Experiences BelongsTo Profiles
If You are familiar with ORM, Backendless relation have a same concept. Anyways if we use ORM, we know that it will be “Experiences belongsTo Profiles” or “Profiles hasMany Experiences” or “Many Experiences to to One Profile”. Although we don’t use this naming convention on Backendless, but the concept is still the same. To make it, simply open “experiences” table, and add “profile” field to the schema with One To One Relation. What? One on One? Why not Many to One or we might said Many Experiences to One Profile? Although it doesn’t make sense if we are using One on One for this, but this is how Backendless work. Though I think this is the best thing we can do, because anyways it just generate the same result.
3.6. Adding Relation — Educations BelongsTo Profiles
Just do the same thing as 3.5 but for “educations” table. I am lazy, don’t blame me. :p
4. Fill the Data
I don’t think that I should tell you how to do this. Backendless already very user friendly so I think anyone can fill the data. Anyways, for testing purpose please make your data just like what I’ll make.
4.1. Profiles Data
If you noticed, there are some field that had URL constraint. Then how the heck could I fill the url? From internet? Of course not! The backendless already had super nice AWS S3 like feature to upload your own files! Cool eh?
Open “Files” menu, and create a new folder named “images” inside. Click the “images” folder that You had created, then upload an image file.
Copy the link address as shown at the image above. Now Try to fill the data by opening “Data — profiles” menu and click on “new” button.
Now your task is completing another fields. Mine are looks like this.
4.2. Experiences Data
Do the same as filling profiles data, but we have special case here. On fields profile, choose Your created profile before.
Click, add Relation and now experiences and profiles data are linked. Cool!! Anyway, my data are looks like this.
4.3. Educations Data
Do the same as experiences data. :)
Anyway my data are looking like this
5. REST API Console
Wohoo!! Finally we will touch the super FUN Part! I hope that You already have good basic understanding about REST API. If not, googling it now! Or simply purchase my tutorial on https://dumbways.id about REST API. (Sorry but DumbWays are using Bahasa or Indonesian Language) :D
5.1. GET ALL Method
Let’s try to fetch all “profiles” data for now. Open “profiles” table, and click “Rest Console” tab. Now try to run the API using GET button!
Using GET method, we can fetch all the data from profiles from https://api.backendless.com/API_KEY/API_SECRET/data/profiles
"summary": "I am React Native and Django Developer",
"name": "Ega Radiegtya",
Of course you can also fetch all data for experiences and educations too via these endpoints:
Focus on my bold part, that is the only different between each table. We’ll discuss more complex Queries on the next part. For now let’s continue simulating another method.
5.2. POST Method
Still using the same url https://api.backendless.com/API_KEY/API_SECRET/data/profiles. Fill the Request Body textarea with Json Object data, click POST button. You will see the Response Body on the right side panel.
Here is the Request Body, in case that You need it.
"summary": "I am princess Syahrini"
Super cool isn’t it? You can continue on exploring GET One, PUT, and DELETE. Anyways, you can also do some complex query such as Aggregating, sorting, paging(limit & offset), searching, including relations, etc.
We are not gonna try all of those features in this article. In the next article We’ll try to consume the data from Backendless REST API to our React Native Frontend!
Read the Next Article — Part4: React Native + Backendless