An app about the Galaxy's finest smugglers(SW): Ionic app with a Java backend

In this post we will continue the story of Cpt.Danko (Danko) and how he returned to work from 3 months of medical leave and was asked to build a mobile app about the Galaxy’s finest smugglers using technologies that he knew little about. In the first part of the story we got to know how Danko built the Java backend for the app and in this part we will explore the front-end side of things i.e. the Ionic framework powered mobile app.

Background

In the first part of this story, Java RESTful backend for an app about the Galaxy’s finest smugglers, we learned about the new project requirements that Danko had to work with, which were

For his new project, Danko was asked to build an app that

that shows a list of some of the galaxy’s finest smugglers
their race when we click on them
and the user should also have the ability to add a smuggler

Since this was a client project, the UI for the project was already known and the first thing that Danko had to do was to create the backend i.e. the RESTful backend

Initially Danko didn’t know how to build a Java backend but he soon figured it out and prepared a working solution for it. You can see Danko’s final solution for the Java RESTful backend here.

The front-end i.e. the app

Now that he had built the RESTful backend, it was time to build the actual app for which Danko had the following additional requirements,

Maintainable by the existing team: Danko’s workplace had a team of Javascript developers as well and like the backend the Front-end of the app too had to maintained by others when Danko is taken off the project.
Run on all mobile platforms

The second requirement made it pretty obvious to Danko that he had to build a hybrid mobile app and that began his quest to look for the right framework to achieve this.

Hybrid app frameworks

Soon after Danko first became a programmer he discovered that in his line of work “there are many ways to skin a cat” i.e. there’s always more than one way to solve a problem. Building a Hybrid app was no exception to the rule, Danko found and short listed the following frameworks to work with,

Of all the above Danko liked the prospect of Phonegap because with that he could build the app’s UI using jQuery mobile. Why jQuery mobile? throughout his career as a full stack developer (who built a lot of web apps), Danko had spent quite a bit of time working with jQuery, therefore using jQuery mobile meant he could save time by re-using his existing knowledge of jQuery.

Project commencement

With the decision to build the app using jQuery mobile and then packaging it using Phonegap, Danko started building the app. He had a timeframe to deliver the initial GUI prototype. So he was building the app and it was all going well, at this stage, he had a web app powered by jQuery mobile that talked to Java backend. Danko wasn’t completely satisfied with how it looked but he did have to deliver something in a limited timeframe, even if he thought that the app looked more like a Desktop web-page made to fit a mobile screen. Half way through his allocated timeframe for the project Danko was about the wrap it up and prepare it to deliver, but then one evening when Danko was about to leave work, something happened!!! There was a Twist in this story…..

What twist?

You see Danko had a habit of just browsing some tech sites every evening before leaving the office just to see what’s new in the world of programming. So Danko was just doing his usual browsing on that fateful evening when he discovered IONIC FRAMEWORK!!

Ionic framework

Once he had a closer look at Ionic framework the one thing that really caught his eye was just how much an Ionic app looked like a native mobile app. As mentioned before Danko wasn’t very satisfied with how the jQuery mobile powered app looked, he felt that it looked more like a desktop web app that was made to fit on a mobile. Therefore it was immediately obvious to Danko that he wanted to build the app with Ionic framework i.e. it just looked more like something that would look like the app he wanted to build. Ohh and the last project Danko worked on prior to this one used AngularJS so Danko knew how to write Angular code so the use of AngularJS in the Ionic framework was just a bonus.

Learning Ionic framework

As soon as he started building his app, Danko realised that learning Ionic framework wasn’t as hard as there are a wealth of resource online which are easy to find. Resources such as,

Official getting started guide: which walks you through the first thing you need to do when building an Ionic app
CSS components documentation: this provides an excellent insight what CSS components Ionic offers
Ionic directives or AngularJS extensions docs: Ionic comes with a lot of useful directives of which Danko only used a few including $ionicModal
Ionic on codepen: this contains a range of really useful code samples of how to add a certain feature to an Ionic app e.g. Ionic autocomplete
260 Ionic resources: a collection of useful resources that can help while building an Ionic app. When Danko was building his project the count was at 200+, hence it is something that kept (or keeps?) growing.

Needless to say that the team at Drifty Co are really committed to Ionic as as 4/5 of the aforementioned links point to official docs or is by Drifty themselves. Initially Danko just liked the look of the Ionic framework i.e. it’s CSS and all but as he got to know it better and learned about some of the really useful components (functionality) that Ionic comes with and just how you can enhance your app with it.

Ionic app for the Galaxy’s finest smugglers

Remember that initially for this project Danko just had to deliver a prototype with some basic functionality, so the app that Danko built looked something like this,

As evident from the above screenshots this app satisfies the aforementioned requirements. All of Danko’s source code for both the backend and the Ionic app can be found on Github here.

Running the app about Galaxy’s finest smugglers

Get the source code from Github.
The IonicAppWithJavaBackend has the following folders
1. ionicApp
2. javaBackend
The contents of the Java backend folder is an Eclipse project, hence import it in Eclipse
Configure the project to run with any server (Danko used Tomcat 8).
Once the Java backend is running, navigate to the ionicApp folder on the command line
Run the Ionic app using ionic serve command

Ohh and as per the Ionic app is concerned, this blog post, Ionic app with a Django backend helped him while learning how to build the Ionic app. He realised that he was building something very similar to that, except in his case he had a Java EE backend instead of a Django backend. One of the useful things to note from that post is,

Solving the CORS issue when testing the Ionic app locally in the browser

Conclusion

This concludes the story of how Danko built his first Ionic (hybrid) app with a Java backend for an app about the Galaxy’s finest smugglers.

For those reading this, do you like the story driven approach to learning something? or do you prefer a more direct approach without the story? Whatever you feel do leave a comment with your thoughts. So I know whether or not to continue with this approach. If you do like it, there are many other aspects of Danko’s story that I can cover which include

How he built a purely native iOS app that can be maintained by a team of Javascript developers
His motivation to use his time outside work hours to automate UI testing

As usual, if you find any of my posts useful support us by buying or even trying one of our products and leave us a review on the app store.