Building iOS apps like Java MVC web app – Part 2: writing iOS apps

Published by Bhuman Soni on

In part 1, I gave a brief, high level overview on how Java web apps are written. Ok how about a quick recap of what was covered in part 1…actually let’s use some diagrams this time. In this post, I will talk about how to build iOS apps like Java mvc web apps that use Struts or Spring framework.

iOS apps like Java MVC web app … in Part 1

Java web app architecture

The above diagram essentially summarises what was written in the section titled “Java web app walkthrough”, so in a nutshell

  • For a Java web app, the user interface (UI) is created via HTML/CSS/Javascript
  • The Controllers i.e. Java code act as a communication layer between the UI and the Data store, typically a Database: what that means is that the Java code passes data to and from the UI and the Data Store(Database). The kind of Data Store that I normally work with is a relational database, there is a reason I have mentioned the type of database, read on to find out why.
  • Refer to Part 1 for a more detailed walkthrough of a real-world example of using a registration form

Now how can we apply the above approach to writing iOS apps?

Ok, so as I mentioned in part 1, my day job involves writing Java web apps and I am a “full-stack” developer (whatever that means). Not sure if that is the right term, but what I mean is, I am expected to build all aspects of a web-app i.e. I write the Java code, debug Spring related issues, write database queries, write some HTML, Javascript and style the app with CSS (front-end stuff). Now I am not expected to make the app look beautiful, however I have to at least get it to the point that it doesn’t look embarrassing or something that is made by a complete amateur. Ok, now for the punch line, I mean I wasn’t just writing that entire paragraph to talk about myself. Owing to the nature of my job, I have some front-end skills, skills that I wanted to put to use when I started working on my first iOS app.

How did I apply my front-end skills to my iOS app?

You have seen the diagram above titled “A Java web app”, now let’s look at a diagram of how I have structured my iOS app.
iOS app with a Java web-app like architecture!
This is an overly simplified example, but once you have gained iOS platform knowledge, you can see that the app is really just composed of the three core components, specified above. So the above components for my app and my open-source Xcode project template(Html5StarterAppWithSwift) are as follows
  1. UI: The UI is essentially an HTML5 interface presented via a UIWebView and I am using the Ionic framework to power(style/control) the UI.
  2. Swift code: These are essentially the ViewControllers and a set of Helper classes written in Swift that send data back and forth between the UI and the database.
  3. Data Store: Now this is interesting, because the “data store” for my iOS app is Core Data. Now the reason that data store is in quotes is because, Core Data is not really a relational database, in fact you are encouraged to not think of it in terms of a relational database. Have a read of this answer, to get an idea of what it is all about. Anyway, relational database or not, it is a data store i.e. a component for us to store and retrieve data.

iOS app lifecycle

Now, based on some feedback that I received about this post and I too think that adding some more technical details of an iOS app would do this article some good. First thing that comes to mind is the lifecycle of an iOS app and I do not think I can do a better job than the official Apple docs, so have a read of those, if you need to know more about that. However, what I can do, is explain the above architecture with a few more technical details in the context of an iOS app. We like diagrams don’t we? maybe? maybe not? let’s look at another diagram anyway,
So we have a pretty diagram with a smiley face and all, so let’s go through it step by step
p.s. I am simply explaining concepts so I will avoid using technical iOS terminology, if you would like to know that, please read the Apple docs.  
  1. View: this is the view for our App i.e. what the user sees when our app is launched. Now the user (on the right with a nice smiley face), can interact with the View.  The view can have many iOS controls or objects (UI stuff like buttons navigation panes etc), that you can drag and drop while developing in Xcode.
  2. WebView: For the sake of this post, let’s look at UIWebView as an example of a WebView control. We place the WebView onto the View such that it occupies the entire screen. So when the user is interacting with the view, the user is really interacting with the WebView.
  3. ViewController: The ViewController is basically a Swift class that facilitates communication between the DataStore and the View. wait what? ok how about an example; say, we store the user’s details in our iOS app’s Data store and the user expects to see those details in the view by the click of a button.  Now the way that would work is,
    1. The user clicks a button in the view i.e. WebView, to see the details.
    2. The WebView will then let the ViewController know of the request that the user made.
    3. The ViewController retrieves those details from the Data store i.e. Core Data and passes it to the View
    4. The WebView then renders those details onto the screen so the user can see them

p.s. It is also possible to achieve the above on app launch i.e. on starting the app, the first thing the user expects to see are those details. Once again if you read the apple docs, you will see that there are methods that can be called when the app is first launched. This is out of the scope of this post, but I would highly recommend reading up on the AppDelegate. Having at least a basic understanding of the AppDelegate is very important when you are making your iOS app.

Summary

So like me, if you have some front-end skills and are starting to work on your first iOS app, adopting the approach described in this post means that you can reuse your front-end development skills, when you start making your iOS app. Awesome! right?

So what do we(readers) do with all this information?

If you are a Java developer like me, and are thinking of building an iOS app and have no iOS background knowledge, I would strongly suggest that you have a look at this Github repo. I released Html5StarterAppWithSwift Xcode project template to provide a means for developers to quick start building “native” HTML5 apps such that they can avoid some of my early struggles i.e. not get stuck at the same problems that I got stuck on in the early stages. You can also refer to one of my older blog posts about the Html5StarterAppWithSwift. The project template follows the methodology or app architecture described in this post. As a template for HTML5 based UI, I have used the Ionic framework and I have also added sample code (native Swift) for things such as setting, retrieving and cancelling local notifications.

Get updates?

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. 

https://mydaytodo.com/apps/

Also, if you can leave a review on the App Store or Google Play Store, that would help too.

[appbox googleplay com.mydaytodo.simplenotes]

[appbox appstore  1478331765]

Post Views: 918
Categories: iOSJavaSwift

0 Comments

Leave a Reply

Related Posts

iOS

Building an iOS App with Separate Java Spring Boot Backend

This post explains, step by step, how to design, implement, secure, deploy, and maintain a modern iOS App with a Separate Java Spring Boot Backend. It covers architecture, API design , provides some code samples Read more

iOS

Building a native iOS Currency Converter app

In this post, I will talk about my approach when building a new iOS Currency Converter. I focus on how I start by defining a simple user story, understand what the user story is followed Read more

iOS

Xcode Playground to add, delete & reload UITableView rows with animation (How-To)

I have been working with UITableView for some time and the one of it’s aspect that I think should be more obvious is how to animate, delete and reload rows. Shown below is some code Read more

Verified by MonsterInsights