How and why I just created my first iPad web app [Video]
A lot of people think that Apple has put the virtual equivalent of the world’s supply of padlocks on iOS app development, but that’s only half the truth. Yes, developing “proper” apps for release via the App Store requires a developer’s license, Mac, Apple’s approval, and so on. However, Apple has also done more than most companies to make sure there’s an alternative: web apps.
Web apps are essentially advanced web pages. We’re not talking a random scrollable blog page here, but rather web pages that use the latest in HTML, CSS, and javascript to give you a ton of app-like functionality. These days web apps can be literally indistinguishable from real apps, as even though they’re somewhat limited with regards to what they can do, you probably have a ton of apps on your device that might as well have been web apps. iOS even has some special features built in to make web apps work better, such as the ability to run them in full screen mode, create home screen shortcuts to them, add startup screens, and cache them locally.
I’m not really a developer myself, as I’m not well versed in any programming language. I am however capable of using Tasker in some rather unique ways, including creating fully standalone, anywhere-installable apps that are indistinguishable from real ones, so I guess it really comes down to how you define an app and a developer. Another thing I have is some basic knowledge of using HTML and CSS, two of the three components of a web app.
I’ve been wanting to try my hands on a web app for a while, and the recent changes to AutoRemote – the communication platform that allows various devices and platforms to talk to one another, primarily based around Android – gave me the perfect excuse. The ability to send simple and advanced AutoRemote commands to an Android (or other OS) device from iOS home screen shortcuts, as well as receive notifications back, are things I’ve started using more and more. Home screen shortcuts are great, but I always felt that at some point, the system would be so complex that a web app would be better suited. As such, I set out to learn how that works.
The HTML and CSS parts of creating a web app were easily Google-able based on my previous knowledge of CSS and HTML. Enabling full screen disable zooming/scrolling, specifying startup images, and even specifying separate CSS styles for portrait and landscape mode are all ridiculously simple things to do if you have a basic understanding of CSS and HTML. I found this and this to be particularly helpful in that respect, and also used a ton of other sources via Google for the minor questions I had.
I also installed the trial version of a development app that was recommended to me, WebStorm. Unlike WYSIWYG editors – which in my opinion won’t do you any good in this situation – WebStorm is instead designed to give you nice tools to better write the code from scratch. In particular, its automatic file upload allowed me to save changes and have them published on my server in just a few seconds. Since a lot of the code is iPad-specific, I really needed to be able to load up the page/app on my iPad for each change, rather than use a desktop browser.
Before too long, I had the basic skeleton for my web app. It’s designed to run in full screen on my iPad mini, and it’s designed with orientation-specific CSS code so that it doesn’t scale or otherwise mess up anything if I rotate the device. I will probably revisit the design at a later date, but just as a starter project, I decided to simply use the icons from my home screen shortcuts in my web app. Since the rounded corners and shadow effects are applied by the device, I had to use this generator to get the finished icons as PNG images I could use in my web app.
The biggest problem for me was definitely the javascript. When I started this I had very little clue how javascript works, and I come out of it knowing not that much more. What I do have is “programming logic” (thanks to Tasker), a very basic ability to intuit how existing code found online works by just staring at it long enough, and a few friends who are too polite to tell me to get lost whenever I ask them about something like this. By the time I had the app you see in the video, I had both a better understanding of javascript, and quite a bit of javascript code running in my app.
Specifically, the following is done with javascript:
- “Success!” confirmation “animation”
- Loading AutoRemote URLs asynchronously, i.e., clicking a button loads a URL but doesn’t redirect the user. This is done with jQuery.ajax, via the help of a friend.
- The confirmation box for clearing the universal list (which is there since that list is really never empty).
- Hiding/showing the to-do list controls. This was also done using a script I found online.
- A security feature that allows me to not have the unique AutoRemote key for my phone hard coded in the app, but rather specified as a PHP attribute on the URL, which is then transferred into a javascript variable using a script I found online. In other words, no one will be able to use this to mess with my phone, even if they find the path to the files on my server.
- Loading this key variable into the URLs when icons are clicked. Since the URL the icons point to is incomplete without the proper key variable, I can’t just use HTML links.
- The text input boxes are technically also javascript, however they’re part of AutoRemote, not my web app. Moreover, there’s a &returnUrl attribute added to the URL for those in order to send the user back to the app after the prompt box has been filled in and the message sent. This is also part of AutoRemote.
I’m still a bit amazed at how it turned out, because I’m very aware of my own complete lack of javascript knowledge, and even my CSS and HTML knowledge wouldn’t stand up to much scrutiny. However, just a little bit of knowledge is sometimes enough to take brilliant code snippets shared by others and form them into what you need yourself. Programming is really a skill comprises two other skills: knowing a programming language and understanding programming logic. Tasker has taught me the latter, and I’m really considering going all in on learning the former.
On the other hand, I don’t think web apps and Tasker creations should be underestimated. If it looks like an app, works like an app, and does what you need, does it then really matter how it was made? In this particular case, a web app was really the only option in any case, as there’s no way Apple would approve an app designed specifically to remote control an Android device. Either way it was an interesting experience, and aside from a better design from the app, I might end up creating more web apps in the future – either for personal use, or for teaching, as I’ve found that the ability to create apps, albeit simple ones, can really make students wake up.
