After a major update on GoodnightJournal.com, I decided to re-build a new iOS app that actually works with the new site. Thanks to Anton who got me into Swift!
There are many ways to build an app but in my situation and resources I have, it made sense to me to build an web app base on the website I already have. Since I designed the website(Responsive web design) works well on smaller screens (Smart phones & tablets), I did not have to do anything on the website to make it work on iOS app.
This article is mostly for myself since I don’t work on Swift in Xcode on daily bases but also wanted to share what I have learned with you 😉
This is how I build an iOS app utilizing an web view with Swift in Xcode v 7.3.
What we are going to do is basically putting an web view on the screen and load an website inside and add tab bar on the bottom of the screen to add buttons to navigate though website.
Things you need to get started
- A responsive WordPress site with SSL.(It does not have to be an WordPress site. Any website with SSL will work.)
- Xcode + Apple developer account to publish the app on App store.
- You don’t need to know Swift but little bit of knowledge on Xcode UI will help.
1. Set up a project
Set up a new project with a Single View Application. Select the language as Swift and Devices you want.
2. Set up UI on Main.storyboard
Set up all UIs on Main.storyboard. Drag and drop Tab Bar from Object Library(located bottom right corner of Xcode) to your main View Controller. Then add constraints to make it stay at the bottom of the screen with 100% width.
Add an Web View by drag and drop as you did for Tab Bar then add proper constraints. I also added 3 more Tab Bar Items on the Tab Bar in a same way. If you want to add custom icons on the Tab Bar Item, please see this page.
You will end up with something like this.
Make sure you have the connections(Outlets & Referencing Outlets) look like an image above. For Referencing Outlets, you can drag it to Tab bar and select delegate.
3. Add functions to buttons(Tab Bar Items)
Now all we have to do is actually make it work. Here are functions to each button I need on my iOS application.
- 1st button > Load homepage
- 2nd button > Load subpage
- 3rd button > Web View goBack
- 4th button > Web View goForward
- 5th button > Web View Reload
In order to make this work, first we need to set Tag for each button. Add Tag 0 to 4 for each button(Tab Bar Items). Assign 0 for the first button, 1 for the second button, 2 for the third button, 3 for the forth button and 4 for the fifth and last button. Please see the image below.
Now we can use those Tags in our Swift code to make it work.
Here is a code you need to have on ViewController.swift file to make it work.
Actual Swift code to make the Web View app works is pretty simple and self explanatory. We are loading the homepage on app launch then update the Web View as you click the buttons on Tab Bar with switch statement.
4. Add art assets
Add app icons and launch screen to your app.
5. Publish to App Store
Go Product > Archive in Xcode to upload your app to iTune Connect. You will need an Apple developer account to do that. Once you have set up all information on iTune Connect and upload your app, Apple will review your app and publish it to App Store if approved.
Conclusion
I know this is not the best way to build iOS app but it worked out very well for me. I only spend a day to research and another day to actually build and publish the app. It is very important though that you have a responsive website that won’t break on deferent screen sizes and does not limit your users to certain features or some content on the site.
This is what I got for GoodnihgtJournal.com. As always, I would love to get your feedback and comment. Also, feel free to correct me if I’m wrong at something :)
Originally published at www.ohsikpark.com.
