News

October 17: Google visit
October 9: Start of weekly coaching meetings and Retrospective reports
September 26: First demo!
September 21: Hybrid setup report and four-panel storyboard.
September 19 Day One -- What each team needs to prepare for the first day of class!

When

TTh 11am - 12:20am

Where

Tech M164

Who

Chris Riesbeck

Resources

Ionic, like most modern frameworks, uses quite a few tools. These all need to be downloaded first. The Ionic Getting Started page describes what's needed, but is sometimes out of date, or points to out of date documentation. There are also many bumps that can occur on different platforms, especially if you have an old version of one of the tools already installed.

Note that these instructions are for a command-line interface (CLI). That means a Linus shell, a MacOS Terminal window, or a Windows bash-compatible command shell. If you are new to command shells, see Ionic's brief introduction.

There is a Visual Studio package for Cordova on Windows, but I not used it.

Below are my notes on various issues and possible fixes. As always, StackOverflow is your friend, but be sure to limit your search to items with the past year or so. Start with the Ionic Getting Started page , but read my notes before doing each step.

Installing NodeJS

NodeJS is a JavaScript-based programming platform, used for creating web servers and command-line interfaces. Ionic uses NodeJS for its command line interface.

NodeJS comes with a package manager called npm. This is for loading node modules, i.e., libraries, and updating NodeJS.

If you have not installed NodeJS before, just use the appropriate installer at Node.org.

If you have installed NodeJS, update it! NodeJS has had many upgrades in the past year. There are several distinct ways to update NodeJS, from simply running the current installer, to using the built-in Node Package Manager (npm), or a NodeJS version manager, like n or nvm.

Also install Bower, another NodeJS package manager, similar to npm, that some tools and sample applications use.

Check your installation with these three commands:

$ node -v
v6.10.0
$ npm -v
3.10.10
$ bower -v
1.8.0

Versions shown are what I had at the time of the writing.

If you get "command not found" for any of these, either the install failed, or you haven't set your PATH environment variable correctly. Don't go any further until you fix this.

Note that when you change environment variables, you need to either reload the file that sets those variables, or start a new command shell window.

Install Cordova, AngularJS, and Ionic

Apache Cordova is the open-source version of Adobe PhoneGap®. PhoneGap provides the code that makes it possible to run hybrid mobile apps, i.e., apps written in HTML/CSS/JavaScript that can run on mobile devices as if they were native apps.

AngularJS is a JavaScript framework from Google for building sophisticated single-page web apps. Ionic uses it for the HTML/JavaScript part of the Cordova app.

Ionic 2 uses AngularJS 2, and AngularJS 2 uses TypeScript. TypeScript is Microsoft's open-source preprocessor to translate JavaScript with type information into untyped JavaScript. A TypeScript file has the extension "ts" instead of "js".

Ionic is a packaging of Cordova and AngularJS, with additional features and tools.

If all goes smoothly, these can all be installed with one command:

npm install -g cordova ionic

The -g means to install these packages for all NodeJS projects.

Test your installation with this command:

$ ionic info

This will print a list of the tools that have been installed and their version numbers. Any time you need to post for help, include this information in your posting.

Now test creating a toy app. Follow the Ionic instructions for starting a sample app. I like the sidemenu example as a starting point.

$ ionic start myApp sidemenu --v2

After the app is built, you need to move into the app directory to run it.

$ cd myApp

Test that the app can run in a web browser:

$ cd myApp
$ ionic serve

This should start a web server, with the web app code, and open a browser with running the app.

Assuming this works, use control-C in the command shell to exit the server.

Now it's time to try running this as a hybrid app in Android and/or iOS.

Android

If you are on Windows, Linux, or MacOS, you can develop for Android. Even if you plan on mostly deploying to iOS, you should also test on Android.

Install Java

Follow the instructions at Oracle that Cordova points to.

When done, test your installation with these two commands:

$ java -version
java version "1.8.0_71"
$ javac -version
javac 1.8.0_71

The first command checks the Java runtime machine. The second version checks the Java compiler. Be sure both give the same answer, and that the version is at least Java 1.7, also known as Java 7.

Install and Test Android Studio

The Ionic documents point to Cordova for Android information. The Cordova information is out of date.

What I had to do was

Leave the emulator running. You'll need it again when testing Ionic.

Test Ionic for Android

Now, test that you can run the app in the Android emulator. First, add the code needed for Android to the app.

$ ionic platforms add android

Then try installing the app into the emulator:

$ ionic emulate android

Finally, deploy to a real device. First, test your device with Android Studio. Follow their instructions on how to turn on USB debugging with an Android device.

Be sure you have a cable for your Android device that sends both power and data. Many cables are just for charging.

In Studio, if you run your HelloWorld project, you should see your device as an option. Try running it. Note: there are many versions of Android. If HelloWorld doesn't run, you may need to adjust what version of Android you are targeting.

If you are able to run HelloWorld from Android Studio, now try running your Ionic app from the command line.

$ ionic run android

iOS

You must have a Macintosh to do iOS development. In particular, you need the current MacOS and the current version of Xcode.

Install Xcode

Xcode can be downloaded from the Apple App Store. It's free, but you need an Apple ID.

After you get Xcode, you will need to open it and tell it to install additional development tools. In particular, you need to add the command line tools. Cordova uses these tools to create iOS hybrid apps.

Test Ionic for iOS

Test that your app works in an iPhone simulator.

First, add the iOS platform to your app, if you haven't already.

$ ionic platforms add ios

Now, run the simulator:

$ ionic emulate ios --target="iPhone-5"

Wait. The simulator will appear fairly quickly, but it make take a few minutes for app to be nstalled.