Building Better Ionic Apps with Ionic Pro, Part 1

Part1: Ionic Creator
Part2: Ionic DevApp
Part3: Ionic Monitor
Part4: Ionic Deploy

With the technology shift in the modern era of computation, over 44 percent of the world’s population was predicted to use smartphones by 2017. According to Statista, the number of smartphone users around the globe is around 2.32 billion. For almost every new business coming into existence, the medium of connecting to the customers/audience is via cell phones. In other terms, mobile apps.

While performance, user interface, and user experience are important aspects of an application for an end user, there are other factors that are important for the developers and the development environment too. This includes the language, the framework (if any), as well as the tooling and the ecosystem that surrounds the language (and/or the framework). And IONIC is by far one of the best frameworks out there that lets you create quick hybrid mobile applications with a strong ecosystem and tooling.

Ionic Pro

While Ionic is awesome for creating hybrid mobile apps, Team Ionic also introduced Ionic Pro. It is a cloud platform that integrates your Ionic app with a number of cool tools that let you:

• Privately share test versions with a simple email invitation
• View all tester feedback in a central dashboard
• Deliver different versions and releases to specific segments of users
• Track and analyze errors in your code to improve app quality
• *Ship updates in realtime, without going through the app stores

*While Apple allows hot code pushes, it only allows code pushes that execute inside the webview or the JavaScript core itself. Any updates that affect the Native SDKs have to go through the App Store’s distribution process. See section 2.4.5.7 of the App Store Review Guidelines.

You can read more about what Ionic Pro offers here. We will go through Ionic Pro’s tools and services to create a sample Ionic application that leverages the power of the platform. To follow along, you have to create an account on the ionic platform first.

Ionic Creator

We’ll start with using Ionic Creator to initiate our app and with its easy-to-use interface, we’ll develop the app quickly. For creating rapid prototypes, it is highly recommended to use Ionic Creator. First, you need to log in to the Ionic Creator app. The application I’ve created using Ionic Creator looks like this:

Our app, built with Ionic Creator

Once you’re done prototyping, you can export your app using the Export button as shown below:

Once you’ve downloaded the zip, extract its contents to a folder. You can then create a new project for your app. For this, it is required that you have the latest version of Ionic CLI installed. You can then open a terminal/command prompt and type:

ionic start notes-app

Select the blank starter project. After doing some processing, the Ionic CLI may ask you the following:

Install the free Ionic Pro SDK and connect your app? (Y/n)

Press Y and then enter to continue. It may then ask for your email:

Log into your Ionic account
If you don't have one yet, create yours by running: ionic signup
? Email:

You can enter your email to log in. Once you’re logged in, the Ionic CLI will ask for your preferred way of connecting to Ionic Pro:

You may choose based on your preference. Once that is taken care of and the process is finished, it will ask you which app you want to link to this project:

Select Create new app for now and name it notes-app (or a name you like). Once that’s taken care of, you’ll see a beautiful message from the CLI explaining the next steps:

Next Steps:
* Go to your newly created project: cd ./notes-app
* Get Ionic DevApp for easy device testing: https://bit.ly/ionic-dev-app
* Finish setting up Ionic Pro Error Monitoring: 
https://ionicframework.com/docs/pro/monitoring/#getting-started
* Finally, push your code to Ionic Pro to perform real-time updates, and more: git push ionic master

I personally love that the CLI is guiding the developers to the amazing stuff itself. Now, we’ll copy the contents from the zip in our project. Below is a comparison of the contents in our source folder and in our target folder:

Copy the unzipped files and folders to the src folder of the project. Replace/Overwrite any duplicate files if prompted. Once you have done that, execute the command below to see the app up and running:

ionic serve

You might see some differences in the element styles rendered via ionic serve. The reason is that Ionic Creator focuses more on the element’s structure and shows the basic styles of each component. This is a great way to start building your app visually. You can then export and start working on the features.

Part 2

In part two, we will see how to use the Ionic Dev App which makes for really fast viewing and debugging your applications on your devices (Android & iOS) without having to go through the hectic process of installing the Native SDK(s).