Share
Dans le dernier article, je vous ai présenté NativeScript. Vous y avez appris les bases de NativeScript et la différence par rapport aux autres frameworks de développement mobile. Cette fois, vous allez vous salir les mains en créant votre première application NativeScript. Je vous guiderai tout au long du processus de création d'une application avec NativeScript, de la configuration de votre environnement de développement à l'exécution de l'application sur votre appareil. Voici un aperçu de ce que je vais discuter:
Nous allons spécifiquement exécuter l'application sur la plate-forme Android. Mais vous pouvez toujours suivre si vous souhaitez déployer sur iOS car le code sera à peu près le même. Les seules différences concernent le processus de configuration de NativeScript et les commandes que vous exécutez lors de l'exécution de l'application..
Le code source complet de cette application est disponible à partir du tutoriel GitHub repo.
Pour configurer NativeScript, vous devez d’abord installer Node.js. Une fois Node.js installé, vous pouvez installer l'outil de ligne de commande NativeScript en exécutant npm install -g nativescript sur votre terminal.
La dernière étape consiste à installer l'outil de développement pour chaque plate-forme sur laquelle vous souhaitez déployer. Pour Android, il s’agit du SDK Android. Pour iOS, c'est XCode. Vous pouvez suivre le guide d'installation sur le site Web NativeScript pour des instructions plus détaillées sur la configuration du logiciel nécessaire à votre environnement de développement..
Une fois que vous avez configuré votre environnement, exécutez tns docteur pour vous assurer que votre environnement est prêt pour le développement NativeScript. Si vous êtes sous Linux ou Windows, vous verrez quelque chose comme ceci si votre environnement est prêt:
REMARQUE: Vous pouvez développer pour iOS uniquement sur les systèmes Mac OS X. Pour pouvoir travailler avec des appareils et des projets iOS, vous devez disposer de Mac OS X Mavericks ou version ultérieure. Vos composants sont à jour. Aucun problème n'a été détecté.
Vous y trouverez une note indiquant que vous ne pouvez développer pour iOS que sur les systèmes Mac OS X. Cela signifie que si vous êtes sur un PC, vous ne pourrez le déployer que sur des appareils Android. Cependant, si vous êtes sur Mac, vous pourrez déployer sur les plateformes iOS et Android..
Si vous rencontrez des problèmes lors de l'installation, vous pouvez être invité à rejoindre la communauté NativeScript Slack. Une fois que vous y avez adhéré, accédez au canal de démarrage et posez vos questions..
L'application que nous allons créer est une application de prise de notes. Cela permettra à l'utilisateur de créer des notes, chacune avec une pièce jointe optionnelle qui sera capturée avec l'appareil photo du périphérique. Les notes sont conservées à l'aide des paramètres de l'application NativeScript et peuvent être supprimées individuellement..
Voici à quoi ressemblera l'application:
Commencez par exécuter la commande suivante pour créer un nouveau projet NativeScript:
tns create noter --appid "com.yourname.noter"
noter est le nom du projet, et com.votrenom.noter est l'ID d'application unique. Ceci sera utilisé plus tard pour identifier votre application une fois que vous la soumettez au Play ou à l'App Store. Par défaut, le tns créer Cette commande créera pour vous les dossiers et fichiers suivants:
Il vous suffit généralement de toucher les fichiers à l’intérieur du app annuaire. Mais il y a aussi des cas où vous pourriez avoir besoin de modifier des fichiers dans le plateformes /Android annuaire. C'est le cas lorsqu'un plugin que vous essayez d'utiliser ne lie pas automatiquement les dépendances et les actifs dont il a besoin..
Ensuite, accédez au app répertoire et supprimer tous les fichiers sauf le App_Resources dossier. Puis créez les fichiers suivants:
Ce sont les fichiers qui seront utilisés par le runtime NativeScript. Comme lors de la création de pages Web, .css les fichiers sont utilisés pour le style, et .js fichiers de fonctionnalité. Mais pour le balisage de l'application, nous utilisons XML au lieu de HTML. Généralement, vous créez un dossier distinct pour chaque écran de l’application (par exemple, connexion, inscription ou tableau de bord) et insérez des fichiers XML, CSS et JavaScript dans chaque dossier. Mais comme cette application n'a qu'un seul écran, nous avons créé tous les fichiers du répertoire racine..
Si vous avez besoin de plus d'informations sur la structure de répertoire NativeScript, consultez le chapitre 2 du Guide de démarrage de NativeScript..
Ouvrez le app.js fichier et ajoutez le code suivant:
Accentsconagua
var application = require ("application"); application.start (moduleName: "notes-page");C'est le point d'entrée d'une application NativeScript. Il utilise le module d'application et ses début méthode pour spécifier le module utilisé pour la page initiale de l'application. Dans ce cas, nous avons spécifié page de notes, ce qui signifie que le module est notes-page.js, le balisage est notes-page.xml, et le style de la page est notes-page.css. Ceci est une convention utilisée dans NativeScript, selon laquelle tous les fichiers d'une page spécifique doivent avoir le même nom..
Ouvrez le notes-page.xml fichier et ajoutez le code suivant:
Lors de la création de pages d'application dans NativeScript, vous devez toujours commencer par le xmlns attribut spécifie l'URL du schéma utilisé pour le fichier XML.
Si vous visitez l'URL du schéma spécifié, vous pouvez voir la définition de toutes les balises XML que vous pouvez utiliser dans NativeScript. le chargé attribut spécifie la fonction à exécuter une fois la page chargée. Nous examinerons cette définition de fonction plus tard dans le notes-page.js fichier.
…
Par défaut, l'en-tête de l'application ne contient que le titre de l'application. Si vous souhaitez ajouter d'autres composants de l'interface utilisateur, vous devez le redéfinir à l'aide de Titre attribuer au titre de la page que vous voulez.
Ci-dessous, nous avons utilisé la syntaxe moustache pour afficher la valeur de app_title défini dans le notes-page.js fichier. Voici comment afficher les valeurs liées à la page..
…
Pour définir des boutons, utilisez d'abord robinet attribut spécifie une fonction à exécuter lorsque vous appuyez sur le bouton, tandis que os.position et android.position sont les positions du bouton dans iOS et Android.
Pour spécifier le texte du bouton, vous pouvez utiliser le texte attribut. Cependant, NativeScript ne permet pas actuellement de changer la couleur du texte du bouton via CSS. C'est pourquoi nous avons plutôt utilisé
Suivant est le contenu réel de la page. Vous pouvez organiser les différents éléments en utilisant un ou plusieurs conteneurs de présentation. Ci-dessous, nous avons utilisé deux des mises en page disponibles: StackLayout et Disposition de la grille.
StackLayout vous permet d'empiler tous les éléments à l'intérieur de celui-ci. Par défaut, l'orientation de cette présentation est verticale, de sorte que chaque composant de l'interface utilisateur est empilé sous le dernier. Pensez aux briques lego avec un courant descendant.
D'autre part, Disposition de la grille vous permet d'organiser des éléments dans une structure de table. Si vous avez déjà utilisé Bootstrap ou d’autres frameworks de grille CSS, cela vous semblera naturel. le Disposition de la grille vous permet de définir des lignes et des colonnes dans lesquelles chaque composant de l'interface utilisateur peut être placé. Nous verrons comment cela sera mis en œuvre plus tard. Pour l'instant, passons au code.
Premièrement, définissons le formulaire pour créer une nouvelle note. Comme en HTML, vous pouvez définir des attributs tels que identifiant et cssClass (équivalent à HTML classe attribut). le identifiant attribut est attaché à un élément si vous voulez le manipuler à partir de code. Dans notre cas, nous voulons animer le formulaire plus tard. cssClass est utilisé pour spécifier la classe CSS que vous utiliserez pour styler l'élément.
À l'intérieur du formulaire se trouve un champ de texte permettant de saisir le titre de la note, un bouton permettant de joindre une image, l'image sélectionnée et un bouton permettant d'enregistrer la note. L'élément image n'est visible que si le attachment_img a une valeur de vérité. Ce sera le cas si une image était précédemment attachée.
Suivant est la liste qui montre les notes qui ont déjà été ajoutées par l'utilisateur. Les listes sont créées en utilisant le ListView composant. Cela accepte articles en tant qu'attribut requis. La valeur peut être un tableau simple ou un tableau observable.
Si vous ne devez effectuer aucune mise à jour (par exemple, supprimer ou mettre à jour un champ) de chaque élément du tableau, un tableau JavaScript simple suffira. Sinon, utilisez un tableau observable qui vous permet d'effectuer des mises à jour du tableau et de le refléter automatiquement dans l'interface utilisateur. Nous verrons comment un tableau observable est défini plus tard.
Notez également qu'un ListView peut avoir un itemTap attribut, qui vous permet de spécifier la fonction à exécuter lorsqu'un élément de la liste ListView est exploité. Mais dans ce cas, nous ne l'avons pas vraiment ajouté car nous n'avons aucune action à effectuer lorsqu'un élément est exploité..
…
Les articles dans le ListView peut être défini en utilisant des colonnes attribut est utilisé pour spécifier le nombre de colonnes que vous voulez dans chaque ligne.
Dans ce cas, *, * signifie qu'il y a deux colonnes, chacune occupant une quantité égale de l'espace disponible dans la ligne en cours. Ainsi, si la ligne entière a une largeur totale de 300 pixels, chaque colonne aura une largeur de 150 pixels. Donc, fondamentalement, chaque * représente une colonne et vous utilisez une virgule pour séparer chacune d'elles.
le rangées L'attribut fonctionne de manière similaire, mais contrôle la quantité d'espace utilisé par une seule ligne.. auto signifie qu'il ne consommera que l'espace nécessaire aux enfants de chaque rangée.
Après avoir défini le des colonnes et rangées dans le Disposition de la grille, vous devez encore spécifier lequel de ses enfants appartient à quelle ligne et colonne. La première ligne contient le titre de l'élément (1ère colonne) et le bouton de suppression (2ème colonne). La deuxième ligne contient l'image qui était attachée à l'élément (1ère colonne). La ligne et les colonnes sont spécifiées à l'aide de la commande rangée et col attribut pour chaque élément.
Notez également l'utilisation de horizontalAlignment et alignement vertical. Vous pouvez considérer cela comme l'équivalent NativeScript de HTML aligner le texte attribut. Mais au lieu de texte, nous alignons les composants de l'interface utilisateur. horizontalAlignment peut avoir une valeur de droite, la gauche, centre, ou étendue, tandis que alignement vertical peut avoir une valeur de Haut, bas, centre, ou étendue. La plupart d’entre elles s’expliquent d’elles-mêmes, sauf étendue, qui s'étire pour occuper l'espace horizontal ou vertical disponible.
Dans ce cas, horizontalAlignment et alignement vertical sont utilisés pour centrer l'image horizontalement et verticalement à l'intérieur de sa colonne. Et horizontalAlignment est utilisé sur le bouton de suppression pour l'aligner sur la partie la plus à droite de la deuxième colonne.
Nous n'avons pas spécifié un itemTap attribut pour le ListView. Au lieu de cela, nous voulons attacher une action de suppression qui sera exécutée chaque fois que vous appuierez sur un bouton de suppression dans un élément de la liste. Chaque article a un indice attribut, que nous passons comme attribut personnalisé pour le bouton Supprimer. C'est la clé unique utilisée pour identifier chaque article afin que nous puissions facilement nous y référer en cas de besoin..
Notez également le chargé attribut. Tout comme chargé attribut, les boutons peuvent aussi en avoir un. Vous verrez plus tard comment cela est utilisé.
Nous sommes maintenant prêts à examiner le code JavaScript qui permet de tout utiliser. Dans cette section, nous allons coder le notes-page.js fichier.
Nous importons d’abord le données / observable et tableau de données / observable modules. Ce sont des modules intégrés à NativeScript qui nous permettent de créer des objets et des tableaux observables. Les observables nous permettent de mettre à jour automatiquement l'interface utilisateur chaque fois que ces objets et ces matrices sont mis à jour..
Dans notre application, pageArray est utilisé pour stocker le tableau de notes, et pageData est utilisé pour l'attacher à la page. pageData sert également de conteneur général pour toutes les données que nous voulons montrer dans l'interface utilisateur.
var Observable = require ("data / observable"); var ObservableArray = require ("data / observable-array"); var pageArray = new ObservableArray.ObservableArray (); var pageData = new Observable.Observable (notes: pageArray);Ensuite, importez tous les autres modules que nous utiliserons dans cette page:
caméra: pour travailler avec la caméra de l'appareil.vue: pour faire référence à des éléments spécifiques de la page. Pensez-y comme à l'équivalent de document.getElementById en NativeScript.ui / enums: un dictionnaire global de valeurs constantes pour tout ce qui concerne les interfaces utilisateur.ui / animation: pour animer des éléments.paramètres de l'application: pour la persistance de données locales.système de fichiers: pour travailler avec le système de fichiers.var cameraModule = require ("camera"); var view = require ("ui / core / view"); var uiEnums = require ("ui / enums"); var animation = require ("ui / animation"); var appSettings = require ("paramètres de l'application"); var fs = require ("système de fichiers");Ensuite, initialisez les valeurs des variables qui seront utilisées dans tout le fichier.. page est utilisé pour stocker une référence à la page en cours, notesArr est la copie en tableau simple des notes actuelles de la page, et current_index est la valeur initiale de l'index utilisé comme identifiant unique pour chaque note.
var page; var notesArr = []; var current_index = -1;
pageLoaded () Une fonctionLes fonctions sont disponibles dans le contexte de la page grâce à l’utilisation de exportations. Plus tôt dans le notes-page.xml fichier, vous avez vu que le pageLoaded () la fonction est exécutée lorsque la page est chargée.
exports.pageLoaded = fonction (arguments) …
À l'intérieur de pageLoaded () fonction, nous allons commencer par obtenir la référence à la page. Ensuite, nous montrons le formulaire pour créer une nouvelle note et obtenons les valeurs actuellement stockées du nouveau titre de note et les notes des paramètres de l'application..
page = args.object; pageData.set ('showForm', true); var new_note_title = appSettings.getString ('new_note_title'); var notes = appSettings.getString ('notes');Ensuite, toujours dans le pageLoaded () fonction, vérifiez si des notes sont stockées localement. Sinon, nous créons un tableau de notes. Ce tableau servira de contenu par défaut pour les nouveaux utilisateurs de l'application. Cependant, si des notes sont déjà stockées localement, nous les convertissons en un tableau, puis nous transmettons ces données au tableau observable..
Notez qu'avant d'insérer les éléments dans le tableau observable, nous vérifions d'abord s'il est vide. Nous devons le faire car utiliser le module de caméra exécute le chargé événement sur la page une fois de plus après la sélection d’une image. Cela signifie que si nous ne faisons pas attention, nous finirons par insérer des doublons dans la matrice chaque fois que l'utilisateur utilisera la caméra..
if (! notes) notes = [index: 0, titre: '100 push ups', index: 1, titre: '100 sit ups', index: 2, titre: '100 squats', index: 3, titre: 'course à pied de 10 km']; else notes = JSON.parse (notes); notesArr = notes; if (! pageArray.length) pour (var x = 0; x < notes.length; x++) current_index += 1; pageArray.push(notes[x]);
Maintenant que les données de notes sont configurées, nous pouvons mettre à jour le titre de la page en définissant sa item_title attribuer à la valeur que nous avons obtenue des paramètres de l'application plus tôt. Puis lier pageData sur la page pour que l'interface utilisateur soit automatiquement mise à jour à chaque modification des éléments que nous avons définis.
pageData.set ('item_title', new_note_title); args.object.bindingContext = pageData;Animer le formulaire pour créer de nouvelles notes. Nous faisons cela en utilisant le getViewById fonctionner dans le vue et en passant dans le contexte (la page en cours) comme premier argument et le identifiant attribut attribué à l'élément que vous voulez manipuler.
Ensuite, appelez le animer une fonction. Ceci accepte un objet contenant les paramètres d'animation. Ici, nous souhaitons que le formulaire glisse de 160 pixels par rapport à sa position d'origine sur une période de 800 millisecondes..
view.getViewById (page, 'formulaire'). animate (traduction: x: 0, y: 160, durée: 800,);
newNote () Une fonctionle newNote () la fonction est exécutée lorsque l'utilisateur appuie sur la Nouvel article action sur l'en-tête. Cela cache et montre le nouvel élément ListView et fait glisser la forme vers le haut ou le bas en fonction de la valeur actuelle de showForm.
Si showForm est vrai, ce qui signifie qu'il est actuellement montré, nous changeons l'opacité de la ListView à 1 au cours des 400 millisecondes, puis faites glisser le formulaire pour le masquer. Sinon, on cache le ListView et faites glisser le formulaire.
exports.newNote = function () var showForm = pageData.get ('showForm'); var top_position = (showForm)? -160: 160; var list_visibility = (showForm)? dix; view.getViewById (page, 'liste'). animate (opacity: list_visibility, duration: 400); view.getViewById (page, 'formulaire'). animate (translate: x: 0, y: top_position, durée: 800,); pageData.set ('showForm',! showForm); btnLoaded () Une fonctiondans le notes-page.xml fichier, nous avons un chargé attribut dans le bouton pour supprimer une note. C'est la fonction qui est exécutée quand cet événement se produit.
Par défaut, la fonction attribuée à la itemTap attribuer dans le ListView ne sera pas exécuté lorsqu'un bouton est défini à l'intérieur d'un ListView article. En effet, NativeScript suppose que les actions à effectuer pour chaque élément de la liste peuvent être déclenchées uniquement à partir de ces boutons..
Le code ci-dessous est une solution de contournement pour ce comportement par défaut. Cela supprime le focus sur le bouton de suppression afin que vous puissiez toujours exécuter une fonction lorsqu'un utilisateur appuie sur un bouton. ListView article. Dans ce cas, nous n'avons pas vraiment besoin de ce code car nous n'avons attribué aucune fonctionnalité aux taps d'élément, mais c'est un bon outil pour travailler avec des listes..
exports.btnLoaded = fonction (args) var btn = args.object; btn.android.setFocusable (false);
Ouvrir la caméra() Une fonctionSuivant est le Ouvrir la caméra() fonction, qui est exécutée lorsque l'utilisateur appuie sur le Joindre une image bouton. L'état actuel n'est pas maintenu lors de l'utilisation du module de caméra. Nous devons donc d'abord enregistrer le titre de la nouvelle note dans les paramètres de l'application..
Ensuite, nous pouvons lancer l'application de caméra par défaut sur l'appareil en appelant le takePicture () méthode. Cette méthode accepte un objet contenant les paramètres d'image. Une fois que l’utilisateur a pris une photo et tapé sur le bouton sauvegarder bouton dans Android ou le utiliser l'image sur iOS, la promesse est résolue et la fonction de rappel transmise à puis() est exécuté.
L'image réelle est transmise en tant qu'argument à la fonction et nous l'utilisons pour enregistrer le fichier dans le chemin des documents. Une fois que cela est fait, nous sauvegardons le chemin complet du fichier dans les paramètres de l'application et l'état actuel de l'application pour pouvoir obtenir la valeur plus tard, avant d'enregistrer la note..
exports.openCamera = function () appSettings.setString ('new_note_title', pageData.get ('item_title')); cameraModule.takePicture (width: 300, height: 300, keepAspectRatio: true). then (function (img) var cheminfichier = fs.path.join (fs.knownFolders.documents (). chemin, "img_" + ( new Date (). getTime () / 1000) + ".jpg"); img.saveToFile (chemin_fichier, uiEnums.ImageFormat.jpeg); appSettings.setString ('new_note_photo', chemin_fichier); pageData.set ('attachment_img', chemin du fichier); ); saveNote () Une fonctionle saveNote () la fonction est exécutée lorsque l'utilisateur appuie sur la Enregistrer la note bouton. Ceci obtient la valeur actuelle du champ de texte du titre de la note et le chemin de l’image, incrémente le current_index, et pousse le nouvel élément dans le tableau de notes simples et le tableau de notes observables. Ensuite, il enregistre les notes actuelles et le current_index dans les paramètres de l'application, supprime les valeurs de la nouvelle note des paramètres de l'application, met à jour l'interface utilisateur de sorte que le formulaire affiche son état vide et affiche la liste tout en masquant le nouveau formulaire de note.
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, titre: new_note_title, photo: 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 (page, 'list'). animate (opacity: 1, durée: 400); view.getViewById ( page, 'formulaire'). animate (traduction: x: 0, y: -160, durée: 800,);deleteNote () Une fonctionEnfin, nous avons le deleteNote () fonction qui est exécutée lorsqu'un utilisateur appuie sur le bouton de suppression dans un élément de la liste. Comme vous l'avez déjà vu avec les fonctions précédentes, un objet est transmis en tant qu'argument aux fonctions attachées en tant que gestionnaire d'événements pour un composant spécifique. Cet objet a le objet propriété, qui fait référence au composant lui-même.
De là, vous pouvez obtenir la valeur d'un attribut qui lui a été transmis. Dans ce cas, nous obtenons la valeur de la indice attribut, et nous l'utilisons pour obtenir l'index réel de l'élément que nous voulons supprimer.
exports.deleteNote = function (args) var cible = args.object; var index_to_delete = notesArr.map (fonction (e) return e.index;). indexOf (target.index); notesArr.map (fonction (élément, index) if (index == index_à_delete) notesArr.splice (index_to_delete, 1); pageArray.splice (index_to_delete, 1); return false;); appSettings.setString ('notes', JSON.stringify (notesArr)); Ouvrez le app.css fichier et ajouter les styles globaux suivants:
ActionBar background-color: # b898ff; couleur: #fff; .header-item text-transform: majuscule; .item padding: 20; taille de police: 20px; .form-container background-color: #fff; marge supérieure: -160 pixels; rembourrage: 20px; z-index: 10; .label font-size: 18px; .link text-align: left; couleur de fond: transparent; couleur: # 0275d8; rembourrage: 5px; marge: 10px 0; text-transform: majuscule; taille de police: 15px; .image width: 300; marge: 20 0; .primary-button padding: 5px; couleur: #fff; couleur de fond: # 0723bb; text-transform: majuscule; .delete-button taille de la police: 15px; couleur de fond: # f50029; couleur: #fff;
Si vous souhaitez appliquer des styles spécifiques à une page, vous pouvez également créer une notes-page.css déposer et définir vos styles là-bas.
Vous pouvez exécuter l'application sur votre appareil en exécutant tns courir et ensuite la plate-forme sur laquelle vous souhaitez déployer. Voici un exemple pour Android:
tns courir android
Cela installe automatiquement la plateforme Android pour vous si elle n’a pas déjà été installée, puis lance l’application sur votre appareil une fois qu’elle est installée. Une fois l'application en cours d'exécution, vous pouvez exécuter tns livesync android --watch pour actualiser automatiquement l'application chaque fois que vous apportez des modifications aux fichiers source.
Comme tout autre framework d'application, NativeScript permet aux développeurs de déboguer leur application. Ceci est fait avec les outils de développement de Chrome. Il y a deux façons de le faire:
tns debug android --start attacher un débogueur à l'instance en cours d'exécution de l'application.tns debug android --debug-brk construire une instance de l'application avec un débogueur attaché.Quelle que soit l'option que vous choisissez, cela ouvrira un nouvel onglet dans le navigateur Google Chrome qui vous permettra de déboguer l'applicatio
