In questi giorni mi sono trovato a dover mettere le mani su un plugin di Cordova, resosi necessario su un’app scritta in Ionic (e quindi in AngularJS).
Ora, “tutti” sanno che i plugin di Cordova così come sono scritti mal si adattano ad applicazioni scritte in Angular, e in questo contesto si tende a utilizzare ngCordova.
Il problema è che, sebbene ngCordova incorpori ormai varie decine di plugin, proprio quello che serviva a me mancava. Io avevo bisogno di catturare l’immagine dello schermo in un certo momento – ovvero fare uno screenshot – e cercando sul web l’unico plugin abbastanza maturo e funzionante su Android e iOS mi è sembrato questo.

Rendere un plugin di Cordova più “AngularJS friendly”

Da sviluppatore (molto) poco esperto tanto in AngularJS quanto in Cordova, ho subito incontrato problemi nel collegare i due mondi, e cercando su Google mi è sembrato di non essere da solo. Al contrario.
Il modo più pulito mi è sembrato il seguente, e il primo “problema” (se così vogliamo chiamarlo) era risolto.

.service('$cordovaScreenshot', ['$q', function ($q){
    return {
        capture: function (filename, extension, quality){
            extension = extension || 'jpg';
            quality = quality || '100';

            var defer = $q.defer();

            navigator.screenshot.save(function (error, res){
                if (error) {
                    console.error(error);
                    defer.reject(error);
                } else {
                    console.log('screenshot saved in: ', res.filePath);
                    defer.resolve(res.filePath);
                }
            }, extension, quality, filename);

            return defer.promise;
        }
    };
}])

$cordovaScreenshot.capture('screenshot', 'jpg', 80);

In sintesi prima si registra il servizio Angular contenente la funzione di cattura (opportunamente corredata di libreria Q e promise), poi la si chiama, eventualmente passando delle funzioni da richiamare al termine o in caso di errore.

Modifica e test di un plugin su applicazione Ionic

Avvio l’applicazione – faccio fare lo screenshot – e subito mi rendo conto che dovrò sporcarmi le mani con l’Objective-C, perché sull’iPad il plugin non funzionava come doveva.
Inizio a modificare il file Screenshot.m che sta in project-directory/plugins/com.darktalker.cordova.screenshot/src/ios, avvio di nuovo il progetto ma delle modifiche neanche l’ombra. Inizio a cercare su internet (non oso immaginare cosa sarebbe il nostro lavoro senza un motore di ricerca web…), lancio vari comandi di Cordova consigliati dagli esperti di turno ma ancora niente.
Ancora un po’ di ricerche e capisco che i plugin vanno rimossi e riaggiunti, in questo modo si è certi che il tutto viene ricompilato ad ogni test. I comandi sono cordova plugin remove plugin-url-or-directory-or-id e cordova plugin add plugin-url-or-directory.

Per rendere tutto il processo un po’ più snello ho registrato un task su Grunt, e ve/me lo allego qui per comodità:

uninstallPluginScreenshot: {
    command: 'cordova plugin remove com.darktalker.cordova.screenshot'
},
installPluginScreenshot: {
    command: 'cordova plugin add sources-directory/cordova-screenshot'
    // la registrazione viene fatta a partire dalla directory dei sorgenti
}
// ...
grunt.registerTask('updatePlugin', [
    'shell:uninstallPluginScreenshot',
    'shell:installPluginScreenshot'
]);

Conclusioni

Chiaramente quanto ho scritto non è niente di trascendentale, ma ho notato che c’è molta gente inesperta “la fuori”, e magari qualcuno troverà utili queste poche righe. Sicuramente faranno comodo a me quando me le dimenticherò.