New Tutorials on Building Mobile Apps with Appery.io Backend Services

Posted: December 28th, 2012 | Author: | Filed under: Tutorials | Tags: | 6 Comments »

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

Posted: December 19th, 2012 | Author: | Filed under: API, Database, jQuery Mobile, New release, PhoneGap, Tutorials, Windows Phone | Tags: , , , , , | 1 Comment »

Windows 8 Support

Windows 8

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.

Selection_773

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:

Selection_393

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.

Selection_772

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 Windows 8 App in Appery.io

Posted: October 29th, 2012 | Author: | Filed under: Tutorials, Windows 8 | Tags: , | 4 Comments »

This tutorial is going to show you how to build a Windows 8 app in Appery.io new app builder. Before proceeding, here are a few things to keep in mind:

  • The new builder is now in beta.
  • You should use Firefox to build and test the app in the browser. IE10 support is coming

In this tutorial, we are going to build a Windows 8 app to search Twitter. We will use the Twitter search REST API to find all tweets using a term entered in the app.

Creating a new Windows 8 project

To start, let’s create a new Windows 8 project.

  1. Sign into Appery.io.
  2. Click on APPS in the upper-right-hand corner of the screen.
  3. Click on the More create options link to the right of the Create button.
  4. In the new screen, enter an app name. Let’s use “TwitterWindows8″.
  5. Select the Windows 8 App radio button.
    Selection_304
  6. Click Create to open the new project in the new builder. (It should display a welcome screen as shown below.)
    img31

Creating the UI

We will create the UI by dragging and dropping components from a left sidebar palette and setting component properties from a right-hand sidebar.

  1. Using the left sidebar, expand Pages and select home. In the middle of the screen, you will see this:
  2. Click the black screen.
  3. In the right (Properties) sidebar under Custom, find the Rows field and make the entry “120px;auto;1fr”. A new row will appear.
  4. From the Design (components) palette to the left, select an input component under Controls and drop it inside the cell at the first row/second column:

    The result will then look like this:
  5. Select the new input and then click the icon (as shown) to select the parent container:
  6. Under Custom properties, set Column align to “start”.
  7. Now select a button component from under Controls and drop it inside the cell at the second row/second column.
  8. Select the new button’s parent container by clicking the icon as you did for the new input and set Column align to “start”.
  9. Select the button and change its label by entering “Search” into the Text field  under Common properties.
  10. You can also now test the app by clicking the Test button in the upper-right corner of the browser screen.

    Note: We recommend Firefox for previewing the app. We are still working on IE 10 support.
  11. Now, let’s continue building the UI by adding a listview component. Select a listview component from the Containers components and then drop it inside the cell at the third row/second column.
  12. Select the component and, under Common properties, change the Height to “160px”.
  13. Next, select a grid component from the Layouts components and drop it inside the listview.
  14. With the grid selected, set the Rows field under Custom properties to “auto;auto;auto”.
  15. Then, set its size by entering these values into these fields under Commonproperties:
    1. Width: “600px”
    2. Height: “160px”
  16. Select an image component from the Controls components and drop it into the first row/first column of the grid you just created.
  17. Select the image component’s parent (via the small icons) and set its Column align to “start”.
  18. Select a label component from the Controls components and drop it into the second row/first column of the grid.
  19. Select the label’s parent (via the small icons) and set its Column align to “start”.
  20. Reselect the label and set the Text field under Common properties to be blank.
  21. Select another label component from the Controls components and drop it into the third row/first column of the grid.
  22. Select this label’s parent (via the small icons) and set its Column align to “start”.
  23. Then, reselect the label and set the Text field under Common properties to be blank.

(Saving is not required till the end, but, if you want, you can save at the end of each section by clicking on the Save button in the top menu bar of the editor.)

Creating a service

We’ll now create a Appery.io “service” component (service interface) that can be used in building our app. We’ll use a Twitter Search REST service for our service component. We just need to define some things about the service and specify the request and response parameter we’ll be using for input and output.

  1. In the upper-left part of the screen, click on Create New and then click on “Service” from the drop-down menu.
  2. Enter “TwitterSearch” as the name and click the Create Service button.
  3. If you look on the left-hand side, you’ll see the new service listed under Services. Click on this TwitterSearch label to open the service editor on the service.
  4. Now, under the REST Service Properties section, enter “http://search.twitter.com/search.json” as the URL and select “jsonp” as the Data Type.
    Selection_319
  5. Open the Request Parameters section underneath this section by clicking on Request Parameters.
  6. Enter “q” into the text input box and click Add.
  7. Open the Response Parameters section underneath this section by clicking on Response Parameters.
  8. Enter “results” into the text input box and click Add.
  9. Click the green + button in the same row as the results response parameter to make a sub-element of results.
  10. Enter “profile_image_url” into the new text input box and click Add. The result will look like this:
  11. Click the green + button in the same row as the results response parameter again to make another sub-element of results.
  12. Enter “from_user” into the new text input box and click Add.
  13. Then, click the green + button in the same row as the results response parameter one last time to make another sub-element of results.
  14. Enter “text” into the new text input box and click Add.

The result will look like this:

Mapping the service to the UI

Now, we have REST service parameters on one side and UI components on the other side. Next, we’ll connect them together in the Data section of the editor as a data mapping called “restservice” that uses the service component called “TwitterSearch”.

  1. Select the home tab above the service editor.
  2. Click on the Data side-tab.
  3. From the Type drop-down menu, select “Service”.
  4. From the Component drop-down menu, select “REST Service”.
  5. Click the green button to the right.
  6. In the row that will have appeared under Components List, click the blue Edit Mapping… button
  7. A Component Properties sidebar will appear to the right. From the Service drop-down menu, select “TwitterSearch”.
  8. Now click the Edit Mapping… button again. A new screen, the mapping editor, will scroll in from the right with the Request Mapping tab selected.
  9. On the right-hand side under Components, expand home and then expand the first sub-item under it.
  10. Click on the q parameter on the left-hand side, drag the cursor to the label Text under the expanded sub-item, and drop.
    The input component is now mapped to the REST service input.
  11. Now click on the Response Mapping.
  12. Expand results on the the left-hand side, collapse the input component on the right-hand side, and expand the listview component and it’s subitems until everything is exposed.
  13. Then, using the same drag-and-drop approach as above, define the following mappings:

The results parameter is the collection of all tweets found through the query. We are mapping it to the parent listview container to get automatic looping. The rest of the mappings are straightforward.

Invoking the service

We are almost done. We have a UI, a service component for using a REST service from the app, and a data mapping connecting the UI and the service together. All we need is a triggering event for the data mapping to invoke the service. For this we’ll use a panel hidden away at the bottom of the screen.
  1. Select the Design side-tab.
  2. Find the Show Events Panel tab all the way in the bottom-right corner of your screen.
  3. Click this tab to open the events panel.
  4. From the Component drop-down menu, select the button component.
  5. From the Event drop-down menu, select “Click”.
  6. From the Action drop-down menu, select “Invoke Service”.
  7. From the Service drop-down menu select “restservice” (the service data mapping you created).
  8. Click the green button to add this event.

You have now set up the app to invoke a service through clicking the Search button in the app.

Testing the app

Now we can test the app. Just click the Test button in the upper-right corner of the screen and enter any term to search for. You should get a result that looks something like this:


Building a Mobile Search App with Appery.io Database, Part 2

Posted: October 22nd, 2012 | Author: | Filed under: Mobile Backend, Tutorials | Tags: , | 1 Comment »

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

  1. Create a new database by going to http://appery.io.
  2. Go to Collections tab and click Import button.
  3. 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

  1. In Appery.io app builder, select Project > Create New > Database Services
  2. Select your database
  3. Expand States collection and check Query service.
  4. Click import Selected services button. A query search for States collection will be created.
  5. 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:

    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:

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

Posted: October 15th, 2012 | Author: | Filed under: Mobile Backend, Tutorials | Tags: , | 2 Comments »

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

  1. Create a new database by going to http://appery.io.
  2. Go to Collections tab and click Import button.
  3. Upload Phones CSV file to the database. Once the collection is created, it should look like this:

Creating REST services to access the database

  1. In Appery.io app builder, select Project > Create New > Database Services
  2. Select your database
  3. Expand Phones collection and check Query service.
  4. 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

  1. 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.
  2. Rename the service instance to: query_phones

Mapping the service to the page

  1. Open Data Mapping tab
  2. Map the input component to where parameter:
  3. Click Add and enter the following code:

    this means any value entered from the page will be used to search the database.
  4. Click on Response Mapping and create the following mappings:
  5. Go back to Design view.
  6. 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

  1. Add a new label component just above the grid
  2. Rename the component to no_records and uncheck Visible.
  3. Select the button, go to Events. Add a Run Custom JavaScript action with the following code:

    That’s to hide the label on every new search.
  4. Now select the service instance on the page, then Events > Add Event > Complete. Add Run Custom JavaScript action with this code:

    If nothing is returned, show the message.
  5. 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

Posted: September 13th, 2012 | Author: | Filed under: API, Tutorials, Video | Tags: , , | Comments Off


Using SQLite Database with Visual Data Mapper

Posted: September 4th, 2012 | Author: | Filed under: Tutorials | Tags: | Comments Off

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

Posted: August 31st, 2012 | Author: | Filed under: Features, Tutorials, Video | Tags: , , | Comments Off


New Tutorial: Using Database File API and User Management API

Posted: August 31st, 2012 | Author: | Filed under: Tutorials | Tags: | 1 Comment »

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

Posted: August 21st, 2012 | Author: | Filed under: Tutorials | Tags: | Comments Off

Building RSS APP in Appery.io tutorial from Green Machine.