What about iOS 11 Support?

Posted: September 22nd, 2017Author:

iOS 11 came out of beta on September 19th. But, don’t worry. The Appery.io team is close to putting the final touches on our full support for the new version of the iOS. As soon as it’s ready, we will be announcing it here. Stay tuned!

A Quick Note: GeoPoint Data Type Update

Posted: September 12th, 2017Author:

OAuth Login with Google App in Android/iOS Apps (An Update)

Posted: July 26th, 2017Author:

This blog post supplements “OAuth Login with Google App” in the Appery.io documentation.

Since April 20, 2017, all OAuth requests through InAppBrowser are blocked (see http://blog.ionic.io/google-oauth-changes/ for details). Now it’s necessary to use the Google Sign-In Cordova/PhoneGap plug-in.

So, first of all, download the plug-in and add it to the project (more details on this).  When ready, you can proceed with specifying the settings for iOS or Android apps. We’ll describe both ways and then show you how to set up your app at the end.

Google setting for iOS projects

  1. On the Google project page, go to the Credentials tab and select Create credentials > OAuth client ID
  2. In a new window, select iOS.
  3. Define the Bundle ID (you can get it from App settings > iOS binary > Bundle ID).
  4. Click Create.
  5. Now, copy the iOS URL scheme from the created Client ID:
  6. Add the iOS URL scheme as the REVERSED_CLIENT_ID parameter of the Google Sign-In plug-in and save:

Ready!

Google setting for Android projects

  1. On the Google project page, go to Credentials and select Create credentials > OAuth client ID
  2. In a new window, select Android.
  3. You will need the SHA-1 fingerprint of the certificate that you are using for signing up your app to link the client ID to the app. To get it, export your certificate (Resources > Certificates) and run the following command in the console:

    keytool is a key and certificate management utility.

    It is included in the jdk, you can install either jdk or download the keytool utility.

  4. The obtained SHA1 code should be added to the Signing certificate fingerprint.
  5. Insert the Package name (App settings > Android binary > Package name).
  6. Click Create.

Changes to make to the Appery.io project

  1. Add the button Login with Google on Device on the LoginWithGoogle page.
  2. Add the following JavaScript code to the click event:
  3. Duplicate the Welcome page and rename it to WelcomeOnDevice.
  4. Remove the JavaScript code from the Page show event (leave only Invoke service there).

Please note that the selected Android certificate will only work with the release option enabled.

Moving App Logic to the Server: How to Query the Database from a Server Code Script

Posted: May 24th, 2017Author:

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:

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.

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

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.

How to Use the HTML Video Tag to Play Videos in an Ionic/AngularJS App

Posted: May 23rd, 2016Author:

When building an Ionic/AngularJS app with the Appery.io App Builder you can add an HTML component to play back video files.

In this tutorial, you will learn how to do this.

To start, you need to create a new Ionic app.

  1. Drag an HTML component to the page and click Edit to modify the code.
  2. Add the following to the tag editor:

    EditHTML

    Edited HTML tag

  3. Save it and switch to the SCOPE tab.
  4. For the init() function, pass the following:
  5. Now, create a new function and name it makeAction and add the next code, replacing urlToVideo with the URL of the video you need to play:

Below is the example of playing back the video with URL = http://clips.vorwaerts-gmbh.de/VfE_html5.mp4:

Sample video playback with embedded player

Note that some HTML video may be unavailable for playback.