Jump to content
Nokioteca Forum
Ivan-HC

KaiOS - Creare webapp molto semplici

Recommended Posts

In questa guida spiegherò come è semplice creare webapp (applicazioni online) su Nokia 8110 4G e altri dispositivi con sistema operativo KaiOS (e un accenno alla fine, per creare applicazioni native e offline).

Le webapp altro non sono che siti web e vengono visualizzati in modo differente a seconda del tipo di dispositivo da cui si accede (user agent).

Le webapp sono in continua espansione proprio per la loro leggerezza e semplicità. Certo, mancano le prestazioni che un app nativa può dare, i compiti principali (o tutti i compiti) sono affidati al sito web a cui è collegata.

 

FASE 1: TESTARE COMPATIBILITÀ DEL SITO

 

  1. prima di tutto installiamo Firefox sul nostro computer;
  2. andiamo al sito che ci interessa;
  3. tasto destro sulla pagina e dal menù selezionare "Analizza Elemento";
  4. comparirà la pagina in HTML. Da qui potrete modificare il layout della pagina a vostro piacimento (se si tratterà di una app offline), ma di questo ne parleremo in un altra occasione ;)
  5. con il puntatore selezionare "Modalità visualizzazione flessibile (o semplicemente Control+Shift+M)", in questo modo cambierà il modo di visualizzare la pagina;
  6. dal menù in alto a sinistra selezionare Nokia 8110 4G (se non è presente cercarlo in "modifica elenco";
  7. adesso potrai testare il tuo sito se è compatibile con il tuo dispositivo KaiOS. Spesso ci sono delle incopatibilità (menu che si vedono a metà, API non compatibili, browser obsoleto, ecc...) ma la maggior parte dei siti funzionano alla grande. Nel caso di Nokioteca forum ho notato che il menu è troppo ampio per permettermi di visualizzare voci su account, community ecc...quindi dovrei fare tutto alla cieca, a meno che non setto l'app in maniera da funzionare come collegamento al browser (un pò come funzionano Google e Youtube preinstallati). 

 

Allego una GIF che vi illustrerà il procedimento.

 

FASE 2: IL MANIFEST

 

Aprire un editor di testo e creare un file "manifest.webapp", usare https://jsonlint.com/ per testare se il formato sia valido.

Per l'app "Nokioteca Forum" il manifest.webapp è questo:

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

{
  "version": "0.0.1",
  "name": "Nokioteca forum",
  "description": "Nokioteca Forum per Nokia 8110 4G e altri dispositivi KaiOS",
  "type": "certified",
  "ime_default_softkey_bar": true,
  "cursor": true,
  "start_url": "https://www.nokioteca.net/home/forum/",
  "developer": {
    "name": "Ivan",
    "url":"https://www.nokioteca.net/home/forum/"
  },
  "default_locale": "en-US",
  "display":"browser",
  "locales": {
    "en-US": {
      "name":"Nokioteca forum"
    }
  },
  "icons": {
    "128": "/icon.png"
  }
}
----------------------------------------------------------------------------------------------------------

 

Questo file è il cuore dell'applicazione. Lo troverete spesso con il nome manifest.json, ma va rinominato in manifest.webapp per il corretto funzionamento.

 

FASE 3: L'ICONA

 

Scegliere un file immagine "icon.png", se volete usare invece una gif  cambiate il parametro "128":"/icon.png" con "128":"/NOMEGIF.gif"

 

FASE 4: ARCHIVIARE TUTTO

 

Inserire manifest.webapp e l'icona in un archivio dal nome "application.zip"

 

FASE 5: ARCHIVIO DELL'APPLICAZIONE

 

Creare un archivio ZIP che contenga "application.zip" e un altro file chiamato "metadata.json", che troverete in allegato e del quale dovete sostituire solo "YOURAPP" con il sito a cui fa riferimento l'app (o qualsiasi altra frase in realtà, basta che sia diversa da quelle presenti nei metadata.json presenti in altre app che creerete per non creare conflitti)

 

FASE 6: INSTALLAZIONE CON OMNISD (vedi guida per installare app di terze parti)

 

 

 

 

 

 

 

 

Se volete toccare con mouse o provare l'app è presente in allegato con il nome di "Nokioteca Forum.zip"

L'altra app invece, "Nokioteca forum(shortcut).zip", è un collegamento a questo sito e funziona come l'app di Youtube presente sul telefono.

La differenza è che la prima prende tutto lo schermo senza la barra degli indirizzi (perdendo le funzioni del browser), mentre la seconda (shortcut) apre l'app del browser consentendo quindi di cercare altri siti, tornare indietro e fare lo zoom. 

 

Shortcut, nonostante sia un collegamento è già leggermente più complessa, richiede di modificare nel manifest.webapp il parametro

 

"start_url": "www.YOURWEBSITE.com"

 

e sostituirlo con 

 

"launch_path": "/index.html"

 

perché fa riferimento al file "index.html", nel quale viene chiamato in causa in file javascript "main.js" nel quale viene imposto al browser di aprire il link indicato.

 

 

Si può usare "launch_path" anche per far partire semplicemente un file HTML come "index.html", magari se riuscite a scaricare un intero sito dal browser o possedete un HTML collegato a una o più sottocartelle potete avviare un applicazione COMPLETA e OFFLINE semplicemente inserendo il tutto in application.zip

 

 

Per una documentazione più completa:

 

KAIOSTECH  https://developer.kaiostech.com/

MOZILLA  https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS

Istantanea_2018-12-10_22-15-47.png-0.gif

Nokioteca Forum.zip

Nokioteca forum (shortcut).zip

metadata.json

  • Grazie 1

Condividi questo messaggio


Link al messaggio
Condividi su altri siti
On 10/12/2018 at 23:29, Ivan-HC ha scritto:

In questa guida spiegherò come è semplice creare webapp (applicazioni online) su Nokia 8110 4G e altri dispositivi con sistema operativo KaiOS (e un accenno alla fine, per creare applicazioni native e offline).

Le webapp altro non sono che siti web e vengono visualizzati in modo differente a seconda del tipo di dispositivo da cui si accede (user agent).

Le webapp sono in continua espansione proprio per la loro leggerezza e semplicità. Certo, mancano le prestazioni che un app nativa può dare, i compiti principali (o tutti i compiti) sono affidati al sito web a cui è collegata.

 

FASE 1: TESTARE COMPATIBILITÀ DEL SITO

 

  1. prima di tutto installiamo Firefox sul nostro computer;
  2. andiamo al sito che ci interessa;
  3. tasto destro sulla pagina e dal menù selezionare "Analizza Elemento";
  4. comparirà la pagina in HTML. Da qui potrete modificare il layout della pagina a vostro piacimento (se si tratterà di una app offline), ma di questo ne parleremo in un altra occasione ;)
  5. con il puntatore selezionare "Modalità visualizzazione flessibile (o semplicemente Control+Shift+M)", in questo modo cambierà il modo di visualizzare la pagina;
  6. dal menù in alto a sinistra selezionare Nokia 8110 4G (se non è presente cercarlo in "modifica elenco";
  7. adesso potrai testare il tuo sito se è compatibile con il tuo dispositivo KaiOS. Spesso ci sono delle incopatibilità (menu che si vedono a metà, API non compatibili, browser obsoleto, ecc...) ma la maggior parte dei siti funzionano alla grande. Nel caso di Nokioteca forum ho notato che il menu è troppo ampio per permettermi di visualizzare voci su account, community ecc...quindi dovrei fare tutto alla cieca, a meno che non setto l'app in maniera da funzionare come collegamento al browser (un pò come funzionano Google e Youtube preinstallati). 

 

Allego una GIF che vi illustrerà il procedimento.

 

FASE 2: IL MANIFEST

 

Aprire un editor di testo e creare un file "manifest.webapp", usare https://jsonlint.com/ per testare se il formato sia valido.

Per l'app "Nokioteca Forum" il manifest.webapp è questo:

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

{
  "version": "0.0.1",
  "name": "Nokioteca forum",
  "description": "Nokioteca Forum per Nokia 8110 4G e altri dispositivi KaiOS",
  "type": "certified",
  "ime_default_softkey_bar": true,
  "cursor": true,
  "start_url": "https://www.nokioteca.net/home/forum/",
  "developer": {
    "name": "Ivan",
    "url":"https://www.nokioteca.net/home/forum/"
  },
  "default_locale": "en-US",
  "display":"browser",
  "locales": {
    "en-US": {
      "name":"Nokioteca forum"
    }
  },
  "icons": {
    "128": "/icon.png"
  }
}
----------------------------------------------------------------------------------------------------------

 

Questo file è il cuore dell'applicazione. Lo troverete spesso con il nome manifest.json, ma va rinominato in manifest.webapp per il corretto funzionamento.

 

FASE 3: L'ICONA

 

Scegliere un file immagine "icon.png", se volete usare invece una gif  cambiate il parametro "128":"/icon.png" con "128":"/NOMEGIF.gif"

 

FASE 4: ARCHIVIARE TUTTO

 

Inserire manifest.webapp e l'icona in un archivio dal nome "application.zip"

 

FASE 5: ARCHIVIO DELL'APPLICAZIONE

 

Creare un archivio ZIP che contenga "application.zip" e un altro file chiamato "metadata.json", che troverete in allegato e del quale dovete sostituire solo "YOURAPP" con il sito a cui fa riferimento l'app (o qualsiasi altra frase in realtà, basta che sia diversa da quelle presenti nei metadata.json presenti in altre app che creerete per non creare conflitti)

 

FASE 6: INSTALLAZIONE CON OMNISD (vedi guida per installare app di terze parti)

 

 

 

 

 

 

 

 

Se volete toccare con mouse o provare l'app è presente in allegato con il nome di "Nokioteca Forum.zip"

L'altra app invece, "Nokioteca forum(shortcut).zip", è un collegamento a questo sito e funziona come l'app di Youtube presente sul telefono.

La differenza è che la prima prende tutto lo schermo senza la barra degli indirizzi (perdendo le funzioni del browser), mentre la seconda (shortcut) apre l'app del browser consentendo quindi di cercare altri siti, tornare indietro e fare lo zoom. 

 

Shortcut, nonostante sia un collegamento è già leggermente più complessa, richiede di modificare nel manifest.webapp il parametro

 

"start_url": "www.YOURWEBSITE.com"

 

e sostituirlo con 

 

"launch_path": "/index.html"

 

perché fa riferimento al file "index.html", nel quale viene chiamato in causa in file javascript "main.js" nel quale viene imposto al browser di aprire il link indicato.

 

 

Si può usare "launch_path" anche per far partire semplicemente un file HTML come "index.html", magari se riuscite a scaricare un intero sito dal browser o possedete un HTML collegato a una o più sottocartelle potete avviare un applicazione COMPLETA e OFFLINE semplicemente inserendo il tutto in application.zip

 

 

Per una documentazione più completa:

 

KAIOSTECH  https://developer.kaiostech.com/

MOZILLA  https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS

Istantanea_2018-12-10_22-15-47.png-0.gif

Nokioteca Forum.zip

Nokioteca forum (shortcut).zip

metadata.json

ottimo!! ho fatto la webapp del mio sito personale... WOW grande!!

 

Condividi questo messaggio


Link al messaggio
Condividi su altri siti

complimenti! hai capito il meccanismo :)

 

non ho fatto app x eBay e Unicredit per motivi di navigazione. nel caso si effettua un operazione (poiché si tratta di soldi) se per errore si esce dall'app potrebbero esserci problemi.

l'ideale sarebbe aggiungere la navigazione come in app più complete.

non chiedermi come si fa perché (purtroppo) non ho più molto tempo x studiare le app in maniera completa.

in questo caso può andare bene un collegamento al browser (come fanno google search e il primo YouTube) in maniera da tenere la cronologia salvata.

 

comunque sono contentissimo che un altro italiano si cimenta nella creazione di app :)

bravissimo!

 

io ai ragazzi del forum bananahackers ho dato disponibilità nel rimpiazzare le mie app (un ottantina) nel caso riuscissero a fare di meglio...ma valli a trovare sviluppatori di app opensource oggigiorno :/

 

ripeto, avessi più tempo lo farei...ma sto almeno 14 ore al giorno fuori casa x lavoro, altrimenti avrei cercato di fare di meglio.

grazie :)

  • Grazie 1

Condividi questo messaggio


Link al messaggio
Condividi su altri siti
20 minuti fa, Ivan-HC ha scritto:

complimenti! hai capito il meccanismo :)

 

non ho fatto app x eBay e Unicredit per motivi di navigazione. nel caso si effettua un operazione (poiché si tratta di soldi) se per errore si esce dall'app potrebbero esserci problemi.

l'ideale sarebbe aggiungere la navigazione come in app più complete.

non chiedermi come si fa perché (purtroppo) non ho più molto tempo x studiare le app in maniera completa.

in questo caso può andare bene un collegamento al browser (come fanno google search e il primo YouTube) in maniera da tenere la cronologia salvata.

 

comunque sono contentissimo che un altro italiano si cimenta nella creazione di app :)

bravissimo!

 

io ai ragazzi del forum bananahackers ho dato disponibilità nel rimpiazzare le mie app (un ottantina) nel caso riuscissero a fare di meglio...ma valli a trovare sviluppatori di app opensource oggigiorno :/

 

ripeto, avessi più tempo lo farei...ma sto almeno 14 ore al giorno fuori casa x lavoro, altrimenti avrei cercato di fare di meglio.

grazie :)

si in effetti non avevo pensato alla questione dell'acquisto e della chiusura involontaria dell'app...

 

Idem anche io non ho molto tempo, nel week end ho solo voluto sperimentare....

Condividi questo messaggio


Link al messaggio
Condividi su altri siti

Che vantaggi danno le web app rispetto ai siti web? Mi par di capire che siano solo una interfaccia, ma a questo punto non conviene usare il sito? 

Condividi questo messaggio


Link al messaggio
Condividi su altri siti

più o meno funzionano allo stesso modo, solo che:

1. se usi il multitasking non sei vincolato al browser, e puoi usarne di più insieme;

2. puoi impostare il manifest in modo da ottenere più schermo, visualizzare in orizzontale o aggiungere funzioni di navigazione in più;

3. sono più leggere;

4. puoi aggiungere permessi senza coinvolgere il browser;

5. non salvano la cronologia, ma solo i dati nel caso hai un account collegato (per esempio le app di google).

  • Grazie 1

Condividi questo messaggio


Link al messaggio
Condividi su altri siti

Registrati o accedi per commentare

E' necessario essere utenti registrati per aggiungere una risposta

Registrati

Crea il tuo account di accesso alla community, è semplice!

Form di Registrazione

Accedi

Hai già un account? Effettua l'accesso da qui.

Accedi Ora

×