Develop, Deploy and Test Ionic Apps

Develop, Deploy and Test Ionic Apps

Introduction

A challenge faced by many mobile app developers is needing to have specialized skills for each platform. iOS and Android each have completely different development environments. Thankfully, today we have the ability to use cross-platform development environments which lets you write an app once and publish it to any mobile platform. The framework we will be looking at is the Ionic framework. Please follow our step-by-step guide to installing and setting up your system to build Ionic Framework apps.

What is Ionic?

Ionic makes it easy to build high-performance mobile and Progressive Web Apps (or PWAs) that look and feel beautiful on any platform or device.

Ionic’s open source Framework and developer-friendly tools and services power apps for some of the world’s best-known brands - from highly successful consumer apps like Sworkit, Untappd, and Dow Jones MarketWatch, to mission-critical apps supporting Nationwide, Amtrak, and NASA.

The open source Ionic Framework features a rich library of front-end building blocks and UI components that make it easy to design beautiful, high-performance mobile and Progressive Web Apps (or PWAs) using web technologies like HTML, CSS, and JavaScript.

Setup & install

Node & npm

To build Ionic Framework apps, the only requirement is a Node & npm environment. Go to Node’s download page to select and download the LTS version to ensure the best compatibility.

Node is bundled with npm, the package manager for JavaScript. To verify the installation, open a new terminal window and run:

Install Ionic CLI

Now that Node.js and npm are installed, install the Ionic CLI globally with npm:

Note: If you have an issue with the permission for installation with ionic, please run the command with sudo.

Login to your Ionic Account from the CLI

Make sure you have an account on Ionic. If you don't have once, access to https://ionicframework.com/ and create an account.

In order to take advantage of the additional services provided by Ionic Pro you’ll want to login.

If you have already logged in ionic, the console will show:

Create your app

Create an Ionic app using one of our pre-made app templates. The three most common starters are the blank starter, tabs starter, and sidemenu starter.

In this tutorial, I will create an Ionic app using our “Tabs” app template. To begin the installation, open a new terminal window and run:

Type “y” and press Enter. Project setup may take a few moments.

Would you like to integrate your new app with Cordova to target native iOS and Android?

Enter Y during the prompt if you’re intending to target iOS & Android.

Install the free Ionic Pro SDK and connect your app?

Ionic Pro is a set of tools that help you manage the lifecycle of your Ionic apps, including runtime error monitoring and troubleshooting, building and distribution native binaries, and deploying live updates and bug fixes right from the Ionic dashboard. It’s completely free to get started and comes with your Ionic account.

Enter Y during the prompt to connect your app to Ionic Pro.

Which app would you like to link?

Select Create a new app and give it a name when prompted. Note: I created a new app, so I will link an existing app on Ionic Pro 

Which git host would you like to use?

You can push you code directly to Ionic via our git host over SSH or you can link your app to GitHub or other supported third party git hosts and we can access your changes from there.

If you are not using GitHub you can push your source code directly to Ionic Pro using Git. Simply choose Ionic Pro as your git remote during the prompt.

That’s it! Now, you have created your own app.

Next, go to your newly created project:

Run the app

Run this command next:

Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increase development speed.

To end ionic serve use Control + C.

Build a Native Binary

Build native apps in the cloud for iOS / Android with the right dependencies every time.

You can access https://dashboard.ionicframework.com/apps to see more guide.

However, I will focus on how to build an debug file on the Terminal window.

To generate an APK file, run:

The output looks like:

To generate an IPA file, run:

The output looks like:

Testing your apps on real devices

In this part, I will guide you how to use Kobiton Cloud to test your apps. A Kobiton account is required to access Kobiton system. If you do not have a Kobiton account yet, go ahead to create a free trial account and sign in. It takes just a few moments.

  • Uploading Mobile Apps to Kobiton Store for Testing
  • Launch a manual test with your expected device
  • Modify your desiredCaps to automate your app with the expected device
    • You can set your test to reference the application at the Kobiton Storage URL with the app capability, as shown in this example for Java.
Tags:
No Comments

Post A Comment