Share
In het laatste artikel heb ik je aan NativeScript voorgesteld. Daar leerde je de basisprincipes van NativeScript en hoe het verschilt van andere frameworks voor mobiele ontwikkeling. Deze keer zul je je handen vies maken door je eerste NativeScript-app te maken. Ik zal het hele proces van het bouwen van een app met NativeScript doorlopen, van het instellen van uw ontwikkelomgeving tot het uitvoeren van de app op uw apparaat. Hier is een overzicht van wat ik zal bespreken:
We zullen specifiek de app op het Android-platform gebruiken. Maar je kunt nog steeds meegaan als je wilt inzetten op iOS, omdat de code vrijwel hetzelfde zal zijn. De enige verschillen zijn in het proces voor het instellen van NativeScript en de opdrachten die u uitvoert bij het uitvoeren van de app.
De voltooide broncode voor deze app is beschikbaar in de tutorial GitHub repo.
Als u NativeScript wilt instellen, moet u eerst Node.js. Nadat Node.js is geïnstalleerd, kunt u het opdrachtregelprogramma NativeScript installeren door het uit te voeren npm install -g nativescript op uw terminal.
De laatste stap is om de ontwikkelaarstool te installeren voor elk platform dat u wilt implementeren. Voor Android is dit de Android SDK. Voor iOS is het XCode. U kunt de installatiehandleiding op de NativeScript-website volgen voor meer gedetailleerde instructies over het instellen van de benodigde software voor uw ontwikkelomgeving.
Nadat u uw omgeving hebt ingesteld, voert u uit dokter om ervoor te zorgen dat uw omgeving gereed is voor NativeScript-ontwikkeling. Als je Linux of Windows gebruikt, zie je zoiets als je omgeving klaar is:
OPMERKING: u kunt alleen voor iOS ontwikkelen op Mac OS X-systemen. Om met iOS-apparaten en -projecten te kunnen werken, heb je Mac OS X Mavericks of later nodig. Uw componenten zijn up-to-date. Er zijn geen problemen gedetecteerd.
Er is een notitie die u alleen voor iOS alleen op Mac OS X-systemen kunt ontwikkelen. Dit betekent dat als u op een pc werkt, u deze alleen kunt gebruiken voor Android-apparaten. Als u echter een Mac gebruikt, kunt u deze implementeren op zowel iOS- als Android-platforms.
Als je tijdens de installatie problemen ondervindt, kun je een uitnodiging ontvangen om lid te worden van de NativeScript Slack-community. Zodra je je hebt aangemeld, ga je naar het kanaal 'Aan de slag' en stel je je vragen daar.
De app die we gaan bouwen, is een app voor het maken van notities. Hiermee kan de gebruiker aantekeningen maken, elk met een optionele beeldbijlage die met de camera van het apparaat wordt vastgelegd. De notities worden aangehouden met behulp van NativeScript-toepassingsinstellingen en kunnen afzonderlijk worden verwijderd.
Dit is hoe de app eruit zal zien:
Begin met het uitvoeren van de volgende opdracht om een nieuw NativeScript-project te maken:
tns create noter --appid "com.yourname.noter"
Noter is de naam van het project, en com.yourname.noter is de unieke app-ID. Dit wordt later gebruikt om uw app te identificeren zodra u deze indient bij de Play of App Store. Standaard is de tns maken commando maakt de volgende mappen en bestanden voor u:
U hoeft meestal alleen de bestanden in de map aan te raken app directory. Maar er zijn ook gevallen waarin u mogelijk bestanden moet bewerken binnen de platforms /android directory. Een dergelijk geval is wanneer een plug-in die u probeert te gebruiken, niet automatisch de afhankelijkheden en items koppelt die deze nodig heeft.
Navigeer vervolgens naar de app map en verwijder alle bestanden met uitzondering van de App_Resources map. Maak vervolgens de volgende bestanden:
Dit zijn de bestanden die worden gebruikt door de NativeScript-runtime. Net zoals bij het bouwen van webpagina's, .css bestanden worden gebruikt voor het stylen, en .js bestanden voor functionaliteit. Maar voor de opmaak van de app gebruiken we XML in plaats van HTML. Gewoonlijk zou u een afzonderlijke map voor elk scherm van de app maken (bijvoorbeeld inloggen, aanmelden of dashboard) en XML-, CSS- en JavaScript-bestanden in elke map hebben. Maar omdat deze app maar één scherm heeft, hebben we alle bestanden in de hoofdmap gemaakt.
Als u meer informatie wilt over de NativeScript-directorystructuur, raadpleegt u hoofdstuk 2 van de handleiding Aan de slag met NativeScript.
Open de app.js bestand en voeg de volgende code toe:
Accentsconagua
var application = require ("application"); application.start (moduleName: "notes-page");Dit is het toegangspunt voor een NativeScript-toepassing. Het maakt gebruik van de applicatiemodule en zijn begin methode om de module op te geven die wordt gebruikt voor de eerste pagina van de app. In dit geval hebben we aangegeven notes-pagina, wat betekent dat de module is notes-page.js, de markup is notes-page.xml, en de styling voor de pagina is notes-page.css. Dit is een conventie die in NativeScript wordt gebruikt en die ervoor zorgt dat alle bestanden voor een specifieke pagina dezelfde naam hebben.
Open de notes-page.xml bestand en voeg de volgende code toe:
Wanneer u app-pagina's in NativeScript maakt, moet u altijd beginnen met de xmlns kenmerk geeft de URL aan van het schema dat voor het XML-bestand wordt gebruikt.
Als u de opgegeven schema-URL bezoekt, kunt u de definitie van alle XML-tags bekijken die u in NativeScript kunt gebruiken. De loaded kenmerk geeft de functie aan die moet worden uitgevoerd zodra de pagina is geladen. We zullen deze functiedefinitie later bekijken in de notes-page.js het dossier.
...
Standaard bevat de app-header alleen de titel van de app. Als u andere UI-componenten wilt toevoegen, moet u deze opnieuw definiëren met behulp van titel attribuut aan de paginatitel die u wilt.
Hieronder hebben we de snijsyntaxis gebruikt om de waarde van uit te voeren APP_TITLE gedefinieerd in de notes-page.js het dossier. Dit is de manier waarop u waarden uitvoert die aan de pagina zijn gebonden.
...
Gebruik de knoppen om knoppen te definiëren tik attribuut geeft een functie aan die moet worden uitgevoerd wanneer de knop wordt aangetikt, terwijl os.position en android.position zijn de posities van de knop in iOS en Android.
Als u de knoptekst wilt opgeven, kunt u de tekst attribuut. In NativeScript kan momenteel echter niet de tekstkleur van de knop via CSS worden gewijzigd. Dat is waarom we in plaats daarvan hebben gebruikt
De volgende is de daadwerkelijke pagina-inhoud. U kunt de verschillende elementen rangschikken door een of meer van de lay-outbakken te gebruiken. Hieronder hebben we twee van de beschikbare lay-outs gebruikt: stackLayout en GridLayout.
stackLayout kunt u alle elementen erin stapelen. De oriëntatie van deze lay-out is standaard verticaal, zodat elke UI-component onder de laatste wordt gestapeld. Denk aan legostenen met een neerwaartse stroming.
Anderzijds, GridLayout kunt u elementen in een tabelstructuur rangschikken. Als je ooit Bootstrap of andere CSS grid-frameworks hebt gebruikt, dan zou dit natuurlijk voor je moeten lijken. De GridLayout kunt u rijen en kolommen definiëren waaronder elke UI-component kan worden geplaatst. We zullen kijken hoe dit later wordt geïmplementeerd. Laten we nu naar de code gaan.
Laten we eerst het formulier definiëren voor het maken van een nieuwe notitie. Net als in HTML kunt u kenmerken zoals definiëren ID kaart en CssClass (gelijk aan HTML's klasse attribuut). De ID kaart attribuut is gekoppeld aan een element als u het uit de code wilt manipuleren. In ons geval willen we het formulier later animeren. CssClass wordt gebruikt om de CSS-klasse op te geven die u wilt gebruiken om het element te stylen.
In het formulier bevindt zich een tekstveld voor het invoeren van de notitietitel, een knop voor het bijvoegen van een afbeelding, de geselecteerde afbeelding en een knop voor het opslaan van de notitie. Het afbeeldingselement is alleen zichtbaar als het attachment_img heeft een waarheidswaarde. Dat is het geval als eerder een afbeelding was bijgevoegd.
De volgende is de lijst met de opmerkingen die al door de gebruiker zijn toegevoegd. Lijsten worden gemaakt met behulp van de Lijstweergave component. Dit accepteert items als een vereist kenmerk. De waarde kan een gewone array of een waarneembare array zijn.
Als u geen enkele vorm van update hoeft uit te voeren (bijvoorbeeld een veld verwijderen of bijwerken) voor elk item in de array, is een gewone JavaScript-array voldoende. Gebruik anders een waarneembare array waarmee u updates voor de array kunt uitvoeren en deze automatisch kunt laten weergeven door de gebruikersinterface. We zullen bekijken hoe een waarneembare array later wordt gedefinieerd.
Merk ook op dat a Lijstweergave kan een hebben itemTap attribuut, waarmee u de functie kunt specificeren die moet worden uitgevoerd wanneer een item in de Lijstweergave wordt afgeluisterd. Maar in dit geval hebben we het niet echt toegevoegd, omdat we geen actie hoeven te ondernemen wanneer een item wordt aangeboord.
...
De items in de Lijstweergave kan worden gedefinieerd met kolommen kenmerk wordt gebruikt om op te geven hoeveel kolommen u in elke rij wilt.
In dit geval, *, * betekent dat er twee kolommen zijn die elk een gelijk deel van de beschikbare ruimte in de huidige rij innemen. Dus als de hele rij een totale breedte van 300 pixels heeft, is elke kolom 150 pixels breed. Dus eigenlijk elk * staat voor één kolom en u gebruikt een komma om ze te scheiden.
De rijen attribuut werkt op dezelfde manier, maar bepaalt de hoeveelheid ruimte die door een enkele rij wordt gebruikt. auto betekent dat het alleen de hoeveelheid ruimte verbruikt die de kinderen van elke rij nodig hebben.
Na het definiëren van de kolommen en rijen in de GridLayout, je moet nog steeds specificeren welke van zijn kinderen bij welke rij en kolom hoort. De eerste rij bevat de titel van het item (eerste kolom) en de wisknop (tweede kolom). De tweede rij bevat de afbeelding die aan het artikel was gehecht (eerste kolom). De rij en kolommen worden opgegeven met behulp van de rij en col kenmerk voor elk element.
Let ook op het gebruik van horizontale uitlijning en verticale uitlijning. U kunt dit zien als het NativeScript-equivalent van HTML's text-align attribuut. Maar in plaats van tekst stemmen we UI-componenten op elkaar af. horizontale uitlijning kan een waarde hebben van rechts, links, centrum, of uitrekken, terwijl verticale uitlijning kan een waarde hebben van top, bodem, centrum, of uitrekken. De meeste hiervan spreken voor zich, behalve voor uitrekken, die zich uitstrekt om de beschikbare horizontale of verticale ruimte op te nemen.
In dit geval, horizontale uitlijning en verticale uitlijning worden gebruikt om de afbeelding zowel horizontaal als verticaal in de kolom te centreren. En horizontale uitlijning wordt gebruikt op de knop Verwijderen om het uit te lijnen met het meest rechtse deel van de tweede kolom.
We hebben geen opgegeven itemTap attribuut voor de Lijstweergave. In plaats daarvan willen we een verwijderactie toevoegen die wordt uitgevoerd wanneer op een verwijderknop in een lijstitem wordt getikt. Elk item heeft een inhoudsopgave attribuut, die we doorgeven als aangepast kenmerk voor de verwijderknop. Dit is de unieke sleutel die wordt gebruikt voor het identificeren van elk item, zodat we er gemakkelijk naar kunnen verwijzen wanneer dat nodig is.
Let ook op de loaded attribuut. Net als loaded kenmerk, knoppen kunnen er ook een hebben. U zult later zien hoe dit wordt gebruikt.
Nu zijn we klaar om naar de JavaScript-code te kijken die ervoor zorgt dat alles werkt. In deze sectie coderen we de notes-page.js het dossier.
Eerst importeren we de data / waarneembare en data / waarneembare array modules. Dit zijn ingebouwde modules in NativeScript waarmee we waarneembare objecten en arrays kunnen maken. Observables stellen ons in staat om de UI automatisch bij te werken wanneer deze objecten en arrays worden bijgewerkt.
In onze app, pageArray wordt gebruikt voor het opslaan van de reeks noten, en pageData wordt gebruikt om het op de pagina te binden. pageData dient ook als de algemene container voor alle gegevens die we in de gebruikersinterface willen weergeven.
var Waarneembaar = vereisen ("gegevens / waarneembaar"); var ObservableArray = require ("data / observable-array"); var pageArray = new ObservableArray.ObservableArray (); var pageData = new Observable.Observable (notes: pageArray);Importeer vervolgens alle andere modules die we op deze pagina zullen gebruiken:
camera: om met de camera van het apparaat te werken.uitzicht: voor verwijzing naar specifieke elementen op de pagina. Zie het als het equivalent van document.getElementById in NativeScript.ui / enums: een globaal woordenboek met constante waarden voor alles gerelateerd aan UI's.ui / animatie: voor het animeren van elementen.applicatie instellingen: voor aanhoudende lokale gegevens.bestandssysteem: voor het werken met het bestandssysteem.var cameraModule = vereisen ("camera"); var view = require ("ui / core / view"); var uiEnums = require ("ui / enums"); var animation = require ("ui / animation"); var appSettings = require ("applicatie-instellingen"); var fs = require ("bestandssysteem");Initialiseer vervolgens de waarden voor de variabelen die in het hele bestand worden gebruikt. pagina wordt gebruikt voor het opslaan van een verwijzing naar de huidige pagina, notesArr is de gewone array-kopie van de huidige notities op de pagina, en CURRENT_INDEX is de beginwaarde van de index die wordt gebruikt als de unieke ID voor elke notitie.
var pagina; var notesArr = []; var current_index = -1;
pageLoaded () FunctieFuncties komen beschikbaar in de context van de pagina door middel van het gebruik van export. Eerder in de notes-page.xml bestand, je zag dat het pageLoaded () functie wordt uitgevoerd wanneer de pagina is geladen.
exports.pageLoaded = function (args) ...
Binnen in de pageLoaded () functie, beginnen we met het ophalen van de verwijzing naar de pagina. Vervolgens tonen we het formulier voor het maken van een nieuwe notitie en krijgen de momenteel opgeslagen waarden van de nieuwe notitietitel en de notities van de applicatie-instellingen.
page = args.object; pageData.set ('showForm', true); var new_note_title = appSettings.getString ('new_note_title'); var notes = appSettings.getString ('notes');Vervolgens, nog steeds binnen de pageLoaded () functie, controleer of er notities zijn die lokaal zijn opgeslagen. Als dat niet het geval is, maken we een reeks notities. Deze array fungeert als de standaardinhoud voor nieuwe gebruikers van de app. Als er echter al enkele notities lokaal zijn opgeslagen, zetten we deze om naar een array en pushen die gegevens vervolgens naar de waarneembare array.
Merk op dat voordat we de items in de waarneembare array duwen, we eerst controleren of deze leeg is. We moeten dit doen omdat het gebruik van de cameramodule de loaded gebeurtenis opnieuw op de pagina nadat een afbeelding is geselecteerd. Dit betekent dat als we niet opletten, we duplicaten in de array pushen telkens wanneer de gebruiker de camera gebruikt.
if (! notes) notes = [index: 0, title: '100 push ups', index: 1, title: '100 sit ups', index: 2, title: '100 squats', index: 3, titel: '10km hardlopen']; else notes = JSON.parse (notes); notesArr = notities; if (! pageArray.length) for (var x = 0; x < notes.length; x++) current_index += 1; pageArray.push(notes[x]);
Nu we de notengegevens hebben ingesteld, kunnen we de paginatitel bijwerken door zijn titel van het item attribuut aan de waarde die we eerder uit de applicatie-instellingen hadden. Bind dan pageData naar de pagina, zodat de gebruikersinterface automatisch wordt bijgewerkt wanneer er een wijziging wordt aangebracht in de items die we hebben ingesteld.
pageData.set ('item_title', new_note_title); args.object.bindingContext = pageData;Animeer het formulier voor het maken van nieuwe notities. We doen dit door de getViewById functie in de uitzicht en doorgeven in de context (de huidige pagina) als het eerste argument en de ID kaart attribuut toegewezen aan het element dat u wilt manipuleren.
Bel vervolgens de bezielen functie. Dit accepteert een object dat de animatie-instellingen bevat. Hier willen we dat de vorm over een periode van 800 milliseconden 160 pixels verschuift van de oorspronkelijke positie.
view.getViewById (page, 'form'). animeren (translate: x: 0, y: 160, duration: 800,);
newNote () FunctieDe newNote () functie wordt uitgevoerd wanneer de gebruiker op de Nieuw item actie-item op de kop. Dit verbergt en toont het nieuwe item Lijstweergave en schuift de vorm omhoog of omlaag, afhankelijk van de huidige waarde van showForm.
Als showForm is waar, wat betekent dat het momenteel wordt getoond, we veranderen de dekking van de Lijstweergave naar 1 in de loop van 400 milliseconden, en schuif vervolgens het formulier omhoog om het te verbergen. Anders verbergen we de Lijstweergave en schuif het formulier naar beneden.
exports.newNote = function () var showForm = pageData.get ('showForm'); var top_position = (showForm)? -160: 160; var list_visibility = (showForm)? 1: 0; view.getViewById (pagina, 'lijst'). animeren (opacity: list_visibility, duration: 400); view.getViewById (pagina, 'form'). animeren (translate: x: 0, y: top_position, duration: 800,); pageData.set ('showForm',! showForm); btnLoaded () FunctieIn de notes-page.xml bestand, we hebben een loaded attribuut in de knop voor het verwijderen van een notitie. Dit is de functie die wordt uitgevoerd wanneer die gebeurtenis plaatsvindt.
Standaard is de functie toegewezen aan de itemTap attribuut in de Lijstweergave wordt niet uitgevoerd als een knop is gedefinieerd in a Lijstweergave item. Dit komt omdat NativeScript veronderstelt dat de acties die voor elk lijstitem moeten worden uitgevoerd, alleen met die knoppen kunnen worden geactiveerd.
De onderstaande code is een oplossing voor dat standaardgedrag. Dit verwijdert in feite de focus op de delete-knop, zodat je nog steeds een functie kunt uitvoeren wanneer een gebruiker op a tikt Lijstweergave item. In dit geval hebben we deze code niet echt nodig, omdat we geen functionaliteit hebben toegewezen aan itemtaps, maar het is een goed hulpmiddel om te gebruiken wanneer je met lijsten werkt.
exports.btnLoaded = function (args) var btn = args.object; btn.android.setFocusable (false);
open camera() FunctieHet volgende is het open camera() functie, die wordt uitgevoerd wanneer de gebruiker op de knop tikt Bevestig afbeelding knop. De huidige status wordt niet behouden bij het gebruik van de cameramodule, dus moeten we de titel van de nieuwe notitie eerst in de toepassingsinstellingen opslaan.
Daarna kunnen we de standaard camera-app op het apparaat starten door de foto nemen() methode. Deze methode accepteert een object dat de beeldinstellingen bevat. Zodra de gebruiker een foto heeft gemaakt en op de knop heeft getikt Opslaan knop in Android of de gebruik afbeelding knop op iOS, de belofte wordt opgelost en de callback-functie wordt doorgegeven dan() wordt uitgevoerd.
De daadwerkelijke afbeelding wordt als een argument aan de functie doorgegeven en we gebruiken dit om het bestand op te slaan in het documentenpad. Als dat is gebeurd, slaan we het volledige bestandspad op naar de app-instellingen en de huidige app-status, zodat we de waarde later kunnen krijgen, voordat we de notitie opslaan.
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_" + ( nieuwe datum (). getTime () / 1000) + ".jpg"); img.saveToFile (filepath, uiEnums.ImageFormat.jpeg); appSettings.setString ('new_note_photo', filepath); pageData.set ('attachment_img', bestandspad); ); saveNote () FunctieDe saveNote () functie wordt uitgevoerd wanneer de gebruiker op de Bewaar opmerking knop. Dit krijgt de huidige waarde van het tekstveld van de notitietitel en het afbeeldingspad, verhoogt het CURRENT_INDEX, en duwt het nieuwe item in de array met gewone notities en de array met waarneembare notities. Daarna slaat het de huidige noten en de CURRENT_INDEX in de applicatie-instellingen, verwijdert de waarden voor de nieuwe notitie uit de applicatie-instellingen, werkt de gebruikersinterface bij, zodat het formulier zijn lege staat toont, en toont de lijst terwijl het nieuwe notitieformulier wordt verborgen.
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, titel: 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'). anim (onacity: 1, duration: 400); view.getViewById ( pagina, 'vorm'). animeren (translate: x: 0, y: -160, duration: 800,);deleteNote () FunctieTen slotte hebben we de deleteNote () functie die wordt uitgevoerd wanneer een gebruiker op de verwijderknop in een lijstitem tikt. Zoals je al eerder hebt gezien, wordt een object als een argument doorgegeven aan functies die als een gebeurtenishandler voor een specifiek onderdeel zijn gekoppeld. Dit object heeft de voorwerp eigenschap, die verwijst naar de component zelf.
Van daaruit kunt u de waarde krijgen van een attribuut dat eraan is doorgegeven. In dit geval krijgen we de waarde van de inhoudsopgave attribuut, en we gebruiken het om de werkelijke index te krijgen van het item dat we willen verwijderen.
exports.deleteNote = function (args) var target = args.object; var index_to_delete = notesArr.map (functie (e) return e.index;). indexOf (target.index); notesArr.map (functie (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)); Open de app.css bestand en voeg de volgende globale stijlen toe:
ActionBar achtergrondkleur: # b898ff; kleur: #fff; .header-item text-transform: hoofdletters; .item opvulling: 20; lettertypegrootte: 20px; .form-container background-color: #fff; margin-top: -160px; opvulling: 20px; z-index: 10; .label font-size: 18px; .link text-align: left; achtergrondkleur: transparant; kleur: # 0275d8; opvulling: 5px; marge: 10 px 0; text-transform: hoofdletters; lettergrootte: 15px; .afbeelding width: 300; marge: 20 0; .primaire-knop opvulling: 5px; kleur: #fff; achtergrondkleur: # 0723bb; text-transform: hoofdletters; .verwijder-knop font-size: 15px; achtergrondkleur: # f50029; kleur: #fff;
Als u paginaspecifieke stijlen wilt toepassen, kunt u ook een notes-page.css bestand en definieer je stijlen daarin.
U kunt de app op uw apparaat uitvoeren door deze uit te voeren voer het uit en dan het platform waar je wilt inzetten. Hier is een voorbeeld voor Android:
tns voer android uit
Hiermee wordt het Android-platform automatisch voor u geïnstalleerd als dit nog niet is geïnstalleerd en wordt de app vervolgens op uw apparaat uitgevoerd nadat deze is geïnstalleerd. Zodra de app wordt uitgevoerd, kunt u deze uitvoeren tns livesync android --watch om de app automatisch te vernieuwen telkens wanneer u wijzigingen in de bronbestanden aanbrengt.
Net als elk ander app-framework, laat NativeScript ontwikkelaars toe om hun app te debuggen. Dit gebeurt met de Chrome-dev-gereedschappen. Er zijn twee manieren om dit te doen:
tns debug android --start om een foutopsporing toe te voegen aan het actieve exemplaar van de app.tns debug android --debug-brk om een instantie van de app te bouwen met een debugger eraan gekoppeld.Ongeacht welke optie u kiest, hierdoor wordt een nieuw tabblad geopend in de Google Chrome-browser waarmee u de app kunt debuggen, net als een normale JavaScript-webapp. Dit betekent dat je het echt kunt gebruiken console.log in uw broncode om de inhoud van de variabelen waarmee u werkt te inspecteren.
In dit artikel heb je geleerd hoe je een app kunt bouwen met NativeScript. Concreet heb je concepten geleerd, zoals het gebruik van UI-componenten, lay-outs, stileren, animaties, het gebruik van de camera van het apparaat en het onderhouden van de applicatiestatus met applicatie-instellingen.
Nu je je eerste NativeScript-app hebt gebouwd, is het nu tijd om je vaardigheden nog verder uit te breiden door na te gaan wat je nog meer kunt doen met NativeScript en er nog meer apps mee te maken.
