Help File – Job Board Software iOS App Documentation


 

Tutorial for Customising Job Board Software to run your own application inside it

Requirements

1. A MAC OSX device (Macmini, Macbook Air, Macbook Pro, iMac or Mac Pro)
2. Software requirements: Xcode
3. Technical Requirements: Basic knowledge of programming in Objective C and know how of using Xcode.

This involves following steps

1. Install Xcode from AppStore
2. General App Configuration
3. Testing on Simulator
4. Testing on a Real Device*
5. Distributing your app to the App Store*

*The last two steps involves a paid iOS developer account which has a nominal annual fee.

Step 1: Install Xcode from AppStore

– Xcode is needed to open, customise and test any iOS application source code. It is created by Apple and is a free MAC app.
– Click here (https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12) or directly launch the Mac App Store app and search for Xcode. Xcode is about 2-3 GB so it will take some time to download and install it.
– Once the Xcode app download is complete look for the “Job Board Software.xcodeproj” file in the finder and open it.

Step 2: General App Configuration

2.1 Xcode overview

If you’re comfortable with Xcode interface the you can jump to 2.2 else read the basics of Xcode by clicking on Help > Xcode overview

2.2 Changing the app name

This is important when you want your app to be named something else. e.g. MyCompanyApp

fig1

2.2.1 Single click on the name of project at the top of “Project Navigator” (which is located on the leftmost side). The the project name will be highlighted and you can type the new name. Hit Enter.

fig2

2.2.2 Once you hit enter key, under the “Activity Viewer”, you’ll be prompted to change name of some files. e.g. “Job Board Software.xcodeproj” file which you clicked to load the project in Xcode will be renamed to “MyCompany.xcodeproj” if the new company name you entered is MyCompany.

2.2.3 Press “Rename” and all files will be renamed. When the renaming is complete then screen B (Fig 2) appears with green checks in each replacement made and this dialog will auto close after sometime.

2.2.4 You may test the changes made on your app by following steps on Section 3: Testing on Simulator.

2.3 Changing the App Icon

You company much be having some Logo of its own and so your custom app may need to show that Logo as App Icon.

fig3

fig4

2.3.2 In that panel click “AppIcon” (highlighted in red in Fig 4). In the “Editor View” there will be various icons for different versions (retina and non retina display, iOS 6 and iOS 7) and purposes (App icon, Spotlight icon, Settings icon).

2.3.3 iOS app icon is square and you should get it designed by some designer or if you have the logo file then you can generate the app icons from online services like http://makeappicon.com/. In that case your iOS AppIcon will look good if your log is already close to square in shape. Some other iOS app generating web services are:

– www.gieson.com/Library/projects/utilities/icon_slayer/
– http://www.quirco.com/iPhoneIcon/
– http://www.appiconsizes.com/

2.3.4 All these services will generate icons of different sizes. You will need following sizes preferably in PNG format.

– 29px
– 40px
– 50px
– 57px
– 58px
– 72px
– 76px
– 80px
– 100px
– 114px
– 144px
– 152px

fig5

2.3.5 Once you’ve obtained icons in these sizes then its time to replace them. Open the folder where you have all icons for sizes mentioned above. If you’re in the column view of Explorer then clicking on a file will show its size (highlighted in red in Fig 5). Drag and drop on the appropriate tile in the Editor area. Tiles labelled as 1x will have the specified size. e.g. Tile labeled 1x under iPhone 29pt will have AppIcon of size 29px.

Tiles labelled as 2x will have AppIcon of double the size mentioned. e.g. Tile labelled 2x under iPhone 29pt will have image having size 58px (29 x 2). Keep on doing this till you replace all icons.

2.3.6 You may test the changes made on your app by following steps on Section 3: Testing on Simulator.

2.4 Changing environment settings

There a few other settings that you might like to tweak.

2.4.1 Changing the devices supported
You may want to create a iPad only app or a iPhone specific app. This way, if you have made your app iPhone specific, then it won’t be listed in App Store for a iPad device but it will show in App Store for a iPhone.

fig6

Click the project name under “Project Inspector” (highlighted in red in Fig 6 at left top). Click General (highlighted in red in Fig 6 at middle top). You’ll find a drop down for “Devices” (highlighted in red in Fig 6 at middle of screen) under deployment info section (if the section is collapsed open it by clicking small arrow on its left). You can select iPhone or iPad to make app specific to these devices.

You may test the changes made on your app by following steps on Section 3: Testing on Simulator.

Note: If you have accidentally made application specific to any of the devices then again selecting universal will ask for copying the storyboard file. Click “No” as it already exists in project and Xcode will auto pick the right storyboard for corresponding device.

fig7

2.4.2 Changing the orientation supported

Orientation is the viewing style. One may hold the iOS device in Portrait mode (vertically) or in Landscape mode (horizontal). iOS supports 4 orientations shown in Fig 7 and they can be changed under “Deployment Info” > “iPhone/iPad” tab > “Device Orientation”. By default Job Board Software don’t support upside down orientation for iPhone. You have to make this change per device if your app is universal. Options can be found under General > Deployment Info > Device Orientation. (Highlighted in red in Fig 8)

You may test the changes made on your app by following steps on Section 3: Testing on Simulator.

fig8

2.5 Changing the App URL

The code you get by default loads web version of Job Board Software mobile application (URL: http://www.ejobsitesoftware.com/jobsite_demo/mobile/). You can load you website into the iPhone app and yes it will be universal and supports iOS 6.

2.5.1 Open “ViewController.m” under ProjectName > WebViewDemo located in “Project Inspector” and find a line at the start of the document which looks like static NSString *homeURL = @”http://www.ejobsitesoftware.com/jobsite_demo/mobile/”;.

2.5.2 Replace the URL in this line to add your company’s site URL. You just have to replace the URL text and leave everything intact. e.g. If your company’s site URL is www.mycompany.com then the resulting code will be static NSString *homeURL = @“http://www.mycompany.com”;

You may test the changes made on your app by following steps on Section 3: Testing on Simulator.

Warning: As you may probably know altering any other character on this line in any form (adding character or removing a character or both) may make the app unusable.

2.5.3 Since www.mycompany.com is only an example domain, the screenshots below (Fig 9 and 10) describes how to load smashingmagazine.com into your app.

fig9

fig10

Step 3: Testing on Simulator

iOS simulator is a virtual environment which shows how your app is going to look on Real device. Its very accurate but it is only for development purposes. It means that if you really want to distribute your app to App Store (Explained in Step 5) then apart from testing on simulator you have to test on real device too (Explained in Step 4).

In Xcode toolbar there are 3 things at the top right. (Fig 11)

fig11

– Build and Run current scheme button or Run button
– Stop the running Scheme button or Stop button
– Scheme Menu

fig12

3.1 First select the scheme in Scheme menu by clicking the phone icon after your application name. This will open up a list of environments in which you can simulate (Fig 12). The number of options displayed here depends on the simulator environments installed inside your Xcode installation. By default the Xcode comes with only one environment which is the latest environment at the time of download of Xcode. As of now its iOS 7.1 Simulator which shows options to test on devices which can run iOS 7.1.

Fig 13

3.2 Click the Run button (first button having play icon). If you’re running your application first time this will Build your code (building basically check for any errors in source code) and then if its successful then it will Run your app in simulator. If your app is already running it may prompt to stop the currently running app. The simulator will be opened and after a few seconds your app will be loaded and displayed in the simulator (Fig 13).

3.3 You can stop the current app by clicking on the stop button.

3.4 In case you see “Unable to Load App” error (Fig 14) then check you internet connectivity and also try loading the URL in ViewController.m (See section 2.5) into browser.

Note: In case there is any deviation from the above steps in your case e.g. in case of error, please contact us via http://mobilemerit.com/contact-us/.

fig14

Step 4: Testing on a Real Device

You obviously want your customised app to run on an iOS device. For this you need a paid iOS developer account. Be sure to sign up here: https://developer.apple.com/register/index.action.

4.1 iOS Dev Center

Go to the iOS Dev Center and Log in using your iOS Developer Account: https://developer.apple.com/devcenter/ios/index.action.

4.1.1 Certificates (Development and Distribution)
(Skip this step if you already have you certificates.)

A. Once you are logged in go to the iOS Provisioning Portal (https://developer.apple.com/ios/manage/overview/index.action) and then go to certificates.
B. If you don’t have the WWDR intermediate certificate installed use the link Apple provides on this page.
C. Then request a certificate for both Development (to build your app on a real device) and Distribution (to submit to the AppStore)
D. Once you are done download both .cer files and open these two files in Keychain Access.

4.1.2 Devices
(Skip this step if you have already configured your device IDs or you are not interested about building your app on a real device. However we recommend to build your app on a real device before submitting to the AppStore for testing purposes.)

A. Open Xcode and connect your iPhone/iPod Touch/iPad to your mac.
B. On the top bar click on Window -> Organizer.
C. Go to devices and select your device on the left menu.
D. Click on use for development. Enter your iOS Developer account password and login.
E. You should be able to see the Identifier. Copy and paste this value in the iOS Dev Center after clicking on Add Devices
F. You can add up to 100 devices on each iOS Developer Account.

4.1.3 App ID

A. Select App IDs in the iOS Provisioning portal. Click on the New App ID button.
B. Choose a description for your App (we recommend to use your app name, ex: MyCompany).
C. Then enter a bundle identifier. Usually developers choose to enter their company name dot the App Name, ex : com.mycompany.myCompanyApp
D. You need to do that for each of your apps.
E. Then click on submit.

4.1.4 Development Provisioning Profiles
Skip this step if you are not interested about building your app on a real device. However we recommend to build your app on a real device before submitting to the AppStore for testing purposes.

A. Select Provisioning in the iOS Provisioning portal. Click on new profile.
B. In the profile name we recommend you to enter your app name followed by Dev to remember which certificate is the developer one, ex : Emerald Dev.
C. Select your certificate and your App ID.
D. Then Select all devices you want to build the app on.
E. Click on submit and refresh the page until your profile status switches to active.
F. Then download it and open it. You should be able to see it in the Xcode’s Organizer.

4.1.5 Distribution Provisioning Profiles

A. Select Provisioning in the iOS Provisioning portal. Go to the Distribution tab.
B. Click on new profile.
C. Select App Store as the distribution method.
D. For the profile name we recommend you to enter your app name followed by Distribution to remember which certificate is the distribution one, ex : Emerald Distribution.
E. Select your certificate and your App ID.
F. Click on submit and refresh the page until your profile status switches to active.
G. Then download it and open it. You should be able to see it in the Xcode’s Organizer.

4.2 Running your app in iOS device via Xcode

A. Open your project in xcode (.xcodeproj file).
B. In the left menu select your project and go to the info tab.
C. Enter the bundle identifier you entered at step 4.1.3 C in the iOS Dev Center. (Highlighted in red in Fig 15)
D. Switch to the Build Settings tab. Click All tab below build settings tab. Change the code signing identity to iOS Developer (Fig 16).

You should see your device’s name near the top left corner of Xcode’s window (instead of iOS Device).

fig15

fig16

Step 5: Distributing your app to the App Store

This is done through iTunes Connect and Xcode.

5.1 iTunes Connect

A. Go to iTunes Connect (https://itunesconnect.apple.com/) and log in using your paid iOS Developer Account.
B. Click on Manage your applications and click on the Add New App button.
C. Fill the form and click on continue. (The SKU number is a unique number for Apple to identify your app, you can type whatever you want ex : mycompany2014iphoneAppName).
D. Then Select an Availability Date.
E. If you set the date to the current day, the app will be released as soon as it gets approved.
F. Then select your price tier. As an option you can also select specific stores.
G. Press on continue.
H. Complete this entire form and hit save. You can learn more about each field by hovering each help icon with your mouse.
I. Then come back on your app and click on the ready to upload binary button. Your app status should switch to “Waiting for upload”.

5.2 Distribute your app from Xcode

A. Open your project in xcode (.xcodeproj file).
B. In the left menu select your project and go to the info tab.
C. Enter the bundle identifier you entered at step 4.1.3 C in the iOS Dev Center. (Highlighted in red in Fig 17)
D. Switch to the Build Settings tab. Click All tab below build settings tab. Change the code signing identity to iOS Distribution (Fig 19).
E. Click on Product (top bar) and choose archive.
F. Once the archiving process is done wait for the organizer window to open.
G. Click on validate first and follow each step. Xcode is going to verify the identity and your project settings.
H. Once your app passed validation click on Distribute and select submit to the iOS App Store.

fig19

I. Follow each steps and once your app has been uploaded go to iTunes connect and check the status of your app. It should be “Upload received”. It will switch few minutes after to “Waiting for review”.
J. The average is usually 5 business days for an app to get approved/rejected.

If your app is rejected please contact us at (http://mobilemerit.com/contact-us/) to get assistance. Be sure to include as much details as possible (Your project, The resolution center discussion, etc…).

Xcode Layout Guide

For detailed information, open Xcode, goto Help > Xcode overview.

fig20

Posted in IOS | Comments Off on Help File – Job Board Software iOS App Documentation
Powered By: wpnova.com