Development Tip: Managing Device Contacts with an Appery.io Plug-in

icon-contactsBy 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!

Understanding How to Work with AngularJS Scope Variables

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:

2015-10-21_1228

Ionic app with Accordion component

Read the rest of this entry »

Quickly Import Any Cordova Plugin, New API Express Components to Simplify Enterprise Integration, AngularJS App Builder Updates and More In This Big Appery.io Update

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.

cordova_plugins_list

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.

condition-component

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

invoke_service_snippet

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:

services_drag_n_drop

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!

Mobile Tip: Dynamic REST API URLs in AngularJS Apps

dynamic_urls

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!

Mobile Dev. Tip: Simplify UI Building with Outline View

outline_view

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!

Mobile Dev. Tip: Conveniently Manage Dependencies in Your Mobile App

dependency_manager

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.

Mobile Dev. Tip: Quickly Map Data Between Services and UI Using Visual Mapping and Binding Editor in AngularJS Apps

apperyio_binding

There are two powerful and convenient ways to use data flow management in Appery.io: Mapping and Binding.

Mapping

When a REST service is invoked, it usually requires input data. In most mobile apps, the data comes from the page (user-entered) or from storage (previously saved). When the service is invoked, it returns the data you want for further actions with it. This is when Mapping comes really handy — you can map input and output data via a simple and intuitive drag&drop system. You can also modify the incoming and outgoing data on-the-fly by adding custom JavaScript to a needed element.

Binding

AngularJS apps support automatic data synchronization between the model and view components. When the model changes, the view reflects the change, and vice versa. It’s called data-binding. Appery.io provides Binding — the visual tool for managing the connections between UI components and scope. By going to the BINDING tab you can see an overview, and add or remove connections via the simple drag&drop system.

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

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

Provide Input, Win Prizes: Time for the 10th Developer Economics Survey

How to Play a Custom Sound in Your Mobile App

Audio_with_JS

To make your app more interactive and stand out from the competition, one nice option is to play a nice sound file in the background when an event occurs.

You can easily add a custom sound to an app you are building in Appery.io and play it using the standard HTML5 Audio component. As you can always customize any app with custom JavaScript, you can start and stop playing the sound via JavaScript. I’m going to show you how to do this in your Appery.io app.
Read the rest of this entry »

Mobile Dev. Tip: Geolocation Plug-in for AngularJS Apps

geolocation-plugin

Geolocation functionality is one of the most popular features in mobile development. In Appery.io, a geolocation plug-in is available out-of-the box and can be configured in minutes to use in your mobile app. Recently, we’ve updated the geolocation plug-in for AngularJS apps (both Ionic and Bootstrap) and now it is even more intuitive and faster to use. In the geolocation plug-in docs you can find out how to add the plug-in to your Appery.io app, so you can retrieve the current position and start\stop watching position.

Make sure to check out all our mobile development tips.

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