Creare app Android nativa di un sito web – parte 3

In questa terza ed ultima parte del tutorial vediamo come mettere mano al codice del progetto della WebView ed adattarlo.

File AndroidManifest.xml

Nella parte precedente del tutorial avevamo cambiato il nome del package alla riga 3.
In questo file vengono definiti i permessi necessari all’app (riga 5 e 6). INTERNET per far funzionare il componente WebView e ACCESS_NETWORK_STATE per controllare lo stato della connessione Internet, vedremo il codice Java successivamente.
Dentro il tag application viene definita l’icona dell’app, tema, etichetta dell’app (vedi App Bar) e la dichiarazione dell’activity MainActivity, tralasciamo il servizio Firebase (che si occupa dell’invio notifiche push) non oggetto di questo tutorial.

Sotto res\drawable sono presenti le varie risorse grafiche, possiamo personalizzare l’icona di lancio ic_launcher.png utilizzando il servizio online Android Asset Studio, verranno create le icone per tutte le dimensioni ed infine scaricare lo .zip da decomprimere dentro il nostro progetto C:\ProgettoAndroid\WebView\app\src\main\res.
E’ presente anche il file progress_drawable.xml che permette di personalizzare la barra di progressione del caricamento della pagina web.

Sotto layout c’è il file activity_main.xml dove troviamo tutte le proprietà della webview (dimensione del layout, ecc…)

Sotto menu c’è il file menu_turn_on_server.xml dove ci sono le proprietà del menù dell’App Bar.

Sotto values troviamo i seguenti files:

– color.xml: è possibile personalizzare i colori dell’App Bar, sfondo, testo.
– dimens.xml: sono definiti i margini (padding) dell’activity della WebView.
– strings.xml: è possibile personalizzare il testo relativo al nome dell’app e del menù delle Impostazioni.
– styles.xml: viene definito lo stile, il tema dell’app.

Apriamo ora il file relativo alla classe Java MainActivity, è molto lungo.

Probabilmente Android Studio segnalerà un warning alla riga 25 dicendo di utilizzare AppCompatActivity, questo perché ActionBarActivity risulta deprecato.
E’ sufficiente sostituire ActionBarActivity con AppCompatActivity, AndroidStudio darà errore: cannot resolve symbol appcompatactivity.
Questo perché occorre aggiungere una nuova riga sulle import (espandere la riga 3 in Android Studio):

import android.support.v7.app.AppCompatActivity;

Alla riga 55 scriviamo l’indirizzo web che vogliamo venga caricato.

Alle righe 125-126 è possibile personalizzare il testo dell’alert con i bottoni per uscire dall’applicazione quando viene premuto il tasto indietro (se l’app non può tornare più indietro nelle pagine navigate).

Alle righe 134-135 è possibile personalizzare il testo dell’alert relativo alla connessione Internet.

Infatti se non ci fosse il codice che controlla lo stato della connessione Internet (righe 67-74) anziché visualizzare il messaggio di alert vi ritroverete con la pagina di errore come quando cercate di aprire un indirizzo internet tramite browser e non si è connessi

Proviamo ora la nostra applicazione.
Compiliamo per verificare che non ci siano errori (Build -> Rebuild project).
Quindi dalla toolbar di Android Studio premiamo il simbolo di Run oppure dal menù Run o premendo Maiusc+F10.
Nella finestra successiva Select Deployment Target è possibile configurare un nuovo dispositivo virtuale (ne avevamo accennato nella prima parte del tutorial) oppure far girare l’app in un dispositivo connesso.
Ecco come si presenta l’app con la homepage di DigiTalking caricata:

Terminate tutte le modifiche che vogliamo (icone, testi delle finestre di dialogo degli alert, App Bar, colori) possiamo generare l’APK (Build -> Build APK).
Troverete l’APK pronto per essere installato in C:\ProgettoAndroid\WebView\app\build\outputs\apk con il nome app-debug.apk (perché l’applicazione è stata compilata in modalità Debug).
Per compilare in modalità Release deve essere configurata la build variant nel file build.gradle relativo a Module:app, quindi dal menù Build -> Select Build Variant, infine generare l’APK.

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.

Recensione software gratis Gennaio 2017

I programmi gratis e opensource più utili ed interessanti del mese:

Tenorshare ReiBoot disponibile per Windows e Mac permette di entrare in Recovery Mode dei dispositivi iPhone/iPad/iPod e ripristinarli allo stato normale, compatibile con iOS 10.

Internet Friendly Media Encoder è un encoder video H.265/HEVC semplice, flessibile e potente.

RansomFree è uno strumento anti ransomware per Windows 10/8.1/8/7 e Windows Server versions 2012/2008 R2.

Ellp software Windows per l’automazione: permette di eseguire determinate operazioni al verificarsi di certi eventi.

SteamCleaner è uno strumento che rimuove i dati non utilizzati lasciati da Steam, Origin, Uplay e GoG permettendo così di liberare spazio su disco.

Task Manager DeLuxe è un Task Manager avanzato per Windows.

Blackbird è un software per la privacy in Windows.

Le migliori applicazioni Android di Dicembre 2016

Best Android Apps

Clip Layer app di Microsoft permette di selezionare parti di qualsiasi schermata copiandole e condividendole.

Gfycat Loops permette di registrare video e salvarli come video.

PayPal Business permette di gestire al meglio il proprio account PayPal business (inviare fatture, gestire vendite, trasferire denaro ecc…)

Pyrope Browser browser leggero basato su Chromium.

Official TWRP app app ufficiale della famosa recovery.

Hai un sito web? Utilizza un certificato SSL

Se avete un sito web si consiglia di utilizzare un certificato SSL. Perché è importante?
A partire dal prossimo anno, Chrome etichetterà le connessioni HTTP come non sicure. Infatti con la release 56 nel Gennaio 2017 Mountain View ha confermato che “contrassegnerà” le connessioni HTTP come insicure.
Questa non è la sola manovra di Google per spingere ad adottare il protocollo HTTPS (HTTP Secure).
La crittografia HTTPS è anche un fattore di ranking, infatti le pagine HTTPS sono indicizzate prima rispetto alle pagine HTTP dal famoso motore di ricerca.
Quindi la crittografia HTTPS oltre a fornire una maggiore protezione favorisce un miglior posizionamento nella SERP di Google.

Molti hosting danno la possibilità di acquistare come opzione un certificato SSL, altri li includono gratuitamente in alcuni piani proposti.
Alcuni fornitori di hosting supportano Let’s Encrypt, che permette di avere un certificato gratuitamente.

Una volta installato un certificato SSL è possibile effettuare il redirect da HTTP a HTTPS aggiungendo quanto segue al file .htaccess:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

In questo modo digitando l’indirizzo del sito HTTP si verrà reindirizzati all’indirizzo con HTTPS.

Può capitare che qualcosa non funzioni utilizzando il protocollo HTTPS, è possibile utilizzare il servizio gratuito Why No Padlock? che effettua una scansione del sito mostrando ciò che è ok e se ci sono errori.

Ricevi gli aggiornamenti del blog

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