Mobile App Development series – 3 – Creating the user interface

Building a mobile app is quite straightforward using Appery.io’s feature rich app development platform.

1. To get started, create an appery.io account at http://appery.io and login using valid credentials.

2. Click on the Create new app link on the left section of your appery.io account page.

3. Enter the new app name e.g. herokumobile app and click Create.

4. Enter the name of the first/launch page of your mobile app and click Create page.

This creates the new appery.io app and points the user to the appery.io app builder to design the start page of the new mobile app.

Creating the user interface

Use the appery.io app builder to create the different user interface screens required for the mobile app. We entered startScreen as the starting page of the mobile app. Now let us use the app builder to design the first page of our mobile app.

1. Use the Properties-Input on the right section to edit the labels and internal names of the user interface controls.

For example: Modify the Caption to My Mobile app.

2. Add input boxes for username and password fields for the registered user and new user sections of the user interface.

3. Add Sign in and Register buttons from the palette to the design area. Like before, use the Properties-Input on the right section to edit the labels and internal names of the buttons as required.

4. The following screenshot shows the completed user interface for the first page of our sample mobile app.

5. Click on the Create New link on the Project Explorer section located in the left. Choose Page.

6. Enter the name of the new page e.g. Products and click "Create Page".

7. The Products page is displayed in the appery.io app builder. Design the page as required using the steps above.

The user interface design of the pages required for our mobile app is now complete. In the follow up blog, we will learn how to setup the database and related services for the mobile app.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s