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
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.
The newest version of Ionic allows you to create an app in one line. Use this guide to get started.
When creating your first app, you will be asked to Create a free Ionic account. This will allow you to test your app on your phone, so type y when prompted. Fill in all the fields in the signup dialog that opens.
Enter a name for your first app.
There are two quick ways to run your app.
ionic servewill open your app in your default web browserionic labwill 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.
An Ionic app has several folders. The two most important ones are:
- The
wwwfolder, which is similar to thepublicfolder of our Node and Express apps. It is the version of files that actually get loaded on the front end. - The
srcfolder comprises the files that are compiled and combined to create the files in thewwwfolder. 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.
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. Cool, right?
There is another Ionic project type for tutorial. Exit out of your project, go back to your work folder, and follow the steps in this tutorial to get a little more familiar with the Ionic structure and features. It does not go into much detail, but is a good introduction. Read all the steps as carefully as possible.
Once you finish the tutorial, put your new lessons into action. Create a new page called about that tells the user all about you. Make sure this page is accessible from the Ionic Menu, the same way Hello Ionic and My First List are.
The easiest way to test your live app on your phone is with an app called Ionic View, available for iOS and Android. Download this app on your phone first.
Next, go into the directory of one of your Ionic apps that we created earlier.
Run ionic upload. You will be prompted to log in, using your credentials from earlier in class when you created a free Ionic account.
Log in to Ionic View on your phone with the same credentials. You should now see your fancy new project. Click on it and select View App. 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?
Also, if you want to see your Apps online, you can go to your Ionic App Dashboard
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.
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.