Using Geolocation in a Mobile App: A Video Guide

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

How to Build and Test an Ionic SMS App

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.

Looking for more videos to help build mobile apps? Check out the Appery.io YouTube channel.

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.

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 “Tutorial: Building a Hello World App with Ionic”

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.

What is Appery.io App Builder?

In three previous blog posts I told you about Appery.io Server Code, Push Notifications and API Express. Appery.io App Builder is another core component in the platform. The App Builder is where you build your app (the client side). The App Builder is where you design and build the app pages, drag and drop UI components, define navigation between pages and any other UI logic.

When you create a new app in the App Builder, you can create an app with one of the following UI frameworks:

  • Ionic
  • Bootstrap
  • jQuery Mobile

Every new app that you create (regardless of the UI framework) comes with Apache Cordova (PhoneGap) installed. Cordova enables you to access native devices APIs via JavaScript. The following Cordova plug-ins are available out-of-the-box:

  • Cordova Media Plugin
  • Cordova Device Plugin
  • Cordova Contacts Plugin
  • Plugin for Google Analytics
  • Cordova Network Information Plugin
  • Cordova File Plugin
  • Cordova Device Orientation Plugin
  • Cordova Console Plugin
  • Cordova File Transfer Plugin
  • Cordova Globalization Plugin
  • Barcode Scanner Plugin
  • Cordova Splashscreen Plugin
  • Cordova Camera Plugin
  • Cordova Vibration Plugin
  • Cordova Battery Plugin
  • Push Notifications Plugin
  • Cordova Media Capture Plugin
  • Cordova Device Motion Plugin
  • Cordova InAppBrowser Plugin
  • Cordova Notification Plugin
  • Cordova Geolocation Plugin

3rd party and custom Cordova plugins can be added as well.

The app is designed using the visual drag and drop editor. At the same time, you can write any custom code to customize the app as much as you need. As you are building a hybrid mobile app, you can write custom HTML, CSS, and JavaScript. You can also import any custom JavaScript libraries.

In addition to creating a hybrid app, you can also build a mobile web app that runs directly in the browser. When you are done building your app, you can get:

  • Android app (Cordova)
  • iOS app (Cordova)
  • HTML5 mobile app

Right inside the App Builder you can launch the build service which will package the app for either Android or iOS. If you are creating an HTML5 mobile app, you can host the app with the Appery.io platform or export the web resources (HTML/JS/CSS) and host it on a server of your choice.

Every mobile app has to talk to some backend or server. Your app can easily use Appery.io Push Notifications, Server Code, API Express or the Database for its backend. Your app can also easily connect to any 3rd party API.

To test the app, you can launch it directly in the browser. This is the case where you can test everything but the native functionality. To test any native functionality, you can test the app inside the Appery.io Tester app for Android or iOS. This app allows you to test your hybrid app without installing it on the device.

A Weinre debugger is also available to debug the app when installed on the device. When running and test the app directly in the browser, you can use the powerful Chrome Developer Tools for debugging.

We have a number of short videos on building an app on our YouTube channel here.

Happy coding.

How to Start Building Ionic Apps in Appery.io App Builder

This is the first webinar in our 2016 webinar series and introduces you to the App Builder and how to build apps with Ionic/AngularJS.

In this video you will learn:

  • How to create a new Ionic app
  • Learn about various views inside the App Builder for Ionic and AngularJS
  • How to build an app connected to a cloud database
    • How to build the app UI using the Design view
    • How to map data between scope and services using the visual Mapping view
    • How to bind data between scope and page using the visual Binding view
  • How to test the app quickly in the browser

Check out this video now:

To learn more how to build apps fast, go to our YouTube channel.

How to Create and Test Uber REST API in Ionic, Angular Mobile App in 3 Minutes

This 3-minute video shows how to create and test a REST API. Uber API is used in the example.

Check out many other videos on Appery.io YoutTube channel.

Tutorial: Building a Todo Mobile App with Ionic, Angular, Appery.io Visual App Builder and Database

For years, developers had to make a choice: build a single hybrid app with a so-so user experience, or build a native app for each platform with a great user experience. Developers don’t have to make this choice anymore. By integrating the Ionic SDK into Appery.io, developers can build enterprise HTML5/hybrid apps on a single code base that offer a native experience across all platforms. The Appery.io platform’s visual tooling lowers the skills barrier, empowering a broader base of developers and business analysts to create effective and intuitive mobile applications.

In this tutorial, you will use the Appery.io platform to build a mobile app. The tool set includes:

  • Ionic – native-like UI components
  • AngularJS – UI logic/binding
  • Appery.io App Builder – cloud-based drag and drop designer
  • Appery.io Backend Services – API backend for the app

What are you building?

You are going to build a todo app. The app will have two pages. On the first page, you will be able to see a list of all tasks and also mark a task complete (delete it). On the second page, you will be able to create a new task. You can see how the app looks below. The first page lists all the tasks. You can also mark a task completed (delete it). On the second page you can add a new task.

Continue reading “Tutorial: Building a Todo Mobile App with Ionic, Angular, Appery.io Visual App Builder and Database”