Creating a Pokémon hybrid app with Angular 2 and Onsen UI

Image for post
Image for post

A couple of months ago we published an article on how to create a Pokedex application using Angular 2. Since then, the stable version of Angular 2 has been released and we have released the RC version of our Angular 2 bindings.

In this article we will use Onsen UI 2 and Angular 2 to create a simple mobile Pokedex app. We will use some of the code from the previous article, but we will integrate it with Onsen UI. We will also take a look at the Monaca CLI, which is a great tool for creating, debugging, and developing apps with Angular 2 and Onsen UI.

With the Monaca CLI you get access to several templates that can serve as starting points for your own apps. The CLI is using Webpack to build and package your app so you don’t have to set it up yourself. The Monaca CLI also integrates with the Monaca Debugger so you can test and debug your apps in real devices.

This app is using the great PokéAPI. The API contains all the necessary information to create a complete Pokedex app, with information from all the Pokemon games. Since this is just a sample app, we will only use a small part of the information available.

You can try out the app below:

https://argelius.github.io/angular2-onsenui-pokedex/

The source code for the app is available in this GitHub repo.

Installing the Monaca CLI

This app was created using the Monaca CLI. It’s a command line tool that can be used to create, debug and build hybrid apps. It is available on NPM so you can install it with the following command:

[sudo] npm install -g monaca

Or, if you are using you can install it like this:

yarn global add monaca

When the program is successfully installed, you can run to see the current version:

$ monaca -v 2.1.6

Creating an application

Creating an app with the Monaca CLI is very simple. All you need to do is to navigate to the directory where you want to create your app and run:

monaca create my-app

You can now see what kind of templates are available.

Since we are creating an app with Angular 2 and Onsen UI we will select that and press enter.

In the next screen we select what kind of navigation pattern the app will use. Here we can create an app with tabs, a swipeable side menu or stack navigation. The app we are creating will use stack navigation so we select the Onsen UI V2 Angular 2 Navigation template.

If we press enter again the application will be created for us and all the dependencies will be installed. This might take a while.

Now enter the directory:

cd my-app

To preview the app you can use the following command:

monaca preview

This will start a web server. The app will be automatically rebuilt every time a change occurs so it’s recommended to always have this server running so we can see the changes instantly.

Creating the app

We will put all our code in the folder. This is where the Angular 2 components, services, etc. are located.

The Monaca CLI has created a very simple app for us where we can push and pop pages from the stack. This stack navigation is made possible with the component which is rendered by the component in the file.

We need to add some behavior to this component. This component will render the master page of the app which contains a list of Pokemon fetched from the PokeAPI. When a Pokemon is clicked we will push a new component called to the page stack that displays some additional information about the Pokemon.

The method is called when the component is initialized and we use it to load the first 20 Pokemon from the API using the method. This method is also called when the user clicks a button at the bottom of the list.

In the method two services are injected. The is used to fetch information from the Pokemon API and the is a simple service that keeps track of the Pokemon that have been caught using a object.

To push a page to the stack the decorator is used to get a reference to the directive.

The template in looks like this:

app.html

What this does is that it will render the component as the first page in the navigator stack.

The component

The component that displays the details for a Pokemon is also quite simple.

One important note is how the parameters that were passed in the method of the component are retrieved. This is done by injecting the service in the constructor:

This is the code for the whole component. It can be found in the file.

detail.ts

The template will display some information about the Pokemon and a checkbox that will call the method when toggled. The template code is in the file:

Services

A service is an object that can be shared among all your components. It is often used to fetch and store data. In our app, we will create a service that fetches data from the Pokémon API as well as a service that maintains a list of all the Pokemon that have been caught.

The uses the data structure that was added to JavaScript in ES6. Angular 2 apps are written in TypeScript so we can use all ES6 features since they are transpiled to ES5.

The code is in the file:

In addition to maintaining a set of Pokemon IDs it will also save the list to so the app can remember even if it is restarted or if the page is reloaded.

We already created a simple in the previous blog post. This time it has been extended to also fetch some additional information that is displayed on the details page:

Conclusion

In this article we have created a very simple Pokedex app using Angular 2 and Onsen UI 2. Even if this Pokedex app doesn’t display a lot of information, we hope you can see how it could be expanded into a more complete app by adding more pages to the navigator and adding more information from the PokeAPI. The Angular 2 bindings for Onsen UI are currently in RC stage but we are getting closer to a stable version.

Onsen UI is an open source library used to create the UI of hybrid apps. You can find more information on our GitHub page. If you like Onsen UI, please don’t forget to give us a star! ★★★★★

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store