Cordova:Cordova (formerly PhoneGap) allows to build cross-platform apps (Android, iOS, and others) based on web technology.
SDKs for targeted platforms: You need Android Studio for making Android apps, and XCode for developping iOS applications that run on iPhone.
Development Process by Example
We explain here the development process step-by-step. We illustrate it using a simple counter example. The cordova project with HTML code and the generated javascript file are available on github.
1. Setup your Cordova project
Create a Cordova project. It can be done using the following command line:
cordova create Counter
Define your target platforms, by running the following command line in your project folder: cordova platform add ios android
Add any Codova plugins, you might need. There exist many plugins that deal with all aspects of mobile apps, such as using a camera or accelerometers. Plugins rely on platform specific code, with a Javascript API. In this example, we don't need any plugin.
2. Develop Your PharoJS App
2.1 Develop the HTML Side
Edit www/index.html file according to your app requirements. Our app rely on 2 buttons, and a DIV to display the counter's value. Each of these three HTML elements has an ID attribute that we'll use in our Pharo code.
<div id="countDisplay" class="countText">0</div>
<button id="incrementButton" class="incrementButton">Increment</button>
<button id="resetButton" class="resetButton">Reset</button>
Add a reference to the index.js that will be generated by PharoJS. So, the www/index.html file should include this line:
<script type="text/javascript" src="js/index.js"></script>
You can add extra HTML files, as well as CSS files in the www folder. You can add third party javascript libraries too.
Fix the security policy in the index.html file to allow websockets connect from the app to the localhost. The meta tag for content security policy should be silimar to the following one:
>meta http-equiv="Content-Security-Policy" content="default-src ws://localhost:* 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
This is mandatory for development to run the tests. Otherwise, all tests will raise the Javascript interpreter NOT available error. On the console of the web browser, you'll read:
Content Security Policy: The page's settings blocked the loading of a resource at ws://localhost:1068/javascript-bridge ("default-src").
2.2 Develop the Pharo Side
Define an app by creating a subclass of PjFileBasedWebApp. That is PjCounterCordovaApp in our example. Since in this example we focus is on the the process, we create PjCounterCordovaApp simply by copying the existing PjCounterBrowserApp
Ensure that the javascript is generated in the www/js folder of the Cordova project. This is done by defining the following class side method in PjCounterCordovaApp:
appJsSubFolder
^'js'
PharoJS does not have support for testing on mobile application. So, test must run in a web browser. If you rely on plugins, you need to use Mocks in your tests. In our example, simply copy the existing PjCounterBrowserAppTest, and name the new class PjCounterCordovaAppTest. This new test class should refer our new application class PjCounterCordovaApp.
Ensure that your app references the www folder of our Cordova project. The simplest way of doing this is simply running the tests defined in PjCounterCordovaAppTest. You'll get prompted to provide the folder. Use the displayed file browser and select the www folder or our project.
3. Run on Mobile
Export your PharoJS app for production, via the PharoJS Playground/PjCounterCordovaApp/export app menu. You can also do the same by evaluating PjCounterCordovaApp exportApp in a playground.
Test your app on mobile. First ensure your smartphone is connected via USB to your computer. Thenm launch your app by evaluating the following command line in your Cordova project folder:
For Android: cordova run android
For iOS: cordova run ios
4. Release the App on Public Stores
Setup the config.xml with your application info
Add images for splash screen and icons in the res folder of your Cordova project. You need to have them for all screen dimensions and resolutions.
Build the excutable and upload to the store. The hell starts here! Good luck especially with the Apple store.
