How starting with Ionic2?

Here is a simple Ionic2 example application to begin.

Sponsored by letsboot.com

What are we going to do?

1. install Ionic version2 and Cordova
2. create an Ionic2 app and run it
3. connect to a JSON backend
4. run the Ionic app in your smartphone

Letsboot.com Youtube channel

1. Install Ionic version2 and Cordova

In your terminal, run the following command:

npm install -g cordova ionic

Cordova is a way to transform standard HTML/CSS/JS into a full-fledged native app. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone.

2. Create a new Ionic2 project and run it

In your terminal, go inside your code folder and run:

ionic start my-super-app tabs

Ionic has a few templates available, tabs is one of them (it is a simple 3 tab layout)

When you run this start command, you will have to answer a few questions:

• Connect this app to the Ionic Dashboard? yes/no
• Which app would you like to link? Create a new app/my-first-ionic-project/Nevermind (choose the option that suits you)
• Please enter a name for your new app: my-super-app

Then, go into the project folder, push your code to the Ionic Dashboard only if you agreed to connect your app to the Ionic Dashboard and finally, run ionic:

cd ./my-super-app 
git push ionic master
ionic serve

! You will run git push only if you agreed to connect your app to the Ionic Dashboard.

You can load the page in your favourite browser to see your Ionic app http://localhost:8100/

That is good! Now, we have a default Ionic app! So let’s display some data!

3. Connect to a JSON backend

Create a service in the app/ folder, here `app.service.ts`. Then, import Http from @angular/core, Observable and the map rxjs operator. Inject the http service into the constructor. Inside the class, set an url variable to your backend url. Here, I am using the JSONPlaceholder fake online REST API for testing! Create a getAll() function to display a list of photos (I’ve added sorting and ordering options as example).

App Service manages my data from the REST API provider

In `app.module.ts`, do not forget to import the HTTPModule and the AppService, and add them to the @NgModule imports for HttpModule and providers for AppService:

Import HttpModule and AppService to use it in service and pages

N.B.: you can use HttpClientModule if you have a version of @angular/common 4.3+, Ionic installs the version 4.1.3 that is why I use the old HttpModule

Then, import what the home needs!

In `pages/home.ts`, import the app service and inject it into the HomePage constructor. We also need to import OnInit to load the photos. Then, we create a loadPhotos() function that fetches the result from the getAll() of the AppService, and because it returns an Observable, you can subscribe to it and then, return the photos. In the ngOnInit(), we load the photos!

Now, we need to edit the home template to the list of photos. You should use the ion tags to show the list and items.

Simple example to show a list of photos from a backend

> Reload the browser page (http://localhost:8100/) to see the changes!

You can customize your template with more CSS and ion-tags to make it nicer. Here I just keep this example simple to show the most important step.

On a computer, it’s nice but on a smartphone, it rocks!

4. Run the Ionic app in your smartphone

First, you need to sign up to Ionic Pro. For that, go to the ionic dashboard and create your account. You can choose the plan you want, the Kickstarter Edition is good for testing and it is free. Then, get started with Pro and create your app! Very easy!

You now need to push your new code:

git add -A 
git commit -m "your-commit-message"
git push ionic master

To check the logs, copy and open your dashboard link you get in the console in a web browser of your computer:

https://dashboard.ionicjs.com/app/xxx1e59x/code/builds/fc99eexxxxx

Ionic View

Download the Ionic View application in your smartphone from the App Store or Google Play and open it.

Ionic View allows you to quickly and easily load, view and test the apps you build with Ionic Framework on a device.

To view app, you need to enter a code. To get it, go to your app dashboard and click on Share your app on the right menu. You can either test your app privately (send you an email to get the code) or publicly but “make sure you have Channels set to Public in the settings. Only Public Channels will be accessible to people using this code in View”.

Once you get your code, enter the code in View App (2nd tab) on Ionic View app. Shake your device and navigate through your app!

So this is it! It is a simple example to start the Ionic. You can implement other functionalities, add pages and customize everything!

See you next time for another article about Angular world! Follow me onTwitter, LinkedIn or Medium and take a look at our letsboot.com medium article series!