Message:

Subscribe rss
Blog categories
All | Backendless features
How to Create a No Code Mobile TODO Application with Backendless and Dropsource
June 27, 2019 by Vladimir Upirov

Create a ToDo App with Backendless and Dropsource Feature

When building a mobile application, as a rule you will need to implement two parts: a backend and a frontend. Of course, we can confine ourselves to only the client-side (frontend), but when we have some data that should be stored on the server, we need to have the capability to capture it.

Today, we will create a simple native mobile application with both parts, and we will be doing so with no coding whatsoever. Backendless will handle our backend; it gives us everything that we need from the server-side. For development of the client side, we will use a service called Dropsource. In case if you aren’t familiar with this service, you can read more about it on their official site. In the end, we will have a simple native mobile application with a Sign Up/Sign In screen, ToDo List screen, and Add New ToDo Item screen. The app we will be building today will be native for iOS.

Create a ToDo App with Backendless and Dropsource

Let’s do it.

Setup Backendless

Make sure you have a Backendless developer account. If you don’t have one yet, you can register for free at develop.backendless.com.

Create new account with Backendless

Create a new Backendless Application. I called it “DropsourceTODO”, but you can choose any name what you want.

Setup Dropsource

Register a new account on Dropsource if you don’t have one yet. Go to their Dev Console and create a new project, as on the images below.

Create new project in Dropsource

Create iOS project in Dropsource

Create blank project in Dropsource

Name created project Backendless TODO in Dropsource

Project list in Dropsource

Click the “Open Editor” button to start creating our app.

Main App Lifecycle

As you know, to perform authenticated requests you need to pass some token in the request headers. In the case of Backendless, the header is called ‘user-token’. So on the user login request, the server returns a user object as well as a “user-token” value. We will use that value for all the requests.

First, let’s create a new Device Variable for storing the user-token value locally. The data type should be a Swift string.

Create Device Variable in Dropsource

Let’s also save the value in Keychain storage. Add a new Lifecycle in “Application Launched” and add some logic for retrieving the value. You can see how it’s done on the following screenshots:

Add new Application Launched Lifecycle

Retrieve String from Keychain

Once that’s done, we need to configure the conditions when the value is retrieved. There are two cases: the first is what we should do when the value is existed in Keychain, and the second is if it isn’t.

So, if the user-token exists in Keychain storage, assign it to the userToken Device Variable.

Assign Keychain value to userToken Device Variable

Set userToken to Keychain Value

In the event that the userToken does not exist in Keychain storage, just assign an empty string value to the userToken Device Variable.

Assign empty string value if no Keychain value

Landing Page

Now let’s create the first page of the app and call it “Landing”. The page will be an entry point to our application where we will choose what page we need to show according to the existing userToken value in Device Variables. If the user is not logged in yet, show the Login Page. Otherwise, we will show the ToDo List Page.

Let’s create the page and modify some styles (if you want) as described on the following screenshots.

Create Landing Page

Name New Page "Landing"

Modify Landing Page View Controller

Add Image to Landing Page

Ok, now we’re going to leave the page, but we will come back soon.

Login Page

Next let’s create a simple page for user SignUp/SignIn and style the page as you wish.

Create and Style ToDo List Login Page

Add some actions for hiding the keyboard when an input is returned. Add the action for both inputs.

Hide Keyboard when Input Received

We’ll leave the page without any logic for now. We will come back to the page once we’ve created other pages.

List Page

Create a simple page for displaying our feature ToDo items. On the page we also need a Navigation Bar. To create one, just select the checkbox when you create a new page.

Create ToDo Page with Navigation Bar

Created ToDo Page

App Routing

Now that we have these two screens, we can implement a simple routing for switching between the Login Page and the List Page according to the existing userToken in our Device Variables.

Go to the Landing page and open the events section.

Events Section of Landing Page

Ok, now add logic for showing the Login Page when the condition is TRUE, and showing the List Page when it’s FALSE.

Landing Page Logic if True

Landing Page Logic if False

First Run

Ok, let’s check if we are on the right track and we’ve done everything right. Let’s run our app and see how it looks. To do so, click the TEST button on the top of the browser window. Wait a little then run the application in the Web Simulator.

Test App in Dropsource Web Simulator

As a result, you will get a simple app. If have the same result as me, keep going. In the event that you are not able to run the application, please go back to the previous steps and check to see if you missed something.

Test App in Dropsource Web Simulator

Backendless API Docs

Now we can integrate Backendless API. Before we do that, we have to create a new table in the Backendless Dev Console. I called the table “TodoItems” and also specified two columns for the table, “title:STRING” and “completed:BOOLEAN”.

Let’s generate API Docs for that table. Go to the REST Console section and click the “Generate API Docs” button.

Generate API Docs in Backendless REST Console

Once the popup opens, click the “Generate” button. It will generate API Docs for the table in Swagger 2.0 format and save it in our Backendless App.

Generate Swagger 2.0 Docs in Backendless

Now copy the public URL of the generated file and go to our Dropsource App.

Add Backendless API URL in Dropsource

The generated API Docs include all the API for the table “TodoItems” and the User API as well, so we don’t need any additional API docs from Backendless.

User SignUp/SignIn

Looks like we’ve done everything what we need for our API requests to go to the server, so let’s set those up.

The first thing we should do is link our “userToken” Device Variable with the API that we added in the previous step.

Link userToken variable to API Key

Now add an API request to the Login page.

Add API request to Login Page

Then link our Email/Password inputs to the request. To do so, just drag and drop the request body params into the inputs.

Link Email and Password Inputs to API Request

Ok, now add an event to the SIGN UP button. When tapped, we need to run an API request to register a new user.

Add Event to SIGN UP Button

You may ask “what if there’s an error? How do we handle a response error?” Alright, let’s cover that now.

First, we need to add a Label Component for displaying the error and some dummy error text for testing. Once you place the component, remove your dummy error text. Next add a reference between the component and the API Request.

Add Label Component to Display API Error

Add Label Component to Display API Error for all Codes

Ok, let’s check this out. We will try to register a new user with an invalid email address.

Test Error by Login with Wrong Email

Right after user registration, we will do another request for user login. For that, add API to the user login and link inputs with the request parameters.

Test Error by Register with Improper Email

Once that’s done, let’s add the Login API Request right after the Registration Request only if the register request returns an HTTP Status Code 200. That way, when a user registers, they will also automatically login to the app.

Run Login Request after Register Request

Also add error handlers for the Login API Request just as we did for the Register API Request.

Add Login Request Error Handlers

Now let’s add an action when tapping on the SIGN IN button. When it’s tapped, we should run the Login API Request.

Add API Request Action to SIGN IN Button

Now there’s only one thing remaining with this screen. When the Login API Request return status code 200, we need to store the ‘user-token’ into the Device Variable, keep the value in Keychain, and show the List page.

First, let’s set user-token from response into Device Variable.

Set userToken into Device Variable

Next, set the user-token into Keychain storage.

Set user-token into Keychain Storage

Then, show the List page.

Show List Page Action

Let’s run the app again to see if everything is working.

Test App with SignIn and SignUp

User Logout

If we have a user login, we need to have a user logout as well, so let’s add that.

First, we need to reset the userToken Device Variable.

Reset userToken Device Variable

Next, delete the userToken value from the Keychain.

Delete userToken Value from Keychain

Third, we need to show the Login Page.

Add Show Login Page Action

Finally, run a Logout API Request and move up the action to the top.

Run Logout API Request

List Page

The main goal of our app is having a ToDo list with the ability to create new items and toggle their completed state. So go to the List Page and add a Dynamic Table Component and switch the Table View to “Dynamic”.

Add Dynamic Table to List Page

Then add a Table Cell View, Label, and Switch Components into the Table View.

Add Table Cell View, Label, and Switch Components

Alright, let’s add the API Request for retrieving TodoItems objects.

Add API Request to Retrieve TodoItems Objects

Now we assign the response to our Table View.

Assign TodoItems Response to Table View

Time to decorate our Table Item View. Let’s add a Label Component and Toggler for switching completed state, and assign the title and completed properties from the response body.

Add Response Properties to Table View

Add an API Request for loading the TODO items when the List Page is loaded.

Load TODO Items when ToDo Page Loads

Now add an API Request for updating a TODO item.

Run API Request when ToDo Item is Updated

Link the objectId into the request path parameters.

Link objectID into Request Path Params

Now add an action when we toggle the TODO item toggler.

Run API Request when ToDo Item Toggler is Toggled

The add the new “completed” value into request.

Add Completed Value to API Request

Ok, let’s take a look what we have now. Click the TEST button at the top and while the app is building, go to Backendless Console -> Data Browser and create a few records.

Create ToDo Items to Load from Backendless Console

Once the app build is done, run the Web Simulator and check it out.

Test ToDo App in Dropsource Web Simulator

Add New Item Page

Now let’s create a new page for adding a new TODO item.

Create a Page for Adding New ToDo Items

Make sure that you have both the “editable” and “selectable” checkboxes checked for the Component.

Make Component Editable and Selectable

Add an action for switching to the page.

Add Action for Switching to Add Item Page

Also, set up a “Back” button in Add Item Page.

Add Back Button to Add Item Page

Next, add the API for creating a new TODO item.

Add API for Creating a New ToDo Item

The link the request parameters.

Link Request Params for Creating New Item

Add the API Request action to the SAVE button.

Add API Request Action to SAVE Button

Add API Request Action to SAVE Button

Now add an action to go back to the previous List Page when the API Request for creation of a new item is complete.

Add Action to Return to List

Delete TODO Item

Let’s add an ability to delete TODO items with the swipe effect. First, we need to add an API Request for deleting the TodoItems object.

Add API Request for Deleting TodoItems Object

Also, link the objectId to path params.

Link objectID to Path Params

Once you’ve completed those steps, select the Table Cell Component and add an “on swipe” action.

Add On Swipe Action to Table Cell

Now we need to add three actions. First, run the API Request for deleting TODO items.

Run API Request for Deleting TODO Items

Second, getting current Table Cell index.

Get Current Table Cell Index

Third, remove the Table Cell from the table.

Remove Table Cell from Table

That’s all! If you’ve hung in there this long, you can now build your app and try to add/remove TODO items.

Summary

As you can see, we created a real native mobile application with User Auth and Data Service without any coding. These two services  (Backendless and Dropsource) can help you do far more than we did today; this was just a little part of their possibilities. This was just a simple application to show you how to use them together.

Thanks for reading the article and I look forward to seeing what you are able to build with Backendless and Dropsource!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+