• Tutte
  • Portfolio
  • Sviluppo
  • Tecnologia
  • ManifoldJS, un tool per le Hosted Apps

    di Denis Torresan

    Durante lo sviluppo del nostro applicativo di META Gestione Scuola, è emersa l’esigenza di rendere disponibile alle segreterie un facile accesso al registro, senza necessariamente dover passare per un browser.
    L’idea di base è che un “doppio click” su un’icona nel desktop è più semplice rispetto ad aprire un browser e doversi anche ricordare l’indirizzo di accesso.
    Abbiamo perciò esplorato diverse soluzioni, tra cui ManifoldJS. Alla fine è stata sviluppata una applicazione basata su Electron (Atom), però comunque riteniamo molto interessante l’approccio suggerito da questo tool, e ve lo presentiamo ugualmente.

    In pratica, ManifoldJS si propone come tool per facilitare l’accesso ai propri utenti ad applicazioni Web, creando un vero e proprio wrapper che incapsula un sito web.
    Potremmo dire che utilizza il medesimo approccio del progetto Apache Cordova per lo sviluppo di applicazioni mobile cross platform, dove viene utilizzato un browser come base per il rendering dell’interfaccia utente.
    In questo caso, il tool è molto limitato, permette cioè di impacchettare una applicazione che sostanzialmente apre un sito web predefinito.
    Il tool è comunque cross platform e permette di pubblicare app per Android, ChromeOS, FirefoxOS, iOS e Windows.
    Permette la generazione di una nuova applicazione a partire da un Manifest, un file di meta dati che contiene informazioni circa il comportamento ed alcune caratteristiche che dovrà avere l’app.
    Nel caso in cui il Manifest non sia disponibile, il tool permette di auto generarne uno.

    Ma prima di tutto, procediamo all’installazione del tool, ricordando che necessita di NodeJS (5.0+):

    Da riga di comando (con accesso Amministratore), lanciare il comando:

    Per questa introduzione, si creerà una nuova applicazione per ospitare il sito di Meta Gestione Scuola.

    Per ottenere i migliori risultati di “embed”, il sito in questione avrà bisogno di pubblicare un Manifest W3C che fornisce informazioni che possono essere utili quando si ospita il sito come app.

    Nel nostro caso il sito non è provvisto di tale manifest, ma lo si potrebbe definire all’interno di un tag <link> presente all’interno dell’elemento <head>. L’attributo href di questo elemento contiene un URL (relativa) che punta al Manifest W3C pubblicato.

    Il codice dovrebbe risultare simile a questo:

    Il contenuto del file manifest.json potrà quindi avere la seguente struttura:

    Questo file è un documento in formato JSON e fornisce dettagli sul sito, tra cui il suo nome, le icone da utilizzare per varie piattaforme, e come il sito dovrebbe essere presentato sullo schermo quando ha ospitato come un app.

    Se il sito che si intende ospitare non pubblica un manifesto, non ti preoccupare; ManifoldJS ne creerà uno per te, anche se si possono perdere alcuni dei benefici che un manifesto fornisce, ma si potrà sempre farlo auto-generare da Manifold, e successivamente modificarlo e caricarlo nel sito e ripetere il processo di generazione.

    Ora, ManifoldJS è pronto per generare l’app. Da un prompt dei comandi o una finestra di terminale, utilizzare la seguente riga di comando per generare l’applicazione:

    ManifoldJS analizza e convalida il contenuto del manifesto (se presente) e notifica eventuali errori a console. Se un manifesto non specifica tutte le icone di cui ha bisogno per generare l’applicazione per ogni piattaforma, vi avviserà delle immagini mancanti sempre dalla console. Tuttavia, fornirà una serie di immagini predefinite con il logo ManifoldJS al posto delle icone mancanti. È sempre possibile sostituirle in seguito, ed in questo modo sarà più facile individuare quali sono le icone mancanti e le loro dimensioni.

    manifoldjs_console

    Se non diversamente specificato, ManifoldJS crea una cartella nella directory di output che contiene i progetti per ciascuna delle piattaforme supportate, che comprende Windows , iOS , Android , Chrome OS , e Firefox OS.

    E’ anche possibile limitare il numero di piattaforme supportate con il parametro ( -p | –platforms ).

    Di default, lo strumento crea l’applicazione nella directory corrente dove viene eseguito il comando. È possibile modificare la directory di output specificando un percorso diverso con il ( -d | –directory ).

    manifoldjs_directories

    All’interno di ogni singola cartella di piattaforma, si trova un documento “Passaggi successivi” che descrive brevemente come testare l’applicazione e pubblicarla nell’App Store corrispondente.

    manifoldjs_win10_next-steps

    In questo caso, per compilare ed eseguire l’applicazione per Windows 10, i comandi saranno i seguenti:

    Per effettuare un test, lanciare:

    Per creare il pacchetto per l’app Store:

     

    Per maggiori informazioni e documentazione, potete visitare:

    http://manifoldjs.com/

     

    Leggi anche...