.png)
In this tutorial, I will show you how to connect their photo sharing app example app to our Foodgram template in Adobe XD.
2. You should now be in your Backendless dashboard. Next up, we 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 set up 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 now have all you need to setup 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.
Name: Signup
Type: POST
Request URL: <Base Request URL>/users/register
Headers : None
Parameters: None
Body (JSON):
{
"nickname" : "${login}",
"password" : "${password}"
}
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 set up 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.
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}"
}
For this step we will need the user token from 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.
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.
Name: Get comments for a post
Type: GETRequest 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.
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
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
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
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
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
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
You should now be able to test your app in Bravo Vision, signup, and then log in and add images and comment on them.
As you add content, you can check if it's working by looking at the tables in Backendless.
Have fun, and let us know if you get stuck.
The Bravo Team
.svg){kind=logo}
