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.
Let’s get started (or technically continue, since we started in the previous post).
The Login Page
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
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.
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:
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:
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.
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!