How-To: build a hybrid iOS app

Ruben Goncalves

Discussion

Before we start...

If you have already read my post regarding How-To: build an hybrid Android app, you will notice that somethings will be repeated (mainly the introduction to Cordova), Just jump to iOS specific section. :)

Special Kudos to Pedro Cardoso and Pedro Sencio which helped me to write this post!

In attachment you may find a zip containing:

Index.html - example file of how your web app could be launched.
CordovaIntegration eSpace - with the Cordova version 2.4.0

OutSystems & iOS

power to the people

The Agile platform is great for both building and changing fast, while the iOS transformed our daily life, by providing us the means boost our proficiency through tools.

In this "How-To", I'll try to bring together the best of the two worlds! Allowing you to bring your (web) app to the next level functionality and client satisfaction!

Introduction

As you know, building up and OutSystems mobile app is (plain) easy, however through a web app we (so far) are not able to access to certain functionalities (camera, contacts, etc). With your Web App transformed into a hybrid App, you’ll have the opportunity to access the native capabilities of the mobile device like the camera and many others. Besides the access to these capabilities you can download plugins that can be used to enhance your application with different and innovative capabilities. And note that although your users will be installing a local application in their devices, you will still be running your OutSystems application in a Platform Server, with all the goodies you’re used to: service center, reporting, logging, etc.

Introducing Apache Cordova

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.

Read & learn more in the official website.

Transforming your web app into a Hybrid app

In order to facilitate the building of a hybrid application, and for you to be able to include native functionality in your app, I'm sharing wiht you the CordovaIntegration eSpace, that presents some shortcuts in the first step of this process: the inclusion of the needed JavaScript and the linkage with the available Cordova plugins. This is a producer eSpace that has some public actions and Web Blocks that you’ll be using in your own app.

SetupCordova Action: You will need to call this action if you’re to use the Web Blocks from CordovaIntegration eSpace. This action will set some session variables that enable you to know the type of device the client is using, either Android based or iOS based. Besides the device type, this action also sets a variable that indicating the access as being made from a Cordova enabled app. It’s recommend that you use this action in the system event Session Start.

IncludeCordova webblock: The IncludeCordova Web Block job is to include the correct Cordova JavaScript library for your device.

IsCordova Action: If your application is to be accessed from a mobile web browser and as Hybrid application, we advise you to make use this action to control the layout of your screens.

And that’s it for the integration eSpace! By now you should have your application ready to be used from a web browser and to take advantage of the native functions when running in Cordova. Before your application can call itself a hybrid application there’s a few more steps to take.

Wrapping in Cordova to iOS

To wrap your application in Cordova to use in iOS, you’ll need to install some tools on your Mac that will be used to build and test your app. After this step, you’ll have your application ready to test.

XCode + Cordova: The following steps are required in order to have cordova as a project template.

Register with Apple as an iOS developer at https://developer.apple.com/programs/ios/
1. This entails a payment and waiting for approval - usually takes a few weeks
Download the latest version of Xcode (we used the version 4.5.2)
Download and install the latest version PhoneGap*
1. Extract its contents
2. Apache Cordova iOS is found under lib/ios

* PhoneGap is a web platform that exposes native mobile device apis and data to JavaScript. PhoneGap is a distribution of Apache Cordova.

Creating a new Project: You’ve installed the tools and you’re ready to start your own project.

Open Xcode and select Create a new Xcode project. You will see an options screen like the following.

Click Next.

Note: Do not check Use Automatic Reference Counting

Select the Next button
Choose a folder to save your new app
Select the Create button

We've now created an Apache Cordova project. Next, we need to associate the project with a web directory.

We need to do this step because of a limitation in Xcode project templates.

Select the Run button in the top left corner.
1. your build should succeed and launch in the iOS Simulator
2. you should see an error in the iOS Simulator informing you that www/index.html was not found
3. we can fix this by adding a folder to the project that references www

Right-click on the project icon in the Project Navigator (left sidebar) and select Show in Finder

Using Finder, you should see a www directory inside your project
Drag the www directory into Xcode
A common mistake is to drag the www directory into your app's directory inside of Finder
Please follow the red highlighted section of the image below:
After dragging www into Xcode, you will be prompted with a few options.
1. Select Create folder references for any added folders
2. Select the Finish button
Select the folder named www in the Xcode Project Navigator
1. Select the file index.html
2. Add the following after <body>: <h1>Hello World</h1>
Change the Active SDK in the Scheme drop-down menu on the toolbar to iOS version Simulator
Select the Run button in your project window's toolbar
Open YourAppName-Info.plist, under the Supporting Files group
Change BundleIdentifier to the identifier provided by Apple or your own bundle identifier
1. If you have a developer license, you can run the Assistant to register your app
Change the Active SDK in the Scheme drop-down menu on the toolbar to YourDeviceName
1. You will need to have your device connected via USB
Select the Run button in your project window's toolbar
In order to get your app working, do the following changes to the index.html:

Until this moment, we just have the app running on the virtual device... If you want to try it in a real device... that is where the challenge starts! This guide will help you out!

Next Steps (yup, the same as to Android)

---> I'll tell you how to use plugins! [c'mon, give me some time to write it!]
---> "Wait... this way too much work...", I'll tell how to use the awesome PhoneGap Builder!

OutSystems&iOS.7z

22 Feb 2013

shivam sharma

Hi,
I want tot do same thing for Windows , Windows 8 and Blackberry.
Please let me know if you anybody have.

Thanks
Shivam

17 Jan 2015

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines