Intro to Ionic

Objectives

By the end of this lesson, developers will be able to:

• Describe the history and use of Ionic
• Describe the structure of a typical Ionic app
• Edit and build an Ionic page
• Test an Ionic app with Ionic view

What is Ionic?

From Wikipedia: Ionic is a complete open-source SDK for hybrid mobile app development. Built on top of AngularJS and Apache Cordova, Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova. Ionic was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.

The idea is that one app, generated with HTML, CSS, and JS, can operate on the web, for iOS devices, for Android devices, and more.

Your first app

1. The newest version of Ionic allows you to create an app in one line. Use this guide to get started.

2. A question - Would you like to integrate your new app with Cordova to target native iOS and Android? - will pop up in your terminal when you run this command. Reply with y.

3. Another question - Install the free Ionic Pro SDK and connect your app? - will pop up in your terminal when you run this command. Reply with y.

4. The set up will then ask you for an Email and password. If you already have an Ionic login, you can enter it here, but if not, you can just enter until the install is finished. Then run ionic signup as the Terminal instructions suggest.

5. This will open a web portal for you to sign up. Fill in the form.

6. This will lead you to a "Step 2" page. Select the Kickstarter Plan (free) and then click Select plan.

7. Select Get started with Pro.

8. Type in an app name like first-ionic and select Create app

9. Select Share app

10. Select View Instructions

11. Select CONNECT EXISTING APP under the 2nd instruction (you don't need to run the 1st one, you already did that earlier).

12. Run the commands under the 2nd instruction, in your Terminal. Use the same Email and Password. Select Automatically setup new a SSH key pair for Ionic Pro, and type y to proceed.

13. Hit Enter twice to accept a blank passphrase, and type y to accept the changes.

14. Run the following commands:

a. git add -A b. git commit -m "Pushing to Ionic" c. git push ionic master

Opening Your App

There are two quick ways to run your app.

1. ionic serve will open your app in your default web browser
2. ionic lab will open your app in your default web browser, but will also allow you to preview the app on an iOS, Android, or Windows device.

Woo hoo, we're coding superheroes! Now let's dive into the code.

App structure

An Ionic app has several folders. The two most important ones are:

1. The www folder, which is similar to the public folder of our Node and Express apps, or the dist folder of our Angular apps. It is the version of files that actually get loaded on the front end.
2. The src folder comprises the files that are compiled and combined to create the files in the www folder. This is where you will do most of the editing in your Ionic app.

Take a couple minutes to familiarize yourself with the files in the src folder. Discuss with a partner your main takeaways from the files, and the code within them.

Make it your own

Go into the pages folder inside src, and edit the Home template's HTML file to include your name and a basic description of the app you would like to build for Project 4. No need to change or move any tags, just edit a little text, and save the file.

If you have ionic lab or ionic serve running, your page will magically refresh every time you save your files. Cool, right?

Testing on your phone

The easiest way to test your live app on your phone is with an app called Ionic View, available for iOS and Android. There are two versions of this app available, one with a white background that just says "Ionic View", and one with a blue background that says "Ionic View - Test & Share Ionic Apps". Download the one with a blue background onto your phone.

Now go back to the Ionic Dashboard page for your app. Refresh the page.

Click the Deploy button on the right hand side of the bar for Pushing to Ionic.

Sweet, our code is live! But Ionic is all about mobile apps. Let's test this on a phone.

Log in to Ionic View on your phone with the same credentials you used to sign up earlier (click the settings tab / gear icon to see the log in screen). You should now see your fancy new project. Click on it, and wait a few seconds for it to load. This is the version of the app your users would see on their phone (assuming they have the same model as you). Also notice that you can give app feedback in this interface. Play around with it. Seems like a real phone app, right?

Building for iOS

In order to deploy to an iOS device, you need to go through a little setup in Xcode. Once this is done, though, you can open your iOS app that will actually be on the App Store once you get through the App approval process. Let's see how that happens.

Building for Android

We don't have enough time to discuss Android in this class, but the process for local testing is similar to that for XCode/iOS. Your first step is to download Android Studio. See the resources below for more details on deploying.

Homework

For homework, we would like you to take your initial tabs Ionic app and add some of the features we introduced during the Angular week. Implement the following in your Ionic app:

1. Http: make an API call to an open API like the StarWars API. You can use this lesson as a reference.
2. Forms: Add a new model for data that is kept in sync between an HTML form and the Typescript using [(ngModel)]. You can use this lab as a reference.

Resources

• Ionic 2 Crash Course
• Deploying to Android or iOS
• Ionic 2 Official Tutorial
• Solid Ionic 1 Tutorial