Building a Simple Wallpaper App with Ionic 2 and Angular 2 TypeScript Part I - Setting Up Development Environment

In this blog series we will build a simple wallpaper application using Ionic 2 and Angular 2 with TypeScript. In this post I will briefly explain the installment process of Ionic 2.

First of all npm is required to install and manage our application's packages and dependencies. If you don't have Node.js and npm installed or installed npm version is lower than 3.x, install the latest version of Node.js.

You can check npm version by running:

npm --version

Install the latest Ionic CLI:

npm install -g ionic

We will use typescript, so let's install it:

 npm install -g typescript

Now we can create our app. --v2 indicates to create application with Ionic 2.

ionic start --v2 simple-wallpaper-app

Let's check our app on browser by running:

ionic serve

So far we have a project running and we can check it on browser, but our main purpose is developing a mobile application. To do that, first add platform(s) you want to work with:

ionic add platform android

You can also add ios platform:

ionic add platform ios

This commands will create a platforms folder at our project directory and a subfolder for each added platform that includes platform specific files and libraries.

We need one more step to go to check our application on a mobie device. Ionic platform runs on Cordova, which is a cross-device mobile development platform for developing mobile applications with web technologies (that is what we are doing with Ionic) and provides native device functionality via its plugins which we will use within our Ionic application. For now just install it:

npm install -g cordova

Let's run our application on android using Cordova:

cordova run android

Cordova will build an apk for us and run it on a connected android device or emulator. For ios it is also pretty much same, just substitute android with ios.

Now we have our development environment ready and we can run our application on a mobile device. In the next post we will start developing our wallpaper application.