Mobile App/Cordova Development Notes: Difference between revisions

From Open Food Facts wiki
 
(29 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This page contains notes regarding the development of the Open Food Facts mobile apps.<br><br>
This page contains notes regarding the development of the Open Food Facts mobile apps (Cordova version).<br><br>
[https://github.com/openfoodfacts/cordova-app Source code]<br><br>
[https://github.com/openfoodfacts/cordova-app Source code]<br><br>


Line 26: Line 26:
<pre>npm install -g cordova</pre>
<pre>npm install -g cordova</pre>


cordova -v : 3.6.3-0.2.13
<pre>cordova -v : 3.6.3-0.2.13</pre>


Use cordova platform to know which platform you can install.
<pre>cordova platform</pre>
Install your platforms
Install your platforms
<pre>
<pre>
Line 33: Line 35:
cordova platform add android
cordova platform add android
</pre>
</pre>
=== errors ===


* "error android_home is not set and android command not in your path" when doing "cordova platform add android"
=== Possible errors ===
 
==== "error android_home is not set and android command not in your path" when doing "cordova platform add android" ====


**Install Eclipse ADT  (Note : for win8 32bit/64bit install 32bit ADT)
**Install Eclipse ADT  (Note : for win8 32bit/64bit install 32bit ADT)
Line 44: Line 47:
*** C:\Users\Stéphane\AppData\Roaming\npm;C:\Users\Stéphane\AppData\Local\Android\android-sdk\tools;C:\Users\Stéphane\AppData\Local\Android\android-sdk\tools;C:\Users\Stéphane\AppData\Local\Android\android-sdk\platform-tools
*** C:\Users\Stéphane\AppData\Roaming\npm;C:\Users\Stéphane\AppData\Local\Android\android-sdk\tools;C:\Users\Stéphane\AppData\Local\Android\android-sdk\tools;C:\Users\Stéphane\AppData\Local\Android\android-sdk\platform-tools


"error failed to run javac -version make sure"
===="error failed to run javac -version make sure" ====


Java JDK
Java JDK
Line 65: Line 68:
Run SDK Manager, install Android build tools.
Run SDK Manager, install Android build tools.


== Android version code ==
== Get the source code ==
 
Clone the Open Food Facts Cordova repository
<pre>git clone https://github.com/openfoodfacts/cordova-app.git</pre>
 
== iOS specific issues ==


== Android specific issues ==
=== Android version code ===
in config.xml : http://stackoverflow.com/questions/23001780/how-to-get-cordova-3-4-0-to-set-android-version-name-code-on-build
in config.xml : http://stackoverflow.com/questions/23001780/how-to-get-cordova-3-4-0-to-set-android-version-name-code-on-build


== Cordova plugins ==


=== Install Moodstocks ===
* http://plugins.cordova.io/#/package/com.phonegap.plugins.barcodescanner
 
=== Camera, File, File transfer plugins ===
Install the various plugins
<pre>
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
</pre>
 
New names for plugins:
 
<pre>
biz_000@Colibri MINGW64 ~/Desktop/cordova-app (master)
$ cordova -v
6.4.0
 
biz_000@Colibri MINGW64 ~/Desktop/cordova-app (master)
$ cordova plugins
cordova-plugin-barcodescanner 0.7.0 "BarcodeScanner"
cordova-plugin-camera 2.3.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-file 4.3.0 "File"
cordova-plugin-file-transfer 1.6.0 "File Transfer"
cordova-plugin-whitelist 1.3.0 "Whitelist"
 
</pre>
 
=== Barcode scanning plugin ===
You may also have to install Apache Cordova plugin for barcode scanning.
<pre>
cordova plugin add com.phonegap.plugins.barcodescanner
</pre>
 
=== Moodstocks ===
==== Install Moodstocks ====


* https://moodstocks.com/docs/phonegap/using-the-moodstocks-sdk-in-your-phonegap-application/
* https://moodstocks.com/docs/phonegap/using-the-moodstocks-sdk-in-your-phonegap-application/


Instructions pas à jour pour Cordova 3.6 on dirait, par contre il y a un autre example :
Instructions not up to date for Cordova 3.6. This might be an up to date example :


* https://github.com/Moodstocks/moodstocks-phonegap-plugin/blob/master/src/android/Demo.java
* https://github.com/Moodstocks/moodstocks-phonegap-plugin/blob/master/src/android/Demo.java
Line 94: Line 140:
</pre>
</pre>


== Cordova plugins ==
==== Moodstocks Bugs ====
 
* http://plugins.cordova.io/#/package/com.phonegap.plugins.barcodescanner
* https://moodstocks.com/docs/phonegap/using-the-moodstocks-sdk-in-your-phonegap-application/


=== Bugs ===
The following pops up on the 2nd scan with Moodstocks:
 
2nd scan with Moodstocks:
<pre>
<pre>
java.lang.RuntimeException : Unable to start activity ComponentInfo ... The specified child already has a parent. You must call removeView() on the child's parent first.
java.lang.RuntimeException : Unable to start activity ComponentInfo ... The specified child already has a parent. You must call removeView() on the child's parent first.
Line 107: Line 148:
-> Problem with jQuerymobile not "exiting" properly from scan when clicking on "Back" ?
-> Problem with jQuerymobile not "exiting" properly from scan when clicking on "Back" ?


=== Import on Google Play ===
==== Moodstocks plugin tutorial ====
* https://moodstocks.com/docs/phonegap/using-the-moodstocks-sdk-in-your-phonegap-application/
== Firefox OS ==
[https://openfoodfacts.slack.com/messages/firefoxos See #firefoxos on Slack]
<br>
A port of the app was initiated on Firefox OS. The main issues were with the barcode scanner and the lack of Cordova feature parity for the platform.


* "You have imported an APK file which is not zip-aligned. Veuillez exécuter un utilitaire d'alignement zipalign sur votre fichier APK, puis le réimporter."
=== Notes from the Hackathon ===
[[File:Porting Open Food Facts on Firefox OS.011.jpeg|thumbnail]]
[[File:Porting_Open_Food_Facts_on_Firefox_OS.010.jpeg|thumbnail]]
* Hackpad: https://lite5.framapad.org/p/hack@moz
* PDF presentation: [[File:Porting OFF on Firefox OS.pdf]]
* https://github.com/gasolin/qrcode_scanner/
* https://github.com/SunboX/QR-Reader


=== Camera, File, File transfer plugins ===
=== How to hack it / install it ===
Install the various plugins
==== Get the source code ====
<pre>
Clone the Open Food Facts Firefox OS Cordova repository
cordova plugin add org.apache.cordova.camera
<pre>git clone https://github.com/openfoodfacts/openfoodfacts-ffos.git</pre>
cordova plugin add org.apache.cordova.file
Github repo with the app debugged during the Hackathon
cordova plugin add org.apache.cordova.file-transfer
 
</pre>
==== Install the App Manager ====
* https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager


== Firefox OS ==
==== Install it on your device ====


* https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager
== Windows Phone ==
* https://github.com/gasolin/qrcode_scanner/
See [https://openfoodfacts.slack.com/messages/windowsphone #windowsphone on Slack]
* https://github.com/SunboX/QR-Reader
* [http://www.windowsphone.com/fr-fr/store/app/openfoodfacts/5d7cf939-cfd9-4ac0-86d7-91b946f4df34 Listing on the Windows Phone store]


== Ubuntu OS ==
== Ubuntu OS ==
Separate application and codebase. See #ubuntu on Slack
Separate application and codebase. See [https://openfoodfacts.slack.com/messages/ubuntu #ubuntu on Slack]


== Publishing ==
== Publishing on App Stores ==
* See [[Project:AppStores]]
* See [[Mobile App/AppStores]]
* Contact Stéphane, Vince or Pierre on Slack


== May be of interest for future apps ==
== May be of interest for future apps ==

Latest revision as of 13:12, 2 May 2021

This page contains notes regarding the development of the Open Food Facts mobile apps (Cordova version).

Source code

The current Open Food Facts apps for iOS, Android and Windows Phone use Apache Cordova (previously known as Phonegap).

Installing Cordova on your machine

Installing Node.js

Install Node.js

Install Git client

Install Cordova

in git-bash client:

npm install -g cordova
cordova -v : 3.6.3-0.2.13

Use cordova platform to know which platform you can install.

cordova platform

Install your platforms

cordova platform add firefoxos
cordova platform add android

Possible errors

"error android_home is not set and android command not in your path" when doing "cordova platform add android"

"error failed to run javac -version make sure"

Java JDK

ANT

"Error: Failed to run "java -version"

which java --> an old version of java in C:\Windows\System32 was causing the issue.. :-(

http://stackoverflow.com/questions/24493693/cordova-android-revision-to-low

Run SDK Manager, install Android build tools.

Get the source code

Clone the Open Food Facts Cordova repository

git clone https://github.com/openfoodfacts/cordova-app.git

iOS specific issues

Android specific issues

Android version code

in config.xml : http://stackoverflow.com/questions/23001780/how-to-get-cordova-3-4-0-to-set-android-version-name-code-on-build

Cordova plugins

Camera, File, File transfer plugins

Install the various plugins

cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer

New names for plugins:

biz_000@Colibri MINGW64 ~/Desktop/cordova-app (master)
$ cordova -v
6.4.0

biz_000@Colibri MINGW64 ~/Desktop/cordova-app (master)
$ cordova plugins
cordova-plugin-barcodescanner 0.7.0 "BarcodeScanner"
cordova-plugin-camera 2.3.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-file 4.3.0 "File"
cordova-plugin-file-transfer 1.6.0 "File Transfer"
cordova-plugin-whitelist 1.3.0 "Whitelist"

Barcode scanning plugin

You may also have to install Apache Cordova plugin for barcode scanning.

cordova plugin add com.phonegap.plugins.barcodescanner

Moodstocks

Install Moodstocks

Instructions not up to date for Cordova 3.6. This might be an up to date example :

public class Demo extends CordovaActivity {

  private boolean scanActivityStarted = false;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.init();
    // Set by <content src="index.html" /> in config.xml
    super.loadUrl(Config.getStartUrl());
    //super.loadUrl("file:///android_asset/www/index.html")
  }

Moodstocks Bugs

The following pops up on the 2nd scan with Moodstocks:

java.lang.RuntimeException : Unable to start activity ComponentInfo ... The specified child already has a parent. You must call removeView() on the child's parent first.

-> Problem with jQuerymobile not "exiting" properly from scan when clicking on "Back" ?

Moodstocks plugin tutorial

Firefox OS

See #firefoxos on Slack
A port of the app was initiated on Firefox OS. The main issues were with the barcode scanner and the lack of Cordova feature parity for the platform.

Notes from the Hackathon

How to hack it / install it

Get the source code

Clone the Open Food Facts Firefox OS Cordova repository

git clone https://github.com/openfoodfacts/openfoodfacts-ffos.git

Github repo with the app debugged during the Hackathon

Install the App Manager

Install it on your device

Windows Phone

See #windowsphone on Slack

Ubuntu OS

Separate application and codebase. See #ubuntu on Slack

Publishing on App Stores

May be of interest for future apps