Thursday, October 21, 2010

Introduction to iOS / iPhone Programming - Developing a simple flashlight application with a custom logo

Introduction

I am enrolled in Technical Writing this semester at the University of Louisiana at Lafayette (ENGL 365) and for my final project I chose to do an instructional presentation on how to develop a simple iPhone application. Many of my fellow students were unaware of the free resources available to anyone who is interested in learning how to build an iPhone application. So I developed this brief instructional guide to cover 4 main topics:
  1. Equipment & Supplies
  2. Registration with the Apple Developer Program 
  3. Downloading & Installing Developer Tools 
  4. Creating & Testing Your iPhone Application 
    I had originally also planned on covering how to transfer this application onto your iPhone for testing purposes, but I have to keep my presentation to between 10-15 minutes and also allow for Q&A so I'm going to provide a few links at the end that discuss testing applications on real devices.




    Equipment & Supplies

    There are not many pieces of equipment and/or supplies needed for following these instructions, but the minimum requirements are:
    1. Mac computer running OS X (Leopard, Snow Leopard, or higher)
    2. Internet Connection
    3. Email Address

    Registration for Apple Developer Program

    You have 4 options to choose from when you are deciding which Apple Developer Program for which to register. Additional details and a complete breakdown of each are available at http://developer.apple.com/programs/which-program/.
    1. Individual - $99 / year 
    2. Company - $99 / year 
    3. Enterprise - $299 / year 
    4. University – Free (enroll in iPhone Development Course)
    NOTE:  Although the website does indicate that you need to pay the fees in order to complete your enrollment in the program, you may register for the Individual program and wait to pay any fees until you are ready to distribute your application on the App Store.  If you just wish to practice / study iPhone development, you are never required to pay the $99 registration fee.

    NOTE:  The registration page also indicates that a technical requirement for developing applications is a Mac computer running Snow Leopard (OS 10.6 or higher).  This is true if you download and install the latest version of XCode, but I will cover steps on downloading older versions in case you are running a previous version of OS X (Leopard).  These links work now, but may be removed by Apple in the future.

    To register for membership in the Apple Developer Program, follow these steps:
    1. Open http://developer.apple.com/programs/start/standard/

    2. Choose the type of account to setup.  If you have an existing Apple Id you use with iTunes or any other Apple Online service, you may choose that here.  For the purpose of this demo, I will create a new account.

    3. Choose your account type.  For most of you who are reading this, and for this demo I would suggest an Individual account.

    4. Complete Apple Profile - fill in whatever information is required by Apple and save your profile.

    5. Email Confirmation - you will be sent an email at the address you use for registration.  You should receive it quickly, but you must wait until you receive it before proceeding!

    6. Enter your Billing Info into your profile - You won’t actually be billed unless you complete checkout which isn’t necessary unless / until you want to publish your Application on the App Store!
    7. Choose Developer Program Types - For this demo, we only need to join the iOS developer program (it's focused on iPhone / iPad development).  However, you may also join the other two if you are interested in learning about Mac or Safari development.

    8. License Agreement - You must review and accept all the terms of the License Agreement.  When you complete this step, your account will be active.  There is no need to go any further unless you know you want to pay the $99 / year fee to be able to publish applications in the Apple iTunes App Store.

    Downloading & Installing Developer Tools

    Your Mac shipped with a base installation of the developer toolkits called XCode & Interface Builder, which are Apple's Integrated Development Environments for designing and building Mac applications.  In order to build iPhone applications, you must download an updated version of XCode and Interface Builder that come along with a specific iPhone Software Development Kit (SDK).  

    If you already have the latest version of Snow Leopard installed on your Mac, you can use the link that is offered when you first register and enter the iOS Dev Center - http://developer.apple.com/devcenter/ios/index.action.  

    However, please note that you can not install that file if you have any version of Mac OS X prior to 10.6.  If, like me, you have an older version (Leopard) and you don't want to upgrade to Snow Leopard just to install XCode, you can download and install a previous version, but the version you install must match the version of your Mac OS.  The XCode Wikipedia Page has a complete breakdown of the versions for you to review.

    For this demo, I am running Leopard (OS X v10.5) so I will be using XCode 3.1.4 with the iPhone SDK, which is available on the Apple site (for now) at http://developer.apple.com/ios/download.action?path=/iphone/iphone_sdk_3.1.3__final/iphone_sdk_3.1.3_with_xcode_3.1.4__leopard__9m2809a.dmg.  Apple has a tendency of removing deprecated versions after a while, so you should grab that quickly or prepare yourself for upgrading to the latest version of Mac OS (Snow Leopard) if you want to proceed.

    If you have an even older version of Mac OS, you can find additional links to download their appropriate versions of XCode at http://iphonesdkdev.blogspot.com/2010/04/old-versions-of-iphone-sdk.html.  No matter which version you want, you will be required to register and login to the Apple Developer Program to complete any of the downloads I link to above.

    Once you have completed downloading the installer disk image (.dmg) you can mount (double-click) the image and run the setup application.  



    You won't need to change any of the default values for the purpose of this demonstration.  You can click "Next" at each prompt to accept the default installation parameters which will install XCode in approximately 10 minutes or less.


    Creating & Testing Your Custom iPhone Application

    This section is divided into two sub-sections:
    1. Creating & Testing Initial Application - The goal is to create a simple flashlight application for an iPhone that displays a white screen to light up an area when it is launched and tested in the Simulator.

    2. Updating Application to Support Additional Features - This section's goal is to update the application to remove the status bar and include a ULL Logo Image.
    Creating & Testing Initial Application

    1. Launch XCode (You can access from the Finder as shown above)

    2. Create New Project [File -> New Project]

    3. Select Window-based Application. This will create a blank application project and open the project resources in XCode.  When prompted, name the application "Flashlight"

    4. To test, choose [Build -> Build and Run] from Menu. This will open up your iPhone simulator and launch your application.

    Updating Application & Testing
    1. Open XCode.

    2. Expand Resources and Open your <APPNAME>-Info.plist file as a plain text file. To hide the default status bar included on your application, add the following entry:
      <key>UIStatusBarHidden</key>
      <true></true>


    3. Click [Build and Go] to launch the simulator with the updated application without a status bar.

    4. Drag and Drop the ULL Logo Image into the Resources folder in XCode.  I have downloaded an image to use in this demo from a page on the ULL website - http://www.ucs.louisiana.edu/~jjm9638/ull.gif

    5. When prompted, click “Copy items into destination group’s folder (if needed).” You can leave the rest of the default options selected. Click “Add” button to finish.

    6. Open Interface Builder by expanding the [NIB Files] Group and double-clicking the [MainWindow.xib] file.

    7. Notice the [Library] panel and the blank [Window] panel that opens up. Click the [Media] button to view the media files that are available in the project.

    8. Drag and Drop the ULL Logo image onto the main [Window] panel and position it the way you would like on the screen.

    9. Click [Build and Go] to launch the simulator with the updated application without a status bar and with the ULL Logo.

    That completes this instructional guide on creating a simple iPhone application flashlight.

    If you would like to know more about copying this application onto your own iPhone / iPad for testing purposes, please note that there is a rather lengthy process that Apple requires developers go through to authenticate their code and sign it with an encryption key before allowing you to transfer an app to any iPhone or iPad.

    You can find detailed instructions on completing these steps at http://mobiforge.com/developing/story/deploying-iphone-apps-real-devices & http://stackoverflow.com/questions/246422/how-can-i-deploy-an-iphone-application-from-xcode-to-real-iphone-device