In questa serie di tutorial in due parti, stai imparando a creare la tua prima app Ionic 2. Ora che hai configurato il tuo ambiente di sviluppo e imparato il flusso di lavoro di sviluppo in Ionic 2, è tempo di sporcarti le mani codificando l'app.
Se non lo hai ancora fatto, segui il primo post per ottenere l'impostazione dell'ambiente di sviluppo e per avviare il tuo progetto.
Questa seconda parte tratterà le cose che devi sapere quando si parla di app di codifica in Ionic 2. Imparerai come creare pagine per l'app, come ottenere input da parte dell'utente e come usare i plugin per accedere alle funzionalità native. Una volta terminato, eseguirai l'app su un dispositivo o emulatore. Ma prima di arrivare a quello, prendiamoci un momento per parlare di ciò che creerai.
Cosa starai creando
In questo tutorial, creerai un'applicazione per la condivisione di foto. Il flusso di base dovrebbe essere il seguente:
L'utente apre l'app e accede. Verranno reindirizzati alla pagina per selezionare un'immagine da condividere.
L'utente fa clic sul Scegli immagine pulsante. Il selettore di immagini appare e l'utente seleziona un'immagine. Quell'immagine sarà quindi visualizzata in anteprima.
L'utente inserisce una didascalia e fa clic su Condividi immagine pulsante per passare l'immagine all'app Instagram.
Questo tutorial ti mostrerà solo come eseguire l'app su un dispositivo Android, ma Cordova (il framework su cui Ionic gira) è multipiattaforma. Ionic 2 ha temi integrati per Android, iOS e Windows, quindi è facile creare anche una versione della tua app per quei dispositivi.
Ecco come apparirà l'app:
Impostazione del progetto
Se hai seguito il tutorial precedente, hai già impostato il tuo ambiente di sviluppo Ionic 2 e il tuo progetto è stato impalcato. Abbiamo utilizzato i seguenti comandi CLI di Ionic 2 per creare l'albero delle cartelle del progetto e prepararci per la distribuzione su Android:
Per il resto del tutorial, starai principalmente lavorando al src cartella, quindi supponi che il src la cartella è la radice ogni volta che vedi un percorso di file. (Se vuoi un aggiornamento sui percorsi creati dal modello di avvio ionico, dai un'occhiata al tutorial precedente).
Dentro il src directory sono quattro cartelle:
App: è qui che viene definito il codice esteso all'app. Se è necessario eseguire un codice specifico all'avvio dell'app o se si desidera aggiornare il CSS globale, questo è il posto dove andare.
risorse: è qui che vanno ad andare le risorse come le immagini utilizzate come contenuti per l'app.
pagine: è qui che va il codice per le singole pagine. Ogni pagina ha una sua cartella e all'interno di ciascuna cartella ci sono tre file che definiscono il modello (HTML), lo stile (CSS) e lo script (TypeScript) per la pagina.
temi: è qui che si va se si desidera modificare il tema Ionic 2 predefinito.
Modello di pagina iniziale
Per impostazione predefinita, il modello di avvio vuoto ionico viene già fornito con una home page. Quindi tutto ciò che devi fare è modificarlo per mostrare il contenuto che desideri. Apri il pagine / home / home.html file e cancellare i suoi contenuti correnti. Aggiungi quanto segue nella parte superiore della pagina:
Accesso
Il codice sopra è lo standard per l'intestazione dell'app. Il componente funge da barra di navigazione. Mostra automaticamente un pulsante indietro ogni volta che ti allontani dalla pagina predefinita. imposta il titolo della barra di navigazione.
Il prossimo è il contenuto della pagina effettiva. Puoi definirlo all'interno del componente. Il riempimento predefinito può essere applicato specificando il imbottitura opzione. All'interno di quel contenitore, crea una nuova lista che contiene i campi di inserimento per l'immissione del nome utente e della password. La creazione di un elenco per contenere i campi di modifica è una pratica standard in Ionic: consente di impilare ordinatamente ciascun campo uno sopra l'altro. Sotto l'elenco c'è il pulsante per l'accesso.
Nome utenteParola d'ordine
Prendiamo un momento per guardare il codice per l'immissione di testo e fare clic su un pulsante. In Ionic, puoi definire un campo di inserimento del testo usando il componente. Per associare il campo di testo a una proprietà di classe definita nello script della pagina, utilizzare [(NgModel)]. Quindi il valore assegnato ad esso è il nome della proprietà della classe.
Per impostare il collegamento dati bidirezionale, è possibile impostare [valore] con lo stesso nome di proprietà usato per [(NgModel)]. Ciò consente di aggiornare il valore del campo di testo modificando il valore del modello dallo script di pagina. Più avanti vedrai come definire una proprietà di classe all'interno dello script di pagina.
Per definire i pulsanti, utilizzare lo standard pulsante elemento in HTML. Se ti stai chiedendo perché non lo è , è a causa di motivi di accessibilità. I pulsanti sono una componente fondamentale dell'interfaccia, quindi il team di Ionic ha deciso di restare con i pulsanti HTML standard per renderli accessibili. Il ionico-button la direttiva viene invece aggiunta per fornire funzionalità aggiuntive.
Per aggiungere un gestore di clic, si utilizza il (clic) direttiva, con un valore che specifica la funzione (definita nello script della pagina) da eseguire quando si verifica l'evento click.
Script Home Page
Apri il Pagine / home / home.ts file, cancellare tutto il suo contenuto e aggiungere quanto segue:
importare Component da '@ angular / core'; import NavController, AlertController da 'ionico-angolare'; // import PickerPage da '... / ... / pages / picker / picker'; @Component (templateUrl: 'home.html') export class HomePage username: string; password: string; readonly APP_USERNAME: string = 'me'; readonly APP_PASSWORD: string = 'secret'; costruttore (public navCtrl: NavController, public alertCtrl: AlertController) login () let alert = this.alertCtrl.create (title: 'Login fallito', sottotitolo: 'Il nome utente o la password che hai inserito non sono corretti.', pulsanti : ['OK'] ); if (this.username == this.APP_USERNAME && this.password == this.APP_PASSWORD) this.navCtrl.push (PickerPage); else alert.present (); this.username = "; this.password =";
Scattando il codice qui sopra, per prima cosa importiamo la classe del componente Angolare che ha già tutte le direttive ioniche.
importare Component da '@ angular / core';
Successivamente, importiamo i controller per la navigazione e gli avvisi da ionici angolare pacchetto. È qui che sono inclusi tutti i controller Ionic.
import NavController, AlertController da 'ionico-angolare';
Dopodiché, importeremo il PickerPage. Lo creerai in seguito, quindi lascia il commento per ora. Ricorda di rimuovere il commento una volta che sei pronto per il caricamento.
Dopo le importazioni, utilizzare il @Componente decoratore per specificare il modello HTML che deve essere utilizzato dallo script:
@Component (templateUrl: 'home.html')
Ora possiamo definire la classe per il nostro script di home page. Vogliamo esportare questa classe in modo che possa essere importata da altri file nell'app.
export class HomePage ...
Fare il NavController e AlertController disponibile in tutta la classe definendoli come parametri nel costruttore. Questo ti permette di usare this.navCtrl, per esempio, quando vuoi usare il NavController per navigare in un'altra pagina.
costruttore (public navCtrl: NavController, public alertCtrl: AlertController)
Ora siamo pronti a definire le proprietà del nostro controller che possono essere referenziate dal modello. Queste proprietà conterranno il valore corrente del campo di testo per nome utente e password:
username: string; password: string;
Per semplificare le cose, utilizzeremo i valori codificati per nome utente e password. Ma per le app del mondo reale, di solito si effettua una richiesta a un server per autenticare l'utente.
readonly APP_USERNAME: string = 'me'; // le costanti in TypeScript sono definite specificando la proprietà di sola lettura a sola lettura APP_PASSWORD: string = 'secret';
Dentro il accesso() funzione, creare un avviso per quando l'utente immette un nome utente o una password errati:
let alert = this.alertCtrl.create (title: 'Login fallito', sottotitolo: 'Il nome utente o la password che hai inserito non sono corretti.', pulsanti: ['OK']);
Se le credenziali non sono corrette, mostra l'avviso:
alert.present ();
Se il nome utente e la password inseriti dall'utente corrispondono ai valori codificati, utilizzare il comando NavController per spingere la pagina di selezione nella pila di navigazione. Qualunque pagina si spinga nella pila di navigazione diventerà la pagina corrente, mentre scoccando una pagina effettivamente si naviga alla pagina precedente. Ecco come funziona la navigazione in Ionic 2.
this.navCtrl.push (PickerPage);
Pagina di selezione
Successivamente, è necessario creare la pagina di selezione. Come già sai, lo standard è creare una cartella separata per ogni pagina, e ogni cartella avrà tre file al suo interno. Fortunatamente, la CLI di Ionic ha anche un comando che ci consente di creare nuove pagine:
pagina di selezione di pagine ioniche
Questo usa il creare comando, che creerà la cartella della pagina con quei tre file all'interno. Meglio di tutti, ogni file viene già fornito con un codice boilerplate da cui iniziare.
Modello di pagina di prelievo
Una volta fatto, apri il pagine / selettore / picker.html file e sostituire il codice boilerplate con quanto segue:
Scegli immagine
Didascalia
Nessuno di questo codice è davvero sconosciuto tranne per il nascosto direttiva e l'uso di un componente.
Il nascosto direttiva consente di nascondere un elemento in base a un valore specifico definito nello script della pagina. Quindi se has_picked_image è vero, solo allora lo farà div essere visibile.
...
Il componente è usato per creare carte. Le carte sono un ottimo modo per visualizzare le immagini all'interno delle app.
Stile della pagina di selezione
Apri il pagine / selettore / picker.scss file e aggiungere il seguente:
.form-container padding-top: 20px;
Script della pagina di selezione
Apri il pagine / selettore / picker.ts file e aggiungere il seguente:
Lo romperò un po '. Per prima cosa importiamo i plug-in installati in precedenza. Si noti che i plugin sono tutti installati sotto lo stesso pacchetto (ionici nativo). Questo è veramente bello perché invece di dover importare ogni singolo plugin nella sua stessa linea, puoi farlo in una sola riga.
importare ImagePicker, Instagram da "ionic-native";
Successivamente dichiariamo le proprietà della classe:
selected_image: string; // l'immagine scelta dall'utente has_picked_image: boolean = false; // per determinare facilmente se al momento ci sia o meno un'immagine selezionata dall'utente o non caption: string; // la didascalia dell'immagine DEVEULT_IMAGE: string = 'http://placehold.it/500x500'; // l'immagine predefinita
Quando il Scegli immagine viene cliccato il pulsante, definire le opzioni per il selettore di immagini. Queste opzioni sono piuttosto auto-esplicative, ma ho aggiunto alcuni commenti per chiarire cosa fanno ciascuno.
let options = maximumImagesCount: 1, // il numero massimo di immagini che l'utente può selezionare width: 500, // la larghezza massima in cui si troverà l'immagine una volta che viene selezionata l'altezza: 500, // l'altezza massima in quale sarà l'immagine una volta che viene selezionata la qualità: 50, // la qualità della foto. Il valore può essere fino a 100 per output di qualità al 100%. Tipo: 1 // in che formato verranno visualizzati i risultati una volta che l'utente ha selezionato un'immagine. // 0 è per URI di file mentre 1 è per URI di dati. ;
Specificare il larghezza e il altezza non significa necessariamente che l'immagine risultante utilizzerebbe quegli stessi valori di larghezza e altezza. Quello che significa è che Ionic userà quelle dimensioni come larghezza o altezza massima in modo tale che le proporzioni siano ancora mantenute.
Utilizziamo l'URI di dati come tipo di output perché il plug-in di Instagram accetta solo URI di dati. Ciò significa che devi anche regolare la larghezza, l'altezza e la qualità al minimo perché gli URI dei dati possono essere molto lunghi se la qualità è elevata, l'intera immagine è codificata in una stringa URI! Ciò potrebbe causare il blocco dell'applicazione, quindi è sempre buona norma attenersi a immagini di qualità inferiore e di dimensioni inferiori quando si lavora con gli URI di dati.
Quindi, utilizzare il plug-in Image Picker per attivare la schermata di selezione delle immagini. Poiché ci aspettiamo solo una singola immagine, possiamo semplicemente accedere al primo elemento della serie di risultati. Dobbiamo anche anteporre il prefisso per gli URI di dati.
Finalmente, quando il Condividi immagine viene cliccato il pulsante, il Condividere il metodo fornito dal plugin Instagram attiverà la schermata di condivisione nell'app Instagram da avviare. Questo avrà già l'immagine pre-riempita.
Tuttavia, la didascalia non verrà copiata. L'app di Instagram ha disabilitato le didascalie pre-riempite e quindi il campo didascalia sarà vuoto una volta aperta l'app di Instagram. Come soluzione alternativa, il plugin Instagram copia invece la didascalia negli appunti. Ciò significa che l'utente può semplicemente incollarlo nel campo di testo della didascalia nell'app Instagram.
Il passo finale è aprire il app / app.module.ts file. Questo è il modulo radice dell'app in cui definisci tutte le pagine e i provider (come il gestore di errori Ionic predefinito) che utilizzerai in tutta l'app.
Assicurati che tutte le pagine che hai creato siano definite, altrimenti riceverai un errore quando navighi su una pagina che non è stata definita. Di default, il HomePage è già definito qui, quindi devi solo aggiungere il PickerPage. Basta importarlo nella parte superiore del file e quindi aggiungerlo sotto il dichiarazioni e entryComponents array. Nota che MyApp non è una pagina; è un componente che funge da shell vuota per il caricamento delle pagine.
import NgModule, ErrorHandler da '@ angular / core'; import IonicApp, IonicModule, IonicErrorHandler da 'ionico-angolare'; importare MyApp da './app.component'; import HomePage da '... / pages / home / home'; import PickerPage da '... / pages / picker / picker'; @NgModule (dichiarazioni: [MyApp, HomePage, PickerPage], importa: [IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, PickerPage], provider: [fornire: ErrorHandler, useClass : IonicErrorHandler]) Esporta classe AppModule
Se apri il app / app.components.ts file, vedrai quanto segue:
importare Component da '@ angular / core'; import Platform da 'ionico-angolare'; import StatusBar, Splashscreen da 'ionic-native'; import HomePage da '... / pages / home / home'; @Component (templateUrl: 'app.html') classe di esportazione MyApp rootPage = HomePage; constructor (platform: Platform) platform.ready (). then (() => // Ok, quindi la piattaforma è pronta ei nostri plugin sono disponibili. // Qui puoi fare qualsiasi cosa nativa di livello superiore di cui potresti aver bisogno. StatusBar.styleDefault (); Splashscreen.hide (););
Qui è dove puoi definire la pagina radice, la pagina che l'utente vedrà dopo aver aperto l'app. In questo caso, il HomePage è la pagina principale. Questo è anche perfetto per l'esecuzione del codice di inizializzazione, dal momento che il codice qui viene eseguito solo una volta quando l'utente avvia l'app. Quando si inizializza qualcosa (ad es. Chiedendo il permesso per abilitare il Bluetooth), si vorrà sempre attendere il platform.ready () l'evento è licenziato. Solo una volta che l'evento è stato attivato puoi essere sicuro che le funzioni native siano pronte per essere chiamate.
Esecuzione dell'applicazione
Ora sei pronto per eseguire l'app su un dispositivo mobile o emulatore. Puoi farlo eseguendo il seguente comando:
Android a corsa ionica
Assicurati di avere un dispositivo collegato al tuo computer o di avere un'istanza in esecuzione di un emulatore quando esegui il comando precedente. Se continua a non funzionare, controlla di aver abilitato il debug USB nel tuo dispositivo ed esegui dispositivi adb. Ciò attiverà il tuo computer per connettersi al tuo dispositivo. Accetta semplicemente la richiesta sul tuo dispositivo una volta visualizzata la richiesta di autenticazione.
Se si desidera avere una copia del file APK in modo da poterlo condividere con un amico, è possibile generarne uno eseguendo invece quanto segue:
Android di costruzione ionico
Questo creerà un Android-debug.apk file nel piattaforme / android / costruire / uscite / apk cartella.
Conclusione
Questo è tutto! In questo tutorial hai creato la tua prima app Ionic 2. È un'app semplice e potresti persino averlo trovato facile. Ma hai imparato come creare un ambiente per lo sviluppo di app Ionic 2 e hai appreso alcuni concetti di base che puoi applicare quando sviluppi app in futuro. Questi includono il recupero del valore corrente da un campo di testo, la risposta a eventi di clic, il collegamento di immagini e l'utilizzo di plug-in per accedere alle funzionalità native. Quindi datti una pacca sulla spalla! Hai fatto un buon lavoro arrivando così lontano.
Nel frattempo, dai un'occhiata ad alcuni dei nostri tutorial su Ionic 2!
Se vuoi un'introduzione approfondita e pratica al framework Ionic 2, prova il nostro corso Getting Started With Ionic 2.
In questo corso, Reggie Dawson ti insegnerà tutto sul framework Ionic e ti mostrerà come costruire un'applicazione mobile da zero. Lungo la strada, imparerai a conoscere la libreria di componenti ionici, a programmare JavaScript con tipizzazione statica con TypeScript e a integrare un'app di Ionic 2 con un'API rich media.
Share
Accentsconagua
