-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmobileAppDev.html
101 lines (93 loc) · 6.13 KB
/
mobileAppDev.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>Mobile Apps Development | PharoJS</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/pharoJS.css"/>
<div class="pjHeader">
<a href="http://pharojs.org"><img alt="PharoJS Logo" src="img/pharoJsBicolorLogo2016-08-12.png"></a>
<h1>Mobile Apps Development</h1>
</div>
<h2>Prerequisites</h2>
<ul>
<li><strong>Cordova:</strong> <a href="https://cordova.apache.org/" target="_blank">Cordova</a> (formerly PhoneGap) allows to build cross-platform apps (Android, iOS, and others) based on web technology.</li>
<li><strong>SDKs for targeted platforms:</strong> You need <a href="https://developer.android.com/studio/" target="_blank">Android Studio</a> for making Android apps, and <a href="https://developer.apple.com/xcode/" target="_blank">XCode</a> for developping iOS applications that run on iPhone.</li>
</ul>
<h2>Development Process by Example</h2>
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 <a href="https://github.com/bouraqadi/PharoJS/tree/master/CordovaExamples/Counter" target="_blank">available on github</a>.
<h3>1. Setup your Cordova project</h3>
<ul>
<li>Create a Cordova project. It can be done using the following command line:<br>
<code>
cordova create Counter
</code>
</li>
<li>Define your target platforms, by running the following command line in your project folder:<br>
<code>cordova platform add ios android</code>
</li>
<li>Add any Codova plugins, you might need. There exist <a href="https://cordova.apache.org/plugins/" target="_blank">many plugins</a> 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.</li>
</ul>
<h3>2. Develop Your PharoJS App</h3>
<h4>2.1 Develop the HTML Side</h4>
<ul>
<li>Edit <code>www/index.html</code> file according to your app requirements. Our app rely on 2 buttons, and a <code>DIV</code> to display the counter's value. Each of these three HTML elements has an <code>ID</code> attribute that we'll use in our Pharo code.<br>
<code>
<div id="countDisplay" class="countText">0</div><br>
<button id="incrementButton" class="incrementButton">Increment</button><br>
<button id="resetButton" class="resetButton">Reset</button>
</code>
</li>
<li>Add a reference to the <code>index.js</code> that will be generated by PharoJS. So, the <code>www/index.html</code> file should include this line:<br>
<code>
<script type="text/javascript" src="js/index.js"></script>
</code>
</li>
<li>You can add extra HTML files, as well as CSS files in the <code>www</code> folder. You can add third party javascript libraries too.</li>
<li>Fix the security policy in the <code>index.html</code> 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:
<code>
>meta http-equiv="Content-Security-Policy" content="default-src <strong>ws://localhost:* </strong>'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
</code>
<br>This is mandatory for development to run the tests. Otherwise, all tests will raise the <code>Javascript interpreter NOT available</code> error. On the console of the web browser, you'll read:<br>
<code>
Content Security Policy: The page's settings blocked the loading of a resource at ws://localhost:1068/javascript-bridge ("default-src").
</code>
</li>
</ul>
<h4>2.2 Develop the Pharo Side</h4>
<ul>
<li>Define an app by creating a subclass of <code>PjFileBasedWebApp</code>. That is <code>PjCounterCordovaApp</code> in our example. Since in this example we focus is on the the process, we create <code>PjCounterCordovaApp</code> simply by copying the existing <code>PjCounterBrowserApp</code></li>
<li>Ensure that the javascript is generated in the <code>www/js</code> folder of the Cordova project. This is done by defining the following class side method in <code>PjCounterCordovaApp</code>:<br>
<pre>
appJsSubFolder
^'js'
</pre>
</li>
<li>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 <code>PjCounterBrowserAppTest</code>, and name the new class <code>PjCounterCordovaAppTest</code>. This new test class should refer our new application class <code>PjCounterCordovaApp</code>.</li>
<li>Ensure that your app references the <code>www</code> folder of our Cordova project. The simplest way of doing this is simply running the tests defined in <code>PjCounterCordovaAppTest</code>. You'll get prompted to provide the folder. Use the displayed file browser and select the <code>www</code> folder or our project.</li>
</ul>
<h3>3. Run on Mobile</h3>
<ul>
<li>Export your PharoJS app for production, via the <code>PharoJS Playground/PjCounterCordovaApp/export app</code> menu. You can also do the same by evaluating <code>PjCounterCordovaApp exportApp</code> in a playground.</li>
<li>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:
<ul>
<li>For Android: <code>cordova run android</code></li>
<li>For iOS: <code>cordova run ios</code></li>
</ul>
</li>
</ul>
<h3>4. Release the App on Public Stores</h3>
<ul>
<li>Setup the <code>config.xml</code> with your application info</li>
<li>Add images for splash screen and icons in the <code>res</code> folder of your Cordova project. You need to have them for all screen dimensions and resolutions.</li>
<li>Build the excutable and upload to the store. The hell starts here! Good luck especially with the Apple store.</li>
</ul>
</body>
</html>
<!--
-*- Local Variables:
-*- coding: utf-8
-*- mode: HTML
-*- fill-column: 1000
-*- End:
-->