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.

How to Use Snippets to Speed Up Server Code Script Coding

Posted: May 18th, 2016Author:

Appery.io Server Code allows you to write any custom code using JavaScript that is executed on the server. For example, you can invoke any REST API, access the Appery.io Database and send Push Notification messages. The script is then invoked from the app (as REST API). Server Code allows you to write advanced app logic on the server and then elegantly invoke it from the app.

To simplify working with various Server Code APIs, we have created code snippets. A snippet is a short code sample that you insert into the script and it provides some functionality.Here is how to do it:

servercode_snippets

Check out our YouTube channel to learn how to use Server Code.

How to Add JavaScript Form Validation to a Mobile App

Posted: May 12th, 2016Author:

Validating user input is one of the most important requirements in a mobile app. The most common approach of form validation requires that you check the form fields before the form is submitted; this is to make sure that the required information is supplied. Today we will show you how you can validate the input fields in your app before submitting the information to the Appery.io Database.

In this example the app will have following simple design:

Form App design

Form app design

Read the rest of this entry »

Learn How to Add Geocoding Lookup in Your App With Server-side JavaScript

Posted: May 10th, 2016Author:

pablo (12)

Let’s say you are building a mobile app where you enter an address and need to get back the location as latitude/longitude information. To do this in Appery.io Server Code is super simple. Here is a Server Code script that looks up an address and returns the latitude/longitude information for the location using the Google Geocoding API:

When you run this script, the result looks like this (using Boston as input):

The script has an API which you can invoke from your app:

Here is an example invoking the script directly from the browser:

geolocation_result

Invoking Server Code script

With geolocation logic on the server, you can change the implementation — for example use a different API without making any changes to an app and impacting the users.

Want to learn more? Check out the large collection of videos we have on our YouTube channel.

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

Posted: May 3rd, 2016Author:

ionicapp_myapp

“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 as SendGrid) 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 blot 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?.

 

Video Tutorial: Creating an Ionic App with a Backend and an External API

Posted: April 21st, 2016Author:

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:

Screen Shot 2016-04-21 at 12.07.57 PM

Ionic app

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

Learn How to Expose a SQL Database via a REST API in 5 Minutes

Posted: April 18th, 2016Author:

This video shows how to use the Appery.io API Express visual editor to connect to a SQL database and expose it via a REST API. The SQL component is used to connect and execute a custom SQL query.

Watch other videos how to use backend services to build apps fast.

Video: Convert a SOAP Service Into REST API in 5 Minutes

Posted: April 12th, 2016Author:

This 5-minute video shows how to convert a SOAP service into a REST API using API Express. Once you have a REST API, you can easily build a mobile app with that API.

Learn how to use the Appery.io Backend Services from our short videos on our YouTube channel.

Development Tip: New ClientSDK Methods For Better Offline Apps

Posted: April 6th, 2016Author:

appery

One of the new key features of API Express is that you can build apps offline with the synchronisation functionality so when you go online all off your changes have been synchronised. The ClientSDK library has a set of methods, which when you execute can you build more powerful apps offline. The last Appery update bought us the ClientSDK library of API Express’ new methods to work with action histories made offline:

  • revertLocalChanges – reverts all local changes made in offline mode without clearing the cached data.
  • getDeferredActions – returns the iterator, which you can use further to iterate through the history array items.
  • saveDeferredActions – saves changes to a history, if there was any changes.

ClientSDK will automatically detect the network state and when a device is connected to the internet the ClientSDK synchronises with the server, and sends all offline changes (actions history) made by the user. You can find more information here.

Make sure you check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Development Tip: Internationalisation In AngularJS Apps With Angular Translate

Posted: March 30th, 2016Author:

angular-translate

Internationalisation is one of the must have feature when building global reach mobile apps. An Angular Translate module can be really helpful in translating your app UI. It can be included into an Appery.io app in a few quick steps:

  • Go to the Angular Translate page and download the latest release bundle. Inside this bundle you’ll find angular-translate.min.js file – the one that you need to upload.
  • Open your AngularJS Appery.io app, click CREATE NEW > JavaScript. Type angular-translate.min for the name and select Upload from file, and browse for this file on your PC. Also, change its Type to Angular module, check the Use shim check box and finally, type pascalprecht.translate for Shim exports: input. Click Create JavaScript once the file will be uploaded.
  • Now, another module should be created. It will be responsible for the Angular Translate configuration. Perform CREATE NEW > JavaScript, type AngularTranslate for the name, and choose Angular module for Type. Click Create JavaScript.
  • You’ll see an Angular module template and a lot of commented configuring options. First, this module requires pascalprecht.translate as dependency, so add it  to square brackets. Here is how it should look:
  • Configuration logic should be added to the module.config function. Here is how your whole module should look when the configuration logic has been added:
  • The last step is to create a simple UI and check the translation engine. Go to any page in your app, place a Button on the page and provide {{ 'TITLE' | translate }} for its Text property. Launch the app!
  • If you see Hello on the button – you’re done.

One option is to customise the translation mechanism to initiate the language based on the browser or device language. For example, you can get the browser or device language like this:

Try Ionic app backup with Angular Translate included if you facing some issues.

Read more Angular Translate possibilities in its docs, and make sure you check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!