iOS App for Mobile Website!Documentation!!!

What is IOS App for Mobile Website?!!IOS App for Mobile Website allows you to run any website inside it and if that website is responsive or mobile compatible, you get your native mobile app in few minutes. Its a universal app which means it can run on iPhone as well as iPad and it supports latest iOS 7 and also is compatible with iOS 6.!!Features!!- Fully featured IOS App for Mobile Website running under the app.!- Well documented code and hence easy to customise.!- iOS6 and iOS7 compatible.!- Universal app.!- Share any page on social platforms or via mail.!- AdMob ready!!!!!

Tutorial for Customising IOS App for Mobile Website 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 “IOS App for Mobile Website.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!

Fig 1!!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.!

Fig 2!!2.2.2 Once you hit enter key, under the “Activity Viewer”, you’ll be prompted to change name of some files. e.g. “IOS App for Mobile Website.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.!

!Fig 3!!

2.3.1 Go to the “Project Inspector”. In case your “Project Inspector” doesn’t look like in Fig 3 then expose the contents of your project by clicking on the little arrow at the left of your project name. Similarly open WebViewDemo folder and click “Images.xcassets” (as highlighted in red in Fig 3). In the panel just right to the “Navigator Area” all image assets will be listed.!!!!

!Fig 4!!

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

Fig 5!!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.!

!Fig 6!!

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.

Fig 7!!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 IOS App for Mobile Website 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.!

Fig 8!!

2.5 Customising the App behaviour!!2.5.1 CHANGING THE APP URL!!The code you get by default loads web version of IOS App for Mobile Website 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.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.mobilemerit.com";.!!!2.5.1.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.1.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.!!2.5.2 CONFIGURING ADMOB!!AdMob is a framework by Google which enables any android or iOS app to display ads inside it. The code you get is AdMob ready. You just need to link it with your AdMob account. Its required that your app is submitted and approved either in Apple App Store or Google Play Store. Here are the steps:!!2.5.2.1 Signup for AdMob and go to your homepage.!2.5.2.2 Click the button “Monetize new app”.!2.5.2.3!! 2.5.2.3.1 Step1 - Select an app: A screen will appear with a search bar (under Search for your app tab). Type your app name and it will search in Apple App Store and Google Play Store to get possible matches. Select the appropriate app by circling the select button and then click blue continue button.!! 2.5.2.3.2 Step 2 - Select Ad format and name ad unit: Select type of ad, Banner in this case. Change the “Text ad style” field to “Customised” and change the border colour to black. Type an ad name in field “Ad unit name” and hit Save.!! 2.5.2.3.3 Step 3 - View setup instructions: Copy the Ad unit ID and hit Done.!! 2.5.2.3.4 You can see video of all these steps here.!2.5.2.4 Now open ViewController.m and find a line that says “// Add your adUnit ID here”. In the next line you will find a dummy value for the AdUnitID (like this ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx). Replace the string with the value you noted down in step 2.5.2.3.4. In the next line the AdMob container is being hidden by setting the value to YES. Replace the value with NO.!! ! !

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !Fig 9 (iPad Retina, Portrait View)

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !Fig 10 (iPhone Retina, Portrait View)

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)!! !!!

!!!!!Fig 11!!

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

!Fig 12!!

!!!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/.!!!

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !Fig 14

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.!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).!!!

!Fig 15

! !!Fig 16!!!!

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.!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.!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…).!

!!!Fig 17

!

Xcode Layout Guide!!For detailed information, open Xcode, goto Help > Xcode overview.