Learn How to Build an Ionic App to Save Form Data Into a Database

Posted: October 24th, 2016Author:

Saving app data is one of the most basic functionality in any business or enterprise mobile app. A user is presented with a custom form (page). A user enters information and the information is saved into a cloud data storage. We created this video to show you how to do exactly that.

In this video tutorial, you will learn how to build an Ionic app that saves form (page) data into a database. The video tutorial shows:

  1. Creating a database.
  2. Creating server-side logic to save data into the database.
  3. Building an Ionic app. The app uses the server-side script to save data into the database.
  4. Testing the app.

Watch the video now:

Looking for more videos on how to build mobile apps? Check out our YouTube channel.

How to Perform Basic Database Operations: Create, Read, Update and Delete

Posted: October 13th, 2016Author:

The Appery.io Backend Services consists of the following components:

  • Database – for storing any app data.
  • Server Code – for writing server-side app logic using JavaScript.
  • API Express – integrating with external systems and APIs.
  • Push Notifications – sending push messages to devices.
  • Web Hosting – publishing and hosting mobile web apps.

In this post, we will show you how a Server Code script integrates with the Database.

One of the most common questions we get is how to work with the database, how to create, edit and delete data. This makes sense as virtually any mobile app needs to store data in a database and perform these basic operations. To access the database, we are going to use Server Code script. Server Code allows writing app logic using JavaScript which will be executed on the server. For example, a script can access the database, send a Push Notification message, sort data and invoke an external REST API. We will start with the most basic operation: how to read data from the database.

The database collection used in this post looks like this:

Database collection.

Database collection.

This can be data collected from a form inside an app – a form that collects information about the user.

Reading Data

Server Code script has out-of-the-box API to access the database to perform all the basic operations. The following script reads all objects from the above collection.

One line 2, the script retrieves all the data.

One line 3, the script response is set. A Server Code script is invoked as a REST API. The code on this line defines the API response.

A script can be quickly tested from the Run tab where you can see the JSON data:

Testing the script.

Testing the script.

Reading data from a database collection is fast and simple. Next, we are going to save data into the database.

Read the rest of this entry »

How to Build and Test an Ionic SMS App with Nexmo API

Posted: October 7th, 2016Author:

This video shows how to build and test an Ionic SMS app using Nexmo API. The video tutorial first shows how to create a backend to invoke Nexmo API. Then the Ionic app is created which uses the backend. The app is then tested in the browser and on the device using the Appery.io Tester app. The video also shows how to build a binary file for Android and iOS.

Also, check out how to create an app backend with API Express and Nexmo SMS API.

October Update: More Secure, Better Auto-Update, Binary Support, Google Maps and More

Posted: October 3rd, 2016Author:

We got some interesting stuff in October platform update, check out what’s new below.

More Secure with HTTPS

We switched to HTTPS to make everything more secure. If you are using any non-HTTPS API services a quick workaround is to invoke the API from the Appery.io Server Code or API Express.

Improved User Experience on Android During Auto-Update

This was a long requested feature from our community. When an Android device was checking and installing auto updates, the screen would simply go black which created a pretty bad user experience. We pushed a minor update which we believe will greatly improve the user experience. If an update is available you will see a short message explaining that the app is checking and installing updates.

Send Binary Data with API Express Service

It’s now fast and simple to work with binary data inside API Express service with the new binary option. For example, you can build an API Express service which uploads binary data to an external REST API service.


API Express binary data option.

Read the rest of this entry »

Video Tutorial: How to Expose a Custom SQL Query as a Login REST API Service

Posted: September 28th, 2016Author:

This video shows how to use the SQL and Script components to build a Login service. The SQL component runs a custom SQL query to check if a user exists in a database. The Script component adds custom logic to check what the SQL component returned and defines the response (user found or user not found).

Want to learn more how to connect to enterprise data source? Watch our API Express playlist.

Updates to Salesforce Import Service Inside the App Builder

Posted: September 28th, 2016Author:

Please read about upcoming changes here. It’s important to understand that invoking Salesforce APIs (or any APIs) is now perfomed using the Server Code or API Express. This update only impacts the App Builder (development time).

How to Validate an Email Field in a jQuery Mobile App Using a Regular Expression

Posted: September 21st, 2016Author:

pablo (45)

Validating an email entered on a form is one of the most fundamental requirements in any mobile app. In this blog post, we are going to show you how to validate an email input field using a regular expression. This blog post is a follow-up to How to Add JavaScript Form Validation to a Mobile App post.

Validating an email input field using a regular expression is very simple. Here is the code to perform email validation.

You can quickly add this code to any app inside a JavaScript file and reuse. Looking for more examples and how-tos? Check out YouTube channel for large number of short videos.

How to Add reCAPTCHA to an Ionic App

Posted: September 15th, 2016Author: and

reCAPTCHA is a nice service that usually added to a registration form and helps prevent bots from registering automatically. The service usually displays a small and easy challenge to a human but which would be difficult for a bot to answer. In this blog post we are going to show you how to add reCAPTCHA to an Ionic app.

Let’s start.

  1. Create a new Ionic app based on Ionic Blank template.
  2. Go to https://github.com/vividcortex/angular-recaptcha, download vcRecaptcha.js, and unzip the file.
  3. Inside the App  Builder, go Create New > JavaScript, name it vcRecaptcha, check Upload from file and select the angular-recaptcha.js file from your drive. For type, select Angular module and click Create JavaScript.
  4. Now, open Screen1 and add an HTML component to the page.
  5. Under the Properties panel, click Edit and add the following code:
    where 'XXXXXXXXX' is the key generated on https://www.google.com/recaptcha/admin (your key must be inside the double quotes).
  6. Switch to Scope view and add a new function, name it onSuccess, and add the following code to the editor:
    onSuccess() is the scope function that executes when the correct Captcha is entered (here, another page will open).
  7. To demonstrate this, create a new page and name it Success. Add a Text component to the page and paste Welcome! for its Text property.
  8. Also, if you want to add a solving annotating images to your reCaptcha, go to Project > Routing, click Manage dependencies for Screen1, and check reCaptcha.

That’s it. You are ready to test your app with the reCAPTCHA.


reCaptcha example.

Looking for more examples? Check out our sample apps list. Every app has preconfigured app UI and app backend for you to try.

Learn How to Build an Ionic App with an RSS Feed [Video]

Posted: September 9th, 2016Author:

Looking to add an RSS feed into your Ionic app? This video shows you to display an RSS feed inside an Ionic app.

Learn from other short YouTube videos on the Appery.io channel.

How to Build an App with API Express and External REST API

Posted: August 30th, 2016Author:

This short video shows how to build a complete app with an external REST API. This video covers:

  • Using API Express to connect to an external REST API. https://randomuser.me/ is used for the API.
  • Importing API Express service into the app (App Builder).
  • Designing the app UI (1 page).
  • Binding and using the service from the page.
  • Testing the app.

Looking for more videos? Visit our YouTube channel for many more short videos.