Download complete app source code

Enter your email address to download the source code for this tutorial.

What are we going to build?

We are going to build a page that takes a GitHub username and displays the GitHub repositories for that user.

Create Ionic project

In Part 2 we installed the Ionic CLI and we'll use that to create our Ionic 2 project.

$ ionic start ionic2-tutorial-github blank --v2

The name of our project is ionic2-tutorial-github based on the blank Ionic template. We need to add the argument --v2 to create an Ionic 2 project, if you leave that out it will default to Ionic 1.

For more information on how to use the Ionic CLI, type the ionic --help command or check out the documentation.

Now you should have a new folder ionic2-tutorial-github with the Ionic project files inside it.

$ cd ionic2-tutorial-github

Let's see if we can launch our Ionic 2 app in the browser. It will just display a "Hello World" card for now since we haven't actually built anything yet.

We'll use the Ionic CLI again to spin up a local web server and open a browser to display the app:

$ ionic serve

This command supports live-reload, so when you make changes to the code it will instantly update the browser.

Testing the app in the desktop browser first will make your life so much easier since you can easily debug it. We'll have a look at how to test on a mobile device later. (Or check out this post from the old Ionic 1 tutorial.)

Inside the project

If you're using Visual Studio Code you can type in the following command to open the folder in the editor:

$ code .

This will work automatically on Windows after the Visual Studio Code installation, but for OS X you need to set it up to work from the terminal.

Let's have a look at the files and folders that have been created in our project:

src

This folder will contain all the code you're going to write for the app, ie. the pages and services.

hooks

This folder contains scripts that can be executed as part of the Cordova build process. This is useful if you need to customize anything when you're building the app packages.

As you can see we're importing a couple of Angular 2 modules into this service. We need to add the @Injectable decorator to let Angular know that this service can be injected into another module and we need Http to call the GitHub API.

We specify where to find the template for the page and in the providers section we define an array of injectable services. In this case we only have one: GitHubService.

As I mentioned before, we are using an Observable to return the data from the service. To get the actual data, we use the subscribe method and pass in 3 functions: one to handle the data that is returned, one to handle errors, and one method that will be called when the Observable has completed without errors.

As you can see the code contains all kinds of different <ion- elements. These are all components in the Ionic framework that have some styling and behaviour attached to them. Depending on which mobile platform the code is running on these components will look and behave a bit differently.

We're using data binding expressions to bind the input field to the username property and to invoke the getRepos() function when the user clicks the button.

We're using the *ngFor binding to loop through the list of foundRepos and create an <ion-card> element for each repository.

Check out the documentation for an overview of all the components Ionic has to offer.

Testing the app

You should now be able to load the app in the browser again and it should return a list of repositories for the username you typed in.

$ ionic serve --lab

I like to use the --lab option to display both the iOS and Android layout at the same time.

Download complete app source code

Enter your email address to download the source code for this tutorial.

What's Next?

So now you've seen a very simple implementation for an Ionic 2 app, but you probably want to build an app that has more than 1 page, so in Part 6 we'll have a look at navigating between pages.