Blog

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:

• A Quick Guide to Using Geolocation API (Ionic App) 
• A Quick Guide to Using Geolocation API (jQuery Mobile App)

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

Christophe Bruchansky, an Appery.io customer has built a wonderful iOS app using the Appery.io platform. Read about his app, how he built it, and install it on your iPhone.

New Habit is a free iPhone app that aims at giving you that little boost you need to stay motivated. Choose between five personal goals, such as enjoying the present moment, feeling the love, or being more healthy. And get a daily digest of inspiring questions to ask yourself, motivational quotes, articles, and videos. In less than five minutes, a virtual life coach will guide you through three daily inspirations and give you that feeling of completion.

New Habit app.

It is based on the Ionic framework and developed using the Appery.io platform for both the front-end and back-end. Appery.io rapid development platform helped reduce development time, with Javascript code that works both on iOS and Android.

For backend services, the app uses Push Notifications, cloud database, and Server Code for server-side JavaScript app logic. The app integrates with Aylien API which is used for sentiment analysis and deep learning technology to provide the most relevant and positive articles on the web. The app also integrates with YouTube API for its videos.

Many health and wellbeing apps overwhelm their users with tasks and information to read, making them arguably more frustrated and self-obsessed than before. New Habit aims at being simple and satisfying, at opening a bit people’s horizon and helping them to have a more holistic approach to their personal goals.

Christophe said:

My belief is that people need to get more positive influences in order for them to stick to their resolutions. I thought I could create an app that gives the same sense of satisfaction than mini-games, but with a purpose, something people could actually use to changes their lives.

To install the app and learn more, please visit the following links: 

Website: http://www.newhabit.today/

App Store: https://itunes.apple.com/us/app/new-habit/id1115595850

Facebook: https://www.facebook.com/newhabit.today/

Twitter: @newHabit_today

This video shows how to build and test a complete Ionic app with an API backend.

The video tutorial starts by showing how to create an app backend with API Express by connecting to an external REST API (https://randomuser.me/).

Then, the tutorial shows how to build an Ionic app and import the backend service into the app. The tutorial also shows how to make a small change to the generated code. The tutorial then shows how to test the app in the browser and also on a device using the Appery.io Tester app. Lastly, the tutorial shows where to build a binary file for iOS or Android for submission to an app store.

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

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.

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.

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:

   <div vc-recaptcha key="'XXXXXXXX'" on-success="onSuccess()"></div>
   

   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:

   Apperyio.navigateTo("Success");

   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.

Updated: March 11, 2021

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

You should finish this tutorial in less than 5 minutes.

Read the rest of this entry »

Here is how to add REST API invocation with a simple drag and drop:

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:

   <video controls="controls" width="640" height="340" name="Video Name" ></video>

   

   Edited HTML tag

3. Save it and switch to the SCOPE tab.
4. For the init() function, pass the following:

   $scope.makeAction();

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:

   var vidURL = "urlToVideo";
   var myVideo = document.getElementsByTagName('video')[0];
   myVideo.src = vidURL;
   myVideo.load();
   myVideo.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.

Our friends at Ionic Framework published a very nice tutorial on how to build an Ionic app with an external API. We figured it would be a good idea to show how to build the same app in Appery.io. In this 8-minute video tutorial you will learn:

1. How to build a simple Ionic (version 1).
2. How to create a mobile backend for the app.
3. How to invoke an external API.
4. How to test the app in the browser.

The final app shows a list of people loaded from an external API:

Ionic app

Want to learn more? Check out many other short videos on how to build mobile apps fat on our YouTube channel.