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.
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,
- 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.
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…..
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
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,
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
- 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
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
- His motivation to use his time outside work hours to automate UI testing