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

Platform overview

When you sign up or login, the Appery.io platform dashboard opens:1stApp

There are several tabs – Apps, Databases, Server code, Secure Proxy, API Express, Plugins, Resources, Account.

The Apps tab includes information about your projects, saved versions, people with whom you share the project, and about hosting on Appery.io. Here you can:

  • Create new projects.
  • Open, test, rename, and delete projects created earlier.
  • Make an app backup (available for Pro, Team and Enterprise plans).
  • Create project versions and restore the old version of the project.
  • Invite people to share the project, or change the project owner.
  • Publish your project to your custom domain or Appery.io domain.

The left panel includes information about your apps and the users who have shared their projects with you.

To select an app, click its name in the list:
003_Apps

As you move the mouse over the project name, the Open button appears. Click it to open your project for editing (the Appery.io Visual Builder opens).

The main frame includes information about the selected project. You can switch between General, Push Notifications, Customer Console and Permissions tabs:

General information

This frame consists of the following areas:

  • Project summary
  • Versions
  • Hosting
  • Webhooks
  • Share via Appery.io Tester app
  • Share with support

Project summary

The Project summary area contains the project name and some data. It contains the following buttons:

  • Open – click to open the visual builder; it opens in the same tab.
  • Test – click to test the app in the desktop web browser. A new tab opens. You can also test the app from the visual builder (read Testing the app).
  • Rename – click to rename the project. A pop-up will open where you can type a new project name.
  • Delete – click to delete the project. A pop-up will open where you can confirm or cancel the action.

    Deleting cannot be undone later.

  • Backup – click to save your app backup. Depending on your browser settings, one of the following actions may occur: the backup may be saved in a certain place, you may be asked for the place to save it, or it may be opened in an application for zip archives. Creating backups is available for Pro, Team and Enterprise plans.

    The app backup does not store certificate information, please store certificates locally in a safe, secure place.

  • Remote debug – this button is inactive by default.

Versions

The Versions area contains information about versions of the project. This area contains the following information:
007-Versions

  • Reversed order number.
  • Creation date and time.
  • User who created the version.
  • Version name.
  • Links to restore or delete the version. When you click any link, a pop-up opens where you can confirm or cancel the action.

When you restore the version, you’ll lose the changes made after the last version was saved. If you created a new version before restoring one of the earlier saved versions, no changes are lost and you can restore them later.

If you haven’t created a version yet, the Versions area contains information about the current user, and the date and time the project was last saved.

To create a version, type the version name and click New Version.

To learn more, see the App Versioning tutorial.

Hosting

The Hosting area allows you to publish your app. This area also contains information about the domains where the project was published.

This area has a field for Appery.io hosting – publishing to the custom domain and to the app_name.app.appery.io domain (for more detailed information read Appery.io hosting):

Using Publish, you can publish the app and update it after editing. Using Unpublish, you can stop hosting the app.

Webhooks

More information on Webhooks can be found here.

Share via Appery.io Tester app

Appery.io enables developers to share his/her apps with anyone in the world, on any device, without having to install the app on their device or going through any app store.
This is quite important for developers who want to demo or preview their apps with a customer, client, team member or anyone else during the development process or for marketing purposes.
All a user has to do is to install the free Appery.io Tester app for the Apple Appstore or Google Play and enter a code provided by the developer.

Read more about sharing the app via Appery.io Tester here.

Share with support

The section Share with support is placed at the bottom of the page:
ShareWithSupport

When a user shares (turns the toggle on), the specified resource appears in the admin section. This feature can be used by the support team for viewing and accessing all resources (apps, databases, server scripts, etc) shared.

When a user unshares (turns the toggle off), the specified resource can’t be accessed for viewing by the support.

Push Notifications

This is a Push Notifications section:

Learn more about push notifications via the link.

Customer Console

This is a customer console section. You can edit console and collection settings, as well as manage your push notifications and hosting information here:

Learn more about customer console via the link.

Permissions

This is a Permissions section where you can set permissions for the team members:

For more information on Team and permissions, go here.

Building an app: main steps

To build a new app in Appery.io, you need to:

  1. Create a new app – see below.
  2. Build the UI – read here.
  3. Set up database – read here.
  4. Set up services – read here.
  5. Map the services – read here.
  6. Add events and define actions – read here.
  7. Test the app – read here.
  8. Export the app for your device – read here.

While working with the Appery.io platform, you may need more features, such as using native devices, publishing, collaboration or creating plug-ins. You can find all of this in our documentation.

Create a new app

To create a new app click Create new app button. The window has three tabs for creating a new app:

  • From template
  • From example
  • From backup

From template

This section has a number of templates, your new app will have one (two) page(s) and will be ready for you to start developing. Simply enter the app name and click the Create button.

The jQuery Mobile App template (default) includes the following:

  • jQuery Mobile components.
  • REST services.
  • PhoneGap – popular library that wraps the mobile web app and gives you access to the device APIs, thus getting you a native app.
  • Ability to export as Android, iOS or HTML/JavaScript/CSS.

The Bootstrap AngularJS template includes the following:

  • Bootstrap (UI components)
  • AngularJS
  • REST services
  • PhoneGap – popular library that wraps the mobile web app and gives you access to the device APIs, thus getting you a native app
  • Ability to export as Android, iOS or HTML/JavaScript/CSS.

The Ionic AngularJS template includes the following:

  • Ionic (UI components)
  • AngularJS
  • Generic/REST/Device Services
  • PhoneGap – popular library that wraps the mobile web app and gives you access to the device APIs, thus getting you a native app
  • Ability to export as Android, iOS or HTML/JavaScript/CSS.

From example

This section has a number of ready-to-run apps. It’s a great way to start your app or learn about the features in the examples. You can find a list of all current examples here.

From backup

To create an app from a backup, switch to the From backup tab and select the project backup file. You can only upload an Appery.io project (exported as a backup).

Creating from backup quirks

There are two nuances you should know about creating the app from backup if source code of this app is modified (this is needed to successfully build binaries):

  1. To create an app with modified source code from backup, use the same project name. Otherwise your source code changes will not take effect. For example, you have an app named MySourceCodeApp:
    my_source_code_app
    And you decide to backup this app and restore it after a while. You should use the same name for the project – MySourceCodeApp.

    You can’t have two projects with the same name simultaneously. Use Appery.io versioning to store several app versions.

  2. To restore an app with modified source code from backup you should also change the Package name to the old one. Once you have restored the app go to Source > ANDROID > <app_name> > AndroidManifest.xml. Find the package parameter and copy its value:
    package_name
    Then go to Project > App settings > Android binary and paste this value to Package name:
    pasted_package_name

App builder overview

When you create or open a project, the Appery.io Visual Builder opens:

It consists of three main parts: Tool bar, Project view and Project tabs.

Tool bar

The Tool bar has the following buttons:

  • Close – click to close the project and open the Apps tab. If you have made any changes in the project, you will be asked whether the changes should be saved:
  • Save – click to save the project. Don’t forget to click this when you edit the project.
  • Export – click to select the file type you need for exporting the project to another platform or package it as Appery.io plug-in:
  • Test – click the button to test the app in a desktop web browser. If you want to edit testing settings, click the arrow:

Check Public if you want to share the app link with other people, and copy the link. You can also scan the QR-code.

  • Database – click to open the Databases tab in a new window. You can work with your databases without closing the project.
  • Push – click to open the Push Notifications tab in a new window. You can work with your push notification services without closing the project.
  • Server Code – click to open the Server Code tab in a new window. You can work with your server scripts without closing the project.
  • Secure Proxy – click to open the Secure Proxy tab in a new window. You can work with your proxies without closing the project.
  • API Express – click to open the API Express tab in a new window. You can work with your API Express projects and connections without closing the project.
  • Active users icon – click to see who is working with the project at the moment:
    021-ActiveUsersIcon
  • Notifications icon – view notifications about the other users working with the project:
    022-NotificationIcon
  • Additional Menu (three lines button) – click to open the Start Page, Priority Support, Dev Center, Media Manager, Settings, Close all Tabs or What's new:

Editor settings

To open editor settings, click the three lines button and select Settings.

There are color schemes settings on the All apps tab:

On the App tab, you can activate or deactivate confirmations for several actions or change CodeMirror settings:

Enable code folding allows you to truncate the code blocks by clicking the small arrow icon to the right of the line numbers:
env_code_folding

Enable validation hints shows warning or error icons to the right of the specific line number:
env_code_hints

Enable highlighting matched selections searches for the matching text and highlights it via a blue wavy line:
env_env_highlighting

Projects view

Project view has the CREATE NEW button and two tabs: Project and Source:

The Project tab includes the menu of the main parts of the project.

The triangle sign before the menu item shows that the item has a list of objects. Click the icon or the menu line to open the list: 024-TriangleIcon

The cog sign that appears for a menu item shows that the item can renamed, deleted or duplicated. Click the icon to perform a needed action: 023-WheelIcon

The X sign that appears for a menu item shows that the item can be deleted. Click the icon to delete the item: 025-xIcon

The Project menu consists of the following items:

  • Project – here you can find the App settings, Model and Routing (in Ionic/AngularJS or Bootstrap/AngularJS projects) or App settings and Model and Storage (in jQuery Mobile projects). Click the needed line. A new tab opens.

Read more about app settings via the link.

Read more about model and storage via the link.

  • Pages – the project must have at least one page, even if you have just created a new project. While building the app, you may create new pages, which appear in the list in alphabetical order.

Read about actions on pages while building UI via the link.

  • Dialogs (jQuery Mobile projects) – if you create a dialog page, it appears in this list. Like pages, you can rename, duplicate or remove dialogs by clicking the cog icon.
  • Templates (jQuery Mobile projects) – after you’ve created a page template, it appears in this list. You can rename or remove the template.

Read more about page templates via the link.

  • Themes (jQuery Mobile projects) – every project has a list of predefined themes. You can also create custom themes which appear in the list.

Read more about creating themes via the link.

  • CSS – you can create a custom CSS file and then apply it to components and pages. When you create a blank CSS file, upload it from a file, or create it from a URL, it appears in the list. You can rename, duplicate or remove any CSS file.

Read more about applying CSS via the link.

  • Services – it is almost impossible to create an app without using services. All the services you create appear in this list. You can rename, duplicate and delete any service in the list.
  • JavaScript – using JavaScript makes working on building your app easier. When you create a JavaScript file, it appears in this list. Any JavaScript file can be renamed, duplicated and removed.

Read more about creating and using JavaScript via the link.

  • Custom components (jQuery Mobile projects) – you can edit any of the custom components via this list. You can rename and remove any custom component.

Read more about custom components via the link.

The Source tab allows you to access the source code of your app. You can see the folders that contain platform-specific resources: ANDROID, IOS and WEB_RESOURCES By editing these resources, you can influence the results of code generation:
031-SourceTab

On the Source tab, you can:

Work with source files:

  • Edit – click the file name and edit the code in the open tab. The names of the generated resources are initially black, while the names of the created or changed resources are blue:
    030-EditedSourceFile
  • Rename – click the cog icon and select Rename.
  • Duplicate – click the cog icon and select Duplicate.
  • Move – click the cog icon and select Move; in the pop-up, select the folder where the file should be moved and click OK.
  • Delete – click the cog icon, select Delete and confirm the action.
  • Create– click the cog icon, select Create file, and in the pop-up, enter the file name.
  • Upload files and zip archives – in the folder line, click the cog icon, select Upload to this folder and select files to be uploaded; if you choose zip bundle, when uploading, it is unzipped and all folders and files are added to the folder:
    032-UploadFiles

Work with source folders:

  • Create – click the cog icon, select Create folder, and in the pop-up, enter the folder name.
  • Rename subdirectories.
  • Move subdirectories.
  • Delete subdirectories.
  • Refresh root folders – click the cog icon and select Refresh to update the source tree.
  • Undo changes – click the cog icon and select Undo all source changes to restore changed or deleted generated files and folders. You can only restore generated files, not custom files; after saving the project, all changed files become custom.
  • Search files – click the cog icon, select Search source and in the pop-up, start typing the source name:
    033-SearchSource

The selected source file opens in a new tab. You can also view the file in the folder.

  • Select all or only changed files in the root folder – click the cog icon and select Show only changed sources or Show all.

After saving the project, the changes you made in the source files appear when testing on the browser desktop, but they do not appear in the visual builder. Similarly, all changes made in the visual builder do not appear in the changed source files and they will not be seen during testing. You cannot make any changes in the visual builder after you have edited the source code, hence, all the necessary changes in the code should be made at the end of the UI design.

 

Learn more about source editing via the link.

jQuery Mobile Project tabs

When you create a new project, only the Start tab is open:
036-Start

The Start tab includes information about the latest enhancements to Appery.io, steps for building apps, and links to sections of the Appery.io documentation.

As you open any page, service, file etc. from the Project view, new tabs open:
037-Tabs

The tab with code (Themes, CSS, JavaScript, Source code) has:

  • The cog icon – opens color schemes settings;
  • The Auto format code button – use it to make your code more readable;
  • The Screen mode button – switch to full screen mode and back:

The tab with pages, pop-ups and components has two views: DESIGN (to build the UI) and DATA (to add datasources).

DESIGN view has the following sections:

  • Components PALETTE – to drag and drop the components to build the UI. Read more about components.
  • PROPERTIES panel – to edit properties of the page or component.
  • EVENTS tab – to add and edit events to the page or component. Read about events.
  • MOBILE FRAME– to see how it looks on your device while you’re building the UI.

Clicking on the PALETTE tab allows access to the custom PALETTE items to configure the app UI by dragging and dropping the items to the frame. To make more room for the MOBILE FRAME, disable the components PALETTE, clicking the PALETTE tab:PaletteTab

Clicking on the OUTLINE tab opens the components tree view where all the added components can be viewed and/or edited:OutlineTab

Bootstrap/Ionic AngularJS Project tabs

While starting a new Bootstrap/Angular JS or Ionic/AngularJS project, two pages are created by default: index and Screen1:2Pages

index page is the main app page that contains components common for all pages.

Working with Bootstrap/AngularJS projects is similar to that in Ionic/AngularJS. The only difference is their UI components sets.

Any tab you open in a Bootstrap/AngularJS or Ionic/AngularJS project has three main tabs: DESIGN, SCOPE , and BINDING which differs it from a jQuery Mobile project:

By opening the DESIGN tab, you get access to three more tabs: PALETTE, OUTLINE, and PROPERTIES:

Clicking on the PALETTE tab allows access to the custom PALETTE items to configure the app UI by dragging and dropping the items to the frame.

The frame allows the following operations:

  • placing/editing/deleting components.
  • using breadcrumbs for easy navigation between the parent/child components.
  • changing layout (portrait or landscape) and scaling.
  • selecting the screen size.

Clicking on the OUTLINE tab opens the components tree view where all the added components can be viewed and/or edited:

Also, selecting and deleting components can be done by clicking on the component in the OUTLINE list (to expand/collapse the list sub items, use the triangle next to the item name).

The PROPERTIES tab allows configuring the added items and can be hidden/shown by clicking >>:
PROPERTIESTab

Here, complex properties can be expanded and custom attributes can be added/deleted.

The SCOPE tab allows adding variables and functions to the projects.

Read more about SCOPE here.

The BINDING tab shows the connections between the project elements:BINDING

Closing all tabs

When you work with a big project with a large number of pages or services, or when you work with project sources and have a lot of opened tabs, you can close all open tabs in one click by using the Close all Tabs option. It is located in the upper-right corner of the editor:

Just select Close all Tabs to close the open tabs, and the editor is ready for further work.

Code editor shortcuts

The Appery.io Builder’s code editor supports several shortcuts for working with code:

Windows

  • <Ctrl>+<Shift>+<F> – Format code.
  • <Ctrl>+<Space> – Auto complete.
  • <Ctrl>+<H> – Help box.
  • <Ctrl>+<S> – Save script or event.
  • <Ctrl>+<D> – Remove current string.
  • <F11> – FullScreen mode.
  • <Alt>+<T> – Test the app.

Mac OS

  • <Ctrl>+<Shift>+<F> – Format code.
  • <Ctrl>+<Space> – Auto complete.
  • <Ctrl>+<H> – Help box.
  • <⌘>+<S> – Save script or event.
  • <F11> – FullScreen mode.
  • <Alt>+<T> – Test the app.

To make the auto complete work, cursor should be positioned after the dot. For example: Apperyio.[CURSOR_IS_HERE]

To make the help box work, cursor should be somewhere inside the method. For example: Apperyio.Entit[CURSOR_IS_HERE]yAPI

Supported platforms

The mobile app that you create in Appery.io will run on the following platform versions:

  • Android 4.1 – 6.x
    • Your app will most likely work on lower Android version but there is no official support from Appery.io
  • iOS 5.1 – 8.1.3 and iOS 9 (full support coming, some features might not work)

If you are creating a responsive app with Bootstrap, you should target the latest modern browsers on desktop or mobile devices.

Supported browsers

When using Appery.io to build your app, you should use one of the following browsers (note that this is different from the resulting app that you generate):

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari