Share
Cosa starai creandoInterfacciare con un'API è una grande parte dello sviluppo e della progettazione di questi giorni. Le API aiutano a fornire un'esperienza ricca e dinamica nel browser. Piuttosto che il markup statico e le immagini, puoi spingere e tirare dinamicamente i dati da un server e renderli nel browser in base all'esperienza che desideri fornire all'utente.
In questo tutorial, costruiremo un esempio di base di un'app basata su API. Utilizzando l'API di iTunes, prenderemo l'URL di qualsiasi app iOS o Mac e visualizzeremo la sua icona a piena risoluzione direttamente nel browser. Questa app specifica potrebbe non essere immediatamente utile per te, ma ciò che apprendi lungo il percorso può essere applicato a tutti i tipi di scenari.
Le app iOS e OSX più propriamente progettate forniscono risorse ad alta risoluzione per la grafica delle icone. Certo, quelle icone potrebbero essere solo 150 × 150 pixel nel tuo trampolino per iPhone, o il tuo dock OSX, ma per tenere conto degli schermi retina e dei diversi requisiti di dimensionamento in tutto il sistema operativo, Apple richiede che i produttori di app forniscano un'icona ad alta risoluzione risorse, fino a 1024 × 1024 pixel! Ad esempio, sulla sinistra vedrai l'icona Tweetbot per Mac come verrebbe visualizzata approssimativamente nel dock OSX. Mentre a destra è l'immagine a piena risoluzione:
Apple rende accessibili queste risorse tramite l'API di iTunes. Quindi, se vuoi avere l'artwork ad alta risoluzione e dimensioni complete, puoi farlo! Tutto ciò di cui hai bisogno è l'identificativo dell'app, quindi facendo una richiesta all'API ti verranno fornite alcune informazioni sull'app, tra cui un link alla grafica ad alta risoluzione che il negozio ha a disposizione.
Questo tutorial non è tanto sull'apprendimento dell'API di iTunes quanto sull'apprendimento di alcuni concetti di base alla base della creazione di un'app Web dinamica che esegue il rendering dei contenuti restituiti da un'API. Una volta apprese le nozioni di base sull'interfaccia con un'API, puoi continuare a creare i tuoi siti web personalizzati utilizzando API di terze parti, come Dribbble o Twitter.
Come panoramica rapida, ecco i concetti che tratteremo in questo tutorial al fine di ottenere il prodotto finale:
Per capire cosa stiamo per costruire, iniziamo descrivendo in dettaglio l'esperienza di base della nostra piccola app. Una volta completato, possiamo ottenere un po 'più specifico elencando le sue parti componenti.
Per avviare il wireframing delle parti componenti dell'app, abbiamo bisogno di un elenco delle funzionalità e dell'esperienza di base dell'app:
Ora che abbiamo una comprensione di base di ciò che vogliamo che l'app realizzi, possiamo iniziare a wireframing delle sue diverse parti. Tieni presente che vorremmo che fosse un'app web reattiva, quindi faremo in modo di progettare le nostre parti in modo tale da consentire loro di ridimensionare le dimensioni in modo reattivo.
Intestazione: Nella parte superiore della pagina, avremo un testo stilizzato che rappresenta il nome dell'app, insieme a una breve descrizione di ciò che fa. "Gimmie Dat iCon" è il nome sciocco che ho creato per la nostra app.
Ingresso: È necessario fornire un modo per l'utente di inserire un collegamento all'app di cui desiderano l'icona grafica. Per questo aggiungeremo un campo di input semplice e il pulsante di invio proprio sotto l'intestazione.
Produzione: Una volta che un link valido viene recuperato dall'utente, avremo bisogno di uno spazio per visualizzare la grafica dell'icona recuperata da iTunes. Quindi creeremo un posto per quello giusto sotto il campo di input.
Questo è tutto. Ora disponiamo di tutti i componenti di base di cui avremo bisogno per recuperare un collegamento dall'utente e visualizzare le informazioni provenienti dall'API di iTunes.
C'è un altro fattore importante che dobbiamo considerare nella nostra fase di wireframe: i diversi stati delle nostre parti componenti. La nostra piccola app si troverà in stati diversi in momenti diversi. Ad esempio, sappiamo che è necessario mostrare la grafica dell'icona restituita dall'API di iTunes, ne abbiamo già tenuto conto. Ma cosa succede se l'API restituisce un errore, allora cosa facciamo? O cosa succede se l'utente inserisce un link non valido? Dobbiamo tenere conto dei diversi stati in cui può trovarsi la nostra app, a seconda del suo stato di esecuzione. Dato che la nostra app è piuttosto semplice, abbiamo solo questi pochi casi d'uso che dobbiamo coprire:
Stato zero: Cosa succede quando l'utente accede per la prima volta alla nostra pagina Web? Non ci sono illustrazioni di icone da mostrare perché non hanno ancora inserito un URL. Quindi avremo bisogno di un tipo di "zero state" amichevole che dice "hey, non hai ancora inserito un link. Vai avanti e inserisci uno poi mostreremo l'icona qui. "
Errori: È molto probabile che si verifichino alcuni errori durante l'esecuzione della nostra app. Ad esempio, l'utente può inserire un URL non valido. Oppure, l'API di iTunes potrebbe restituire dati errati o nessun dato. Dovremmo tenere conto di questi casi nella progettazione della nostra app in modo che l'utente non lasci dubbi su cosa è andato storto. Quindi progetteremo un modo per mostrare un messaggio di errore (il cui testo cambierà, a seconda dell'errore).
Caricamento in corso: Poiché stiamo lavorando con un'API, non tutto avverrà istantaneamente. Il computer dell'utente deve effettuare una richiesta a un server di terze parti, che deve calcolare la richiesta e inviare le informazioni. Questo potrebbe richiedere alcuni secondi per verificarsi. Quindi ci assicureremo che il design della nostra app fornisca un modo di comunicare che il contenuto sta caricando. In questo modo l'utente non si sente frustrato e confuso da una schermata statica in cui non accade nulla (anche se il contenuto viene caricato in background).
Questo è tutto! Abbiamo coperto tutte le nostre diverse parti componenti e i loro vari stati. Nel prossimo tutorial passeremo alla progettazione visuale dell'applicazione con wireframe più dettagliati.
Accentsconagua