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.

Passing Data from Modal to Parent

Posted: July 25th, 2017Author:

Today we’ll show you a small example of how to pass data from a modal to its parent.

  1. Create a model as shown in the screenshot below:

    Create Model

    Create Model

  2. Then, define a scope variable “user”, based on this model on the index page.
  3. Create a simple page to run the modal and show the global variable “user” like this:

    Screen page

    Screen page

  4. Create a simple modal with the same structure as the page above (to show the variable “user” and change its property):

    Modal page

    Modal page

  5. Open the modal you’ve created from the page of your application with the JavaScript code below:

That’s it! Now you can run the application. You can change the user’s name on the page and see its value on the modal. Go ahead. Change the user’s address on the modal and see this value displayed on the page.

Here Comes the June 2017 Platform Update

Posted: June 23rd, 2017Author:

Here are some highlights of what’s coming in our June platform update rolling out on June 25th.

New Ionic Component

We have added a new component for the Ionic palette in Appery.io, the Slide Box. It’s a simple component that allows you to create a pretty handy little widget for your mobile application. The Slide Box lets you embed a set of images (or random HTML) and then display them one item at a time.

Importing Cordova Plug-ins from GitHub

Now you can grab Cordova plug-ins directly from GitHub, which is faster and easier. Just find the plug-in you want on GitHub, click the Clone or Download button and copy the plug-in’s URL.

Then, in Appery.io, go to the Resources tab and find the new Cordova Plugins tab. In the tab, click on the green Import Cordova Plugins button, select the From Git tab in the dialog box, and paste the link to the plug-in that you copied from GitHub.

From now on, when you open your projects you’ll see this plug-in among the imported plug-ins.

Panels Changes

We received a few requests to make work with panels more comfortable. So, we have added a close button on the Outline and Palette panels. Also, you can easily switch now between normal and small buttons. Hope you like it.

Database Export

The issues we had with database export were annoying, but we have good news. We have fixed this critical bug.  And even more… Now you can export individual collections from your database. Hope, you’ll find this useful.

Server Code Statistics

We know you want to know more about your Server Code script usage, and now you get this option. Select your Server Code, click on the Statistics menu item, and you’ll see the new tab called Reports. There you can find information about your Server Code activities filtered by date.

And More Changes

New Google Map Component

The Ionic and Bootstrap Google Map component was updated. Now we use the more stable version 2.1.6, Errors in the previous version have been fixed.

Android SDK

Most of you have Facebook accounts and want to have Facebook integration in your apps. With the latest Android SDK version included in this release, you’ll find that the Facebook4 plugin is supported.

More Image Formats

Now SVN and ICO images are supported by our Media Manager. More pictures in your apps!

SHA1 and SHA256 Certificates

Now, when you download your certificates from Appery.io, you’ll find SHA1 and SHA256 certificates in the exported zip file. These would be useful for Firebase integration.

Bugs (Less of Them)

No update is complete without bug fixes. So, yes, we fixed a great number of large and small bugs to make the platform better.

Get in Touch

If you run into any hiccups with this release (Hey, we aren’t perfect.), please reach out to us via the forum or by sending us an email (by signing into the platform and clicking the Get Help link at the top).

A Quick Guide to Sending Push Notifications with the Appery.io Platform

Posted: June 21st, 2017Author:

Being able to send Push Notifications to users is one of the fundamental capability in an enterprise mobile app. Appery.io platform comes with Push Notifications component out-of-the-box and allows you quickly to send targeted messages to iOS and Android devices. In this blog post we will show the four ways to send a Push Notification message to a user:

  1. Push Notifications Console.
  2. Server Code Push Notifications API (server-side).
  3. Push Notification REST API.
  4. Customer Console.

Push Notifications Console

This first option is probably the simplest way to send a Push Notifications once you have installed an app on a device. Select device types, enter the message and send. The Push Notification message should arrive on the registered device instantly.

Push Notifications console

Push Notifications console

Read the rest of this entry »

How to Build a Cordova App Fast

Posted: June 12th, 2017Author:

One of the core components in Appery.io platform is a cloud build service which builds a binary file (hybrid) for iOS or Android. Appery.io leverages Apache Cordova (PhoneGap) to create a binary file. Launching the build process is very simple. Right from inside the App builder, clicking the Export button you will see the option to create a binary file for iOS or Android.

Export menu

Export menu

Once Binary (.ipa) or Binary (.apk) is selected, the build process starts. The build process usually takes one minute. When the build is completed, the file is downloaded to your computer. From there you can publish the app to an app store, using the standard publishing process for each store.

Learn more about how to use Apache Cordova in Appery.io to build hybrid apps and use native APIs.

Learn How to Build an Appery.io Hybrid App to Accept Payments in Bitcoins

Posted: June 8th, 2017Author:

Learn how to build an Appery.io hybrid app to accept payments in Bitcoins

Bitcoin is a cryptocurrency and a digital payment system with 5.8 million users. In this blog post, you will learn how easy it is to build an Appery.io hybrid app to accept payments in bitcoins. It just takes a few simple steps to build the app and ready the payment ecosystem.

First, you need to get a merchant sandbox account on the BitPay server at https://test.bitpay.com/get-started. There are other payment servers, but BitPay currently is the largest and oldest bitcoin payment processor in the world, serving industry-leading merchants on six continents.

Next. You need to import a plug-in that will be the prebuilt (mostly prebuilt) client app. To do this, when the App Builder loads, choose the creation From Plugin option and check the BitPay App plug-in. (Learn more details about how to build an Ionic app in Appery.io.)

Then, you need to add one more piece to Appery.io, the BitPay Cordova plug-in. Go to https://github.com/bitpay/cordova-sdk and save this repository as a ZIP file. Upload this file to Appery.io to install this plug-in. (Please read this for more information about installing Cordova plug-ins into Appery.io.)

Next, Generate a BitPay API token with point-of-sale capability without client authentication at https://test.bitpay.com/api-tokens. With this done, get back to your app to set the token value. At this point, a distribution certificate should be associated with your app as described in https://docs.appery.io/docs/appexport-certificate-management.

Finally, as a customer making purchases with BitPay App, you need a bitcoin wallet installed on your phone. A bitcoin wallet is an app that lets you receive, hold, and spend bitcoins. This list shows bitcoin wallets supported by BitPay.

And, one more thing. After all of this is done, please make sure you switch to a merchant production account on the BitPay server at https://bitpay.com/get-started.

That’s all.  Now your app is ready to take bitcoin payments.

How to Convert Phone Numbers Into Real Business Data with EveryoneAPI

Posted: June 6th, 2017Author:

EveryoneAPI by Telo allows to convert a phone number into real business intelligence with a simple API request. The complete reverse phone append product is simple to use, yet powerful and built for developers by developers. As you probably already know, integrating with any 3rd party REST API using the Appery.io Server Code is also simple. In this blog post, I will show you how to invoke a test a script that calls the Everyone API.

To start, create a new Server Code script with the following code:

The only thing you need to do, is to replace the auth_token and account_sid with values from your account. Sign up for an account here. It’s fast and simple.

The phone number for which you want to get information is passed as a parameter to the script (line 1). To test the script, switch to Script parameter tab (on the right side), enter a parameter called telephone and then set it to a test value. Here is an example testing the API using the Appery.io telephone number:

Server Code script

Server Code script

Once you finished and tested the script, you easily import into your app. This video shows how to do that.

Looking for more APIs by Telo? Check out the CallerID Server Code plug-in:

Plug-ins

Plug-ins

This plug-in creates a Server Code script that integrates with OpenCNAM API. The OpenCNAM API allows you to get caller ID information for phone number provided.

How to Use Geolocation in Your Mobile App

Posted: May 30th, 2017Author:

geolacation_map

 

Geolocation is one of the most widely used APIs in mobile apps today. From weather to Uber and Lyft, the device location is crucial information and many APIs use it to determine what services and products are available in a given location. When building a mobile app in Appery.io, using the Geolocation API is simple. Apache Cordova library is built-in in every new Appery.io app. Invoking Geolocation will return the latitude, longitude (and other) information which can then be passed to any REST API. The following two short videos show how to use and invoke Geolocation in an Ionic and jQuery Mobile apps:

Looking for more videos like that? Check out our YouTube channel for many more videos.

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 Expose a SOAP Service as a REST API

Posted: May 18th, 2017Author:

apiexpress-soap

Appery.io API Express make it fast and simple to connect to an enterprise data source and expose it via a REST API. With API Express you can quickly create an API for:

  • A relational database
  • A WSDL service (SOAP)
  • An existing REST API

In this tutorial, I’m going to show how to expose an existing WSDL service as a REST API and then build a mobile app using the API.

Read the rest of this entry »