Creare app Android nativa di un sito web – parte 2

In questa seconda parte del tutorial vediamo come importare un progetto di esempio ed adattarlo.

E’ possibile scaricare il progetto da GitHub.
Come già detto il progetto sfrutta il componente WebView per visualizzare una pagina web.

Decomprimere tutti i files in una cartella a piaciamento, esempio C:\ProgettiAndroid\WebView.

Aprire Android Studio appena installato, cliccare su File -> Open e selezionare il percorso appena creato dove abbiamo decompresso il progetto.
Il progetto richiede Build Tools 23.0.3, se non lo avete installato nella finestra dei messaggi apparirà l’errore Failed to sync Gradle project ‘Webview’.
Sarà sufficiente cliccare su Install Build Tools 23.0.3 and sync project, il pacchetto verrà scaricato automaticamente ed installato.

Il progetto richiede Gradle 2.10, per semplificare diciamo che Gradle è uno strumento che si occupa della build dei progetti in Android Studio, ovvero effettua la compilazione vera e propria.
Anche in questo caso se la versione corrente non è 2.10 apparirà un messaggio di errore.
Sarà sufficiente cliccare su Fix Gradle wrapper and re-import project.
Potrebbe presentarsi una popup che richiede di aggiornare Gradle, fatelo pure senza problemi.

La struttura si presenterà come da seguente schermata:

Android Studio

Per semplificare:

app: l’applicazione vera e propria con le sottocartelle manifests (contiene AndroidManifest.xml, file che fornisce le informazioni essenziali dell’app al sistema Android), java (contiene il codice Java, qui sono presenti le varie classi java), res (contiene le risorse come immagini, icone, layout).

Gradle Scripts contiene gli script di Gradle, il tool per la build del progetto. In particolare date un’occhio al file build.gradle relativo a Module:app, qui ci sono impostazioni importanti, vediamo successivamente cosa sono e come modificarle.

Innanzitutto vorremmo cambiare il nome del package com.androidworks.nikhil.webview.
Aprire il file AndroidManifest.xml sotto app\manifests e cambiare la seguente riga

package="com.androidworks.nikhil.webview" >

ad esempio

package="com.android.digitalking.webview" >

Quindi cliccare con il tasto destro su app\java e selezionare New -> Package, chiamarlo esattamente come abbiamo deciso da esempio.
Selezionare le tre classi java presenti (MainActivity, MyFirebaseIstanceIDService, MyFirebaseMessagingService) quindi con il tasto destro selezionare Refactor – Move e come destinazione su To package navigare con i tre puntini fino a com.android.digitalking.webview quindi premere Refactor.

Nella finestra di messaggio chiamata Find Refactoring Preview verranno visualizzate le occorrenze trovate in tutto il codice, è possibile scegliere quindi se fare il refactor premendo Do Refactor oppure cancellare l’operazione.

Una volta effettuato lo spostamento è possibile cancellare il package androidworks.nikhil.webview rimasto vuoto (tasto destro sul nome e quindi Delete).

Ora selezioniamo sempre app cliccando con il tasto destro, quindi Open Module Settings (oppure premendo F4). Qui sono presenti impostazioni importanti che possiamo lasciare così oppure modificare.
Vediamo le principali.

Sotto Properties:

Compile Sdk Version: indica la versione dell’API con cui viene compilata l’app.

Sotto Flavors:

Min Sdk Version: indica la versione di API minima.
Target Sdk Version: rappresenta un valore intero che indica il livello di API ideale per il quale l’applicazione è stata sviluppata. E’ consigliato di utilizzare sempre l’ultima versione delle API. Se non viene specificato di default viene utilizzato il valore di Min Sdk Version.
Min Sdk Version: rappresenta un valore intero che indica il livello minimo di API necessario per utilizzare l’applicazione.
Application Id: ogni app Android ha un application ID univoco che identifica l’app nel dispositivo e nel Play Store di Google. Possiamo cambiarlo e mettere il nome scelto con il nuovo package, ovvero com.android.digitalking.webview.
Version Code: valore integer utilizzato come numero per versione interna.
Version Name: una stringa utilizzata come numero di versione da mostrare agli utenti.

Ricordate il file delle impostazioni di Gradle build.gradle relativo a Module:app? Qui trovate i valori di queste impostazioni.

In questo file è anche possibile configurare i tipi di build tramite il blocco buildTypes. Di default il sistema definisce due tipi di build: debug e release. Il tipo di build debug non è esplicitamente mostrato nella configurazione di default della build ma include strumenti per il debugging ed è firmato con chiave di debug.
Il tipo di build release applica le impostazioni Proguard (permette di rilevare e rimuovere il codice non usato riducendo le dimensioni dell’APK generato) e di default non è firmato.

La compilazione del progetto dovrebbe dare degli errori per il fatto che è stato modificato l’application id ed il nome del package.
Per risolvere occorre modificare il nome del package all’interno del file google-services.json (presente sotto la directory C:\ProgettoAndroid\WebView\app\google-services.json) utilizzando un qualsiasi editor di testo e all’interno di Android Studio sulla classe MainActivity e MyFirebaseMessagingService rinominare tutte le vecchie referenze com.androidworks.nikhil.webview con il nome scelto.

Per verificare se la compilazione non da errori lanciare una nuova build (menu Build -> Rebuild project).

Android Studio

Nella terza ed ultima parte vedremo come modificare il codice sorgente adattandolo, testare l’applicazione e quindi generare l’APK pronto per essere installato.

Creare app Android nativa di un sito web – parte 1

Se non siete sviluppatori Android ma volete realizzare un’app del vostro sito web questo è il tutorial che fa per voi.
Avete un blog WordPress o un sito realizzato in Joomla già responsivo? (adatto ad essere visualizzato correttamente sia su desktop che su mobile).
Esistono diverse soluzioni per creare un’app Android, quella che verrà illustrata in questa guida si avvale dell’uso di Android Studio, l’IDE (Integrated Development Environment) ufficialmente supportato da Google per lo sviluppo Android.
Per chi non lo sapesse per sviluppare in Android si utilizza il linguaggio Java, se non siete esperti di programmazione non vi preoccupate!
In questa prima parte del tutorial verrà illustrato tutto ciò che occorre installare per utilizzare Android Studio in ambiente Windows.
Nella seconda parte verrà fornito un progetto Android Studio già pronto da modificare secondo le proprie esigenze.

Scaricare ed installare Android Studio

E’ possibile scaricare ed installare Android Studio dal sito https://developer.android.com/studio/index.html.
Il bundle completo include tutti gli strumenti necessari per iniziare a sviluppare le proprie app:

– IntelliJ IDE + Android Studio plugin
– Android SDK Tools
– Android Platform-tools
– Una versione di Android platform
– Emulatore Android con immagine di sistema Android incluso Google Play Services

ATTENZIONE: Android Studio richiede che sia installato Java (JRE/JDK) per funzionare.
Link JRE: https://java.com/it/download/
Link JDK: http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
fare attenzione ad installare la versione corretta in base al proprio sistema operativo, se 32 o 64bit.

Alcune volte il wizard di Android Studio non trova Java installato.

Cliccare su Browse e indicare il percorso al JDK (ad esempio C:\Program Files\Java\jdk1.8.0_77).

Si può ovviare all’errore di cui sopra definendo una nuova variabile di sistema chiamata JAVA_HOME che punta alla cartella JDK.

In Windows 10 basta andare su Pannello di controllo\Sistema e sicurezza\Sistema quindi selezionare Impostazioni di sistema avanzate.
Selezionare variabili d’ambiente e definire la nuova variabile di sistema JAVA_HOME con il valore il percorso al JDK (ad esempio C:\Program Files\Java\jdk1.8.0_77).

Schermate di installazione di Android Studio:

View post on imgur.com

Durante l’installazione di Android Studio annotatevi il percorso dell’Android SDK, ad esempio C:\Users\NOMEUTENTE\AppData\Local\Android\sdk.
Da qui lanciate l’Android SDK Manager per scaricare i vari pacchetti, non sono necessari tutti, dipende quali API intendete utilizzare, sono consigliate sempre le più recenti.
Le varie system image e Intel x86 Emulator Accelerator (XAHM Installer) permettono di far girare l’applicazione su un dispositivo virtuale all’interno di Android Studio.
Sarà necessario creare e configurare un Android Virtual Device (AVD) in Android Studio.
Se non si vuole/può utilizzare l’emulatore è anche possibile far girare l’app su un dispositivo collegato al computer, a patto che lo smartphone sia correttamente visto dal computer (aver installato i driver Windows) e abilitato l’opzione Debug USB sulle opzione Sviluppatore nelle impostazioni del proprio dispositivo.

Se si vuole utilizzare le ultime API di Android Nougat (7.1.1) dall’SDK Manager si installerà:

– Tools: Android SDK Tools, Android SDK Platform-tools, Android SDK Build-tools
– Android 7.1.1 (API 25): SDK Platform più tutte le system image
– Extras: Android Support Repository, Google Repository, Google USB Driver, Intel x86 Emulator Accelerator (XAHM Installer).

Nella seconda parte del tutorial verrà importato un progetto in Android Studio che sfrutta il componente Webview per visualizzare pagine web, con le opportune modifiche verrà personalizzato ed infine compilato generando l’APK pronto per essere installato.

Wix, piattaforma per la creazione di siti Web

Oggigiorno essere presenti su Internet è fondamentale ma non tutti hanno le conoscenze tecniche per aprire un sito web.

Se non volete necessariamente rivolgervi a specialisti (web designer e sviluppatori) esistono delle soluzioni a costi contenuti che permettono, a chiunque ne abbia esigenza, di creare un sito web in poco tempo ed in completa autonomia; Wix è una di queste.

Grazie alla sua chiarezza e facilità d’uso la piattaforma permette a qualsiasi tipo di utente di essere immediatamente online.
Wix conta più di 50 milioni di utenti in tutto il mondo ed è tradotto in 11 lingue tra cui l’Italiano.

Wix mette a disposizioni tanti templates, gratuiti e a pagamento, realizzati con moderne tecnologie e ottimizzati per il mobile.
I templates sono comodamente divisi in varie categorie ed è possibile personalizzarli grazie ad un moderno editor online basato su HTML5.

Wix Editor

L’uso dell’editor è immediato: è possibile modificare facilmente le Pagine, il Design, aggiungere elementi (testo, immagini, galleria, multimedia, ecc…), aggiungere app dal market.
Ciò che a mio avviso manca per essere davvero completo è il poter personalizzare a fondo il tema tramite una sorta di editor HTML/CSS integrato nello strumento.
Invece ciò che mi è piaciuto molto è l’anteprima in tempo reale del layout mobile con le opzioni specifiche per personalizzare il Design e l’aggiunta di elementi.
Un altro punto a favore è l’attenzione per il SEO, fondamentali per essere “trovati” dai motori di ricerca.
Infatti, sempre nell’editor, sono disponibili le impostazioni sia di base (titolo del sito, descrizione e parole chiavi) sia quelle avanzate dov’è possibile inserire manualmente i tag META.

Ciò che mi piace di Wix è la sua flessibilità grazie a tante apps pronte all’uso. Nell’app market se ne trovano sia gratis che a pagamento e sono divise in varie categorie. E’ quindi possibile estendere il sito di “base” integrando facilmente nuove funzionalità, ad esempio è possibile aggiungere una live chat, integrare Google Maps, inserire form di contatto, integrare funzionalità sociali e molto altro.
Inoltre grazie a pacchetti Premium è possibile usufruire di importanti features che rendono il servizio davvero completo: utilizzare un proprio dominio personale acquistato presso qualsiasi domain registrar, rimuovere gli annunci Wix, avere larghezza di banda illimitata e spazio memoria aggiuntivo, collegare Google Analytics per ottenere statistiche complete.
Non da ultimo Wix permette anche di avere un proprio indirizzo email personalizzato (fornito da Google).

In conclusione ritengo Wix un buon servizio, adatto per chi vuole creare un proprio sito web personale come portfolio, blog (è possibile switchare da sito a blog nell’editor) ma anche per promuovere il proprio business. Infatti anche chi ha una propria attività la può valorizzare e trovare potenziali nuovi clienti tramite un sito web realizzato con Wix e, per chi ha esigenze di e-commerce, è possibile sfruttare sia le apposite apps che Wix mette a disposizione tramite il market sia effettuare upgrade a pacchetto Premium pensato ad hoc.

Pannelli di controllo hosting commerciali e gratuiti

Quando si parla di hosting web nella scelta del fornitore che si va a fare è molto importante considerare il tipo di pannello di controllo messo a disposizione per la gestione del sito, vediamo quali sono i più utilizzati (sono tutti commerciali ma generalmente sempre inclusi nel prezzo del pacchetto scelto):

cPanel forse il più utilizzato, come licenza è anche il più costoso, facile da utilizzare, mette a disposizione un elevato numero di funzionalità, consuma abbastanza risorse

Plesk disponibile sia in ambiente Linux che Windows, funzionalità estendibili grazie ai plugins, meno costoso e consuma meno risorse di cPanel

DirectAdmin meno utilizzato degli altri due prodotti, ma meno costoso di essi, inoltre è semplice da utilizzare e consuma poche risorse

Potete trovare un bel riassunto con confronto delle caratteristiche di questi 3 prodotti a questo link.

Anche se generalmente non vengono utilizzati dai web hosting c’è da dire che esistono delle valide alternative gratuite, ecco le migliori:

Webmin funziona sia in ambiente Windows che Linux, è considerata la miglior alternativa gratuita; è opensource e come funzionalità si avvicina a cPanel

Kloxo per server Linux, leggero, può gestire clienti, resellers, domini, backup, mail e molti altri aspetti

SysCP per server Linux, supporta molti server web, e-mail ed FTP

VHCS compatibilità con molte distribuzioni Linux, molte funzionalità

Aumentare la velocità del vostro blog WordPress in 8 modi

Voglio condividere delle soluzioni che ho adottato per aumentare la velocità del blog frutto di varie letture effettuate in Rete.

Il beneficio, oltre quello evidente di una migliore fruizione per i visitatori, si sente anche a livello SEO, infatti Google è un fattore che tiene in considerazione riguardo al ranking.

1. Utilizzare un tema leggero

un tema leggero (ricercare ad esempio minimalista) sia dal punto di vista grafico che di funzioni PHP e script utilizzati all’interno è la base di partenza.
Come è possibile notare molti blog di successo usano temi/templates semplici e puliti.

2. Effettuare analisi performance con Firebug (e gli addons Pagespeed e Yslow)

Firebug è un’utile strumento (addon Firefox) utilizzato principalmente per effetture debug sul codice, ma ha anche un’utile funzione per misurare il caricamento di una data pagina web (tab “All” -> sottotab “Net”): vengono analizzate tutte le richieste (request) e il loro tempo di caricamento. Per una migliore analisi è anche possibile utilizzare l’estensione Firefox Page Speed di Google in cui è possibile analizzare una pagina e viene mostrato un punteggio riguardo la velocità ottenuta, vengono elencate le criticità con opportuni simboli e vengono dati dei consigli per ottimizzare la pagina in termini di velocità in base all’analisi effettuata; un’altra estensione simile è Yslow di Yahoo

3. “minificare” i fogli di stile e gli script Javascript
tramite dei plugins per WordPress è possibile ridurre considerevolmente il peso dei fogli di stile e degli script Javascript tramite una tecnica che li “comprime”.
E’ possibile utilizzare l’apposito modulo presente nel plugin W3 Total Cache (vedesi punto successivo)

4. abilitare e utilizzare il caching
tramite degli appositi plugin è possibile utilizzare la funzione di caching delle pagine, ovvero la prima volta che viene visitata essa viene memorizzata all’interno del proprio server web in modo statico (per intenderci in html), le successive volte viene richiamata la pagina salvata anzichè ricomporre dinamicamente la pagina php.
Esistono vari plugins, quello che mi sono trovato meglio e più performante è il W3 Total Cache; le impostazioni di default vanno bene in linea generale, se si vuole approfondire le impostazioni nel dettaglio è possibile seguire l’ottima guida (in inglese) di Zemalf.com e/o StrictlyOnlyBiz

5. utilizzare il modulo Apache mod_pagespeed se il proprio hosting lo prevede
si tratta di un recente modulo Apache sviluppato da Google, guarda questo video comparativo

6. ottimizzare saltuariamente il database
ogni tanto è buona norma ottimizzare le tabelle del database di WordPress, è possibile fare ciò direttamente tramite PHPMyAdmin o appositi plugins (es. WP-Optimize)

7. scegliere un host efficiente
un servizio di hosting con una buona banda a disposizione e in grado di gestire diverse connessioni contemporaneamente

8. ridurre il peso delle immagini e se possibile hostarle in servizi appositi
cercare di comprimere il più possibile le immagini presenti nel blog e se possibile hostarle in appositi servizi (es. Picasa, Flickr, ecc…) anzichè nel proprio web server

Ricevi gli aggiornamenti del blog

Vuoi rimanere aggiornato riguardo gli ultimi articoli pubblicati nel blog? Inserisci la tua email per sottoscriverti alla newsletter!