Welcome to the *Ionic Quickstart* series where you will learn how to get started with Ionic from the ground up. We will begin with how to install the required dependencies such as Node.js, Android SDKs and even GenyMotion to installing and running Ionic. By the time you finish, you will know how to create, edit and run an Ionic application. If you are on Windows or Mac and not sure where to start with hybrid mobile development, this is a great place to start!

In this lesson, we install Node.js (with Node Package Manager) as well as Ionic. With just a couple command prompt commands, we gain access to the powerful Ionic command-line utility, which in turn installs Apache Cordova to aid in connecting our web apps to our mobile device’s native functionality. We then create an Ionic app in just a few more commands.

angularjs

Setting Up your Mac with Ionic and Cordova

Welcome to the *Ionic Quickstart for Windows* video series! In this inaugural lesson, we install Node.js and Node Package Manager (NPM). We need to install Node and NPM because Ionic is, in fact, a Node package.

Installing Node.js and NPM on Windows

In this lesson, we install Ionic. With just a couple command prompt commands, we gain access to the powerful Ionic command-line utility, which in turn installs Apache Cordova to aid in connecting our web apps to our mobile device’s native functionality. After this lesson, we will be able to create and run and app.

Ionic Quickstart for Windows: Installing Ionic

In this lesson, we create our first Ionic app. We use a pre-defined Ionic template to give us some views and data straight out of the gates. This allows us to have a web app up and running in our browser, ready for us to explore, in four simple command prompt commands.

Creating an Ionic App

In this lesson, we learn how to run an app on our Mac. We are going to download Xcode, which includes an iOS simulator. Once we have Xcode, it is a matter of a couple commands in our terminal to run and view our app on our mac.

Build and Run an iOS App on a Mac

In this lesson, we are going to install Android and some other Android dependencies onto our Mac. Then we are going to install VirtualBox and Genymotion and use them to run our Ionic app on our Mac.

Build and Run an Android Application with Ionic on a Mac

In this lesson, we install Apache Ant and create an environment variable for it. Ant is a tool used primarily to build Java applications and is also necessary to run Android. Ionic uses Ant to aid in driving the processes that will build the native Android app later on.

Install Ant for Ionic

In this lesson, we install the Android Software Development Kit (SDK) and the necessary Android API (Application Interface). This is the code base that allows us to run the Android platform on our PC. We also add a couple environment variables and update our PATH environment variable.

Install Android SDK for Ionic

In this lesson, we install Genymotion, which allows us to create virtual Android devices on our PC.  We could use the Android emulators provided by the Android SDK, but on Windows this proves to be problematic. Most Android developers that operate on a PC opt for using Genymotion, not only because it’s faster, but because it provides easy access to testing different native functions of Android devices, such as the camera, microphone, accelerometer, etc. 

Install the Genymotion Android Emulator for Ionic

In this lesson, we install the Java Developer Kit (JDK). The JDK contains the Java Runtime Environment (JRE) and all the tools necessary to compile Java applications. This is necessary to compile and run Java, which in turn is necessary to run android.

Install the Java Developer Kit (JDK) for Ionic

In this lesson, we learn how to run an app on our PC using Genymotion. Genymotion provides a simple UI that enables us to create and run virtual devices with a couple clicks. Once our virtual device is running, it is just a matter of a couple commands in the command prompt and we can view and test our app on our PC.

Run Your First Ionic App

In this lesson, we quickly demonstrate how to edit our code and re-run our app. The pertinent piece of the puzzle is knowing where the code for the HTML/Javascript/CSS is. Once we know where that is, editing it and running the app is a cinch!

Edit Your Ionic Application Code

This lesson has two parts: 1) uploading our app to an Ionic account and 2), downloading the Ionic View app to your phone. Once this lesson is done, we will be able to view our app in our Ionic account dashboard and manage settings for it. We will also be able to share our app with anyone who downloads the Ionic View app, so they don’t have to build and run our app themselves.

Deploy Your Ionic App to a Device

In this lesson, we are going to take an Ionic App and upload it to our Ionic account. Then we are going to download the app (via another app called Ionic View) and view it on our phone.

Ionic Quickstart for Windows and Mac

Lukas Ruebbelke

Course Content