Video Tutorial: How to Build and Test a Complete Mobile App with API Backend

This video shows how to build and test a complete Ionic app with an API backend. The tutorial starts by showing how to create an app backend with API Express by connecting to an external REST API. 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.

Check out other videos on how to build mobile apps fast.

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: How to Build an Ionic App with an RSS Feed

This short video shows how to build an Ionic app that connects to an RSS feed. You can click on a link and navigate to the article. RSS feed used in this tutorial: http://feeds.gawker.com/lifehacker/full.

There are many more videos on the Appery.io YouTube channel to help you build mobile apps fast.

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.

Quick: How to Map Data Between AngularJS Scope and Service

visual_mapping_gif

Quick: How to Add REST API Service Invocation to AngularJS Scope with Drag and Drop

1t86zXZ3Kx

How to Use Mollie for Mobile Payments in Ionic App

Mollie is in the same space as PayPal, Stripe and enables your business to receive online payments. Mollie also offers APIs for developers which means you can easily add Mollie supported payments to your Appery.io app.

Connecting to Mollie Payment API

To show you how simple it is to connect to Mollie API, I created a Server Code script that initiates a payment.

var url = "https://api.mollie.nl/v1/payments";

var XHRResponse = Apperyio.XHR2.send("POST", url, {
  'body': {
    'amount':'350.00',
    'description': 'My cool new product',
    'redirectUrl': 'http://appery.io'
  },
  "headers": {
    "Authorization": "Bearer test_qgzeg5Bb................"
  }
});

Apperyio.response.success(XHRResponse.body, "application/json");

This is how the script looks in the Server Code editor. The right side shows the script tested and the response from Mollie:

Screen Shot 2016-03-28 at 2.43.03 PM.png
Testing Mollie payment API

Building an Ionic app

Once you tested the connection to Mollie Payment API, the next step is to build an Ionic app that uses the script and makes a payment.

This is how the Ionic app looks inside the visual editor:

Screen Shot 2016-03-28 at 3.01.43 PM
Ionic app

In this app you can enter a price, and product description. When you click Purchase, the script you wrote above will be invoked. In the Payment ID card you show the transaction id from Mollie. This means the payment was successful. You can include any other information from Mollie Payment response.

Running the app:

Screen Shot 2016-03-28 at 3.07.15 PM.png
Running the app

This is how the scope looks with the makePayment function:

Screen Shot 2016-03-28 at 4.27.18 PM.png
AngularJS scope in the Ionic app

Connecting to any API is very straight forward using Server Code script as you can see in this short example.

If you like this, quickly create an Appery.io account and build your next app with any APIs.

 

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

Screen Shot 2016-01-11 at 4.04.07 PM.png
API Express visual editor

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:

  • Relational database.
  • WSDL service (SOAP).
  • REST API. Connecting to an existing REST API allows you to apply logic to the response. For example, you can filter the result and only return the data needed to the client.

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

Continue reading “How to Expose a WSDL Service (SOAP) as REST API”