Publishing IdeaPress Apps to the Apple App Store

Welcome to this post on publishing your IdeaPress app to the Apple App Store, if you haven’t created your app using our new wizard take a look here in addition if you want to publish on the other platforms we got you covered here.

Why did we split up our guides this way you may ask. The answer is that submitting apps for Android and Windows Phone takes an hour, tops, if you know what you’re doing. It’s swift, logical and relatively painless. It’s almost so intuitive that you may not even need a guide!

Submitting an app to the Apple store is quite frankly hell compared to the other stores. The only analogy that I can think of that accurately describes it would be you as a three year old child trying to navigate through an airport (checking in your bags, getting through security, finding your gate etc) all while blindfolded.

The App Store App-Store-Icon_200x200

For those of you who don’t know yet, the App Store is where you will find all the apps available for iPhone and iPad that have been approved by apple. You will have to have your app on the store before you can use the logo below to let people download your app to their iPhones and iPads.

Download_on_the_App_Store_Badge_US-UK_135x40

Publishing Tools

For this process you’ll need a valid iOS developer account, a generated IdeaPress app and the tools and websites below*:
  1. developer       the website where we will manage our app certificates and IDs
  2. itunes-connect     the website where we will manage our app
  3. gimp      GIMP, which I will be using to edit my photos, but you could even use Microsoft Paint if you’d like.
  4. xcode     xCode, which we will use to open our IdeaPress iOS project. Apple recently announced that by February 1st
  5. ios-emulator     iOS Emulator, which we will be using to take app screenshots (comes with xCode). (you’ll be using this A LOT)

*Don’t forget that we also offer publishing services should you need help.

Publishing Process

1. developer     https://developer.apple.com/account/ios/profile This is where you need to go to get the distribution certificate for your future app. This certificate is needed to both test the app on the emulator and eventually publish it to the store. You will need an account for this.

  1. Make sure you have a Distribution Certificate for Production -> App Store. This is needed to publish apps in the store and is essentially you “companies” certificate to publish apps in the iOS store. To create a distribution certificate, head to the developer homepage and click on “certificates, Identifiers and profiles”  and then go to certificates. Click on the “+” sign to create your certificate if you don’t have one.
  2. Next we need to set an appID for this new app that we will be publishing. Under the same certificates, identifiers and profiles tab as before, we now go to Identifiers -> App IDs then click the + button to create AppID for the app.

    1. App ID Description will be the name of your app. Mind the symbols that they do not allow.
    2.  Scrolling down a little we find the explicit appID. To create your this app ID it should look like this: net.ideanotion.ideapress.makewebnotwar  where makewebnotwar is the name of your IdeaPress app. The net.ideanotion.ideapress is because the app was made with an IdeaPress bundle ID.
  3. Next step is to finally create the provisioning profile. You do this by going back to the “certificates, identifiers and profiles” section, then finding “distribution” in the “provisioning profiles” section. Make sure that you click on the “app store” and NOT the “Ad hoc” option. use the certificate that you made earlier here. (Download and double click (installs itself)) Keep this in a safe place in case it didn’t install correctly!

AppIds

2. itunes-connect     http://itunesconnect.apple.com

Now that we have have the disitrubtion provisioning profile, we can get started on actually submitting your app! For some reason Apple decided to not include all of these parts in the same website, so now that we have our provisioning profile, we have to head over to itunes connect

  1. Click Manage Apps
    1. Click Add New App

    2. For SKU use the same Bundle ID from the AppID that you used when making your provisioning profile (net.ideanotion.ideapress.yourappname)

    3. App Name, Description, Keywords and URL will be similar what you entered in the IdeaPress wizard. In fact for the most part you can copy and paste here.
    4. Upload Screenshots (See Step4 as you will need an emulator for this)

    5. Setup the Binary for Upload, asks you about encryption (See Step 5/6)

iTuneConnect

3. gimp      Using GIMP for Image Resizing to Create Icon and Splash Picture (You can also use any other image editor of your choice)

  1. Get a 152×152 picture for logo and a big 2048 x 2048 for splash screen making sure the inner content does not exceed 1496×1496. Meaning the space between 2048 and 1496 should be a border.

    • Use GIMP to resize with the general procedure:
      1. Image Resize
      2. Canvas Resize (Click Centre)
      3. Add a layer in the back to image size
      4. Dropper tool
      5. Paint bucket away the alpha
    • Sizes that you will need are as follows. IMAGE STRETCHING WILL NOT WORK. If Apple sees even a whiff of pixelation in the images then they will deny you certification. Your best bet is to start with the biggest images and downsize from there.
      • 152×152 (Icons)
      • 144×144
      • 120×120
      • 114×114
      • 76×76
      • 72×72
      • 57×57
      • 640×1136 (iPhone Splash Screens)
      • 640×960
      • 320×480
      • 2048×1536 (iPad Splash Screens)
      • 2048×1496
      • 1536×2048
      • 1536×2008

gimp

4. ios-emulator     Using iOS Emulator to Get Screenshots for App Store

  1. Launch the xCodeProj file for Ideapress (found in the “source” folder and the click Play to launch the emulator running on the following settings
    1. iPhone 4 Retina (3.5 inch)
    2. IPhone 5 Retina (4 inch)
    3. iPad Retina
  2. Use File->Save Screenshot to save to desktop saving 3-5 screenshots of each. An annoying little tid bit here is that the screenshots will be saved to the desktop of your mac. When your taking the number of screenshots that you’ll be taking, it can get pretty messy sorting them all on your desktop.

  3. Save 3 – 5 Sets of Screenshots of each
    (xCode TopLeft IdeaPress > IdeaNotion’s iPhone 4)

    1. change to iPad Retina

    2. iPhone Retina (4-inch)

    3. iPhone Retina (3.5-inch)

iOSEmulator

5. xcode     xCode Project File IdeaPress.xcodeproj Here we work on the app itself to attach it to your provisioning profile, bundle ID etc.

  1. Fill out General -> Identity -> Bundle Identifier  with the App ID net.ideanotion.ideapress.makewebnotwar  in our case, with your app name replacing makewebnotwar when you do it.

  2. Set your provisioning profile for publishing by going to Build Settings -> Code Signing -> Provisioning Profile to the one you downloaded in step1 (told you to keep it safe!!

    1. Set Code Signing Identities to the iPhone Distribution

  3. Change the app name under your app icon at Build Settings -> Packaging -> Product Name (ex. MWNW)

  4. Attach the logos and splash pictures you made earlier. Note that if you do Retina versions, then you won’t have to do non-retina versions when dealing with iPads.:

    1. General -> App Icons -> App (Do all)
    2. General -> Launch Images -> iPhone (Do All)
    3. General -> Launch Images -> iPhone (Do Only Retina)
  5. Finally get xCode set to iOS Device and go product->archive and upload your project (Note you can only do this if you finish everything in step2 and click Ready to Upload Binary)

  6. Click distribute (Submit to App Store). Apple will then do some cursory tests of your app before sending it off to the certification center. If something pops up they will let you know so that you can fix it.

xcodeproject

Finishing Up

Now that you’ve submitted your app, you can head back to the dashboard to see the status. Green means it has been published, yellow means it’s still in testing and red means that there is a problem.

finished

When you’re done you’ll find your app on the appstore here

https://itunes.apple.com/ca/genre/ios/id36

store

Stay Tuned and Happy iOS App making =)

Colin Siu Lun Chung and Mathieu Dubuc

Tagged with: , ,
Posted in IdeaPress, Technical

Leave a Reply