8 Characters

I’ve had no end of trouble trying to get an app we’ve built for a client into Apple’s App Store. Build the app was quite simple but Apple have a certification process which involves their developers to download and install a number of certificates which do different things. Without this setup correctly, it’s near impossible to get you app in Apple’s App store. So, to make things easier for me next time I have to do this, I’d thought I’d record the whole process.

Before you start:
You’ll need to make sure you’ve signed up to Apple’s Developer Program. This has a yearly fee of roughly $100US attached to it.

Step 1 – Grab the SDK
Download the latest SDK from https://developer.apple.com/iphone/index.action

This file will be about 2GB, so whilst that’s downloading, move on to step 2

Step 2 – Get up to date
Update your iPhone. You’ll want to make sure that your SDK and iPhone are targeting the same iOS version as it helps simplify things.

Step 3 – Install the SDK
Install your newly downloaded SDK

Step 4 – Log into iTunes Connect
I next logged into developer.apple.com, clicked my way through to iTunes connect (itunesconnect.apple.com) and downloaded the iTunes Connect Developer Guide (https://itunesconnect.apple.com/docs/iTunesConnect_DeveloperGuide.pdf). This PDF provides a lot of good notes to supplement this walk through.

Step 5 – Create your Icons
The iTunes Connect Developer Guide likes you to get your graphics setup first. Having had my app rejected automatically a few times due to not having these setup correctly, I encourage you to take the time to create all the different versions of your App’s icon. I opened up Photoshop and created 5 new files with different dimensions:

57×57 – iPhone (3 + 3GS + touch)
114×114 – iPhone 4
50×50 – iPad
72×72 – iPad
512×512 – App Store

I saved each of these out as 24bit PNG images use’s Photoshop’s Save for Web. It’s also important to make sure you have transparency switched off. You can probably use any naming convention you like but I opted to name the files 57×57.png, 114×114.png.. etc to make things a little easier when I need to reuse these images later.

Apple also provide a way of controlling whether or not your icon is automatically made shiny! This parameter is called UIPrerenderedIcon key. My intent is to leave this as the default which should add a glossy shine to my app icon but you can look further into this if it’s something you think you’d like to control.

Step 6 – Create your Screen Shots
The app store needs a few screen shots to encourage people to download your app. There are a few ways to approach this but I’m just going to grab a few screenshots from my app running in the iPhone emulator.

Just like the icons, you’ll need a few different size formats for both iPhone and iPad. I’d suspect you’d only need to include the screenshots for the platform you’re targeting, so if you’re not providing an iPad version, then you can probably omit these. I am however looking at supporting both.

iPhone/iPod Touch Screenshots
320×460 PNG – Standard
640×920 PNG – High Definition for iPhone 4

iPad Screenshots
768×1004 PNG – Standard

I should clarify that this is the minimum requirements and there are other options that can be explored here. However, if you are just looking at satisfying Apple’s requirements in order to get you app accepted into the App Store, following these points will achieve this.

Step 7 – Banking and Contracts
We’re providing this app on the App Store for free which means I don’t need to provide Apple with banking details and the other bits and pieces associated with selling an app. If you are looking to sell your app, there is quite a lot of detail about it in the iTunes Connect Developer Guide: https://itunesconnect.apple.com/docs/iTunesConnect_DeveloperGuide.pdf

Step 8 – Users
If you are like us and are developing an app for a 3rd party, you can provide them with access to iTunes Connect so that they can see reports and other information about their app. By default the initial iTunes Connect user (your current account) has both Admin and Legal roles which is enough to get us through to the next step without doing anything. If however you wanted to provide access for you client, now is not a bad time to do it.

Step 9 – Certificates and Provisioning
This section has been my stumbling block from day one and the iTunes Connect Developer Guide provides no reference to this either, making it even harder to realise the importance of this step. So to get the certificates you needs, you’ll want to first point your browser here: https://developer.apple.com/iphone/manage/certificates/team/index.action

Once you’re in the Provisioning Portal, click on Distribution. This page has a lot of information about getting the certificates you’ll require to be able distribute your app in the App Store. There are 3 key things you need to distribute your app:

1. A distribution certificate
2. A provisioning profile
3. To CodeSign your app

To obtain your Distribution Certificate you’ll need to:

1. Launch your Keychain App
2. Ensure in your Preferences you have “Online Certifcate Status Protocol” and “Certificate Revocation List” both set to “Off”
3. Using the Certificate Assistant (Under the Keychain Access menu), select “Request a Certificate from a Certificate Authority…”
4. Enter in the email address you use to log in to iTunes Connect and the Name you’ve registered yourself/your business under
5. Don’t do anything with the CA Email Address (even though this says “Required”)… you’ll see why in a minute
6. Select “Saved to disk” and tick “Let me specify key pair information”, then click “Continue”
7. The defaults for the next screen are all good, click continue
8. You should now have a CSR (Certificate Signing Request) file on your desktop
9. Now go back to the Provisioning Portal and select Certificates > Distribution and click “Request Certificate”
10. Click “Choose File”, select the CSR on your desktop and click “Submit”
11. Now go back into Certificates > Distribution and right click the WWDR Intermediate Certificate link, select Download File… and save it to your Desktop. Now double click the file to install it.
12. Now click the Download button on the Distribution page – this will save to your Downloads folder. Go to this folder and Double Click the file to install it.
13. Return back to your Key Chain, select the “Keys” category, select the Private Key associated with your Distribution Certificate and then go to File > Export. Save this somewhere safe as you’ll need it should you ever want to save yourself from doing all of this again.

Now we have a Distribution Certificate, we can Apply for a Provisioning Profile! Follow these steps to do so:

1. In the Provisioning Portal, select the “Provisioning” section and select the “Distribution” tab
2. Click the New Profile button
3. Select the App Store radio button, Give your Profile a Name, Verify your Distribution Certificate (by just looking at it) and Pick the Wild Card App ID – in my case this was my name…! Now click submit.
4. Click back into the Distribution Tab of Provisioning and you should see a “Download” button. This will save a .mobileprovisioning file to your Downloads folder
5. Go to your Download folder in Finder and Drag the .mobileprovisioning file onto XCode in your dock. You’ve now installed a Provisioning Profile

Ok, with our Distribution Certificate installed in our Key Chain and our Provisioning Profile installed into XCode, all we now need to do is look at CodeSigning our app. To do this you’ll need to follow these steps.

1 . Fire up XCode and open your project.
2. Go to Project > Edit Project Settings > Configurations
3. Duplicate the Release Configuration and all it “Distribution”
4. Go to Project > Edit Active Target > Build and set the Configuration to “Distribution”
5. With this tab is a section called “Code Signing” and inside that “Any iPhone OS Device”. Change this to your Distribution Profile. If you don’t see your profile, check back over these steps again because something hasn’t been done correctly.
6. Now switch to the Properties Tab and enter the Bundle Identifier portion of your App ID – no idea what that is, me neither however there are a few rules that apply here and I believe that if you aren’t making use of Push Notification, In App Purchase or The Game Centre, you can then use a Wild Card (which you’ll be doing by default) and can then enter in something unique. The format is mean to be something like com.yourbusiness.yourapp – so that’s what I’m running with and will hopefully work for now.
7. Now go back to your Project Window (your main code window) and select “Distribution”
8. To allow us to run this, we’ll need to go to File > New  select “code signing” and “Entitltements”
9. On the next screen, just click Finish
10. You should now be able to find your “Entitlements.plist” file in your Project Window
11. All going well you should now be able to Build your App for Distribution – It won’t actually run on anything but it will create a binary
12. If you now go to your binary file, right click it and compress it, you’ll be set to publish your app!

I just joined the Apple iPhone Dev network and as a result got a chance to play with the new iPhone OS 4.0 beta. Apple suggest you only install it for the purposes of testing your apps for OS 4.0 compatibility but if you’re like me where you only have one iPhone 3GS, then you also need to use the new beta as your main OS when you leave the office.

So, if you’ve been considering installing the new iPhone OS, a few things to note:

• Upgrading is painless




• Not all your apps will work 100% as they did before




• iBooks… what iBooks? (I guess they’re waiting for the official release before including this one)




• Multitasking is there but very few of the apps are ready to support it (obviously)




• The new folders are fantastic but they are limited to 12 apps per folder




• Folders also have “badges” to show an item inside it has a “badge”. Instead of a numerical representation however, they just use an exclamation mark




• There’s a new icon in the top bar near the battery which indicates when an app is “location aware”




• The OS isn’t without it’s visual quirks but this is forgiven as there is also a much greater animated feel to the OS now (subtle but effective)




• Spotlight now has a “search the web” and “search wikipedia” option at the bottom of the list




• There is spell check but I can’t work out how to select an Australian dictionary…

If your not a developer, I would suggest that aside from folders, spell check and the background wallpapers, there aren’t a lot of reasons at this stage to upgrade. What’s great about the iPhone is the way the apps are able to make use of the iPhone OS. Given this, the benefits of wireless distribution, iAds, multitasking, etc just aren’t there at this stage. If you are a developer however and need to use the new OS as your primary OS whilst you are writing your new app, I’ve found it stable and reliable (so far) and have found that most of my important apps still work. With that said, of the 100 odd apps I do have, I’ve found iPhone OS 4.0 beta compatibility issues with the following apps:

• Evernote: Can’t sync… or open your existing notes.




• Wolfram Alpha: Secondary keyboard floats up too high on the screen




• Google: seems to black out the search window – EDIT: now fixed




• IM+: Crashed upon location awareness and wasn’t really ever the same afterwards..!




• Skype: brings up a warning message about the iPhone OS version but seems ok afterwards




• Tap Tap Revenge 3 (Free): Crash and burn

Some of the more popular apps that I can confirm do “seem ” to work (although it’s still early days) are:

• Tweetdeck




• Facebook




• Buzzie




• eBay




• Stanza




• Kindle




• Air Sharing




• Oz Weather




• 1Password




• Things

I’ll update this list as I spend a bit more time with the new OS.

There’s a good amount on the web which has been written about creating Magento Modules but nothing I’ve seen which summarises how you could be using these to quickly extend your site without too much fuss. So what I’m going to look at here is how you can provide your client with a simple 5 field interface that they can use to enter in some data (let’s say, a stockists list). This whole thing should take no longer than 10 minutes after you’ve done it the first time around.

Before we start, you’ll need a few things:

1. A version of Magento 1.3.x (I believe 1.4+ has some considerable differences)
2. The Magento ModuleCreator installed (grab it here: http://www.magentocommerce.com/extension/reviews/module/1108/modulecreator)

First step: Create you Module’s Skeleton

This part is dead easy. Go to www.whatever-your-domain-is.com/moduleCreator/ and fill in the form (shown below). You probably will only need to change the first two fields – Namespace (your company name is good for this) and Module (this is the name of the module which will appear just about everywhere).

In this example I’m using the company I work for (Blis) and will be calling my module “Test”.

Now have a look in your Magento’s Admin area. You should see your Module now has a Drop Down menu and a working interface! Too easy.

Clicking on the “Manage Items” drop down will bring up Magento’s standard list view. Click the “Add Item” button and you’ll see the default fields the ModuleCreator has built for you.

Because our module will be designed to manage stockists, we’ll need to modify a few of these fields to make the work for us. This is the point we can start getting our hands dirty with a bit of coding.

Step two: customise your module

All the fields that you can currently see in your module’s Form View are defined here: /app/code/local/YOUR_NAME_SPACE (e.g Blis)/YOUR MODULE (e.g. Test)/Block/Adminhtml/YOUR MODULE (e.g. Test)/Edit/Tab/Form.php

Open this file in a text editor.

Now before we make any changes, we need to decide what fields we want to create. As we’re creating a list of Stockists, I’m going to create the following:

Title – Text – This will be the name of the Stockist and we’ll use the existing Title field for this.
Address – Text – This will be a single textbox for the Stockist’s address
Logo – File – We’ll use the existing File field here but use “Translate Inline” to rename it for the client
Telephone – Text – This will be a custom text field
State – Text – This field will be a drop down and used to allow visitors to the site to only see stockists in their state

We’ll also keep the “Status” field active but remove the “Content” field

To create our new fields, we need to add them into our Form.php file in the appropriate order. Given we already have a title, the first thing we need to create is an address. We want this to be a “text area” rather than just a regular text field, so we need to specify it as an “editor” area. An example of this is shown below:

For our “Logo” field, we already have a File Upload field which will suffice for this job, so in this case it is pretty simple just to rename this area for the client. If you were making a more complex extension, you may wish to delete the old field and create a new one from scratch to make it easier to maintain going forward.

Our telephone field is pretty straight forward and can be created by copying the PHP code used for the Title field and renaming the areas relevant. Our State field however is a little more complex. An example of both of these can be seen below:

Finally, we don’t want to use our Content field any more. For the purposes of this extension, I’ve commented it out as shown below but once again, if you plan on using this in a production project, you would be better advised to remove this code along with it’s field in the database (which we’ll look at shortly).

Once you have your new code in place, your admin module interface should now look like this:

…but don’t get too excited, without any database fields for the form to write to, it doesn’t do too much.

Step Three: fine tuning the database

The ModuleCreator has already done most of the heavy lifting for us with our database but because we’ve created some extra fields now, we need to update our database schema to reflect these changes.

ModuleCreator will always create a table in your database based upon the name of the module which in this case is Test. Using PHPMyAdmin (or something similar), open up this table. You should see something like what is shown below.

Straight away you can see that the table is missing some crucial fields. By adding in the following fields, we should be able to make our Module’s form interface functional.

Address – Text
Telephone – VarChar (20)
State – VarChar (5)

Once you’ve done this, jump back and test your Module’s form. It should now retain the information you enter into it. If it doesn’t check that you’ve named your database fields with the same name as that which you used in your PHP code.

Step Four: outputting the information

The reason why we’d create a module to do something like this over just allowing the client to enter this text into a static CMS page is because:

1. It can be reused in numerous places across the site -> in numerous forms
2. It removes the client from getting involved in the layout, allowing you to utilise slightly more advanced ways of displaying this information on the screen

Given this, there is a number of different ways you may wish to display this information. Fortunately, ModuleCreator not only creates a file for you which you can use to code up your template but it provides a number of examples of how you may like to pull this information out of the database.

The best place to start with displaying your module’s data on the frontend of Magento is /app/design/frontend/default/default/template/test/test.php (this assumes that you’re not using a different theme – if you are, I’m sure you’ll know how to adjust this to your needs). Inside this file is a number of examples which more or less work by just removing the comments around the ones you like the look of. In this case, the code block around line 38 will do most of what we’re after. To use this, remove the comments but then hash out (comment out) the lines:

$item->setTitle($i);

and

$collection->walk(‘save’);

These two commands aren’t useful in producing the result we are after. If you’d prefer to keep things clean, you could instead just delete these lines.

You should end up with something that looks like this:

You can preview the effects of this by going to www.whatever-your-domain-is.com/modulename/ in my case this was www.blis-devsite.com/test/

You should see the Title for each record you’ve entered into the database. In my example above, I also appended a “<br />” to the echo statement so that each of these titles sat neatly under each other.

To display all of the information we have collected, we simply just need to add a little more PHP code calling this data. Below is an example of what I ended up using.

Which then produced the follow result:

We’re now pretty close to having a full blown working module. However, because we really want to look after our client, we need to be able to drop this code into the middle of a CMS page so that our client can still modify other elements of the page using the traditional CMS editor. To do this, all we need to do is add a Magento tag inside our desired CMS page.

Now, the ModuleCreator doesn’t seem to use the name space in it’s config.xml file which means including your code as a template tag doesn’t follow the normal conventions. Instead it needs to be included like this:

{{block type=”test/test” template=”test/test.phtml”}}

Again, I’ll throw in a quick note for anyone who is planning on using their extension in a production environment that they may want to revisit the ../Test/etc/config.xml file and add your namespace to the relevant parts of the XML file so that you can reference your extension in a way which isn’t going to conflict with others.

Step Five: Clean up after ourselves

Now our extension is complete, we just need to make sure that we go back into our admin area, switch on Translate Inline within System > Configuration > Developer and rename your Title and Filename field to “Stockist” and “Logo” respectively.

One more thing…

Now you have a fully functioning module, you can increase it’s usefulness by throwing some parameters into your template tags. You may have noticed in our example we created a “State” drop down but never used this. The purpose of this field was to allow us to filter our “Stockists” by the “State” they are located in. If we have a CMS page called SA_Stockists, then we can show all the stockists which are in the State “SA” by inserting the following template tag into our CMS page:

{{block type=”test/test” template=”test/test.phtml” selected_state=”SA”}}

we can then process this parameter within our /app/code/local/NAME-SPACE/MODULE-NAME/Block/MODULE-NAME.php file like shown below. In my case I just added an “if” statement before displaying any records but you can sort of see the flexibility something like this could provide.

As a web developer I’m always keen to keep abreast of where the PC market is at in terms of platforms and browsers. Back in 2003 it seemed that you could trust that most people were using Windows XP and IE6 but these days the market seems a lot more segmented which makes it more important than ever to know which platforms your website is getting significant exposure on.

PC World recently (Jan 4, 2010) published this article on the current state of play with the “web browsing” operating systems. The guts of their article was that mobile platforms are on the rise with 1.3% of the total market share (no surprises there). What was surprising was that there are already more Windows 7 machines on the web (8% total share) than there are Macs (maybe not that surprising if you sitting in an office place which has seen every machine upgraded to this platform) AND that there are more Java Mobile VM clients surfing the web then there are iPhones.

Here’s the break down in terms of OS Market Share:

Microsoft Windows (all flavours): 92.2% (W7: 8%, Vista: 17.9%, XP: 71.5%)
Apple Mac (all flavours): 5.1%
Java Mobile: 0.53%
Apple iPhone: 0.44%

and for good measure, where web browsers are at (according to thecounter)

Internet Explorer 7: 39%
Internet Explorer 6: 29%
Firefox: 18%
Safari: 5%

MIA from this list is Chrome and IE8 which thecounter don’t seem to track! Net Applications have Chrome at 4.63% but I’m yet to find some up to date numbers on IE8.

So, what does this all mean? Well, maybe it shows that things sure haven’t moved that quickly since 2003; XP is still the biggest player in terms of OS platforms and roughly 1 in 3 people still using IE6!!!

Statistics however are always subjective and no matter which ones you look at, their relevance is diminished by your target audience. Despite this, they do still hold some value. For developers like myself who work on many different and varied projects through out the year, it’s important to have a big picture of where things are at and these statistics help us with that. If nothing else, these stats tell us that that old XP box in the corner running IE6 on XP is still a valuable testing platform and it’s not yet time to throw it out… unless you like VMWare

I’ve just spent the last few hours discovering the ins and outs of Facebook Apps and Pages and I’ve learned a lot! So below are a few fast facts for anyone who feels like getting knee deep in the social networking pool.

1. Facebook uses its own markup called FBML. It’s pretty much a HTML but with a few minor differences, e.g. it likes you to use in-line styles, it doesn’t play well with javascript and introducing an iFrame is near impossible.

2. If you’re making a page then the FBML app is a very handy install. It is however a little limited in what it’s able to do. If you want to stretch you legs a little more then you’ll need to start thinking about developing an app.

3. If you decide making an app might be more useful to you then you’ll need to be ok with the idea that anyone will be able to install your app. This can make apps very useful for promotional material but not suitable for everything.

4. Apps have a huge Facebook API that you can use to make the most of them but there are a few pit falls. When you start to design an app you need to decide whether you want Facebook to use FBML or an IFrame. For the life of me I couldn’t work out which was more preferable as the result seemed to be just about the same. If you choose an iFrame your page will be able to stick with a more conventional form of markup but it might exclude you from taking full advantage of some of the custom Facebook code that’s on offer in FMBL.

5. Whichever method you choose, you’ll need to create a file on your web server which you can point the Facebook app at. This file will have FBML in it (or possibly XFBML if it’s an iframe) which Facebook will process for you. When you publish your app it will be fully viewable and functional at http://apps.facebook.com/your-app-name/ HOWEVER if you want the app to appear as a Tab then you might find you’ll come across a few errors. It seems that forms and iframes aren’t kosher in the Facebook tab section. There is A LOT written on the topic but very few effective implementations that I’ve seen.