Working with Ionic framework

IPhone Apps and Websites

So I have been acting as a client for some software engineering students from the University of Melbourne who are developing an iPhone app for taking class lists at my taekwondo club. Both of the groups selected the Ionic Framework for developing a website and phone app, so I thought I would try it out.

Ionic can be thought of as a front-end UI framework that handles the look and feel and interactions you might need from a website and app using HTML5, CSS, JavaScript and a native smartphone wrapper like Cordova or PhoneGap. It seems that Cordova became the Apache Open Source version of PhoneGap after Adobe acquired PhoneGap.

Getting Started

As always, because I only do this sort of thing intermittently, I always begin to remember things that I used to know as I go along, and I have a vague idea of what I should have done just after I didn’t do it …

I followed the Installation Notes at the ionic site. I am using a University-owned MacAir running OS X 10.10.5 (the latest version of Yosemite, but not the latest OS of El Capitane). I opened my Terminal window to install Apache Cordova. Note that Cordova runs on Node.js which is Chrome’s javascript engine, and which requires npm to be installed. As it turns out, npm stands for “no proscribed meaning” (which I need to think through in a philosophical sense as to whether code can really be context-free reusable), and allows you to share and reuse code.

nom comes as part of Node.js, but might need to be upgraded to its latest version. The installer sites have unix code to copy/paste into a terminal window. However right down the bottom of the “installing npm page” it suggests I could avoid various permissions issues by using the Homebrew package manager.

So, having been to Ionic>Cordova>Node.js>npm, I somehow found my way to “How to use nom global without sudo on OS X“, which led me to start over with my installation of node.js and npm, installing Homebrew, and then following his step by step guide.

Sample ToDo list program

Note that I am writing this up the day after beginning this Ionic journey. The AppStore tried to install XCode for El Capitane, and gave me errors that it couldn’t do that because my operating system is an earlier one. Having tried to discover whether I could upgrade to El Capitane without interfering with my Swinburne set up, I thought I had finally worked out today how to upload XCode for Yosemite.

So now I’m up to Creating a Project, which I’m following back at the installation page where I started. I made my project folder, I added my iOS version and my android version. And then I went to build my project – and back to the XCode issue. It seems that I have only downloaded the XCode command-line interpreter (CLI) and I actually need the full X-Code version, which is where the AppStore only offers me Version 8 for El Capitane. The Swinburne Self-Service option doesn’t offer me anything at all. And so back to the drawing board. I have finally located the Apple downloads page for things that aren’t the latest version so I can download the full XCode package, and then run it once to agree to its terms and conditions, and then, hopefully have the build process work.

YAY!! It worked!!

Structure and Development

Having got this started, it’s time to look at the structure and development process for organizing projects and code.

Two other sites to explore that talk about code organization and structure:

And then I need to figure out how to create databases that will store back-end content.

Print Friendly, PDF & Email

  1 comment for “Working with Ionic framework

  1. October 21, 2016 at 1:58 AM

    The next step in playing with Ionic is to figure out how to work with Apple’s Developer program and Google Play Store to make apps available to people. Unfortunately, this requires a deeper understanding of accounts, linking of accounts, and what this gives people rights to at a level I might not want to explore – things have become sufficiently complex that it is difficult to operate within the online world without giving away every illusion of privacy there ever was!

Leave a Reply

Your email address will not be published. Required fields are marked *