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.
// 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.
Step 6: Testing the app
The testing phase also proved to be quite tricky as I didn’t have any Android device available. This is where the Android Studio becomes handy as it can emulate any Android device of your liking. Apart from Android Studio the browser proved useful all the way. Personally I develop in Chrome as it is the one I have been using for a long time. In my opinion it also provides the best debugging tools.
I tested my application in 3 ways:
- Browser Testing
- Emulating a device in Android Studio
- Emulating on a physical device
The general testing happened while I built the application but there is no substitute for holding the app in your hand and pretending to use it as you would expect a potential user to. Additionally, I emulated the app on a few friends’ phones. This gave me valuable feedback which I implemented straight away.
Step 7: Publishing the app
This proved to be more tricky than I though it would be. I had gained quite a lot of confidence building the app and didn’t think the publishing part would prove difficult at all. However, I encountered a few issues and it took a few days to completely understand the process and ecosystem of publishing. An excellent starting point was of course the Ionic documentation.
This guide provides a really good starting point for publishing your app. I had a few problems with setting the path variable and therefore had a few unsuccessful builds. However, all these errors were manageable in terms of debugging. It only took a few tries to get it right and suddenly I had created an Android application.
The first release had a few minor things I needed to fix immediately (of course). This resulted in a quick update, which lead to another series of small bugs with the publishing part. This is why I created my own small documentation to secure a simple and swift release of a new version.
Release new Android version:Increase the version number in the config.xml file.
Build the unsigned release apkCordova build –release androidSign the release apk1. Go to: path\YourApp\platforms\android\build\outputs\apkjarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk YourAppOptimize the apk1. Delete the old app apk.zipalign -v 4 android-release-unsigned.apk YourApp.apk
This small step by step guide has saved me quite some time even though it’s a simple task. Revisiting old projects will always pose a challenge in terms of understanding the code and processes. I generally try to remember the difficult parts in the process and create relevant documents to make the project easier to revisit.
How did I spend my time?
I wanted to try an provide an overview of the time I spent on this project. These are all estimations and show a relative scale of my effort with every phase of the application. As I described in the article, the logic was the most difficult and time consuming. The Preliminary exploration is the second largest and constitutes the time spent researching the technologies and options before initiating the project. The design and testing phase were in my own opinion the most surprising as they proved to requiring the least effort.
Looking back at the entire project, I have listed some of the biggest takeaways from building my first application with Ionic.
Biggest learnings
- There is never a great time to start your project. My best advice is to start right away. You will be surprised how quickly you advance with a small daily effort.
- A few minutes a day is better than nothing. If you have an idea of the next steps in your project, it can be divided into manageable bits. It’s better to do a tiny fraction every day than a lot once a week.
- Don’t be scared to start with new technologies. Before this project I had never worked with Ionic, Postman, APIs in general, Angular or app development. Using these tools in a practical project provided a great opportunity to get my hands dirty.
- Small projects are great. This is by no means an app in the same league as the big ones out there. It only caters a very niche area in a niche language. However, the awesome feeling of creating remains the same.
Along my way I found a few amazing resources to help me create the design and logic I was looking for. I have included a few resources to explore for your own project:
Ionic Collection
A collection of posts on ionic framework gathered in one place
emersonthompson.com.br
This concludes my brief tale of creating my first Ionic application. Creating this application allowed me to explore previously unknown technologies and challenged me in a number of ways. I’m hoping you enjoyed the read and will consider getting on with your own project as soon as you can. This is definitely not my last Ionic app and I have gained enough confidence to expand my knowledge further in the world of web and app development.
Feel free to drop any comments with suggestions to change the code or my development process. I’m still learning and I need all the help I can get.
