The final code for this guide can be found here.
In this guide, we’re going to prototype a mobile application using Ionic 4. We’ll be showcasing a news app that reads content from a WordPress website.
To keep things simple, this application will mostly display the latest posts and categories (fetching the WP site live). If you are interested in a guide on any of these more advanced extensions, please drop me a comment:
- Integrating redux with the Ngrx library.
- Adding a login with an authorization wall (preventing users who are not logged in from accessing certain content)
- Adding paid subscription plans with Stripe
The Ionic Platform takes the Web Application you create, and ports it into ‘webviews’, containers that are configured to run on different platforms (i.e. handle the differences in operating systems for you). In short, the application that you write runs on another layer. Contrast that with various other cross-platform frameworks, that actually compile user code into native applications. These two approaches have their own pros and cons. The main tradeoffs you should keep in mind when deciding if Ionic is right for you:
Advantages of Ionic Approach
- (Arguably) faster development
- Builds a website in addition to native mobile apps
- More consistent interface across different platforms
- Comes with a robust toolset
- The Ionic Dev App allows you to see your changes as you make them, directly to a mobile device.
- You can also see live updates to the browser application, using the ‘ionic serve’ command
Disadvantages of Ionic Approach
- Performance can be hindered due to the extra layer. This means you have to be careful with your UI, that your app renders efficiently. For example, using Infinite Scroll will prevent slowing down the device.
- Native mobile device functionality does not entirely come out of the box; you will have to install a Cordova Plugin to use the device’s camera and the like.
- The plugin ecosystem is fairly diverse, so for all standard device integrations this involves a simple command
In short, if your concern is time, the Webview is a great angle. That’s not to say you can’t build a very scalable Ionic Application, either. At K-Optional, we immediately consider Ionic for clients who are building mobile applications.
Ionic 4 (beta)
The development team has announced they will soon release integrations with Vue.js and React, meaning you will be able to leverage the Ionic platform with anyone of the big three frameworks. Version 4 already has support for Angular, the framework this tutorial will use.
Creating an Ionic 4 Application
Note: we will try to be succinct with this guide, but will link out to the documentation / guides of frameworks used when appropriate.
Let’s create a new Ionic Project. I assume you have npm installed on your command-line; if not, head on over to the link above, where there is more information.
Go ahead and install Ionic. Make sure it’s Ionic 4 (run the update command below if not)
Then use the Ionic command-line tool to generate a new application and go into that directory.
Next start the Ionic server. This will open a browser window with your application. It will restart each time you update and save your code.
Finally, open up the project with your code editor of choice.
Getting setup with WordPress
We need a WordPress website to fetch data from for our app. For this guide, we will use https://boxingtldr.com. If you’d rather use your own WordPress site, just swap out references for that URL with your own. Setting up a self-hosted WordPress site is outside the scope of this guide, but there are plenty of great resources online.
WordPress websites expose an API by default. In our case, this means that you can access content from a WordPress site using an Ajax request. In short, you may load data without refreshing the page in a standardized and predictable manner.
Here’s what I mean: head on over to https://boxingtldr.com/wp-json/wp/v2/posts. This is a machine readable way to fetch the most recent posts from the website. Our application will request the data and render it into our app. We will fetch things like posts, categories and tags. All of these have their own endpoint (see REST guide above).
Eventually, this application is going to display and organize content from the WP site. It’s more efficient to focus on the views first, and then worry about shoehorning content into the appropriate places (see our Pipeline).
We are going to create three pages in total:
- A PostList Page (actually, the home page) for displaying the most recent posts
- A CategoryPage for displaying a list of categories to filter posts by
- A PostDetail Page for viewing all the content of a single page
Deleting the unused list page
When the Ionic command-line tool creates an application, it typically will start with a home page and list page. We’ll reuse the home page, and delete the list page.
Remove the folder in src/app called “list”. If your Ionic Server is running, it will crash at this moment. That’s because it imports the ListPage which no longer exists. We’ll fix this when we add the new pages.
Generating the other pages
As aforementioned, this application will consist of three different pages. The home page should already exist. If it does not, generate it in the same manner as we generate the categories page and post detail page below.
You will see some output indicating the pages have been generated in the src/app/post-detail & src/app/categories directories. Now update app-routing.module with the following:
This code defines the URL routes with the corresponding page. It should be pretty straightforward. You’ll notice that the home page is assigned two routes. When selecting a category, we want the home page to appear with only posts of that category. This will make more sense later on.
To retrieve data from the website’s WP API, we’ll use an Angular Service. The Ionic CLI can generate services which any page may import. The app must be capable of fetching:
- (recent) Posts
- Posts by category
- A specific post
You might consider creating multiple services in a more complex application. However, one service is plenty for four API methods. In this step, we’ll generate that service. It uses another Angular service plus an npm module, so we’ll add these first.
Add dependencies to app.module.ts
HttpClient is a service that ships with Angular for making HTTP requests. Using it requires one small update to our app.module.ts.
In line 1, we imported the module that contains HttpClient. Then in line 18, we added it to the imports array so that our service can use it. If you want more information on what the module file does, check out Angular’s docs.
Add Lodash to the project
Lodash is a wonderful library that provides all sorts of utilities, useful in countless situations. I include it in nearly every project. Simply install it using npm:
Now we’re ready to write the service.
Generate the posts service
You can generate the service using the command:
Now add the following to src/app/posts-service.ts:
Admittedly, this is a lot. This service:
- Provides methods for making HTTP requests to the relevant WP endpoints
- uses the map operator to process the HTTP response on the fly
- Attaches the featured image url to the post if there is one.
- The “_embed” query parameter signals to the API to include certain useful properties on the post.
- The “setEmbeddedFeaturedImage” method adds the featured image to the top level of the post. Otherwise it’s nested way down, and makes our templates complicated. It uses Lodash’s “get” method, which will not throw an error if one of the parent properties is undefined.
If you want to use a different WordPress site, replace the ‘baseURL’ property with your own URL.
Our app now retrieves WordPress data (see Step 3). It also contains pages where the data will be displayed (see Step 2). We just need to configure these pages to display the data. Let’s start with the PostDetail page:
- The post$ property contains an Observable (it is convention to name observables with a trailing dollar sign)
- The innerHTML attribute (see docs) renders HTML directly into the template.
- The WP REST API returns markup directly so this is the only way to display it.
- This technique should not be used on content that you don’t have control over.
Next, let’s add the home page (the PostList Page)
This page should appear similar to the post-detail page. The main differences are:
- It uses the ngFor directive to loop through all posts.
- The excerpt is rendered instead of the content.
- Upon initialization, the page checks to see if there is a category ID in the route. It conditionally determines which service method to call based on that.
- When a user clicks a post, we use the Angular Router to programmatically navigate to the /posts/:id route.
The Categories Page
(categories.page.scss or categories.page.css should be empty)
Last but not least, the categories page proves to be the simplest. One thing to note, we used the routerLink attribute in the template unlike the home page. Clicking a category loads the home page with a category id as a parameter.
We just created a news mobile application! Obviously, it leaves a lot to be desired on the user-interface. But Ionic makes that part easy. You can check out the Ionic Component Documentation for ways you can spice up the look and feel.
Hopefully we’ve demonstrated a way to combine two time-tested and powerful frameworks. If anything didn’t make sense feel free to email firstname.lastname@example.org or drop a comment. As a reminder, all the code can be found here.