Skip to main content

Xcode starter project with the Ionic HTML5 framework using Swift

I mentioned in one of my previous posts, about how I thought the Ionic framework for building HTM5 apps was totally awesome. Well it is and the way I was trying to use it was to build a Hybrid iOS app. Ok, when I say hybrid, I mean the logic for the app is almost equally split between both native code and HTML5 code.

Why Hybrid app?

So the question is, without knowing any native iOS code, how did I come to the conclusion to build a hybrid app? Ok so apparently you can make a fully HTML5 app and use the Apache Cordova framework to build an iOS app without getting your hands dirty with native code, that sounds awesome! However, to me it was important to understand native code, just in the event that something goes wrong in the app and I need to fix it by tweaking native code, I am not completely clueless about how to go about fixing it. So in an attempt to know more about iOS internals, I started off by building simple native programs(apps?) using Swift with Xcode 6 beta at the time and I totally fell in love with Swift. It was at this time that I realised that in addition to Local Notifications, I could leverage one more feature that can come as a result of writing some native code; Core Data. So in my definition, I was no longer building an HTML5 app, I was building a "hybrid" app, that used both HTML5 and native code for the advantages it offered.

So what have I learned? 

So in addition to a whole bunch of useful things about developing for the iOS platform, I also learned that learning iOS development on your own can be a challenging task. In my case this was especially true, because more than learning how to build iOS apps, I was learning how to build iOS apps using Swift i.e. a new technology that has not been around for very long i.e. I started building my app sometime mid-2014. A good majority of the solutions out there for known iOS problems, use Objective-C and  since I lack(ed) Objective-C knowledge, it wasn't/isn't always easy to translate an Objective-C solution to Swift. Of course there exist, awesome developers like Jameson Quave that actually spend the time and effort to try and teach people by walking them through the various steps of building iOS apps. Ray Wanderlich also contains a comprehensive list if tutorials on iOS development with Swift.

So how am I trying to solve the problem I just mentioned?

Ok now that I have poured my heart out, I think it is time to stop procrastinating and get back on topic. So where was I? hmm....thats right, Ionic Rocks! So initially when I wanted to use Ionic framework for my app, I encountered a rather silly issue and at the time I did not bother solving it, because there was really no shortage of independent problems for me to solve. Anyway now that I have solved that rather simple problem that stopped me from using Ionic in my iOS app, I feel like I should share my knowledge and provide like an Xcode/Swift starter project that displays HTML content using the Ionic framework in a UIWebView. Please note, at this point, I am very well aware of the WKWebView, but since I am building something that works on iOS7 and upwards, I have decided to use the UIWebView.

You can fork the project from GitHub and if you think you can improve the project in anyway, please feel free to do so!

Just to be clear...

I received an email from someone asking me how to create an Ionic app with Swift. So to provide some more clarity, with this project you are creating a native iOS app. So what you will need is
  1. A machine that can run Xcode: at this time i.e. mid 2015, only Macs can run it
  2. Some familiarity with how to use Xcode: I would suggest give this tutorial a go! 
So in conclusion, if you are not familiar with Xcode once you create your first Xcode project to make an iOS app, you will be familiar with what I am talking about in this post. This GitHub repo is just an Xcode project template to help you get started on making your HTML5 iOS app.

Finally, I am working on My Day To-Do full-time right now so if you find my blog posts useful and want to support me you can buy the Pro version of My Day To-Do.

Comments

Amrutha said…
Before we get into how to use XCode on Windows, we should first define XCode. So XCode is an Integrated Development Environment (IDE), which is essentially a very powerful piece of software used to create Mac apps. If you intend to design programmes for the Mac OS, you should be aware that XCode is an Apple-created toolset that will help you get there. Designing apps for Windows is a far more doable effort because you can accomplish it on any platform. However, if you want to create Apple applications, XCode is essential.
xcode in windows
15 October 2022 at 17:36
Post a Comment

Popular posts from this blog

Upload to AWS S3 from Java API

In this post, you will see code samples for how to upload a file to AWS S3 bucket from a Java Spring Boot app. The code you will see here is from one of my open-source repositories on Github, called document-sharing. Problem Let’s say you are building a document sharing app where you allow your users to upload the file to a public cloud solution. Now, let’s say you are building the API for your app with Spring Boot and you are using AWS S3 as your public cloud solution. How would you do that? This blog post contains the code that can help you achieve that. Read more below,  Upload to AWS S3 bucket from Java Spring Boot app - My Day To-Do (mydaytodo.com)
Post a Comment
Read more

Build a Full-Stack Image Upload App with Node.js, Express, React, and Vite (Beginner Tutorial)

 If you’re new to full-stack web development and want a hands-on project to practice React frontend integration with a Node.js + Express backend , this tutorial is for you. In this guide, we’ll walk through a simple but powerful app that lets users upload images, store them on the server, and display them back in the browser. This project is based on my GitHub repo: node-express-react-simple-fileupload . It’s designed to be beginner-friendly, SEO-optimized, and a great starting point for anyone learning JavaScript full-stack development . 🛠️ Technologies Used Here’s the tech stack powering this project: Node.js – JavaScript runtime for the backend. Express.js – Lightweight web framework for building REST APIs. Multer – Middleware for handling file uploads. CORS – Enables cross-origin requests between frontend and backend. React.js – Frontend library for building user interfaces. Vite – Fast development server and build tool for React. Fetch API – For making HTTP requests ...
Post a Comment
Read more

Html5 based widget for an iOS app: Today extension powered by the Ionic framework

At some point the thought of adding a Widget to my iOS app came to mind which was followed by starting work on adding a widget for my app, My Day Todos . Obviously the first step was to learn how to add a Widget to an iOS app and in that learning process I discovered many things about widgets in iOS first of which was a widget in iOS is a an app extension i.e a  Today Extension . While I am still haven't finished working on the widget for my iOS app, I thought I would take some time out and share what I have learned. In this post, I will share a few important tips and provide an example of how to add a Widget to an iOS app and have the widget UI powered by Html5 via  Ionic framework . I added some code to my Github repo, Html5StarterAppWithSwift in order to show how this can be achieved. There are already too many tutorials out on the Web on how to add a Today extension to an iOS app so I won't be including that here. Instead I will focus on sharing some of the useful tip...
3 comments
Read more