For our basic mobile app, we need to store application data for two entities –
· Application users
· Product information
In the following steps, we demonstrate how to create a simple database and add the required tables to our application.
1. Click on the Databases tab in the available menu.
2. Click on the Create new database link on the left section and enter the preferred database name e.g. MyFirstMobileAppDB as shown in the screenshot below.
3. Now, you can see that there are two types of collections (Appery.io’s term for database tables) in the left section of the database page. These are Predefined collections (defined by default by appery.io) and Collections (defined by database designer/developer).
The following collections (tables) are predefined by appery.io for use by the mobile app:
o Users – consists of the application user information.
o Files – consists of information about files used in the mobile app. Files can be uploaded using a File Browser option.
o Devices – The Devices collection displays devices with installed apps connected to this database.
You can add custom columns to the Users and Devices data predefined collection.
The custom collections are tables defined by the database designer for use by the mobile app. You can add custom columns to these collections. Appery.io adds the acl, id, created and updated columns automatically even for the custom collections (tables).
Click on Create new collection to create the collection/table to store products data. We will reuse the predefined Users collection to store user information for the mobile app.
4. Enter the new custom collection/table name e.g. catalogitems and click "ADD".
5. Enter the desired column names for the collection to complete the creation of collections required for this simple mobile app.
6. The following screenshots show the two collections to be used for the mobile app – the catalogitems collection (user defined) and the Users collection (defined by appery.io).
Creating services for the mobile app
Let us create some simple backend services for our mobile app now. These services will be used by our mobile app to execute certain actions when an event takes place e.g. click of a signin button.
To create the services, we will use the Appery.io app builder.
1. In the app builder, click on Create New | Database services option in the Project Explorer section on left.
2. Select the database for importing services, followed by the database services and collection services to import as shown in the screenshot below and click Import selected services.
3. The selected services are created with just the click of a button and displayed in the Services link of the Project Explorer as shown in the screenshot below.
You can optionally verify the request/response parameters of each of these services to make sure that they are as expected. You can achieve this by clicking on each service in the "Services" section of the "Project Explorer" and selecting the "request" and "response" tab on the right.
4. Now, let us add the data sources for each page of the mobile app to identify the services that will be called from each page of the mobile app. To begin with, click on the first page "startScreen" in the "Pages" section on the left in the "Project Explorer".
5. Click on the Data tab in the design window. Add the two data sources required for the startScreen page as shown in the screenshot below.
6. For each of the added services above, edit the mapping for request and response by clicking the Edit mapping link of the login service in the Data tab as shown in the screenshot below:
7. Create the appropriate mapping in the "request" and "response" tabs (of the login service) to reflect your input/output parameters for the requests made from the app and the responses received by the app from the server. The following screenshots show an example of mapping configuration for the login service. Repeat the same for the signup service as well.
8. In the Data | EVENTS tab, configure the actions associated with the successful and failed execution of each of the services created above. E.g. for the user login service, create two actions, one for the success case and one for the failure case as shown in the screenshot below:
Note how successful execution of the service navigates the user to the next page in the app flow.
9. Switch to the Design tab of the app builder for the startScreen page. We will now link the events like clicking of a button to the services created to handle those events. Again, click on the EVENTS tab.
10. Click on the "Add Event" link to create events for each of the buttons shown in the user interface of this page. The following screenshots show the events created for the buttons on this page.
The steps shown above for the startScreen page can be repeated for the other pages of the mobile app. That is left as an exercise to the user. This completes the illustration of how to create and link backend services to the events occurrng in your mobile app. We will test the app in the next blog.