Compatibile con Xcode 8

Come creare applicazioni iOS per blog e feed XML

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Come posso creare applicazioni iOS per blog e feed XML? Come creo un’applicazione per la lettura delle notizie dei siti web?

Il metodo più semplice per creare un’applicazione del genere è quella di sfruttare gli RSS o Feed XML che la maggior parte dei siti web (tipo quelli creati con wordpress) hanno di default.

L’RSSReally Simple Syndication è un formato di distribuzione dei contenuti web conosciuto principalmente per essere stato sfruttato dai blog e siti di notizie come strumento di notifica dei contenuti (una sorta di sistema delle notifiche attuali).

Gli RSS sono strutture scritte con il linguaggio di markup XML. Motivo per cui è facilmente esportabile in altre applicazioni o pagine web. Per capire di cosa sto parlando, questo è il feed XML del mio sito web xcoding.it/feed/ (se stai usando Safari potresti avere dei problemi ad aprirlo, in tal caso usa Chrome o Firefox).

Se non ci capisci niente, non ti preoccupare a fine tutorial capirai cosa c’è scritto lì dentro.

Ma veniamo a noi.

Molti siti web di notizie hanno un’applicazione iOS che permette di leggere gli stessi contenuti che ritrovi sul sito web.

Come creare applicazioni iOS per blog e feed XML

Come fanno?

Il sistema che utilizza l’applicazione per mostrarti le notizie è quello di leggere il flusso RSS o XML del sito in questione. Cioè vanno a leggere proprio quel link che ti ho dato poc’anzi per scaricarne il contenuto.

A primo impatto può sembrare qualcosa di complicatissimo. In realtà con il linguaggio Swift e con alcuni framework presenti, sarà un gioco da ragazzi.

Non perdiamo altro tempo.
Vediamo come creare una semplice applicazione iOS per la lettura delle notizie di un feed XML!

 

Come funziona

Sopra ti ho detto che gli RSS di un blog basato su wordpress (ma il principio vale per tutti) sono scritti utilizzando il linguaggio XML che, in modo molto grossolano, permette di strutturare le notizie mediante dei tag.

Ad esempio, quando scrivo un articolo posso definire un testo come Titolo ed un altro come sottotitolo o semplice paragrafo. L’XML non fa altro che prendere quel testo, che io ho segnato come titolo, è racchiuderlo con un’etichetta. 

Se il titolo di questo articolo è “Come creare applicazioni iOS per blog e feed XML“, l’etichetta che gli verrà assegnata sarà: (inizio_titolo)Come creare applicazioni iOS per blog e feed XML(fine_titolo).

In questo modo qualsiasi persona o computer che leggerà il mio articolo in forma xml saprà che quel testo, racchiuso in quel tag, è il titolo dell’articolo.

Tutto questo procedimento viene fatto per qualsiasi tipo di informazione presente nell’articolo. Persino le immagini hanno un’etichetta!

 Il Parser è lo strumento per trovare e leggere il contenuto presente e racchiuso tra le etichette XML.

Il Parser, quindi il lettore di etichette XML (ma esistono altri tipi di parser, come il parser json), che implementerai in questo tutorial, funziona così:

  1. Il Parser apre una connessione con il feed di un sito web o blog (Ad esempio il mio e anche per te deve essere il mio!).
  2. Se esiste il file, il Parser comincia a leggerlo.
  3. Cerca le etichette in questione.
  4. Prende il contenuto.
  5. Ripete finché non finiscono le etichette da leggere.

Il Progetto

In questa prima parte, dato che il tutorial è di una difficoltà intermedia, andrò leggermente più veloce. Se dovessi trovare difficoltà a seguire questi passaggi scritti, forse è il caso che cominci da qualcosa di più semplice oppure oppure puoi seguire il mio corso di sviluppo applicazioni iOS dove ti guiderò in tutte le fasi dello sviluppo.

Premessa fatta, andiamo al sodo.

In fondo alla pagina trovi il progetto completo. Se vuoi crearlo da zero, il layout è il seguente:

 

app-blog-reader-swift

Nello storyboard è presente un Navigation Controller utile per la navigazione tra i ViewController. Ed il ViewController di default.

A questo ViewController ho aggiunto una TableView. Alla tabella ho aggiunto la classica prototype cell a cui ho cambiato la proprietà Style in Subtitle e l’Identifier in cell.

Se già cominci a vedere i mostri, forse questo non è il tutorial per te (scusami ma questo non è un tutorial base). In caso avessi dei problemi, ti basta seguire i tutorial più semplici presenti sul mio sito oppure dare uno sguardo ai nostri corsi.

Infine, non dimenticarti di aggiungere l’IBOutlet della tabella ed i protocolli per gestirla: UITableViewDelegate e UITableViewDataSource. Qui di seguito il codice del tuo ViewController allo stato di partenza:

Se non hai voglia di creare un nuovo progetto puoi scaricare il progetto completo in fondo al tutorial.

XMLParserController

Per poter semplificare la fase di gestione e della lettura del feed xml di un sito web, come ribadito molte volte nel corso Swift e nel corso iOS, è importante suddividere le operazioni dell’applicazione in diversi file per evitare di uscire pazzi.

Crea un nuovo file (File\New\File…) di tipo Swift File chiamato XMLParserController. Al suo interno crea una nuova classe omonima che eredita dalla NSObject ed importa il framework UIKit:

Come ti dicevo esiste una classe preconfezionata nel framework UIKit chiamata XMLParser che gestirà per te tutte le operazioni di lettura dei tag xml.

Un oggetto di tipo XMLParser si crea partendo dall’indirizzo in cui risiede il file xml, cioè l’url. Nel nostro caso sarà www.xcoding.it/feed/. Quindi crea una proprietà chiamata parser di tipo XMLParser e crea un init con parametri url: URL che utilizzerai per inizializzare l’oggetto parser:

Se già adesso classe, init, oggetto e compagnia ti suonano nuovi, forse dovresti dare uno sguardo al mio corso gratuito sul linguaggio Swift. Non prenderlo alla leggera, molti nuovi sviluppatori falliscono proprio perché non conoscono le basi.

Torniamo a noi.

Le operazioni di parsing, però, non cominciano con la creazione dell’oggetto XMLParser bensì devono essere esplicitamente richieste. Vedremo tra un po’ come fare.

Inoltre il parser non è in grado di capire quali elementi andare a pescare e quali invece saltare. Per esempio non sa se deve prendere il titolo degli articoli o l’autore, oppure entrambi. anche questa parte deve essere esplicitata.

Dato che non ci troviamo all’interno della classe XMLParser o di una sua subclass per poter intercettare gli eventi di lettura e codifica è necessario implementare il protocollo XMLParserDelegate che provvederà a darci le funzioni utili. Clicca qui se non ti ricordi cos’è una subclass o qui  per i protocol.

Comincia aggiungendo la definizione del protocol alla classe:

Nel metodo init, subito dopo la creazione dell’oggetto XMLParser, devi rendere la classe corrente (cioè self) delegata alla gestione dei metodi del parser. Quindi scrivi:

 

Sbloccare la connessione HTTP

Prima di andare avanti, Apple, ha da qualche hanno messo una restrizione alle applicazioni che si connettono a url non sicuro, cioè quelli che cominciano per http. Tutte le connessioni di questo tipo mandano in crash l’applicazione. Quindi ti è permesso utilizzare solamente le connessioni a siti https come xcoding o altri.

Per sbloccare le connessioni non sicure, come ho spiegato qui Tutorial WebView con il linguaggio Swift, è necessario modificare il file info.plist. Aggiungendo queste righe di codice (se non sai come aggiungerle leggi il tutorial che ti ho linkato sopra):

La struttura XML di un Feed

Adesso è arrivato il momento di analizzare il feed. Vai al link www.xcoding.it/feed, se safari ti da dei problemi aprilo con Chrome, quello che vedrai è qualcosa del genere (l’immagine qui sotto è di qualche anno fa). Questa generalmente è valida per qualsiasi sito basato su wordpress:

struttura XML di un Feed RSS

A inizio tutorial ti avevo detto che ogni elemento di un articolo è racchiuso da un’etichetta, ora dovresti capire quello che intendevo dire.

Ogni etichetta è contenuta in un’altra in modo da formare una scatola cinese. L’elemento più esterno, che riguarda un articolo, si chiama <item> (in realtà prima c’è channel e prima ancora xml) ed ognuno di essi al suo interno contiene altre etichette.

Questa schematizzazione è utile per l’ottimizzazione dei tempi di lettura.

Infatti, se alla tua applicazione non serve analizzare gli <item>, quindi gli articoli, passerà oltre. Oppure, se gli interesserà leggere solo cosa c’è dentro un <item>, passerà a rassegna solo questi.

Nel dettaglio, cercheremo i campi <title> e <link> estrapolandone il contenuto.

condividi xcoding

Ho impiegato un po’ di tempo a scrivere l’articolo sarei felice se contribuissi alla mia causa mettendo un follow alle pagine o registrandoti alla newsletter:

 [addtoany]

Grazie davvero :-)

La classe BlogPost

Adesso serve creare una classe per la gestione dei vari post che andrai ad estrapolare da ogni <item>. Crea un nuovo file di tipo Swift e chiamalo Post. Crea due attributi String per conservare sia il link, titolo (scoprirai sotto a cosa servono):

So che ancora non c’è niente di concreto, ma fidati di me. Questi piccoli pezzetti stanno per mettersi insieme.

I metodi del XMLParserDelegate

Ritorna nel file XMLParserController.swift, sotto la definizione della classe aggiungi un array di tipo Post ed un Post che userai per scorrere gli elementi del file XML:

Dato che la lettura del feed passa a rassegna i vari tag e tu vuoi leggere solamente il contenuto di alcuni, è necessario definire altre due variabili utili a tale scopo. La variabile isParsingItem ti assicurerà di trovarti sempre all’interno del tag item mentre la currentTagParsed ti servirà per salvare il tag letto in quel momento:

Questo perché il feed cammina per tag. Legge il tag <title> e si ferma. Ti chiede, vuoi fare qualcosa con questo stag? se tu rispondi si, appena arriva al tag </title> (che sancisce la chiusura) allora prendi il contenuto all’interno, altrimenti passa al prossimo tag.

Nello specifico sono tre le funzioni che entrano in gioco.

  1. didStartElement: si attiva quando il parser trova un tag xml.
  2. foundCharacters: ti permette di recuperare il testo contenuto in un tag.
  3. didEndElement: si attiva quando il parser trova un tag di chiusura.

Quindi, nel didStartElement passerai il isParsingItem a true quando troverà il primo item (per evitare di leggere tag non necessari). Successivamente, sempre nello stesso metodo, quando troverà un tag che ti interessa leggere (title link) lo memorizzerai nella variabile currentTagParsed.

Con la foundCharacters prenderai il contenuto dal currentTagParsed e lo memorizzerai nel currentPost.

Infine con il didEndElement salverai il currentPost nell’array e preparerai le variabili per la lettura del prossimo tag.

didStartElement

Come ti dicevo, quando il parser comincia la lettura si ferma ad un tag. Il metodo che viene chiamato quando si ferma al primo tag trovato si chiama didStartElement ed contenuto nell’XMLParserDelegate. Nel tuo XMLParserController aggiungi dentro la classe:

Il parametro elementName contiene il nome del tag in cui si è fermato il parser. Dato che a noi interessa prendere il title e link del post è necessario capire quando il parser si trova su questi due tag per poi prendere successivamente il suo contenuto.

Nel file sono presenti altri due tag title e link che non sono appartenenti al tag item (sono nel blocco channel ed image) e che quindi potrebbero mandarci in confusione. Per questo motivo, il nostro codice deve attivarsi solamente quando il parser è all’interno del tag item. 

Il parser, in questo modo, quando troverà l’elementName == item ci assicurerà della sua presenza all’interno del tag item che identifica un articolo.

Subito sotto, dato che quell’if non verrà più attivato (se non per altri item), puoi intercettare il ritrovamento del tag title o link per recuperarne il contenuto:

Come recupero il contenuto dal tag?

foundCharacter

Il metodo foundCharacter ti permette di analizzare il contenuto di un tag. Dato che si attiva per qualunque tag, nel metodo didStartElement hai salvato il tag title o link nella variabile currentTag. Questa ci assicurerà di leggere il contenuto soloq quando la foundChracters si troverà in questi due tag:

 

All’interno dello switch, in base al tag passato in esame, prendo il contenuto dal parametro string della funzione foundCharacters e lo sommo alla proprietà omonima del currentPost.

didEndElement

Infine l’ultimo metodo da inserire è il didEndElement che si attiva non appena viene raggiunto un tag di chiusura. In questo metodo, quando il tag di chiusura </item> sei più che sicuro di aver preso il titolo e link dell’articolo. Quindi puoi aggiungere il currentPost nell’array degli articoli e puoi resettarlo per prepararlo a conservare i prossimi dati dell’item successivo:

Avviare il Parsing

Adesso è arrivato il momento di avviare tutto il parser per vedere se funziona o meno. A questo punto, dopo tutto questa pappardella teorica, speriamo di si :P

Torna nel ViewController.swift. Definisci una nuova proprietà chiamata parserController e assegna un nuovo oggetto ParserController passandogli un oggetto URL con il link al feed che vuoi leggere:

Nel metodo viewDidLoad, per avviare il parsing, devi invocare il metodo parse() che restituisce un bool che rappresenta il risultato della lettura del feed (true se corretta, false in caso d’errore).

Se questa proprietà è true puoi ricaricare la tabella per avvisarla di ricaricare le sue celle con i nuovi contenuti:

 

I metodi della tabella

Adesso puoi modificare i metodi della tabella per utilizzare l’array dei Post contenuto dentro il parserController per gestire il numero di righe della tabella e per visualizzare ogni post nella tabella:

Considerazioni

Vale ancora la pena utilizzare l’xml per la lettura dei contenuti di un sito web?

Ni.

Come hai potuto notare, la parte di lettura è alquanto complessa. Ormai XML comincia a diventare un linguaggio pesante per la semplicità dei linguaggi moderni ed alternativi. Basta pensare a JSON ed alla sua semplicità di lettura.

C’è anche da dire che si utilizza ancora XML perché molti siti web basati su wordpress non presentano ancora una API Rest che permette di interagire con i contenuti in formato JSON. Esistono dei plugin (anche supportati dalla community ufficiale) ma che non sono presenti di default come magari lo è il feed XML.

Ad ogni modo, tutte le applicazioni che sto sviluppando per diversi siti web, sto cercando di slacciarle sempre più dall’utilizzo del feed classico a favore dei più moderni json.

Ma, non preoccuparti, per molti anni ancora XML continuerà ad essere utilizzato. Quindi non hai perso tempo :D

Da qui i tutorial che ti consiglio sono:

In caso hai problemi con il tuo progetto, qui sotto puoi scaricare quello fatto da me:

Download

[sociallocker]

DropBox Download

[/sociallocker]

Buona Programmazione!

Changelog

  • 9/11/2016 – Aggiunto il changelog. Modifica della struttura dell’articolo. Fix di alcuni bug noti del progetto. Compatibilità con Xcode 8.1 ed il linguaggio Swift 3.0.

Start typing and press Enter to search

Guida all'interfaccia di Xcode. Come muovere i primi passi su Xcode.Creare la prima applicazione per OS X con Swift