If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Create new app from example

When you create a new app, you have the option to create a new app based on an existing example. This is a great way to start learning or use the example as a a starting point for your app.

To select an example, click Create new app > From example to see the list of available examples:

  • Clickable List Example
  • Login Registration Example
  • Slide Panel Example
  • Tabbed Pages Example
  • Weather API and Geolocation Example

Examples

Login Registration Example

Example available for UI framework(s): jQuery Mobile, Bootstrap, Ionic

This example shows the following features:

  • User registration
  • User login
  • User login with social network
  • User sign out
  • User session management
  • Create/view/delete – a list of items for the logged in user

For this app to work, it requires a very minimal setup:

If you want to import this app as a plugin, go to CREATE NEW > From plug-in and select User Login Registration Example. Select loginPage as start page for AngularJS apps or login page for jQuery Mobile apps. Also, if you’re building an Ionic app, go to your index page after plugin importing, select Page using breadcrumbs and hide the Header by going to Controls Top > Header > False in the PROPERTIES panel to the right.

  1. Create a new database called: myDB.
  2. Inside the database, create a collection called: Stuff.
  3. Inside the Stuff collection, create one column called: text (String type).
  4. With the Stuff collection open, click Change default ACL button.
  5. Inside the input field type: @Creator, click Add User.
  6. Click Save and Close.
  7. Copy the created database id and paste it to the myDB_settings > database_id (under Services folder) in the App Builder.
  8. To turn on the Social Network authentication for current database, go to Social connections tab (on the database page) and click “Add an app”.
  9. Select provider and specify App name (can be anything you want), Cliend Id and Secret Id. Those credentials can be retrieved by creating the app on the social network side. See how to create an app for FacebookTwitter and Google.
  10. Go to your app, open myDB_settings and specify client ids for each social network  (the same as you specified in Database > Social connections).
  11. Lastly, copy the Appery.io app id from the current URL (value between project/ and /editor) and paste it to the myDB_settings > appId.

Remove the frame when testing in browser. Due to security reasons, social providers don’t allow launching the app in frames.

You are now ready to run the app. Don’t forget to create the first user.

Clickable List Example

Example available for UI framework(s): jQuery Mobile

This example shows how to use:

  • Model and Storage
  • Load data from database
  • Create a clickable list (master-detail) to show item details on second page

For this app to work, it requires a very minimal setup:

  1. Create new database called ProductsDB.
  2. Inside the database, create a collection called Products.
  3. Inside the Products collection define three columns (name, description, quantity) and enter any sample data to look like this:
    Screen Shot 2015-06-16 at 4.21.26 PM
    Or, download and import this sample database file.
  4. Open Settings tab and copy the database API key.
  5. Inside the App Builder, open Services/Database_settings and paste the API key for database_id value.

You are now ready to run the app.

Slide Panel Example

This example uses a page template to create a menu that slides from the left.

Tabbed Pages Example

This examples uses a page template and the NavBar component to create tabbed pages and navigation between the pages.

Weather API and Geolocation Example

This examples uses Weather REST API to show the temperature information based on your location.