My First Ionic App From Start To Finish

A tale of thoughts, tools, code and API’s

Learning to program has become widespread across the world and services to help you learn are popping up everywhere. I have watched courses/done exercises on both FCC, Udemy and Pluralsight and even though no resources were creating the exact project I was looking to create, they all gave me something extremely valuable. This was the confidence to actually start my project. This article is meant as an inspiration to people missing the confidence to initiate their projects. It will focus less on the technical aspects and more on the thoughts associated with a project. However, it will include small examples of the production code.

The steps included in this article are simply my own interpretation of the largest phases in the project.

Step 1: Before the project

This specific project had been in the back of my head for over 2 years. Together with a friend, we published an iOS in 2014 and ever since I have been wanting to make it for Android. The app was never really popular but it gained some traction in Denmark and I knew there would be a niche market on Android as well. Especially since more Danish users are moving to the Android platform. This takes care of one of the hardest parts regarding a project, namely coming up with a reasonable idea that is worth executing.

Even though I knew I had a small niche market to cater to, I never really got around to starting the project. This changed recently where I finally decided to sit down one day and have a look at the possibilities with Ionic. This made sense to me as I could rely on the web programming I have been practicing as a hobby for a couple of years. There were a few considerations in terms of the choice but Ionic seemed obvious given performance wouldn’t be a problem due to the niche market and nature of the application. It would simply be an app displaying information retrieved from a website.

Step 2: Project initiation

The actual start was easier than I could ever imagine. This does not mean I didn’t run in to loads of problems. I most certainly did. I’m referring to the amount of progress I was able to make in a relative limited time period. Using the Tabs Starter Template I was quickly able to get off the ground. The code that came with the template was relatively easy to understand and I was able to extend the template to incorporate my own design and logic.

Apart from the starter template I needed to be able to get the data from my website. This meant I had to find a way to create an API. As the website is using Wordpress, this was a relatively easy job. After looking around online I found the WP REST API V2, which could do the job. Immediately after installing the plugin I was able to pull data into Postman. After an hour of excitement I got around to actually looking for the relevant parts for my project and started working on the actual programming.

The complete stack for the project consists of well known tools and technologies in the industry. I have included a complete overview of them just below. These were the core tools and technologies in the process. Apart from the ones pictured, I used Android Studio for testing and of course Wordpress to access the website in the first place.

Step 3: Using the framework

This step includes the early development of the application and getting familiar with the structure of Ionic/Angular. The general app structure is quite easy to get started with and it provides great inside to the AngularJS framework. If you come from a background of working with the web the folders and files will be familiar. The app itself lives in www directory, where you will find both your HTML, CSS and JS files. Ionic provides a simple introduction to the general concepts and structure in the following article.

Apart from the available documentation on the website I want to share a few things I noted during the process. Coming from websites and Wordpress development the amount of code in an Ionic project was simply smaller than what I was used to. Custom Wordpress themes will often become quite large and include numerous lines of custom code. Because Ionic is shipped with a large amount predefined components, the actual HTML and CSS in my project was relatively small. Of course this depends on the project at hand but in my case it was definitely manageable. Because of the nature of the application and my choice of including a few standard components, I chose to work with CSS and not SCSS. If the app manages to become popular in its niche I will definitely consider switching to SCSS for easier maintenance in the future. But for now, with only 190 lines of CSS, it’s quite easy to maintain.

I ended up creating 14 HTML templates for the entire application. Some were specific views and some were part of my navigation structure. While 14 may sound like a bunch it was definitely manageable. Additionally, every template consists of few lines of HTML. The only view that included a large amount of code was the single.php view, which included logic to display multiple elements based on the specific post data.

Because of the limited amount of HTML and CSS needed in the application, I knew the logic and the Javascript would be the most difficult part. This is similarly where I had the least experience. I had never built an AngularJS app or played with a modern Javascript framework. There are multiple ways of structuring your JS files in an angular project. The modular approach is really popular and allows you to keep the logic and the HTML together. This works well with large applications as you have the files closely connected. For my project, I simply created 3 different JS files:

app.js

controllers.js

services.js

Step 4: Creating the logic

I knew early on the design wasn’t going to be the largest problem as I felt pretty confident with HTML and CSS. The thing that terrified me was the logic in the app. The services to talk to the API and the controller logic manipulating the data.



var URL = " // To make it easier to reference the url, we create a variable with the API URL.var URL = " http://thewebsite.dk/wp-json/wp/v2/ "; // Here we get the data from the API and create the Data variable with the data for the posts.

function getPosts(number) {

return ($http.get(URL + 'posts?per_page=' + number).then(handleSuccess, handleError));

}

The most tricky part of the whole application was creating a $stateparams to make the individual post views dynamic. I have just included the API call that uses the postID as a $stateparams. This allowed me to link to the individual posts. Here I used the following call to get the data for a specific ID.

// Here we get the data for the individual posts.

function getPostData(postId) {

return ($http.get(URL + 'posts/' + postId).then(handleSuccess, handleError));

}

Another large part of my controller logic involved showing different images and elements based on the tags and categories of the post. I already leverage the same ways on the website, which made it obvious to attempt to recreate in the app. In the following piece of code I’m checking to see if a specific tag exists and setting a variable I can call in my view. These specific tags let me know if the mushroom is edible, inedible or poisonous.

// Create a variable for the different tags

$scope.spiselig = 0;

$scope.uspiselig = 0;

$scope.giftig = 0; // Check if the post includes the tag for spiselig

if ($scope.tags.indexOf(5) > -1) {

$scope.spiselig = 1;

}; // Check if the post includes the tag for uspiselig

if ($scope.tags.indexOf(82) > -1) {

$scope.uspiselig = 1;

}; // Check if the post includes the tag for giftig

if ($scope.tags.indexOf(29) > -1) {

$scope.giftig = 1;

};

Finally, using ACF on the website allowed me to extend the API to include these fields. One example of the controller logic includes locating relevant lookalikes, which is based on the URL/slug.

// GET THE URL TO LINK TO THE FIRST INDIVIDUAL LOOKALIKE IF THEY EXIST

// Create the empty strings in the scope

if (succ.acf.forvekslinger_href) { $scope.forveksling_url = '';

$scope.forveksling_url_stripped = ''; // Get the url slug from the ACF field

$scope.forveksling_url = succ.acf.forvekslinger_href; // Strip the link of the general URL and only get the post slug for the lookalike

var str = succ.acf.forvekslinger_href;

var start = str.indexOf('dk/') + 3;

var end = str.indexOf('/', start);

var text = str.substring(start,end) // Define the slug list to fill with data

$scope.slug = []; // Make an API call to get slug data

svampeApi.getSlugData(text).then(function (slugdata) {



$scope.slug = slugdata[0].id; }, function(err) {

console.log('Error: ', err);

}); } // END OF URL LINK

Step 5: Creating a design

The design part became the simplest part of the app. Even though it matters a great deal to me when using apps, it didn’t prove to be a huge barrier to overcome. First of all, Ionic provide a ton of beautiful helper elements to get you started. Even though I obviously wanted to give it my own individual touch, these components helped me a great deal.

Apart from the components included with the framework, I found inspiration in the apps I use on a daily basis. As with any design, inspiration does not have to be completely original. Look for elements you find beautiful and attempt to recreate them in your own applications. Soon enough you will see your application come together. I have included a few of my own screenshots from Google Play to show some of the designs I went with.