Mobile Frontendless photo sharing app using Figma and Backendless

Toby Oliver
Jun 22 · 8 min read

Backendless (https://backendless.com/) is a great service that allows you to connect your app frontend to their apis, databases and services which can provide you with a ton of functionality (there is so much functionality to learn Backendless have gamified the learning process to make it more interesting https://backendless.com/introducing-backendless-missions-learn-get-rewards/ ).

Bravo Studio (https://bravostudio.app) is great at instantly generating a native mobile application from your design file to connect to backend systems like Backendless. In this tutorial I will show you how to connect Backendless’s photo sharing app example app to Bravo Studio’s Foodgram template in Adobe XD.

A) Create backend in backendless

  1. Signup to Backendless and create an app called photoshare and select the insta clone blueprint before clicking on create.

2. You should now be in your Backendless dashboard. We now need to get the BASE URL of all the apis of your project. The way to do this is to add /api to your subdomain. In this instance the BASE URL becomes https://vividbeginner.backendless.app/api.

3. Although Backendless has now set us up with a test user we need to reset the password. Go to the Data Tab and click on the Users table in System Data, then click on Data Browser and then change the user nickname to be testuser and the password field to be backendless and hit enter to confirm (you might need to scroll across).

4. Finally we need to get an api key to setup the APIs. Click on the Business Logic tab and then API Services and finally click on Login. A window will pop up where you can type the username: testuser and password backendless (that you setup earlier) to login.

Once you have logged in copy the user-token and paste it somewhere as we will need it later for the APIs

You have all you need to setup Bravo.

B) Setup the Design in Bravo

  1. Signup for Bravo — https://projects.bravostudio.app/signup
  2. Open this Figma file and duplicate it: https://www.figma.com/file/Tbb5JoZiFPUWwtR49v1ekH/Foodgram-Backendless-Example
  3. Import your version of the Figma file into Bravo.

C) Setup the APIs in Bravo

We need to add all the api requests that we need from Backendless in Bravo:

1.Click on Data Library in Bravo on the left hand side

2.Click on New Collection

3.Click on ‘Custom API’ and Name it Foodgram with Backendless

4.Click on the + button next to Requests to add a new request for each of the following 6 requests (NB the <Base Request URL> comes from step (A)2 above.

  • Signup
Name: Signup
Type: POST
Request URL: <Base Request URL>/users/register
Headers : None
Parameters: None
Body (JSON):
{
"nickname" : "${login}",
"password" : "${password}"
}
  • Login
Name: Login
Type: POST
Request URL: <Base Request URL>/users/login
Headers : None
Parameters:
Key = login, Value = testuser
Key = password, Value = backendless
Body (JSON):
{
"login" : "${login}",
"password" : "${password}"
}

Once you have inputted the above hit the blue send button for this request to get sample data to allow the received data to be setup for this request.

Make sure the .data.user-token field is ticked and then in the Selected Data tab change the field’s name to user-token. We can reference this name as a variable in other requests to allow the request to pass authentication.

  • Add post
Name: Add post
Type: POST
Request URL: <Base Request URL>/services/Posts/Post
Headers : Key = user-token, Value = ${user-token}
Parameters: None
Body (JSON):
{
"caption" : "${caption}",
"image_url" : "${image_url}"
}
  • Get all posts

For this step we will need the user token form step (A) 4, to enable us to highlight the data we need.

Name: Get all posts
Type: GET
Request URL: <Base Request URL>/data/Posts?sortBy=created%20desc
Headers : Key = user-token, Value = ${user-token}
Parameters: Key = user-token, Value = <User Token from step (A)4>
Body: None

Once you have inputted the above hit the blue send button for this request to get sample data to allow the received data to be setup for this request.

Make sure the following fields are ticked in the Received data pane , .data[], .data[].objectId, .data[].description, .data[].image. Then change the name of the .data[].objectId field to post-id in the selected data pane. (NB this name post-id needs to be consistent, i.e. not post_id throughout the queries as its is used by the app to reference the particular post for comments etc).

Also copy the data for the .data[].objectId that is in the response and paste it somewhere as we will need it in the next step.

  • Add comment
Name: Add comment
Type: POST
Request URL: <Base Request URL>/services/Posts/Comment
Headers : Key = user-token, Value = ${user-token}
Parameters:
Key = user-token, Value = <User Token from step (A)4>
Key = comment, Value = Test Comment
Key = post-id, Value = <data[].objectId from the previous step>
Body (JSON):
{
"text": "${comment}",
"postId": "${post-id}"
}

Once you have inputted the above hit the blue send button for this request to create a test comment to help with the comment setup.

  • Get post comments
Name: Get comments for a post
Type: GET
Request URL: <Base Request URL>/services/Posts/PostComments?postId=${post-id}Headers : Key = user-token, Value = ${user-token}
Parameters:
Key = user-token, Value = <Auth Token from step (A)4>
Key = post-id, Value = <data[].objectId from the previous steps>
Body: None

Once you have inputted the above hit the blue send button for this request to get sample data to allow the received data to be setup for this request.

Make sure the following fields are ticked in the Received data pane, .data.comments[], .data.comments[].objectId, .data.comments[].text.

Now all the APIs are now setup in Bravo and we just have to connect them to the design.

D) Bind the APIs to the design in Bravo

Now that we have the APIs in Bravo the last step is to connect them to the app design. Go into the Foodgram with Backendless app in Bravo so you can see all the screens.

1.Signup

Click on the Signup screen to edit the binding for this screen, choose the Foodgram with Backendlesscollection and then the signup request

  • In the Select Visual Elements list Click on the username element and connect it to login in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Click on the password element and connect it to thepassword in the binding panel on the right hand side
  • Change Response Actions — on success to Go to Page — Login.
  • Change Response Actions — on failure to Show Alert with the text ‘Signup Failed

2.Login

Click on the Login screen to edit the binding for this screen, choose the Foodgram with Backendless collection and then the login request

  • In the Select Visual Elements list Click on the username element and connect it to login in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Click on the password element and connect it to thepassword in the binding panel on the right hand side
  • Change Response Actions — on success to Go to Page — Home Screen.
  • Change Response Actions — on failure to Show Alert with the text ‘Login Failed

3.Home Screen

Click on the Homescreen to edit the binding for this screen, choose the Foodgram with Backendlesscollection and then the Get all posts request

  • In the Select Visual Elements list Click on the Post list element and connect it to Data in the binding panel on the right hand side. This will repeat this container element for all the items in the list, so we can bind the content for each item.
  • Click on **image element and connect it to imagein the content binding.
  • Click on **caption element and connect it to Descriptionin the content binding.

4.New Post screen

Click on the New Post screen to edit the binding for this screen, choose the Foodgram with Backendlesscollection and then the Add Post request

  • In the Select Visual Elements list Click on the **image upload element and connect it to image_url field in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Click on the **caption element and connect it to thecaption in the binding panel on the right hand side
  • Change Response Actions — on success to Go to Page — Home screen.
  • Change Response Actions — on failure to Show Alert with the text ‘Upload Failed

5.Comments screen

Click on the Comments screen to edit the binding for this screen, choose the Foodgram with Backendlesscollection and then the Get comments for a post request

  • In the Select Visual Elements list Click on the Comment list element and connect it to Comments in the binding panel on the right hand side. This will repeat this container element for all the items in the list, so we can bind the content for each item.
  • Click on **caption element and connect it to Comments Textin the content binding.

6. New Comment Screen

Click on the New Comment screen to edit the binding for this screen, choose the Foodgram with Backendlesscollection and then the Add Comment request

  • In the Select Visual Elements list Click on the **comment element and connect it to the comment field in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Change Response Actions — on success to Go to Page — Comments.
  • Change Response Actions — on failure to Show Alert with the text ‘Comment Failed

Testing

You should now be able to test your app in Bravo Vision, signup and then login and add images and comment on them.

As you add content you can check it working by looking at the tables in Backendless.

Have fun, and let us know if you get stuck.

Bravo Team

Geek Culture

Proud to geek out. Follow to join our 1M monthly readers.