DHOB (IU5SGN): Cordova

Visualizzazione post con etichetta Cordova. Mostra tutti i post

mercoledì 9 gennaio 2019

Cordova File Plugin per salvare file

questo esempio e' stato ripreso da questo esempio

si parte da zero

cordova create MyApp
cordova platform add android
cordova plugin add cordova-plugin-file

a questo punto e' stato creato il progetto base. Si apre Android Studio e si risolvono i vari errori di Gradle e poi si fa una prima build. In seguito si modificano i file come segue

Nella pagina html l'unico aspetto importante e' che siano importati cordova.js e /js/index.js

/assets/www/index.html
////////////////////////////////////////////////////////////
<html>
<head>

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body onload="onLoad()">
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</body>
</html>
////////////////////////////////////////////////////////////

sull'evento deviceready si aggiunge quindi il codice evidenziato

/assets/www/js/index.js
///////////////////////////////////////////////////////////

var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},

// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
},

// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);
var fileName = 'myfile.txt'; // your file name
var data = '...'; // your data, could be useful JSON.stringify to convert an object to JSON string
window.resolveLocalFileSystemURL( cordova.file.externalRootDirectory, function( directoryEntry ) {
directoryEntry.getFile(fileName, { create: true }, function( fileEntry ) {
fileEntry.createWriter( function( fileWriter ) {
fileWriter.onwriteend = function( result ) {
console.log( 'pippoplutopaperino' );
};
fileWriter.onerror = function( error ) {
console.log( error );
};
fileWriter.write( data );
}, function( error ) { console.log( error ); } );
}, function( error ) { console.log( error ); } );
}, function( error ) { console.log( error ); } );
}
};

app.initialize();

///////////////////////////////////////////////////////////

/res/config.xml

anche in questo file si modifica aggiungendo la parte evidenziata

///////////////////////////////////////////////////////////
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param name="onload" value="true" />
</feature>
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="market:*" />
<preference name="loglevel" value="DEBUG" />
<feature name="File">
<param name="android-package" value="org.apache.cordova.file.FileUtils" />
<param name="onload" value="true" />
</feature>
<allow-navigation href="cdvfile:*" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="AndroidExtraFilesystems" value="files,cache, sdcard, cache-external, files-external" />
</widget>

///////////////////////////////////////////////////////////

se tutto e' andata a buon fine si trovera' il file myfile.txt nella cartella Documenti

lunedì 11 gennaio 2016

Compilare Apache/Cordova sotto Android Studio/IOS

Per compilare i progetti Cordova su Android ed IOS di solito faccio creare lo scheletro del codice a Cordova ma poi intervengo con Android Studio e XCode per le modifiche

Android
Per prima cosa si devono modificare i file

build.gradle Module:CordovaLIb
build.gradle Module:android

sostituendo mavenCentral() con jcenter()
e risincronizzando il progetto (altrimenti non si compila)

IOS

Un aspetto fastidioso di Cordova su IOS e' che la WebView fa a corprire parte della statusbar.
Per evitare cio' la cosa piu' semplice e' nascondere la status bar aggiungendo a MainViewController.m la funzione

- (BOOL)prefersStatusBarHidden { return YES; }

Pinch to Zoom
Sia la rotazione del display che il pinch to zoom non sono abilitati di default in Cordova (e questo puo' essere molto fastidioso per utenti mobile abituati a questa funzionalita' praticamente ovunque)

Android

In Android devono essere aggiunta alla MainActivity le righe evidenziate in giallo

------------------------------

import android.os.Bundle;import org.apache.cordova.*;import android.webkit.WebSettings;
import android.webkit.WebView;


public class MainActivity extends CordovaActivity
{
    @Override    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml        loadUrl(launchUrl);        WebView webView = (WebView) appView.getEngine().getView();
        WebSettings ws = webView.getSettings();
        ws.setSupportZoom(true);
        ws.setBuiltInZoomControls(true);
    }
}

------------------------------

IOS

In Ios si deve modificare il file config.xml in modo da abilitare il ViewPortScale

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />

</platform>

fra le altre cose nel medesimo file si puo' abilitare anche l'Orientation

giovedì 7 gennaio 2016

Scrivere file con Cordova su Android Studio/XCode

Con Apache Cordova e' possibile scrivere dati sulla memoria del dispositivo mobile ma, a causa delle enormi differenze della gestione dello storage nei vari sistemi operativi, non e' possibile avere una soluzione unica ma si devono effettuare adattamenti ad hoc

Per prima cosa si deve aggiungere il plugin File con il comando

cordova plugin add org.apache.cordova.file
IOS
Il filesystem in IOS ovviamente non viene esposto e lo scambio dati avviene solo tramite ITunes

Il progetto Xcode di Cordova deve essere modificato come segue

1) deve essere aggiunto una chiave file info.plist
Application supports Itunes file sharing = YES
(UIFileSharingEnabled = YES)

2) deve essere aggiunto al file config.xml (dopo gli allow) il seguente codice
-------------
<feature name="File">

<param name="ios-package" value="CDVFile" />

</feature>

<feature name="FileTransfer">

<param name="ios-package" value="CDVFileTransfer" />

</feature>

<preference name="iosPersistentFileLocation" value="Library" />

<preference name="BackupWebStorage" value="local" />
-------------

3) il codice HTML5 deve essere leggermente modificato rispetto agli esempi di Cordova (in particolare si deve puntare sulla directory Documents che su IOS e' persistente ed in lettura/scrittura. Per un esempio si puo' leggere anche questo post
-------------

/* globals console,document,window,cordova */

document.addEventListener('deviceready', onDeviceReady, false);

var logOb;

function fail(e) {

console.log("FileSystem Error");

console.dir(e);

}

function onDeviceReady() {

window.resolveLocalFileSystemURL(cordova.file.documentsDirectory, function(dir) {

console.log("got main dir",dir);

dir.getFile("log.txt", {create:true}, function(file) {

console.log("got the file", file);

logOb = file;

writeLog("App started");

});

document.querySelector("#actionOne").addEventListener("touchend", function(e) {

//Ok, normal stuff for actionOne here

//Now log it

alert("tasto 1");

writeLog("actionOne fired");

}, false);

document.querySelector("#actionTwo").addEventListener("touchend", function(e) {

//Ok, normal stuff for actionTwo here

//Now log it

alert("tasto 2");

writeLog("actionTwo fired");

}, false);

}

function writeLog(str) {

if(!logOb) {

alert("errore write log");

return;

}

var log = str + " [" + (new Date()) + "]\n";

console.log("going to log "+log);

alert("Luca");

logOb.createWriter(function(fileWriter) {

fileWriter.seek(fileWriter.length);

alert("Luca");

var blob = new Blob([log], {type:'text/plain'});

fileWriter.write(blob);

console.log("ok, in theory i worked");

}, fail);

}

function justForTesting() {

logOb.file(function(file) {

var reader = new FileReader();

reader.onloadend = function(e) {

console.log(this.result);

};

reader.readAsText(file);

}, fail);

}

-------------

Android

Su Android le cose sono decisamente piu' semplici

si dichiara in config.xml che si vuole usare il plugin
-------------
<feature name="File">
<param name="android-package" value="org.apache.cordova.FileUtils" />
</feature>
<feature name="FileTransfer">
<param name="android-package" value="org.apache.cordova.FileTransfer" />
</feature>
-------------

Si settano in permessi di scrittura in AndroidManifest.xml
-------------
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-------------

Di nuovo il codice HTML5 dell'esempio di Cordova in cui e' evidenziata in giallo la modifica per Android
-------------
/* globals console,document,window,cordova */
document.addEventListener('deviceready', onDeviceReady, false);

var logOb;

function fail(e) {
console.log("FileSystem Error");
console.dir(e);
}

function onDeviceReady() {

window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(dir) {
console.log("got main dir",dir);
dir.getFile("log.txt", {create:true}, function(file) {
console.log("got the file", file);
logOb = file;
writeLog("App started");
});
});

document.querySelector("#actionOne").addEventListener("touchend", function(e) {
//Ok, normal stuff for actionOne here
//
//Now log it
writeLog("actionOne fired");
}, false);

document.querySelector("#actionTwo").addEventListener("touchend", function(e) {
//Ok, normal stuff for actionTwo here
//
//Now log it
writeLog("actionTwo fired");
}, false);

}

function writeLog(str) {
if(!logOb) return;
var log = str + " [" + (new Date()) + "]\n";
console.log("going to log "+log);
logOb.createWriter(function(fileWriter) {

fileWriter.seek(fileWriter.length);

var blob = new Blob([log], {type:'text/plain'});
fileWriter.write(blob);
console.log("ok, in theory i worked");
}, fail);
}

function justForTesting() {
logOb.file(function(file) {
var reader = new FileReader();

reader.onloadend = function(e) {
console.log(this.result);
};

reader.readAsText(file);
}, fail);

}
-------------