Making Apps: Redux – part 4 (iPhone Apps)

March 26, 2012

This is part 4 of my three-part series, Making Apps.  Redux, because it sounds good.  Revisit is possibly more accurate and at least I didn’t have to look up what it meant.

In the series, I tried to explain the possibilities in making apps for yourself.  I didn’t go into much technical detail, mainly because that would take about a book’s worth of text.  Funnily enough, quite a few people have done that already.  I mainly talked about Android apps, because that’s what I know.  The massive issue with developing Apple iOS apps is that you need access to a Mac.

Why a Mac?

Apple's logo

The preferred iOS creation software is XCode, which only runs on Mac and the security requirements of creating and saving development and distribution certificates are really only possible on a Mac.  Finally, uploading apps to the App Store for approval can also only be accomplished via Mac.  In short, you need a Mac and the length of time you will spend on one, even if you build apps the way I have done, means you can’t just borrow your friend’s Mac Book for an hour.

Getting started

In my case, having been a PC-user for the longest time, since one disappointing 6-month period back in 1999, I wasn’t about to swap my Windows 7 laptop for a Mac Book.  I also wasn’t about to advise purchasing a new computer just because it would be kinda cool to make iPhone apps.

At the time of writing, I have just submitted my first app to iTunes Connect and it’s sitting there awaiting approval (see: update).  I built this app in  Adobe Flash Professional CS5.  I say built, but really it was a case of copy-and-pasting the frames from the existing Android App.  Flash’s iOS template took care of the rest, although I am getting ahead of myself.

Firstly, I had to apply for an iOS Developer account – $99 per year.

iOS Development Centre

$99 just to be able to log in

Next, we had to wait for Apple to contact the school to verify our existence and the fact we wanted to make apps – 6 weeks.

At this point last summer, we discovered the Mac requirements, so everything went on hold.  Then I wrote the blog entries about making Android apps, which got me thinking:  If Flash CS5 is allowed to publish iOS apps and all I need is the certificate to do so, how hard can this be?  All I really needed is access to a Mac…

The school had dabbled with Macs and we had a room of them not networked (they don’t play well with Windows servers).  I suggested that I take one of the Mac Minis home, allow it to use my Wi-Fi and see how easy it is to create the certificates that way.

Certifiable

There’s easy, straightforward and then there’s bodge upon bodge!  Many, many hours and countless forums later, I managed to create a P12 Development Certificate and Mobileprovision file and was able to publish the app using Flash and install it on my iPod Touch.

In order to create these certificates, you have to fill in a form on the iOS Development website.  Then you download the certificate file.  Then you import this certificate into Keychain Assistant.  Then you request something else from the Certificate Authority.  Then you download the mobile provisioning certificate.   Making sure at each step you enter the correct password, delete all old versions and have all the preferences checked.   I would like to talk you through each stage clearly, but it is so confusing that I can’t remember exactly what I did and no doubt will struggle to repeat the procedure correctly myself.

Once all of that is done, you hit publish and produce a development app for your personal device.  There is something very rewarding about making an app and seeing it on your device.  Something about it being made tangible.

Submitting to the App Store

Once you’ve tested your app – i.e., it doesn’t brick your iPod.  You can think about distributing it.  I’m not 100% sure Apple wants you to distribute apps, as their website which has been quite clear to up this point gets a little hazy.   Basically, look for iTunes Connect.  It’s sort of outside the iOS Development area.

iTunes Connect

Not to be confused with iTunes U, iTunes or Facetime

On this website, you fill out several pages, upload images and descriptions.  You will be asked for an SKU number, which turns out to be your own reference number for your app and you’ll also be asked for a lot of other things to.  Google will become your best friend here.

Once you have completed the forms to the best of your ability, you will need to generate Distribution certificates.  That crying you can hear was my spending another good few hours repeating certificate stuff again!

Once you’ve generated and published your app from Flash (or maybe your were daring and went straight to XCode) you will need to upload your .ipa file using Application Loader.  This handy little program is now bundled with XCode.   In order to install XCode you need to be running Snow Leopard.  In my case, that meant buying the upgrade DVD and waiting two weeks for delivery.

When you have upgraded, downloaded the upgrades to the upgrade, you are finally allowed to download XCode for Snow Leopard.   Once installed, you can close XCode and use Finder to locate the standalone Application Loader.

Application Loader icon

Application Loader aka "I had to download 1.5 Gb of XCode just to get this!"

Do you get the impression I think this entire process has been overly convoluted?

In conclusion

When I tell others of my experiences, I have found that iPhone, iPad and iPod Touch users view these steps with reassurance.  Each one said “It’s good to know they take the security seriously”.

And of course, Android devotees take my story as proof at how limited and controlling Apple is.

I think there’s truth in both views.  The hoop-jumping required to produce a final certificate is crazy.  Surely once you have logged into your Apple account and created a certificate there, what additional stages are needed?   It’s completely opposite to the self-signed certificate you create for Android.  Not to mention creating separate development and distribution certificates.

In terms of actually building and development, I still prefer Adobe AIR for Android.  Little features like being able to connect to your device and overwrite the app inside Flash make it a little easier to work in.   For iOS, you use iTunes to install/replace the app.

Ultimately the iPhone and iPad are massively prevalent and a lot of teachers have one or both.  I’m pleased that I’ve been able to produce an app for Apple devices and particularly pleased that the Adobe AS3 coding was able to be used without alteration for iOS.  I’m assuming that getting development and distribution certificates will become smoother as I do it more often.

Apple vs Android

I wanted an Apple vs Android image, but they are all quite mean really (read: funny) and didn't want to appear one-side.

I still maintain that there are more benefits to Android than Apple for a school:

  • Android Apps can be hosted directly on our VLE.  So apps which use internal school systems do not have to be published to Google Play
  • iOS Apps can be hosted directly, but are limited to 100 devices under Apple’s Ad Hoc distribution system
  • Android Apps appear in Google Play almost instantly as they do not undergo human-based testing before release.  Some would point out that this is actually a good thing that Apple does, but it does delay distribution and their decisions have been shown to be arbitrary.

Finally if you are considering building your own apps, give serious consideration to Adobe Flash.  Building in Adobe Flash produces a SWF file, which can be used directly on our intranet, so we get an “emulator” each time we make an app.

UPDATE:

On 2nd April 2012, Apple approved my first iOS app, Question Dice and made it available on the App Store.  It’s free to use.  You can access it here, Question Dice


Making Apps – Part 1

January 22, 2012

I’ve talked before about how I’ve started to build apps for use in school, but I’ve never really gone into how I do it.  Surprisingly there are a number of methods.

1) Using Google’s SDK and Eclipse software to write apps directly

This is where I started.   Although started is a bit of a misnomer (started and stopped being closer to the truth).  It’s easy enough to sign up for the free SDK and links in the developer area point you in the right direction for downloading the Eclipse platform.  But that’s where it gets confusing.  Eclipse being a third-party, open-source product has a number of different versions and figuring out the right one to download either involves blindly guessing or reading through a pages of text.  tl:dr I’m afraid.

Through more luck than judgement, I downloaded and installed a version of Eclipse (Gallileo seemed right at the time) that worked with the SDK and through a bit more luck, managed to get it hooked up to my phone.

Eclipse - but you're not there yet - still have to run the Android SDK

Eclipse - but you're not there yet - still have to run the Android SDK

Struggling to get set up is something that only Apple seems to understand is an issue.  Open-source and SDKs are great, but you need an underlying knowledge of how and what to install before you can even get started.  Recently, we tried to get the Xbox Kinect SDKs to work with Windows 7.  This could have been so easy, providing a single file which would have installed all the drivers we need.  Instead, we were taken to a page with 4 different installation programs.  Three of which installed fine, the fourth was just impossible.

A big chunk of Apple’s success comes from wrapping everything up together.  Take iTunes for example.  MP3 players had existed for at least 5 years before the iPod.  Apple were the only ones to provide a standard way to get music onto a player that was easy to use.   Now, they have launched their iBooks and (reportedly) their iBook creator makes it easy to create content.   eBook programs have existed for years for Windows, but Apple makes it easy by declaring “this is what you need, nothing more”.   As a long time PC and Android lover, I have to take my hat off to Apple for this.  But I digress.  Back to Android.

Hello World

From here on, it’s easy enough to follow the tutorials back on the Android Developer centre and build the standard Hello World.  But beyond that, building apps directly in this environment is a bit lacklustre.  As someone used to building in Adobe Flash, I found making the leap to a purely coding system to be just that little bit too far.  I couldn’t figure out how to use animations for instance.
I made this! - by following instructions precisely

I made this! (By following instructions precisely)

2) Using Adobe Flex (and/or Flash Builder)

There seems to be a quickly growing community around using these Adobe products to build apps for all platforms.

I can’t quite figure out how you use Flex and there is a cost involved with Flash Builder so I’ve never fully investigated it.  At school, we have the full Adobe Production Premium suite which includes Flash CS5, which I’ll talk about in Part 2.


Battle of the Handhelds: Redux!

November 19, 2011

I think the one post I’ve made which has caused the most feedback and continues to draw in audiences is my post about two devices we were considering for school use back in April, namely the iPod Touch and the Archos 43.

So much has happened since I wrote that blog entry.  First off, we didn’t go with either iPod Touch or Archos.  Like I summed up at the time, the iPod had too many restrictions and the single-touch Archos made it too frustrating to use.

Pick a device already!Samsung Galaxy Tab 7" Wi-Fi

At that point, our ICT Coordinator stumbled across the Samsung Galaxy Tab.  I say stumbled upon, because Apple pretty much had the high street sewn up.  All credit to them (and it’s changing now admittedly), but if you want to buy a tablet on the high street, everyone wants to sell you an iPad.  And why not, they’re great devices (personally I find them a little large and a bit heavy) but there’s no denying Apple created another product the world didn’t know it needed.

Samsung (who incidently make the iPad for Apple) have their own range of tablets, a 7″ wifi, a 7″ 3G and similar in the 10″ range.  They’ve also started on their gen 2 tablets which are even more sleak, though not widely available yet.

We evaluated and then chose the Wi-Fi only, 7″, P1010 model.  It runs Android Froyo, has 16Gb internal memory, front and rear cameras.  It comes preloaded with ThinkFree Office (which allows creating and edit MS documents) along with a host of other apps (some good, some not worth it).

Size does matter

The main difference between the 7″ tablet and the smaller handheld we were looking at before is the size (obviously).  When you’re using the tablet, it feels like it is for work.  You can achieve a lot of the same stuff on the smaller devices, but they lack a feeling of productivity.  With the Samsung, you feel like you’re using a work tool.

We did look again at the iPad and iPod Touch, but the cost of the iPad is too prohibitive to seriously consider (those schools that have gone down the iPad route must have sacrificed something else from their budget).  Ultimately we found iOS too restrictive/problematic in terms of file uploads, Flash (yes I know Adobe have pulled development) and for building our own apps as well as paying for other apps.

Niggles

There are a couple of niggles.  The battery gives you a day if you’re using it.  Given the size of the device, I was surprised, but I suppose powering the much larger screen is the big difference.  The native keyboard makes some truly irritating errors, but Steven Lin has kindly ported the Gingerbread keyboard.  Neither of these are big issues, at least not compared to:

WTF!

The tablet cannot charge from a computer’s USB while turned on!   Wait…what?  That’s like… the point of USB.  We’ve got round this issue by buying these special cables.  It took a couple of hours searching the internet to even find out what the problem was.  It turns out to be a voltage issue.  These cables contain a switch and resistor which gets round that.

Still, these are all niggles and while many would point out that you shouldn’t have to deal with niggles, life always proves otherwise.

Order ready

We ordered the tablets about a month ago (with parental contributions) and they are due to arrive within the next two weeks.  All the preparations have been done (fingers crossed).  We have a comprehensive mobile version of our VLE, a really cool instruction booklet to be given out with the devices and we’ve put together a number of school-specific apps:

This slideshow requires JavaScript.

I do hope that we’ll make some of these available on the Android Market.  They are all built in Adobe AIR, which has made the creation of Apps so much simpler.  I think we will eventually move away from AIR, but for right now, it just works.

In conclusion

Have we chosen the right device?  I think so.  The size is right.  The functionality is right.   The price is right ~£300 (including insurance).  I’ll admit my heart sank a little when Amazon announced the $199 Kindle Fire – but it’s not out in the UK yet.  And not in the quantities we need.  And can we even run our own apps on it? Maybe next year, if this year is successful.

The battle may have been won, but something tells me the war has just begun.


FIXED: Read-only error on your phone’s SD card

September 4, 2011

Argh! Pants!  Nooooooo!  I’ve knacked my phone!?!?!?!

Just some of the many thoughts that went through my head on Friday when in the middle of a workshop, I went to show someone a picture I’d taken on my phone.   Suddenly the gallery crashed and an alert popped up saying “SD Card Readonly” or something equally terror inducing.

Adding to the panic, all my Apps disappeared, just leaving their names on the desktop with the generic Android logo.  It was like a graveyard.

Trying to calm down the panic, I turned the phone off.  Then turned it on again.   The alert came straight back.  I imagined the chortles of iPhone fans taunting “this doesn’t happen with Apple products”.

Removing the battery and starting up still didn’t fix the problem. 

That’s when I turned to the internet.  And as always, it solved my problem.  Eventually. 

How your parents see you when you're fixing their computer

How your parents see you when you're fixing their computer

What really hapens

What really hapens

Plenty of others have experienced this same panic and the default suggestion is… well let’s not say pig-stupid, let’s use the term over-reaction.    You see in some IT support circles the next stage after “turn it off and turn it back on again” is “format the storage”.  It’s sort of like demolishing a railway line and building a new one next to it just because there were leaves on the track.

All I needed to do was:

  • Plug my phone into my PC and open My Computer.  
  • Right-clicking on the SD drive icon and choosing Tools
  • Then click the Check Now button in the error-checking section.
  • Windows will then scan the drive and correct the errors.

Tools, Error Checking

It’s the same process that happens when you plug in a memory stick that was ejected incorrectly.

Phew, panic over.


Quick Tip: Creating an icon for mobile shortcuts

August 12, 2011

One of the cute things about most mobile sites these days, is that when you make an shortcut and set it to your phone’s desktop* a personalised favicon type image is used, instead of just a boring standard bookmark.

These are cute and very easy to do.  Simply paste the following code into the <head></head> section of your page.  Ideally it should be in the <head> bit, though it doesn’t have to be (if using Frog for example) :

 <link rel=”apple-touch-icon” href=”full path to your image” />

 There’s some debate on the internet as to whether you need the full path or if the local path will do, but I’ve used the full path and been happy with the results.

Your image should be the official 57×57 pixels, but again, there’s plenty of debate on the best size.  It should be  saved as a png.

And don’t worry Android users, the code may say apple-touch-icon, but works just the same. 

*(is that the right term???)


Quick tip: Make your web page mobile

June 19, 2011

Recently, I showed off some of our VLE pimping at Frog’s National Learning Platforms conference in Birmingham, things like our Rewards system and My Classes – a whole section where a teacher can create seating plans, interact with the students via blogs, run a Random Name Selector etc…  

I also showed everyone the mobile version of the VLE, built entirely inside Frog.  Just using an HTML brick with the code below, web pages render at the width of the browser viewing them.   It’s that simple.

<meta name = “viewport” content = “width = device-width, height = device-height” /> 

This code doesn’t detect if you’re using a mobile device.  Personally, while I have implemented them on my own blogging engine, I don’t recommend detection code.  Detection and redirection are simply too irritating for words.  I’ve lost count of the number of times I’ve tried to visit a site after searching from Google, only to be redirected to the site’s mobile front page (Gamespot I’m looking at you). 

We provide a link on the VLE frontpage to a different login screen.   Couple this with use of a tinyurl and a QR code and job done!


Google’s App Inventor

September 8, 2010

About two weeks ago my App Inventor account from Google came through.   I was placed in the tantalising position of being able to quickly and easily develop my own Apps!

Of course, nothing is ever that easy.  Installing all the needed Java things takes time, although it is far, far less confusing that installing everything you need for Android’s proper SDK.

Working through the tutorials is fun too.   You can very quickly press a picture of a cat and get your phone to make a purring noise

In a startling moment of Apple love, the media in general recoiled at the idea of App Inventor, predicting a wave of naff Apps.  Fortunately, when reading a little more on the App Inventor website, you discover that Apps made using it can’t be distributed via the App Market.   Google promise they’re working on it, but I would hope it’s not a priority.

It’s fun and easy to use and anyone out there with an Android phone can sign up.  Like I said above, compared to the official SDK, installing is a LOT easier.  The SDK requires so many different third-party programs. 

Overall I’m glad I have the App Inventor, but mainly because it’s spurred me onto setting up the SDK.   Now, I’m not promising any Apps overnight, but give me a couple of months and I might be able to produce an App that makes your phone bark when you press on a picture of a doggie.