Instantly Add a Cloud Database To Your Mobile App

This tutorial will show you how to add a database to your mobile app.  Appery.io integrated backend services include a cloud database, push notifications, and server code.

  1. Sign up for Appery.io Starter (free) plan
  2. Create a new app by entering its name and clicking the Create button: new_app
  3. Build the app UI:
    Screen Shot 2013-07-23 at 9.23.57 PM

    • The UI is very simple, there is just the List component (items reduced from 3 to 1 as we will be loading the items from a cloud database)
  4. To add a cloud database to the app, click Backend Services (upper right corner):
    Screen Shot 2013-07-23 at 9.30.12 PM
  5. On the Database page, enter a new database name and click Create button:
    Screen Shot 2013-07-23 at 9.32.28 PM
  6. Open Collections tab
  7. Click New to add a new collection.
  8. Enter Customers for collection name, click Add button.
  9. Once a collection has been created, click +col to add a new column. Enter name for column name (type String).
  10. Click +Row to add sample data. For example:
    Screen Shot 2013-07-23 at 9.43.37 PM
  11. Back inside the builder, select Create New > Database Services
  12. From the drop down list, select the database (created in step #5)
  13. Expand Customers collection
  14. Check List services to generate. The List service will allow us to display all customers on a page.
    Screen Shot 2013-07-24 at 9.06.11 AM
  15. Click Import selected services button. Under Services folder, the REST service to access the collection has been generated:
    Screen Shot 2013-07-24 at 9.08.50 AM
  16. Open MyDatabase_Customer_list_service service, open Test tab. Click Test. You should see the customers from the database.
  17. Open startScreen page, switch to Data view
  18. Select Service > MyDatabase_Customer_list_service > Add. The service has been added to the page.
  19. Open Edit Mapping button
  20. We don’t need to map anything for service’s input. Switch to Response tab. Set the following mapping:
    Screen Shot 2013-07-24 at 9.17.07 AM
  21. Go back to Design view
  22. Open Events tab
  23. Select startScreen (for Component) > Page show (Event) > Invoke service (Action)  > restservice1. Click Add Event.
  24. Click Test button to launch the app in the browser
    Screen Shot 2013-07-24 at 9.20.50 AM

That’s it. You just added a cloud database to your app. As part of Appery.io backend services, you get a cloud database, push notifications, and server code

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