Il web, i maker e le Open Web App

Daniele "Mte90" Scasciafratte - Maker Faire Roma 2014

Chi sono

Una foto vale più di mille parole

Facciamoci delle domande

Per gli utenti è più semplice:

  • Scaricare un'app sul proprio smartphone (probabilmente multipiattaforma)?
  • O
  • Visitare un sito online?
  • Ed
  • Installarlo come se fosse un'app nativa?
  • Infine
  • Anche sul proprio computer?
  • Per non farci mancare niente
  • Caricarla su un marketplace libero, gratuito ed internazionale?
  • Per dessert invece
  • Potremmo farci anche il nostro marketplace!
  • Oppure il dolce del giorno
  • Far installare l'app dal nostro sito
  • Con l'opzione
  • Dall'interfaccia stessa
  • Dimentico qualcosa?
  • Il conto ed il digestivo, grazie

Open Web App

Perchè Open

Perchè Web

Perchè App

Requisiti

Per gli utenti:

Firefox o Firefox for Android o Firefox OS

Per gli sviluppatori:

Firefox per lo sviluppo

Firefox o Firefox for Android o Firefox OS (anche il simulatore) per il testing

Il proprio editor/IDE preferito

Ma le API?

Le API richiedono dei privilegi che vanno specificati per una corretta esecuzione.

Con JavaScript possiamo accedere alle API standard HTML5 e quelle proprietarie (in standardizzazione) del sistema.

WebTelephony, Vibration API, WebSMS, Idle API, Screen Orientation, Settings API, Power manager API, Mobile Connection API, TCP Socket API, Geolocation API, WiFi Information API, Device Storage API, Contacts API, Mouse Lock API, Open WebApps, WebBluetooth, Network Information API, Battery Status API, Alarm API, Browser API, Time/Clock API, Web Activities, Push Notification API, Permission API, WebFM API, FileHandle API, Network Stats API, WebPayment, IndexedDB, Archive API, Ambient Light Sensor API, Proximity Sensor, SystemXHR, WebNFC etc...

In sviluppo: WebUSB, WebSerial, WebMidi, Background Services, WebPrintAPI, PresentationAPI

https://wiki.mozilla.org/WebAPI

Come funziona a livello tecnico

Come funziona per l'utente

I progetti esistenti

Implementare le funzionalità che abbiamo visto è molto semplice!

Rune Audio implementa un'Open Web App online (accede al web server) e mostra l'interfaccia web che è responsive e supporta gli eventi touch

In questo caso si tratta di un'app online ovvero hosted

support for firefox open web app #15

Rune Audio

App locali?

Adesso vedremo un'app packaged che sfrutta la Notification API per informare l'utente e che accenda o spenga dei led

Sfruttando un'Arduino Yun con un server REST connesso ad internet.

Andando su http://mte90.github.io/Talk-OWA-App con Firefox verrà avviata l'installazione dell'app.

Firefox con notifiche

Android Launcher

Android con app avviata

Android con dimostrazione

Android con notifiche

Firefox OS Launcher

Firefox OS con app avviata

Firefox OS con notifiche

Codice JS per lo switch dei led


            url_green_analog = 'http://' + $('.ip').val() + '/arduino/analog/6/';
            $.get( url_green_digital, function( data ) { 
                $('.led-green').attr('checked', check_bool(data));
                    $('.led-green').click(function() {
                        if($(this).is(':checked'))  {
                            url_green_ = url_green_analog + '200';
                        } else {
                            url_green_ = url_green_analog + '0';
                        }
                        $.get( url_green_, function( data ) {  });
                    });
            });
            

Codice JS per mostrare la notifica


            url_green_digital = 'http://' + $('.ip').val() + '/arduino/digital/6/';
            $.get( url_green_digital, function( data ) { 
                if (Notification.permission !== 'denied') {
                    Notification.requestPermission(function (permission) {
                        if(!('permission' in Notification)) {
                            Notification.permission = permission;
                        }
                    });
                }
                if (Notification.permission === 'granted') {
                    new Notification('Pin 6 Green Led', {
                        body : 'Pin state: ' + data
                    });
                }
            });
            

Cos'è Firefox OS

Firefox OS è disponibile per:

In modo ufficiale, quindi supporto e documentazione da Mozilla.

Come riciclare un dispositivo Firefox OS http://www.slideshare.net/janjongboom/jsconf-eu-2014-abusing-phones-to-make-the-internet-of-things

Domande

Presentazione: http://mte90.github.io/Talk-MakerOWA/
Talk di Daniele Mte90 Scasciafratte - @Mte90net