Message:

Subscribe rss
Blog categories
All | Backendless features
Developing a mobile application without any coding using Backendless and Dropsource (Part2)
October 29, 2018 by Vladimir Upirov

This is Part 2 of a series of articles where you and I build a mobile app without any coding. The app we are working on is a ToDo app.  In the previous post you did the following:

  • Set up your Backendless (backend) account.
  • Set up your Dropsource (frontend) account.
  • Implemented (without any coding of course) application lifecycle.
  • Implement the landing page for the mobile app.

In this part of the series, you will implement the following:

  • The Login Page of the app.
  • A page which lists all the to do tasks (the Listing page).
  • Implement routing between the Login and the Listing pages.

By the end of this part of the development process, you will be able to run the application as shown in the animation below:
first app run - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

Let’s get started (or technically continue, since we started in the previous post).

The Login Page

Create a simple page for user SignUp/SignIn and style the page as you wish:
login page - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

Add an action for hiding the keyboard when the user presses “enter” in the inputs (the Returned event). Make sure to add the action for both inputs on the form:
backendless dropsource adding action for returned - Developing a mobile application without any coding using Backendless and Dropsource (Part2)
hide keyboard - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

Leave the Login page without changing any logic for now, you will come back to the page once other pages are created.

The List Page

Create a simple page for displaying the TODO items. You will also need a Navigation Bar – make sure to select a checkbox when creating the page:
page with navbar - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

list page with navbar - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

App Routing

Now that you have both the Login and the List pages, you can implement a simple routing for switching between them based on whether there is an existing userToken in the Device Variables. Go to Landing page and open the events section.
backendless dropsource landing ifelse usertoken new - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

The next step is to configure which page should be shown based on the condition. If the user token is empty (the True case), then the app should show the Login Page, otherwise (if the user token is not empty and that means a user is logged in), the List page should be displayed:goto login page - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

goto list page - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

First Run

To make sure you are progressing in the right direction and there are no errors, you can run the app and see what it looks like. For that click the TEST button an the top of the browser window, give it some time while Dropsource builds the app and runs it in the Web Simulator:
first run in web simulator - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

As result you will get a simple app, below you can see what it looks like at this point in my build. In case if you are not able to run the application, make sure to review previous steps perhaps you missed something.
first app run - Developing a mobile application without any coding using Backendless and Dropsource (Part2)

This concludes Part 2 of this series. In the next article you will begin integrating the app with the server-side and until then, happy coding!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+