New Tutorials on Building Mobile Apps with Appery.io Backend Services
Try our new tutorials:
Appery.io Updates its New HTML5 App Builder with Windows 8 Support, plus jQuery Mobile 1.2, PhoneGap 2.2, and Push Notifications
Windows 8 Support
Appery.io new HTML5 app builder has been the default builder for the past couple of weeks and we continue to update it with new features. One such feature is new Windows 8 support. In addition to jQuery Mobile/PhoneGap apps, you can now build Windows 8 apps with native support such as Snap View, Search Charm, Share Charm, and Live Tile.
To create a new Windows 8 app, click the “More create options” link from the Apps page and then select Windows 8 App as the app type. Try our Windows 8 app tutorial.
jQuery Mobile 1.2
We also upgraded to a much better jQuery Mobile version 1.2.
PhoneGap 2.2
We also upgraded PhoneGap to version 2.2. This means Appery.io cloud build has also been upgraded to PhoneGap 1.2.
If you use Appery.io Mobile App Tester for Android – go and grab an update so it also uses the latest PhoneGap version.
Push Notifications
A long requested feature – Push Notifications feature has been added to Appery.io Backend Services.
Want to try it? Try our new Push tutorial.
New Tutorial: Building a ToDo App with Appery.io Backend Services
Build this app and learn how the app builder is fully integrated with backend services.
Building a Mobile Search App with Appery.io Database, Part 2
Last week we put posted Building a Mobile Search App with Appery.io Database tutorial that shows you how to search a database for a particular search term. The way the search worked, is that the entire word has to be matched. For example, you could enter ‘Apple’ but not ‘Ap’ to search. In this post we are going to show you how to use a regular expression to get all objects that start with a particular letter. As for our data, are going to use US States.
Building the UI
To start, the UI that we need looks like this:
- For input we use a search component
- Below the input we have a grid, with one column and a label inside.
That’s all we need for the UI. Let’s now create the database.
Creating a database
- Create a new database by going to https://appery.io.
- Go to Collections tab and click Import button.
- Upload States CSV file to the database. Once the collection is created, it should look like this:
That’s it for the database. Let’s now add a REST service to search this collection.
Adding a REST service
- In Appery.io app builder, select Project > Create New > Database Services
- Select your database
- Expand States collection and check Query service.
- Click import Selected services button. A query search for States collection will be created.
- Let’s test the service. As we want to make the search a little bit more flexible, we are going to use a regular expression. For where param, enter the following:
{"States":{"$regex":"^C", "$options":"i"}}The above will return all states that start with letter C or c. “$options”:”i” is what specifies the query to ignore the case.
We are done with the service. Let’s move on to mapping.
Mapping the service to the page
The input mapping looks like this:
This is JavaScript mapping:
return '{"States":{"$regex":"^'+value+'", "$options":"i"}}';
This is output mapping:
Invoking the service
The last thing we need to do is to invoke the service. Select the input search field, then Events > Add Event > Search. Add Action > Invoke Service, select the service instance.
Testing the app
To test the app, enter any letter, for example ‘n’ and click the magnifying glass inside the search input:
Building a Mobile Search App with Appery.io Database
This tutorial will show you how to build an app that searches data stored in Appery.io database.
Let’s start with building the mobile UI.
Building mobile UI
Using Appery.io app builder, create a page named Phones and build the following UI:
- Maker name is a placeholder
- Below the button ,there is a grid with two columns and a label inside each column.
Creating a database
- Create a new database by going to https://appery.io.
- Go to Collections tab and click Import button.
- Upload Phones CSV file to the database. Once the collection is created, it should look like this:
Creating REST services to access the database
- In Appery.io app builder, select Project > Create New > Database Services
- Select your database
- Expand Phones collection and check Query service.
- Click import Selected services button. Two services will be generated under Services folder. One is a settings service that holds the database id and the other one is the query service.
Open the service and then open Request Parameter panel. It should look like this:
Click Test. As we didn’t specify anything for where parameter, you should get all the phones in the collection.
Let’s now test the where parameter. Enter the value of {“Maker”:”Samsung”}, then click Test. You should now get only records where the maker is Apple.
Note that we don’t need to create the response parameters as the response was automatically created when we imported the services.
Adding the service to the page
- Select the query service and drag and drop it over the phone frame. A box will appear on the left-hand side indicating a service instance was added to this page.
- Rename the service instance to: query_phones
Mapping the service to the page
- Open Data Mapping tab
- Map the input component to where parameter:
- Click Add and enter the following code:
return '{"Maker":"'+value+'"}';this means any value entered from the page will be used to search the database.
- Click on Response Mapping and create the following mappings:
- Go back to Design view.
- The last thing we need to do is to invoke the service. Select the button, then Events > Add Event > Click. Add Action > Invoke Service, select the service instance.
Testing the app
Run the app in the browser and enter either Samsung or Apple as value. For example entering Samsung will produce the following:
Displaying a message when no records are found
- Add a new label component just above the grid
- Rename the component to no_records and uncheck Visible.
- Select the button, go to Events. Add a Run Custom JavaScript action with the following code:
Appery("no_records").hide();That’s to hide the label on every new search.
- Now select the service instance on the page, then Events > Add Event > Complete. Add Run Custom JavaScript action with this code:
if (jqXHR.responseText == "[]"){ Appery("no_records").text("Nothing found"); Appery("no_records").show(); }If nothing is returned, show the message.
- Test the app, if you enter anything other than Apple or Samsung, you should get the following:
Video: Building jQuery Mobile App Connected to Twitter Search API
Using SQLite Database with Visual Data Mapper
If you want to use SQLite database, get data from the database and be able to use Appery.io visual data mapper, this post shows how to do it. It uses a Generic Service to get data from the database.
New Video: Instantly Add Cloud Database to Your App with New Database Integration Feature
New Tutorial: Using Database File API and User Management API
We just published a new step-by-step tutorial on using the File API and User Management. Give it a try and let us know what you think.
Building RSS Mobile App Tutorial
Building RSS APP in Appery.io tutorial from Green Machine.
Creating jQuery Mobile App With Appery.io Database API [Tutorial]
As you probably know, we launched Appery.io Database a few weeks ago. In addition to docs, we just published a tutorial on how to build an app connected to Appery.io Database. You will learn:
- Creating a new Appery.io database, inserting sample data
- Displaying messages in the app from the database (via REST API)
- Saving new messages
- Deleting a message
