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. This post is a tutorial on how to build a star wars app with Ionic framework and Java backend.
Ionic framework & Java backend
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
- 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
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…..
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
- 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
- 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
- His motivation to use his time outside work hours to automate UI testing
As usual, if you find any of my posts useful support me by buying or even trying one of my apps on the App Store.
Also, if you can leave a review on the App Store or Google Play Store, that would help too.