SCIENZE E TECNOLOGIE INFORMATICHE

Vi sono tre tipi di errori:

• errori di compilazione: codice errato
• errori in fase di esecuzione o errori di run time segnalti durante l’esecuzione del programma
• errori logici: che generano risultati diversi da quelli attesi

Curiosità: il termine debugger ha un’origine molto lontana nel tempo; venivano infatti chiamati così i lavoratori incaricati di ripulire le valvole dei primi computer dai nidi di alcuni tipi di coccinelle (dall’inglese bug, “coccinella”, appunto). Col tempo il termine ha preso un’accezione diversa e attualmente indica un software che ripulisce il programma dagli errori.

L’ambiente Android Studio ha un suo ambiente di debugger.

Vi sono tre concetti basilari:

• impostazione dei punti d’arresto (breakpoint)
• ispezione del contenuto delle variabili
• esecuzione del programma step by step (una riga alla volta)

I punti d’arresto

Un breakpoint è sostanzialmente uno strumento che consente di eseguire un programma con la possibilità di interromperlo quando si verificano determinate condizioni, allo scopo di acquisire informazioni su un programma in esecuzione.

Per impostare un breakpoint dobbiamo fare doppio click accanto alla riga di codice: apparirà un pallino rosso.

All’interno del MainActivity ho inserito la linea di codice ed ho fatto il doppio click per far comparire i pallino rosso.

Una volta avviato il debugger possiamo notare nella sezione Variables i contenuti della varabili man mano che il programma viene eseguito.

Per riprendere l’esecuzione del programma possiamo utilizzare il triangolino giallo affianco dal triangolino verde (resume) che riprende l’esecuzione normale del programma fino al prossimo breakpoint impostato o alla fine del programma.

Il quadratino rosso (Terminate) termina l’esecuzione del programma.

Una volta connesso il proprio cellulare si usa il punto di menù Run e vedremo sul cellulare la creazione di un’App:

e sul mio cellulare avrò l’icona dell’app appena creata

Un emulatore è necessario per effettuare il test e il debug delle nostre applicazioni:

Dal menù tools si seleziona AVD Manager:

compare la seguente schermata:

Quindi si crei la Virtual Device.

Comparirà la seguente schermata che permetterà di selezionare la risoluzione n pixel dell’emulatore.

Scegliere una risoluzione troppo alta può portare a dei rallentamenti nell’esecuzione dell’emulatore, nonché a un aumento della memoria RAM necessaria al PC per il funzionamento dell’emulatore stesso:

Si seleziona adesso la versione del sistema operativo Android che dovrà essere eseguita dall’emulatore. La scelta del sistema operativo influisce sulle prestazioni dell’emulatore. Meglio quindi utilizzare magari una meno recente.

Alla fine si sceglie il nome da assegnare all’emulatore e l’orientamento dello schermo: orizzontale (Portrait) o verticale (Landscape):

Alla fine viene proposto l’elenco degli emulatori creati.

Creare più emulatori con differenti risoluzioni e versioni Andorid può essere utile per verificare come si comporta la nostra applicazione su dispositivi con caratteristiche fisiche e software diverse.

Configurazione con dispositivo fisico

Si devono installare i driver necessari.

Ossia di selezione sdk manager

Adesso bisogna andare su

Ho selezionato la cartella SDK Tools ed ho messo la spunta su Google USB driver. Aspetto che si installi il pacchetto.

A questo punto si deve andare sul proprio cellulare ed attivare la funzione di debug.

Questa la si trova su impostazioni sviluppatore. Per attivare tale opzione si deve andare su build number nel menù informazioni del telefono toccarlo 7-8 volte e si abilita il menù impostazioni sviluppatore. A questo punto si entra nel menù appena creato e si abilita la funzione di debug USB. Si creerà una finger prnt della chiave RSA e si seleziona che lo si consente.

Il Project Explorer è lo strumento che ci permette di esplorare e navigare tra i file di cui è composto il nostro progetto.

Ci permette di accedere a tre file che sono la base del funzionamento della nostra applicazione.

AndroidManifest.xml

MainActivity.java

activity_main.xml

AndroidManifest.xml

Quando si crea un nuovo progetto viene creato il descrittore dell’applicazione.

I file manifest consentono di definire la struttura e i metadati xml dell’applicazione. Include un nodo per ogni componente (Attività, Servizi, Content Providers e Broadcast Receiver) e attraverso gli Intent Filter e i Permission determina come ogni componente interagisce con gli altri e le atre applicazioni.

Contiene il nome del package e altre informazioni:

deve essere memorizzato nella cartella principale dell’applicazione e descrive i componenti dell’applicazione, in modo che il sistema operativo possa conoscere i componenti e le librerie usate dall’applicazione e necessarie per la sua corretta allocazione in memoria.

MainActivity.java

Si può notare che pur creando un’applicazione vuota, AndroidStudio inserisce delle porzioni di codice. Effettua l’override del metodo onCreate(), richiamando il costruttore della classe madre e settando il layout dell’Activity con il metodo setContentView().

acrivity_main.xml

contiene il codice XML che descrive il layout delle activity. Fornisce informazioni riguardo al contenitore più esterno e ai widget in esso contenuti, in questo caso una TextView con scritto “Hello Word!.

L’ambiente di lavoro è indubbiamente molto complesso.

Nella colonna di sinistra vi è il Project Explorer, grazie al quale è possibile passare agevolmente da un file all’altro del progetto.

Nella finestra centrale vi è l’editor che mostra, n questo caso, il codice dell’Activity selezionata (MainActivity.java).

Si utilizzi il ProjectExplorer per visualizzare le activity_main.xml che descrive il layout del nostro applicativo.

Selezionando activity_main.xml si notano:

• component Tree che ci mostra tramite una struttura annidata i widget presenti all’interno del nostro layout e a destra sempre tutte le proprietà relative al controllo selezionato.

I widget sono in controlli grafici che consentono l’iterazione con l’utente, come ad esempio i pulsanti di azione, le caselle di testo o liste di opzioni. Il termine deriva dalla contrazione dei termini Windows e gadget.

Nel riquadro in rosso si può scegliere se vedere il linguaggio xml, vedere anche la vista grafica o ritornare alla vista iniziale.

Bisogna andare su File- New Project

Seleziono Empty Activity

Tengo le impostazioni proposte in questa fase.

Alcune notizie sulle altre opzioni:

Blank Activity: quasi vuota, contiene un menù a tendina per e impostazioni e una piccola scorciatoia per le impostazioni e una piccola scorciatoia modificabile

Empty Activity: è la tipologia più semplice, non contiene nulla se non una Text View con scritto Hello Word.

FullScreen activity: è impostata per un funzionamento a schermo intero, rendendo quindi nascosta la barra delle notifiche

GoogleMaps Activity: integra un’istanza delle mappe di Google

Setting Activty: contiene dei componenti grafici molto utili per la regolazione delle impostazioni dell’applicazione

NavigationDrawer Activity: integra un menù laterale molto utile per la navigazione tra le varie activity

Nella schermata successiva, porre attenzione al fatto di selezionare Java altrimenti verrà creata la main activity come un sorgente Kotlin

Primo passo installare Android Studio da developer.android.com/sdk

selezionare il sistema operativo corretto

nella fase di installazione si chiede quali componenti aggiuntivi scegliere: si lasciano le componenti che vengono proposte

si decide se si vuole creare un collegamento sul desktop

Es.1

Crea una pagina web con l’organigramma di un’azienda partendo dall’ammistratore delegato, poi dalla segreteria, poi ufficio tecnico con il relativo personale. Per fare questo usa le opportune liste. Poi cliccando sul nome mostrare la relativa immagine con pochi dati. Cerca sul web delle immagini a caso e inventa tu i dati anggrafici.

es2.

Crea il sito di un museo di arte contemporanea strutturandolo con delle liste per indicare le sale e poi cliccando sulla relativa sala si apre una nuova pagina che mostra alcuni quadri prsenti. Crea un link per ritornare alla pagina precedente. Le immagini ed il museo cercare nel web

es3,

Crea il sito per un torneo di calcio. Cliccando sul nome della squadra mostrare una nuova pagina in cui compare l’elenco dei calciatori e dell’allenatore ed inserire le immagini. Le immagini cercare sul web

es4.

crea una pagina web, usando le liste, possa mostrare le ricette tipiche della regione trentino alto adige. Usa delle opportune immagini per mostrare le ricette e cliccando sugli ingredienti dove si possono acquistare.

es5.

Crea una pagina web che illustri le cinque terre. Cliccando sulle cinque terre si deve aprire la pagina web di wikipedia della liguria.

L’elenco delle cinque terre deve essere con la relativa immagine.

Una pagina web senza immagini o link è praticamente di poca utilità ed efficacia.

Per inserire un’immagine è necessario inserire l’immagine all’interno della directory in cui vi è il file htm.

Ad esempio :

positano <img src=”immagine.png” width=”60%” align=”middle” border=”8″>

inserisce un’immagine con una certa ampiezza, con un certo allignamento ed un opportuno bordo attorno,.

Se si vuole inserire un link basta usare il seguente tag

<a href=”https://www.whymatematica.com”>sito di matematica</a>

oppure se si vuole che cliccando su un’immagine si apra un particolare sito:

<a href=”https://www.whymatematica.com”><img src=”pulsante.jpg”</a>

Se si vuole creare un’insieme di pagine che si colleghino tra loro:

<a href=”prima_pagina_html>prima pagina </a>

in pratica il tag <a> e </a> non fa altro che creare un collegamento

All’interno del tag body si possono creare vari tipi di liste:

Elenco a pallini:

<ul>

<li> primo

<li> secondo

<li> terzo

</ul>

Elenco a quadratini

<ul type=”square”>

<li>primo

<li>secondo

<li>terzo

</ul>

Elenco a pallini vuoti

<ul type =”circle”>

<li> Primo

<li>Secondo

<li> Terzo

</ul>

Elenco strutturato

si nota come il tag <ol> apra l’elenco strutturato poi al suo interno si mette il primo elemento della lista e poi ancora il tag <ul> per gli altri elementi.

<ol type=”a”>

<li> Microsoft </li>

<ul type=”square”>

<li>Bill Gates</li>

<li>Paul Allen</li>

</ul>

</ol>