Packaging your SAPUI5 application using Apache Cordova for iOS

[prathik]

Let me begin with a quick introduction to PhoneGap... 

     PhoneGap is a mobile development framework produced by Nitobi, purchased by Adobe Systems in 2011. It enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of device-specific languages such asObjective-C. The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs). From version 1.9 onward it is even possible to freely mix native and hybrid code snippets.

The software underlying PhoneGap is Apache Cordova. The software was previously called just "PhoneGap", then "Apache Callback". Apache Cordova is open source software.

What do I need ?

     Well, Here's what you need to get started with ...

• SAPUI5 application ready and good to go
• Xcode  5.0 for ios 7 platform  to be installed in Mac
• Node.js to be installed (you can download here)
• Cordova to be installed after the installation of Node.js

I've done all the installation stuff, What do I do next ?

Run the following commands in the terminal window

                “$ sudo npm install -g cordova ”

You need to traverse to the directory where you want to create the cordova project

“$ cordova create hello com.example.hello HelloWorld”

Here “hello” is the name of the directory where your source code is maintained, and “HelloWorld” is the name if your app.

Now openthe Xcode project created at the specified directory

     You have to manually copy paste the files (view and controller files) in the folder structure by traversing to the folder view on Mac and not in the Xcode ( Warning : pasting it directly in the Xcode project won’t copy the files in the folder structure of Mac, to avoid this paste it manually in the folder structure ).    

     You can do this by right clicking on the Xcode project -> show in finder…Here you can go ahead and copy paste your files.

Now you can run your app in the simulator to check. You can select your choice of target device and run the app.

ok, I've done everything , So  how do I actually deploy it to my device ?

To deploy it to your device you need to generate a .ipa file (this is just like your .apk file for your android)

Before you generate the .ipa file, go to build settings option of Xcode, from where you can choose the targeted device family to which you want to deploy the app .

In the Xcode  menu bar go to Product -> Archive

The below list displays the list of all previously generated .ipa files with versions, now click on distribute

Choose “Save for Enterprise or Ad Hoc Deployment “

Here select your relevant provisioning profile...

Specify the name of the .ipa file you want to generate

Your .ipa file will now be generated :smile: and you can install your application on the device using iTunes.

Cordova Command line options

“create <PATH> [ID [NAME [CONFIG]]]  "

    creates a Cordova project in the specified PATH, wit ID reverse-domain-style package name - used in <widget id> NAME is a human                     readable field CONFIG is a json string whose key/values will be included in [PATH]/.codova/config.json [--copy-from|src=<PATH>] ... use                     custom www assets instead of the stock Cordova hello- world. [--link-to=<PATH>] ......... symlink to custom www assets without creating a                     copy.

“help”                  

                    shows the syntax summary

“info”

                   print out useful information helpful for submitting bug reports and getting help.  Creates an info.txt file at the base of your project

                   " platform(s) [{add|remove|rm} <PLATFORM>]“   add or remove a specified PLATFORM, OR [{list|ls}] ........ list all installed and                                                available platforms [{update|up} <PLATFORM>] ...... update the version of Cordova used for a specific  PLATFORM; use after updating                                   the  CLI.

“plugin(s) [{add|remove|rm} <PATH|URI>]”

                   add or remove a plugin from the specified PATH or URI, OR  [{ls|list}] ......... list all currently installed plugins [search <keyword1                     keyword2...>]. search the plugin registry for plugins matching the keywords

“prepare [PLATFORM..]”

                    copies files for specified platforms, or all platforms, so that the project is ready to build in each SDK

“compile [PLATFORM..]”

                     builds the app for specified platforms, or all platforms

“build [PLATFORM...]”

                      shortcut for prepare, then compile “run [--debug|--release] [--device|--emulator|--target=FOO]     [PLATFORM] “ deploys app on                     specified  platform devices / emulators

“emulate [PLATFORM...]”

                       alias for "run --emulator"

“serve [PORT]”

                   runs a local web server for www/ assets. Port defaults to 8000.

                    Access projects at: http://HOST_IP:PORT/PLATFORM/www

Command-line Flags/Options

                 -v, --version -  prints out this utility's version

                 -d, --verbose - debug mode produces verbose log output for all activity,including output of sub-commands cordova invokes

Happy coding :smile:

Please feel free to leave your suggestions.

References: Wikipedia - Introduction to phoneGap.