Blog

The Appery.io platform comes with many visual tools to help you build your mobile app fast. We understand that there are cases where you need to go beyond visual tooling and be able to customize your app with code. There are a number of ways to do that in Appery.io.

• You can write any custom JavaScript code in the app (client). You can also include any 3rd party libraries.
• With Appery.io Server Code you can develop any custom logic on the server, also using JavaScript. This logic is automatically exposed via a REST API. That’s like creating a custom API on the fly.

In this tutorial we are going to show you how to combine the visual tools with custom code to build a chat mobile app. In particular, you’ll learn how to use EventSource API to receive server-sent events and create a simple chat application. The app will be based on the Ionic Framework and also use Server Code script. The app looks like this:

Chat app

Read the rest of this entry »

There’s a set of time-saving snippets available to you when you’re writing app logic in AngularJS. They are located on the right side of the function editor window.

For example, you can generate REST service-invoking code by clicking on “Invoke service” snippet. Then, all you need to do is change the "service_name" to your actual service name.

Another popular snippet is “Open modal page” – the snippet will generate code to open the modal and modalOptions object as well.  As with the “Invoke service” snippet, you’ll have to change modal_name to your modal name. Then you can execute this function when needed (on button click, for example) and the modal will be opened.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

With just a few quick steps, you can easily add any 3rd-party Cordova plug-in to your Appery.io app:

1. Go to the Github page of the plug-in and download the latest stable version by clicking “Download ZIP.” It’s important to download the latest stable version.
2. Go to Resources > Cordova plug-insand click Import Cordova plug-in, then: Choose file, locate the downloaded file and click Import plug-in The plug-in will appear under Cordova plug-ins

To manage all of the Cordova plug-ins for a particular app, go to Project > App settings > Cordova plug-ins and you’ll see the list. You can quickly enable or disable any plug-in.

Learn more in our documentation, and make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

UPDATE: The deadline has been extended to Dec. 6 by the organizers.

The new Developer Economics survey is almost over! The last day, November 27th, is only a week away. Developers, don’t miss out on this opportunity to voice your opinions on the trends and top development issues of the day.

Read the rest of this entry »

By using the Appery.io Contacts plug-in, you can conveniently manage contacts on a user’s device. The plug-in is based on the Cordova API and can be imported into your Appery.io app like any other plug-in. Just click CREATE NEW > From plugin, select Apperyio Contacts Service and click “Import selected plugins.” There is a set of services you can use to perform the operations, such as find, remove, create, edit and more.

We’ve also prepared a detailed tutorial on how to use this plug-in, as well as a simple demo app (you can create it from the attached backup), that allows you to find, create and save contacts. Find it here.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

AngularJS greatly simplifies mobile app development. At the same time, it introduces a number of important concepts that you need to understand in order to create apps quickly. One of the important concepts is working with the scope object and the variables you place in the scope. In this post we are going to show you how to access variables placed in the scope.

Let’s create a simple app to clarify this concept. The app is going to look like this:

Ionic app with Accordion component

Read the rest of this entry »

Easily import any Cordova plugin

You can now easily add any 3rd party Cordova plugin to your app. This has been one of the most requested features. No more sources digging and long step-by-step guides. This is how quickly you can add any Cordova plugin to your app:

1. Go to the Github page of the plugin and download the latest stable version by clicking “Download ZIP”. It’s important to download the stable or Release version.
2. Go to Resources > Cordova pluginsand click Import Cordova plugin, then: Choose file, locate the downloaded file and click Import plug-in The plug-in will appear under Cordova plug-ins

And you are done — it’s that’s easy.

Quickly add any Cordova plugin

To manage all Cordova plugins for a particular app go to Project > App settings > Cordova plugins and you’ll set the list. On this page you will also see the Core Cordova plugins – these plugins are automatically available in your app. From this page you can easily manage the plugins. You can quickly enable or disable any plugin.

We think it’s a very nice capability that you will like. To learn more, please read the documentation for more details.

API Express enhancements

API Express allows quickly exposing a relational database via REST APIs. In this update we have added a number of important features.

New service builder components

The API Express Service Builder – a visual tool to build your custom services has a number of new components. These components simplify building your service logic.

Easily build custom services with new logic components

You can learn more about the new components here.

Comparison query operators 

A set of comparison query operators were added to Find operation to make your requests more effective. Here is the operators list:

• $eq – Matches values that are equal to a specified value.
• $gt – Matches values that are greater than a specified value.
• $gte – Matches values that are greater than or equal to a specified value.
• $lt – Matches values that are less than a specified value.
• $lte – Matches values that are less than or equal to a specified value.
• $ne – Matches all values that are not equal to a specified value.
• $in – Matches any of the values specified in an array.
• $nin – Matches none of the values specified in an array.

Learn how to use these operators in examples.

API Express project import & export

Now it’s possible to save your API Express project locally by backing it up.The project can be restored from the exported backup as well. It’s really simple, so you have to go to API Express > Settings and click “Export Backup” to save your API Express project locally. Click “From backup” when creating new API Express project and choose previously stored backup to create a project from the backup. A little bit more about these features is here.

Quickly add a REST API to a controller with drag and drop

A faster way to add a REST API to an AngularJS app

When building an AngularJS app, there are useful snippet called “Invoke service”. The code to execute a REST API service will be added to your scope function when clicking on it. All you have to do is change “service_name” to your actual service name:

Drag and drop a service into an AngularJS controller

We now made it even simpler to add a REST API to a function. Just drag and drop the needed service from Services folder (to the left of the screen, where project tree is located) to your function and you’re done! Even the service name will be automatically substituted:

Edit scheduled pushes for faster development

You can now easily edit scheduled pushes. This means you no longer need to delete a scheduled push in order to make a change. There are few ways in Appery.io to send a Push Notification:

1. By sending the REST request using the Push Notifications API.
2. By calling the appropriate methods in Server Code.
3. By using the web console.

All three methods support scheduling pushes. From now, Server Code and Push Notifications API’s were complemented with new methods to get the list of scheduled notifications and to remove them.

By using the web console you can achieve more functionality when editing scheduled pushes. You can remove them as well, but you can also change notifications content and lot of other options including push message, its sound and devices. Read the doc for details.

Push Notifications API changes

If you built an AngularJS app or jQuery Mobile app (library version 3.0), please make sure you are aware of these API changes:

New version of Appery.io Push Notification plugin has different way to read the message. The changes only concerns AngularJS apps and jQuery Mobile app with libraries version 3.0. If you ever wrote the event.notification.aps.alert code, you should replace it with new variant. So, find your code that looks like:

event.notification.aps.alert

And replace it with the next string:

event.detail.message

That’s all if your making the jQuery Mobile app, but for AngularJS one more step should done. Find PushRegisterDeviceImpl JavaScript file (under JavaScript folder) and replace the entire file with the code provided here.

Happy app building with better Appery.io!

Dynamic URLs are very common in any mobile app. When building AngularJS apps with Appery.io there are few ways to make parts of the URL (or even the entire URL) dynamic. We’ll use this URL for our example: http://mywebsite.com/name/{id}/edit , where the {id} part should be dynamic.

1. First of all, you can use the Settings service to perform dynamic substitutions:
   1.  Create a new Settings service (if you don’t have one yet) by going to CREATE NEW > Service > Settings (REST settings).
   2. Then, create a new id parameter in the newly-created Settings and provide a value for it.
   3. Now, go to your REST service, and change the dynamic part of your URL to {MySettings.id} where MySettings is the settings service name, and id is the name of the parameter. Your URL should look like:           http://mywebsite.com/name/{MySettings.id}/edit
2. Alternatively, you can create request parameters directly in the REST service. They will be automatically substituted if names coincide. You can use this approach if you need visual Mapping for dynamic parameters:
   1. Go to your REST service Request > Query String.
   2. Create the new id parameter and provide a value for it.
   3. Change the REST service URL to http://mywebsite.com/name/{id}/edit.
   4. Because the value of the id parameter will be automatically inserted to the {id} placeholder, it won’t be added to the end of the URL as a query string.

Read more about the REST and Settings services in AngularJS.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Outline view

When building complex UI for your mobile app, it can become difficult to quickly select needed components. It can be even more complicated if there are many levels of nested components. A Grid component, for example, contains rows and columns, while each cell contains Buttons, Images and HTML. Some cells can even contain another Grid. By using OUTLINE view you can see the UI structure in simple hierarchical way. You can open or hide OUTLINE view by clicking the button to the bottom of the screen, nearby the components palette.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Appery.io Dependency Manager

Another great built-in Appery.io tool is the powerful Dependency Manager. It can be used to add new dependencies to your app, manage the asset loading order, add initial logic for dependencies, and much more. You can load resources any time it is required in the project (not only while loading the app). This can be configured in a simple, visual way with the Dependency Manager.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our free plan.