Share
Nell'ultimo articolo, ti ho presentato NativeScript. Lì hai imparato le basi di NativeScript e come si differenzia da altri framework di sviluppo mobile. Questa volta ti sporcherai le mani creando la tua prima app NativeScript. Ti guiderò attraverso l'intero processo di creazione di un'app con NativeScript, dall'impostazione del tuo ambiente di sviluppo all'applicazione in esecuzione sul tuo dispositivo. Ecco uno schema di ciò di cui parlerò:
Soprattutto eseguiremo l'app sulla piattaforma Android. Ma puoi continuare a seguirlo se desideri distribuirlo su iOS poiché il codice sarà praticamente lo stesso. Le uniche differenze sono nel processo di impostazione di NativeScript e dei comandi che vengono eseguiti durante l'esecuzione dell'app.
Il codice sorgente completo per questa app è disponibile dal tutorial repo GitHub.
Per configurare NativeScript, devi prima installare Node.js. Una volta installato Node.js, è possibile installare lo strumento da riga di comando NativeScript eseguendo npm install -g nativescript sul tuo terminale.
Il passaggio finale consiste nell'installare lo strumento di sviluppo per ciascuna piattaforma a cui si desidera eseguire la distribuzione. Per Android, questo è l'SDK di Android. Per iOS, è XCode. È possibile seguire la guida di installazione sul sito Web NativeScript per istruzioni più dettagliate su come impostare il software necessario per il proprio ambiente di sviluppo.
Dopo aver impostato il tuo ambiente, esegui medico per assicurarti che il tuo ambiente sia pronto per lo sviluppo di NativeScript. Se sei su Linux o Windows, vedrai qualcosa di simile se il tuo ambiente è pronto:
NOTA: puoi sviluppare per iOS solo su sistemi Mac OS X. Per poter lavorare con dispositivi e progetti iOS, è necessario Mac OS X Mavericks o successivo. I tuoi componenti sono aggiornati. Nessun problema rilevato.
C'è una nota che puoi sviluppare solo per iOS solo su sistemi Mac OS X. Ciò significa che se sei su un PC, potrai essere implementato solo su dispositivi Android. Tuttavia, se sei su Mac, sarai in grado di implementare su entrambe le piattaforme iOS e Android.
Se durante l'installazione si verificano dei problemi, è possibile ottenere un invito ad aderire alla community Slative di NativeScript e, una volta effettuato l'accesso, accedere al canale di avvio e porre le domande là dentro.
L'app che stiamo per costruire è un'app per appunti. Permetterà all'utente di creare note, ciascuna con un allegato opzionale che verrà catturato con la fotocamera del dispositivo. Le note vengono mantenute utilizzando le impostazioni dell'applicazione NativeScript e possono essere eliminate individualmente.
Ecco come apparirà l'app:
Inizia eseguendo il seguente comando per creare un nuovo progetto NativeScript:
tns crea noter --app "com.yourname.noter"
noter è il nome del progetto, e com.yourname.noter è l'ID app univoco. Questo verrà utilizzato in seguito per identificare la tua app dopo averla inviata al Play o all'App Store. Di default, il creare comando creerà le seguenti cartelle e file per te:
In genere devi solo toccare i file all'interno del App directory. Ma ci sono anche casi in cui potrebbe essere necessario modificare i file all'interno di piattaforme /androide directory. Uno di questi casi è quando un plug-in che stai tentando di utilizzare non collega automaticamente le dipendenze e le risorse di cui ha bisogno.
Quindi, vai a App directory ed elimina tutti i file tranne il App_Resources cartella. Quindi creare i seguenti file:
Questi sono i file che verranno utilizzati dal runtime di NativeScript. Proprio come quando si costruiscono le pagine web, .css i file sono usati per lo styling e .js file per funzionalità. Ma per il markup dell'app, usiamo XML anziché HTML. Generalmente si crea una cartella separata per ogni schermata dell'app (ad es. Login, registrazione o dashboard) e si dispone di file XML, CSS e JavaScript all'interno di ciascuna cartella. Ma dal momento che questa app ha solo una schermata, abbiamo creato tutti i file all'interno della directory principale.
Se sono necessarie ulteriori informazioni sulla struttura di directory NativeScript, consultare il Capitolo 2 della Guida introduttiva di NativeScript.
Apri il app.js file e aggiungi il seguente codice:
Accentsconagua
var application = require ("applicazione"); application.start (moduleName: "notes-page");Questo è il punto di ingresso per un'applicazione NativeScript. Usa il modulo di applicazione e il suo inizio metodo per specificare il modulo utilizzato per la pagina iniziale dell'app. In questo caso, abbiamo specificato note-page, il che significa che il modulo è Notes-page.js, il markup è note-page.xml, e lo stile per la pagina è note-page.css. Questa è una convenzione utilizzata in NativeScript, che tutti i file per una pagina specifica devono avere lo stesso nome.
Apri il note-page.xml file e aggiungi il seguente codice:
Quando crei pagine di app in NativeScript, devi sempre iniziare con xmlns attributo specifica l'URL dello schema utilizzato per il file XML.
Se si visita l'URL dello schema specificato, è possibile visualizzare la definizione di tutti i tag XML che è possibile utilizzare in NativeScript. Il caricato attributo specifica la funzione da eseguire una volta caricata la pagina. Daremo un'occhiata a questa definizione di funzione più avanti nel Notes-page.js file.
...
Per impostazione predefinita, l'intestazione dell'app contiene solo il titolo dell'app. Se si desidera aggiungere altri componenti dell'interfaccia utente, è necessario ridefinirlo utilizzando titolo attributo al titolo della pagina che desideri.
Di seguito abbiamo usato la sintassi dei baffi per produrre il valore di APP_TITLE definito nel Notes-page.js file. In questo modo vengono visualizzati i valori associati alla pagina.
...
Per definire i pulsanti, per prima cosa rubinetto attributo specifica una funzione da eseguire quando si preme il pulsante, mentre os.position e android.position sono le posizioni del pulsante in iOS e Android.
Per specificare il testo del pulsante, è possibile utilizzare il testo attributo. Tuttavia, NativeScript al momento non consente di modificare il colore del testo del pulsante tramite CSS. Ecco perché invece l'abbiamo usato
Il prossimo è il contenuto della pagina effettiva. È possibile disporre i diversi elementi utilizzando uno o più contenitori di layout. Di seguito abbiamo utilizzato due dei layout disponibili: stackLayout e Layout della griglia.
stackLayout ti permette di impilare tutti gli elementi al suo interno. Per impostazione predefinita, l'orientamento di questo layout è verticale, in modo che ogni componente dell'interfaccia utente sia impilato sotto l'ultimo. Pensa ai mattoncini lego con un flusso discendente.
D'altro canto, Layout della griglia ti consente di disporre gli elementi in una struttura di tabella. Se hai mai usato Bootstrap o altri framework griglia CSS, questo dovrebbe sembrarti naturale. Il Layout della griglia ti consente di definire righe e colonne tra cui è possibile posizionare ciascun componente dell'interfaccia utente. Daremo un'occhiata a come verrà implementato in seguito. Per ora, passiamo al codice.
Per prima cosa, definiamo il modulo per la creazione di una nuova nota. Proprio come in HTML, puoi definire attributi come id e CssClass (equivalente a HTML classe attributo). Il id l'attributo è collegato a un elemento se si desidera manipolarlo dal codice. Nel nostro caso, vogliamo animare il modulo in seguito. CssClass è usato per specificare la classe CSS che userete per modellare l'elemento.
All'interno del modulo è presente un campo di testo per l'immissione del titolo della nota, un pulsante per il collegamento di un'immagine, l'immagine selezionata e un pulsante per il salvataggio della nota. L'elemento immagine è visibile solo se il attachment_img ha un valore di verità. Questo sarà il caso se un'immagine è stata precedentemente allegata.
Il prossimo è l'elenco che mostra le note che sono state già aggiunte dall'utente. Gli elenchi vengono creati utilizzando il Visualizzazione elenco componente. Questo accetta elementi come attributo richiesto. Il valore può essere un array semplice o un array osservabile.
Se non è necessario eseguire alcuna forma di aggiornamento (ad esempio eliminando o aggiornando un campo) su ciascun elemento dell'array, verrà eseguito un semplice array JavaScript. Altrimenti, utilizzare un array osservabile che consente di eseguire aggiornamenti all'array e farlo riflettere automaticamente sull'interfaccia utente. Daremo un'occhiata a come un array osservabile verrà definito in seguito.
Si noti inoltre che a Visualizzazione elenco può avere un itemTap attributo, che consente di specificare la funzione da eseguire quando un elemento nel file Visualizzazione elenco è TAPpato. Ma in questo caso non l'abbiamo davvero aggiunto dato che non è necessario eseguire alcuna azione quando un oggetto viene toccato.
...
Gli articoli nel Visualizzazione elenco può essere definito usando colonne l'attributo è usato per specificare quante colonne vuoi in ogni riga.
In questo caso, *, * significa che ci sono due colonne, ciascuna delle quali occupa una quantità uguale di spazio disponibile nella riga corrente. Quindi se l'intera riga ha una larghezza totale di 300 pixel, ciascuna colonna sarà larga 150 pixel. Quindi fondamentalmente ciascuno * rappresenta una colonna e si utilizza una virgola per separare ciascuna di esse.
Il righe l'attributo funziona in modo simile, ma controlla la quantità di spazio utilizzata da una singola riga. auto significa che consumerà solo la quantità di spazio necessaria per i bambini di ogni riga.
Dopo aver definito il colonne e righe nel Layout della griglia, devi ancora specificare quale dei suoi figli appartiene a quale riga e colonna. La prima riga contiene il titolo dell'articolo (prima colonna) e il pulsante cancella (seconda colonna). La seconda riga contiene l'immagine che è stata allegata all'elemento (1a colonna). La riga e le colonne vengono specificate utilizzando il riga e col attributo per ogni elemento.
Notare anche l'uso di allineamento orizzontale e allineamento verticale. Puoi pensare a questo come all'equivalente NativeScript di HTML text-align attributo. Ma invece del testo, stiamo allineando i componenti dell'interfaccia utente. allineamento orizzontale può avere un valore di destra, sinistra, centro, o allungare, mentre allineamento verticale può avere un valore di superiore, parte inferiore, centro, o allungare. Molti di questi sono auto-esplicativi, tranne che per allungare, che si estende per occupare lo spazio orizzontale o verticale disponibile.
In questo caso, allineamento orizzontale e allineamento verticale sono usati per centrare l'immagine sia orizzontalmente che verticalmente all'interno della sua colonna. E allineamento orizzontale viene utilizzato sul pulsante Elimina per allinearlo alla parte più a destra della seconda colonna.
Non abbiamo specificato un itemTap attributo per il Visualizzazione elenco. Invece, vogliamo allegare un'azione di cancellazione che verrà eseguita ogni volta che viene toccato un pulsante di eliminazione all'interno di una voce di elenco. Ogni oggetto ha un indice attributo, che stiamo passando come attributo personalizzato per il pulsante Elimina. Questa è la chiave univoca utilizzata per identificare ciascun elemento in modo tale che possiamo facilmente farvi riferimento quando necessario.
Notare anche il caricato attributo. Proprio come caricato attributo, i pulsanti possono anche averne uno. Vedrai in seguito come viene usato.
Ora siamo pronti a guardare il codice JavaScript che fa funzionare tutto. In questa sezione, verrà codificato il codice Notes-page.js file.
Per prima cosa importiamo il Dati / osservabili e dati / osservabili-array moduli. Questi sono moduli integrati in NativeScript che ci permettono di creare oggetti e matrici osservabili. Le osservabili ci consentono di aggiornare automaticamente l'interfaccia utente ogni volta che questi oggetti e array vengono aggiornati.
Nella nostra app, pageArray è usato per memorizzare la matrice di note, e pageData è usato per legarlo alla pagina. pageData funge anche da contenitore generale per tutti i dati che vogliamo mostrare nell'interfaccia utente.
var Observable = require ("data / osservable"); var ObservableArray = require ("data / observable-array"); var pageArray = new ObservableArray.ObservableArray (); var pageData = new Observable.Observable (notes: pageArray);Successivamente, importa tutti gli altri moduli che utilizzeremo in questa pagina:
telecamera: per lavorare con la fotocamera del dispositivo.vista: per riferirsi a elementi specifici nella pagina. Pensalo come l'equivalente di document.getElementById in NativeScript.ui / enumerazioni: un dizionario globale di valori costanti per tutto ciò che riguarda le interfacce utente.ui / animazione: per animare elementi.impostazioni dell'applicazione: per dati locali persistenti.file-system: per lavorare con il filesystem.var cameraModule = require ("camera"); var view = require ("ui / core / view"); var uiEnums = require ("ui / enums"); var animation = require ("ui / animation"); var appSettings = require ("impostazioni dell'applicazione"); var fs = require ("file-system");Quindi, inizializzare i valori per le variabili che verranno utilizzate nell'intero file. pagina è usato per memorizzare un riferimento alla pagina corrente, notesArr è la semplice copia dell'array delle note correnti nella pagina, e CURRENT_INDEX è il valore iniziale dell'indice utilizzato come ID univoco per ciascuna nota.
pagina var; var notesArr = []; var current_index = -1;
pageLoaded () FunzioneLe funzioni diventano disponibili nel contesto della pagina mediante l'uso esportazioni. In precedenza nel note-page.xml file, hai visto che il pageLoaded () la funzione viene eseguita quando la pagina viene caricata.
exports.pageLoaded = function (args) ...
Dentro il pageLoaded () funzione, inizieremo ottenendo il riferimento alla pagina. Quindi mostriamo il modulo per la creazione di una nuova nota e recuperiamo i valori attualmente memorizzati del nuovo titolo della nota e le note dalle impostazioni dell'applicazione.
page = args.object; pageData.set ('showForm', true); var new_note_title = appSettings.getString ('new_note_title'); var notes = appSettings.getString ('note');Avanti, ancora all'interno del pageLoaded () funzione, controlla se ci sono note che sono memorizzate localmente. In caso contrario, creiamo una serie di note. Questo array servirà come contenuto predefinito per i nuovi utenti dell'app. Tuttavia, se ci sono già alcune note memorizzate localmente, le convertiamo in un array e quindi li trasferiamo nell'array osservabile.
Nota che prima di spingere gli oggetti nell'array osservabile, per prima cosa controlliamo se è vuoto. Dobbiamo farlo perché usando il modulo della videocamera esegue il caricato evento sulla pagina ancora una volta dopo aver selezionato un'immagine. Ciò significa che, se non stiamo attenti, finiremo per spingere i duplicati nell'array ogni volta che l'utente utilizza la fotocamera.
if (! notes) notes = [indice: 0, titolo: '100 push ups', indice: 1, titolo: '100 sit up', indice: 2, titolo: '100 squat', indice: 3, titolo: '10km in esecuzione']; else notes = JSON.parse (note); notesArr = note; if (! pageArray.length) for (var x = 0; x < notes.length; x++) current_index += 1; pageArray.push(notes[x]);
Ora che abbiamo impostato i dati delle note, possiamo aggiornare il titolo della pagina impostando il suo Titolo dell'oggetto attributo al valore che abbiamo ottenuto dalle impostazioni dell'applicazione in precedenza. Quindi legare pageData alla pagina in modo che l'interfaccia utente venga automaticamente aggiornata ogni volta che viene apportata una modifica agli elementi che abbiamo impostato.
pageData.set ('item_title', new_note_title); args.object.bindingContext = pageData;Animare il modulo per creare nuove note. Lo facciamo usando il getViewById funzione nel vista e passando nel contesto (la pagina corrente) come primo argomento e il id attributo assegnato all'elemento che si desidera manipolare.
Quindi, chiama il animare funzione. Questo accetta un oggetto contenente le impostazioni di animazione. Qui vogliamo che il modulo scenda 160 pixel dalla sua posizione originale per un periodo di 800 millisecondi.
view.getViewById (page, 'form'). animate (translate: x: 0, y: 160, durata: 800,);
newNote () FunzioneIl newNote () la funzione viene eseguita quando l'utente tocca il Nuovo oggetto elemento di azione sull'intestazione. Questo nasconde e mostra il nuovo oggetto Visualizzazione elenco e fa scorrere il modulo verso l'alto o verso il basso in base al valore corrente di ShowForm.
Se ShowForm è vero, il che significa che è attualmente mostrato, cambiamo l'opacità del Visualizzazione elenco a 1 nel corso di 400 millisecondi, quindi far scorrere il modulo verso l'alto per nasconderlo. Altrimenti, nascondiamo il Visualizzazione elenco e fai scorrere il modulo verso il basso.
exports.newNote = function () var showForm = pageData.get ('showForm'); var top_position = (showForm)? -160: 160; var list_visibility = (showForm)? 1: 0; view.getViewById (page, 'list'). animate (opacity: list_visibility, durata: 400); view.getViewById (page, 'form'). animate (translate: x: 0, y: top_position, duration: 800,); pageData.set ('showForm',! showForm); btnLoaded () FunzioneNel note-page.xml file, abbiamo a caricato attributo nel pulsante per l'eliminazione di una nota. Questa è la funzione che viene eseguita quando si verifica quell'evento.
Di default, la funzione assegnata a itemTap attributo nel Visualizzazione elenco non verrà eseguito quando un pulsante è definito all'interno di a Visualizzazione elenco articolo. Questo perché NativeScript presuppone che le azioni da eseguire per ciascun elemento dell'elenco possano essere attivate solo da quei pulsanti.
Il seguente codice rappresenta una soluzione alternativa per questo comportamento predefinito. In pratica, questo rimuove l'attenzione sul pulsante Elimina in modo che tu possa ancora eseguire una funzione quando un utente tocca a Visualizzazione elenco articolo. In questo caso, non abbiamo davvero bisogno di questo codice poiché non abbiamo assegnato alcuna funzionalità ai tocchi delle voci, ma è un buon strumento da avere quando si lavora con gli elenchi.
exports.btnLoaded = function (args) var btn = args.object; btn.android.setFocusable (false);
openCamera () FunzioneIl prossimo è il openCamera () funzione, che viene eseguita quando l'utente tocca il Allega immagine pulsante. Lo stato corrente non viene mantenuto quando si utilizza il modulo della videocamera, quindi è necessario prima salvare il titolo della nuova nota nelle impostazioni dell'applicazione.
Successivamente, è possibile avviare l'app fotocamera predefinita nel dispositivo chiamando il fare una foto() metodo. Questo metodo accetta un oggetto contenente le impostazioni dell'immagine. Una volta che l'utente ha scattato una foto e toccato il Salvare pulsante in Android o il usa l'immagine pulsante su iOS, la promessa si risolve e la funzione di callback passata a poi() viene eseguito.
L'immagine reale viene passata come argomento alla funzione e viene utilizzata per salvare il file nel percorso dei documenti. Fatto ciò, salviamo il percorso completo del file nelle impostazioni dell'app e lo stato corrente dell'app in modo che possiamo ottenere il valore in un secondo momento, prima di salvare la nota.
exports.openCamera = function () appSettings.setString ('new_note_title', pageData.get ('item_title')); cameraModule.takePicture (width: 300, height: 300, keepAspectRatio: true). then (function (img) var filepath = fs.path.join (fs.knownFolders.documents (). path, "img_" + ( new Date (). getTime () / 1000) + ".jpg"); img.saveToFile (filepath, uiEnums.ImageFormat.jpeg); appSettings.setString ('new_note_photo', filepath); pageData.set ('attachment_img', percorso del file); ); saveNote () FunzioneIl saveNote () la funzione viene eseguita quando l'utente tocca il Salva nota pulsante. Ciò ottiene il valore corrente del campo di testo del titolo della nota e il percorso dell'immagine, incrementa il valore CURRENT_INDEX, e spinge il nuovo oggetto nell'array delle note semplici e nell'array delle note osservabili. Quindi salva le note correnti e il CURRENT_INDEX nelle impostazioni dell'applicazione, rimuove i valori per la nuova nota dalle impostazioni dell'applicazione, aggiorna l'interfaccia utente in modo che il modulo mostri il suo stato vuoto e mostri l'elenco nascondendo il nuovo modulo della nota.
exports.saveNote = function () var new_note_title = pageData.get ('item_title'); var new_note_photo = pageData.get ('attachment_img'); current_index + = 1; var new_index = current_index; var new_item = index: new_index, titolo: new_note_title, foto: new_note_photo, show_photo: false; notesArr.push (NEW_ITEM); pageArray.push (NEW_ITEM); appSettings.setString ('notes', JSON.stringify (notesArr)); appSettings.setNumber ('current_index', new_index); appSettings.remove ( 'new_note_title'); appSettings.remove ( 'new_note_photo'); pageData.set ('showForm', false); pageData.set ('item_title', "); pageData.set ('attachment_img', null); view.getViewById (pagina, 'list'). animate (opacity: 1, duration: 400); view.getViewById ( pagina, 'form'). animate (translate: x: 0, y: -160, durata: 800,);deleteNote () FunzioneInfine, abbiamo il deleteNote () funzione che viene eseguita quando un utente tocca il pulsante Elimina all'interno di una voce di elenco. Come già visto dalle funzioni precedenti, un oggetto viene passato come argomento alle funzioni che sono collegate come gestore di eventi per un componente specifico. Questo oggetto ha il oggetto proprietà, che si riferisce al componente stesso.
Da lì, puoi ottenere il valore di un attributo che è stato passato ad esso. In questo caso, otteniamo il valore di indice attributo, e lo usiamo per ottenere l'indice reale dell'elemento che vogliamo eliminare.
exports.deleteNote = function (args) var target = args.object; var index_to_delete = notesArr.map (function (e) return e.index;). indexOf (target.index); notesArr.map (function (item, index) if (index == index_to_delete) notesArr.splice (index_to_delete, 1); pageArray.splice (index_to_delete, 1); return false;); appSettings.setString ('notes', JSON.stringify (notesArr)); Apri il app.css file e aggiungi i seguenti stili globali:
ActionBar background-color: # b898ff; colore: #fff; .header-item text-transform: uppercase; .item padding: 20; font-size: 20px; .form-container background-color: #fff; margin-top: -160px; imbottitura: 20px; z-index: 10; .label font-size: 18px; . link text-align: left; colore di sfondo: trasparente; colore: # 0275d8; imbottitura: 5px; margine: 10px 0; text-transform: maiuscolo; font-size: 15px; .image width: 300; margine: 20 0; .primary-button padding: 5px; colore: #fff; background-color: # 0723bb; text-transform: maiuscolo; .delete-button font-size: 15px; background-color: # f50029; colore: #fff;
Se si desidera applicare stili specifici della pagina, è anche possibile creare un note-page.css file e definisci i tuoi stili lì.
Puoi eseguire l'app sul tuo dispositivo eseguendo correre e poi la piattaforma in cui si desidera distribuire. Ecco un esempio per Android:
tns esegue Android
Questo installa automaticamente la piattaforma Android per te se non è già stata installata e quindi esegue l'app sul tuo dispositivo una volta installato. Una volta che l'app è in esecuzione, puoi eseguirla tns livesync android --watch per aggiornare automaticamente l'app ogni volta che apporti modifiche ai file sorgente.
Proprio come qualsiasi altra applicazione, NativeScript consente agli sviluppatori di eseguire il debug della loro app. Questo è fatto con gli strumenti di sviluppo di Chrome. Ci sono due modi per farlo:
tns debug android - start per collegare un debugger all'istanza attualmente in esecuzione dell'app.tns debug android --debug-brk per creare un'istanza dell'app con un debugger collegato ad essa.Indipendentemente dall'opzione scelta, questa aprirà una nuova scheda nel browser Google Chrome che consente di eseguire il debug dell'applicazione come una normale web app JavaScript. Questo significa che puoi effettivamente usare console.log nel codice sorgente per ispezionare il contenuto delle variabili con cui stai lavorando.
In questo articolo, hai imparato come creare un'app con NativeScript. In particolare, hai imparato concetti come utilizzare componenti dell'interfaccia utente, layout, stile, animazioni, utilizzando la fotocamera del dispositivo e mantenere lo stato dell'applicazione con le impostazioni dell'applicazione.
Ora che hai creato la tua prima app NativeScript, è giunto il momento di approfondire ulteriormente le tue capacità verificando cos'altro puoi fare con NativeScript e creando altre app con esso.
