Video: Learn How to Build a Mobile App with External REST API

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 the Appery.io YouTube channel for many more short videos.

Learn How to Connect Your App to an API Backend

This short video shows how to import backend services APIs into your app. Appery.io services consist of a cloud database, Server Code for custom app logic, and API Express for enterprise integration and service orchestration.

Our YouTube channel has many more short videos where you can learn how to build apps fast with Appery.io.

Moving App Logic to the Server: How to Save and Query an Appery.io Database from Server Code Script

The Appery.io Database provides storage for your mobile app data. You can store data such as users, orders, purchases, products or anything else. The Appery.io Database is a cloud NoSQL database and provides a very simple and elegant REST API to work with the database.

One of the most common cases for an enterprise mobile app is to create/save a new item/record and then redisplay the list in the app with the newly created item.

Accessing the database directly from the client is fine but requires two requests to the database.

  1. A request to save the new item/record into the database.
  2. Once the 1st request completes, on its success, a request to get the updated list to display in the app.

A better approach is to do both the create and list in a single request from the app. This is very simple to do from Appery.io Server Code script. The following script shows how to create a new record and then get the updated list:

var dbId = "cdaec951....d8";
var collectionName = "People"

var newName = request.get("name");
var newTitle = request.get("title");

// Save new object into the collection
Collection.createObject(dbId, collectionName, {
   "name": newName,
   "title": newTitle
});

// Retrieve updated data from the collection
var result = Collection.query(dbId, collectionName);
// Return the updated list (including the new object)
Apperyio.response.success(result, "application/json");

In this simple script you first create a new Person object (line 8) and then do another query to get the updated list of people (line 14). The script response returns the updated list of people. This script automatically has a REST API which is the invoked from the app.

What’s most important, there is only a single request from the app to the Server Code script. A single request is usually better than two requests. Also, you can add additional logic to the script without impacting the app. For example, you can send an email when a new person is added. Or, you can send  Push Notification when a new person is added. All this can be done without impacting the app. That’s nice.

If you want to learn more about Server Code, check out our YouTube channel Server Code playlist.

Tutorial: Building a Hello World App with Ionic

In this tutorial you are going to build a Hello World app with Ionic in Appery.io. This is how the app is going to look:

Screen Shot 2016-05-27 at 5.04.15 PM

Appery.io App Builder for Ionic.

You should finish this tutorial in about 10 minutes.

Continue reading

Moving App Logic to the Server: How to Query the Database From Appery.io Server Code Script

An Appery.io developer posted a question on the Appery.io Facebook page on how to write a Server Code script to query two different collections in the database. This post will show you how to do that.

In general, querying two database collections is better to do on the server-side than from the client. Doing it on the server is a lot faster and provides you with the option to update the search without impacting the client. Plus, you can add any logic when needed. Doing it from the client would require two REST API calls to the database.

Let’s jump into the example.

First, there are two collections in the Appery.io Database. They look like this:

ProductName collection:

Screen Shot 2016-05-24 at 4.42.32 PM

ProductName collection.

This collection is simple. It has a name and a code.

This is the ProductData collection:

Screen Shot 2016-05-24 at 4.44.33 PM.png

ProductData collection.

The code in this collection links the product name to the actual product (Android or iOS device).

The input to the script is the product type: Android or iOS. Based on the input, you lookup the code for the product (a or i) and then run a second query to find all iOS or Android phones in the ProductData collection. Here is the script.

var product = request.get("type");
var dbId = "367e9e77......";
var params = {};
var result = [];

// Search for object with the provided 'type' (iOS or Android)
params.criteria = {
  "name": {
    "$eq": product
  }
};
result = Collection.query(dbId, "ProductName", params);

// Find all objects with code 'i' or 'a'
params.criteria = {
  "code": {
    "$eq": result[0].code // Either 'i' or 'a'
  }
};
// Run the query
result = Collection.query(dbId, "ProductData", params);
// Script response (API response)
Apperyio.response.success(result, "application/json");

This script first searches the ProductName collection to find the id for iOS or Android devices. Then it searches the ProductData collection to find the actual devices.

Moving this logic to the server is a good idea as you query two collections (or even more) with a single request from the client.

If you want to learn more about Server Code, check out our YouTube channel Server Code playlist.

Can I Build [insert type] App With Appery.io?

“Can I build [insert type] app in Appery.io?” is probably one of the most common questions that we get. The answer is almost always yes, but I want to provide you with a more detailed answer.

Appery.io provides tooling to allow you to build and run hybrid mobile apps. You can build virtually any kind of app supported by the underlaying technology stack: HTML, JavaScript, CSS and Cordova (for native device access), plus REST APIs. The platform provides tools and a runtime to make it simpler and easier to build your app.

  • App Builder – for building the app (client).
    • Apache Cordova is installed in every app and gives you access to device APIs such as the camera.
  • Cloud Build – for packing the app for iOS or Android.
  • Backend Services
    • Database – cloud database for storing any app data.
    • Push Notifications – for sending targeted Push Notification messages.
    • Server Code – for coding any server-side logic using JavaScript.
    • API Express – for integrating with external/enterprise systems.
  • Appery.io Tester app – for fast testing of iOS and Android apps built in Appery.io without installing them directly on the device.

The platform provides you with the tooling and runtime services, which you would need to build a successful app. Having said this, the actual app logic still has to be coded or developed. For example, let’s say you want to send a Push Notification and email when a new users registers, and also record the activity into an external relational database. You can easily build this flow/logic in Appery.io.

  • The app UI (pages, navigation) is built in the App Builder.
  • The Database has built-in user management capability. This means you can register a new user and do a login/logout.
  • When a new user is created, you can write a Server Code script to send a Push Notification message and use email API (such asSendGrid) to send an email notifying people about this event.
  • Using API Express you can connect and expose a relational database via REST API. When a new user registers, you can invoke the API and record this event (registration) into an external relational database.
  • Using the Appery.io Tester app you can quickly test the app on the device (without actually installing it) and test any native APIs.
  • After the testing, you can build and package the app for iOS or Android with Cloud Build.

In general, Appery.io is a perfect fit for building and running business and enterprise mobile apps. Another way to look at our platform is that it is ideal for creating content or data-drive apps. You can also find the term form-based used sometimes. We don’t recommend to build apps that are heavy on graphics. This is not a Appery.io limitation, but a limitation of hybrid apps in general.

We hope this blog post clarifies what kind of apps you can build with Appery.io. We many videos on our YouTube channel to help you learn how to build apps to check out the channel.

Here is another blog post that talks about this topic: What Kind of Apps Can You Build with Appery.io?.

Creating an Ionic App with a Backend and API

This 8-minute video shows who to build an Ionic app with a backend and external API. The app is then tested in the browser. https://randomuser.me/documentation is used for external API.

The app shows a list of people in a list. The final app looks like this:

Screen Shot 2016-04-28 at 4.35.30 PM

Ionic app

Watch the video:

Want to learn how to build business mobile apps fast – check our the Appery.io YouTube channel for many more videos.

Integrating With PayPal API for Mobile Payments

PayPal is obviously one of the most popular services and APIs to use when you want to support payments in you mobile app. This tutorial will show you how to create a single payment using Appery.io Server Code. You can the use it as a starting point for all other APIs made available by PayPal.

If you read the PayPal documentation, the first step is to get a token so you can invoke PayPal APIs. Before you can get the token, you need to create an app in PayPal:

Screen Shot 2016-04-27 at 4.25.01 PM

Apps in PayPal

Every app has a Client ID and Secret values that you need to use to get a token.

Screen Shot 2016-04-27 at 4.31.49 PM

Client ID and Secret

The Server Code script below sends a request to PayPal to get a token:

var url = "https://api.sandbox.paypal.com/v1/oauth2/token";

var XHRResponse = XHR2.send("POST", url, {
  "parameters": {
    "grant_type": "client_credentials"
  },
  "headers": {
    "Accept": "application/json",
    "Accept-Language": "en_US",
    "Authorization": "Basic clientid:secret_as_base64"
});

Apperyio.response.success(XHRResponse.body, "application/json");

The response looks like this:

{
 "app_id": "APP-80W2.....",
 "access_token": "A101.VyA8xBdNyOY.....",
 "token_type": "Bearer",
 "scope": "https://uri.paypal.com/....",
 "nonce": "2016-04-27T23:15:21Zahq3.....",
 "expires_in": 31284
}

The access_token is what you need to invoke any other PayPal API.

Now that you have the token, you can invoke any PayPal API. In the next script I create a payment (charge):

var url = "https://api.sandbox.paypal.com/v1/payments/payment";

var XHRResponse = XHR2.send("POST", url, {
 "headers": {
    "Content-type": "application/json",
    "Authorization": "Bearer A101.VyA8xBdNyOY....."
 },
 "body": {
    "intent": "sale",
    "payer": {
       "payment_method": "credit_card",
       "funding_instruments": [{
          "credit_card": {
             "number": "4060xxxxxxxxxxxx",
             "type": "visa",
             "expire_month": 06,
             "expire_year": 2019,
             "cvv2": "874",
             "first_name": "Betsy",
             "last_name": "Buyer",
             "billing_address": {
                "line1": "111 First Street",
                "city": "Saratoga",
                "state": "CA",
                "postal_code": "95070",
                "country_code": "US"
             }
          }
       }]
    },
    "transactions": [{
       "amount": {
          "total": "7.47",
          "currency": "USD",
          "details": {
             "subtotal": "7.41",
             "tax": "0.03",
             "shipping": "0.03"
          }
       },
       "description": "This is the payment transaction description."
       }]
    }
});

Apperyio.response.success(XHRResponse.body, "application/json");

The payment example was adopted from PayPal API documentation

One important thing you need to do is use a valid credit card number from your test account. Without a valid credit card number, the request will not work. To find your credit card number go to Sandbox > Accounts, expand your account and click Profile. Select the Funding tab and use the credit card and expiration data from there for the test payment.

Once you have a working Server Code script that creates a payment in PayPal, you can use the script in your mobile app. A Server Code script is automatically exposed via a REST API which you can call from your app. We have many videos on our YouTube channel that show how to use Server Code and other Appery.io backend services.

Here Is How to Secure a Cloud Database

The Appery.io Database is a cloud database for storing any app data. The app communicates with the cloud database via simple REST API.

To access the database, the database API key is added to each request.

What if you need extra security? Any database collection can be configured with extra security in a few seconds.

Screen Shot 2016-04-22 at 1.05.08 PM

Database collection security and permissions

When you configure a collection with extra security, a user session token has to be included in every request. How to get the session token? A user (from Users collection) needs to do a login. When a login is successful, a session token is returned. This session token is then used with every request. Without the session, the collection can not be accessed.

Another layer of access can be set by checking or unchecking the Read/Write permission. For example, if you uncheck Write, then no request will be able to write anything into the collection, only read the data.

Both the security and Read/Write permissions can be overwritten by including a special master key – which acts as root access.

The Appery.io Database can be configured with a number of security and permissions options to give you the most flexibility when creating your mobile app.

What to learn more? Check out our YouTube channel for many short videos.

What is Appery.io? – The Complete Series

For the past two weeks I have been writing about the core Appery.io platform components. Below you will find the complete series and links about these components.

Want to learn more? Check out our YouTube channel for many short videos on how to build apps fast.