Share
Maintenant que vous avez appris les concepts de base de Fuse, il est temps de mettre les choses en pratique et de créer une application. Dans ce tutoriel, vous apprendrez à développer une application à l'aide du framework Fuse. Plus précisément, vous allez apprendre ce qui suit:
Si vous avez besoin d'un rappel sur Fuse, consultez mon précédent article de cette série: Présentation de Fuse pour le développement d'applications multiplates-formes.
Pour commencer à utiliser Fuse, rendez-vous sur la page des téléchargements et créez un compte. Vous pouvez également vous connecter à un compte existant si vous en avez un..
Fuse est disponible pour Windows et macOS. Téléchargez et installez le programme d'installation approprié pour votre plate-forme. Sur la page des téléchargements, ils indiquent également les plug-ins Fuse disponibles pour différents éditeurs de texte. Installez celui pour votre éditeur de texte. Les plug-ins Fuse incluent l'achèvement du code, la définition du goto et la visualisation des journaux générés à partir de l'application, ce qui rend le développement d'applications plus pratique..
Nous verrons également comment prévisualiser l'application à l'aide de l'aperçu personnalisé. Pour cela, Android Studio ou Xcode doit être installé sur votre ordinateur..
Une compréhension de base des technologies Web telles que HTML, CSS et JavaScript est utile mais pas obligatoire..
Vous allez créer une application chronomètre qui mesure également la distance parcourue. La distance est mesurée en utilisant la géolocalisation. L'utilisateur peut également créer des tours, et la distance et le temps individuels pour chaque tour seront affichés à l'écran..
Voici à quoi ressemblera l'application:
Vous pouvez voir le code source complet dans le tutoriel GitHub repo.
Une fois que vous avez installé Fuse Studio, vous devriez maintenant pouvoir créer un nouveau projet Fuse. Il suffit d’ouvrir Fuse Studio et de cliquer sur le bouton Nouveau projet de fusible bouton. Entrez le nom du projet et cliquez sur Créer:
Cela créera un nouveau dossier dans le répertoire sélectionné. Ouvrez ce dossier et ouvrez le MainView.ux fichier. Par défaut, il n'aura que le
Bonjour le monde!
L'aperçu doit maintenant être mis à jour avec le texte que vous avez spécifié:
C'est le flux de travail de développement principal dans Fuse. Enregistrez simplement les modifications apportées à l’un des fichiers du répertoire du projet et elles seront automatiquement répercutées dans l’aperçu du bureau..
Vous pouvez également voir les journaux dans le panneau inférieur. Vous pouvez déclencher le vôtre en utilisant console.log (), comme dans le navigateur. La seule différence est que vous devez JSON.stringify () objets afin de voir leur valeur, puisque le console.log () l'implémentation dans Fuse ne peut générer que des chaînes.
Nous sommes maintenant prêts à créer l'application. Ouvrez le Vue principale.ux déposer et supprimer le
Tout comme dans un document HTML, la norme consiste à inclure les éléments d'actif, tels que les polices, les feuilles de style et les scripts, avant le balisage réel de la page. Alors ajoutez ce qui suit à l’intérieur du
Cela importe la police spécifiée dans le Fichier attribut et lui donne le nom Mince. Notez que cela n'en fait pas la police par défaut pour toute la page. Si vous voulez utiliser cette police, vous devez utiliser son nom (Mince) sur le texte spécifique auquel vous souhaitez l'appliquer.
Vous pouvez télécharger la police à partir du référentiel du tutoriel GitHub. Après cela, créez un actifs / polices / robot dossier dans le répertoire du projet racine et mettez le .ttf déposer dedans.
Si vous souhaitez utiliser une autre police, vous pouvez la télécharger à partir de dafont.com. C'est là que j'ai téléchargé la police pour cette application.
Ensuite, nous voulons utiliser des icônes dans l'application. Fuse n'a pas vraiment d'éléments intégrés et d'icônes qui vous permettent de le faire. Ce qu'il offre est un moyen d'inclure les polices d'icônes existantes dans votre application. Les polices d'icônes étant essentiellement des polices, nous pouvons utiliser la même méthode pour inclure des polices:
Vous pouvez télécharger la police icon depuis le dépôt GitHub ou la télécharger directement depuis fontawesome.com. Notez que toutes les icônes de fontawesome ne sont pas gratuites, il est donc préférable de vérifier la page d’icônes avant de l’utiliser. Si vous voyez une étiquette "pro" à côté de l'icône, vous ne pouvez pas simplement l'utiliser dans votre projet sans payer..
Ensuite, nous devons inclure le fichier JavaScript pour cette page. Nous pouvons le faire en utilisant le
N'oubliez pas de créer le scripts /MainView.js fichier à la racine du répertoire du projet.
Pour optimiser la réutilisation du code, Fuse nous permet de créer des composants personnalisés à partir de composants existants. Dans le code ci-dessous, nous utilisons un div qui agit comme un conteneur pour d’autres éléments. Dans ce cas, nous l'utilisons comme composant réutilisable pour créer un bouton.
Le fusible est livré avec de nombreux éléments. Il existe des éléments pour la mise en forme du contenu tels que le
Pour créer un composant réutilisable, ajoutez un ux: classe propriété à un élément de présentation que vous souhaitez utiliser comme base. Dans ce cas, nous utilisons un Marge ajoute de l'espace en dehors du conteneur. Ici, nous n'avons spécifié qu'une seule valeur. Cette marge est donc appliquée de tous les côtés du panneau.. Couleur ajoute une couleur de fond à l'élément:
À l'intérieur de
À l'intérieur de ux: propriété. Vous pouvez ensuite afficher la valeur fournie à la propriété en utilisant ReadProperty PropertyName, où Nom de la propriété est la valeur que vous avez fournie à ux: propriété. Cela vous permettra de fournir un Texte propriété chaque fois que vous utilisez le
Ensuite, nous voulons offrir à l'utilisateur une sorte de retour d'informations pendant que le bouton est enfoncé. Nous pouvons le faire via des déclencheurs et des animateurs. Les déclencheurs sont essentiellement les écouteurs d'événements - dans ce cas, dix% plus grand que sa taille originale et changer de couleur. Durée et DuréeRetour vous permet de spécifier le temps nécessaire à l'animation pour atteindre son apogée et atteindre sa fin.
Ensuite, nous créons le
Le premier est le ux: nom propriété. Cela nous permet de donner un nom à un élément spécifique afin de pouvoir y faire référence ultérieurement. Dans ce cas, nous l’utilisons pour changer sa Couleur propriété pendant que le bouton est enfoncé.
Nous avons également utilisé un élément conditionnel appelé est en cours d'exécution est un faux. Nous fournirons la valeur de cette variable une fois que nous aurons atteint la partie JavaScript. Pour l'instant, sachez que cette variable indique si le chronomètre est en cours d'exécution ou non.
Texte de lecture
Nous pouvons maintenant procéder avec le contenu principal. Tout d’abord, nous emballons tout dans un
Dans le code ci-dessus, nous avons utilisé quatre valeurs pour le Marge. Contrairement à CSS, la répartition des valeurs est la gauche, en haut, à droite, en bas. Si seules deux valeurs sont spécifiées, il s'agit de gauche à droite, de haut en bas. Vous pouvez utiliser l'outil de sélection de Fuse Studio pour visualiser les marges appliquées..
Ensuite, nous ajoutons une image de fond pour la page. Cela accepte le chemin du fichier vers l'image d'arrière-plan que vous souhaitez utiliser. UNE StretchMode de Remplir permet à l’arrière-plan de s’étirer pour remplir tout l’écran:
Vous pouvez télécharger l'image de fond que j'ai utilisée à partir du référentiel du tutoriel GitHub. Ou vous pouvez trouver des modèles similaires sur le site Web de Toptal.
Ensuite, affichez le nom de l'application. En dessous, le champ de texte écoulé. Ce texte doit être mis à jour fréquemment, nous devons donc le transformer en une variable pouvant être mise à jour via JavaScript. Pour afficher du texte initialisé dans le fichier JavaScript de cette page, vous devez placer le nom de la variable entre accolades. Plus tard, vous verrez comment la valeur de cette variable est fournie à partir du fichier JavaScript:
temps écoulé
Ensuite, nous utilisons le &#X comme préfixe. Lorsque vous appuyez sur ce bouton (appelé Cliqué), la addLap () La fonction déclarée dans le fichier JavaScript est exécutée:
Dans Font Awesome, vous pouvez trouver le unicode de la police de l'icône sur sa propre page..
Juste en dessous du bouton permettant d'ajouter un nouveau tour se trouve un texte indiquant que le bouton ci-dessus sert à ajouter de nouveaux tours:
Ensuite, montrez le bouton pour démarrer et arrêter le chronomètre. Ceci exécute aussi une fonction que nous déclarerons plus tard:
Ensuite, nous devons sortir les tours ajoutés par l'utilisateur. Cela inclut le nombre de tours, la distance parcourue et le temps passé. le
Dans le code ci-dessus, nous utilisons le Alignement propriété.
Nous sommes maintenant prêts à ajouter le code JavaScript. Dans Fuse, JavaScript est principalement utilisé pour la logique métier et utilise les fonctionnalités natives du périphérique. Les effets, transitions et animations permettant d'interagir avec l'interface utilisateur sont déjà gérés par le balisage UX.
Commencez par importer toutes les API dont nous avons besoin. Ceci comprend Observable, qui est principalement utilisé pour l'affectation de variables dans l'interface utilisateur. Ces variables peuvent ensuite être mises à jour à l'aide de JavaScript. Minuteur est l'équivalent de la setTimeout et setInterval fonctions dans la version Web de JavaScript. Géolocalisation nous permet d'obtenir l'emplacement actuel de l'utilisateur:
Accentsconagua
var Observable = require ("FuseJS / Observable"); var Timer = require ("FuseJS / Timer"); var GeoLocation = require ("FuseJS / GeoLocation");Ensuite, nous initialisons toutes les valeurs observables que nous utiliserons. Ce sont les variables que vous avez vues précédemment dans le balisage UX. Les valeurs de ces variables étant mises à jour tout au long de la vie de l'application, nous les transformons en une variable observable. Cela nous permet effectivement de mettre à jour le contenu de l'interface utilisateur chaque fois que l'une de ces valeurs change:
var time_elapsed = Observable (); // le texte du minuteur var toggle_btn_text = Observable (); // le texte du bouton pour démarrer et arrêter le chronomètre var is_running = Observable (); // si la minuterie est en cours d'exécution ou non var laps = Observable (); // les tours ajoutés par l'utilisateur
Après cela, nous pouvons maintenant définir les valeurs initiales pour le texte du bouton et du temporisateur:
toggle_btn_text.value = 'Démarrer'; // bascule le texte par défaut du bouton time_elapsed.value = "00:00:00"; // texte par défaut du timer
C'est ainsi que vous modifiez la valeur d'une variable observable. Étant donné que ceux-ci ne font partie d'aucune fonction, cela devrait mettre à jour l'interface utilisateur dès le lancement de l'application..
Définissez les valeurs initiales pour le chronomètre, le temps au tour et l'emplacement pour chaque tour:
var time = 0; // timer var lap_time = 0; // temps pour chaque tour var locations = []; // emplacement de l'utilisateur pour chaque tour
le basculer() Cette fonction est utilisée pour démarrer et arrêter le chronomètre. Lorsque le chronomètre est actuellement arrêté et que l'utilisateur appuie sur le bouton bascule, c'est la seule fois où nous réinitialisons les valeurs du chronomètre et des tours. C'est parce que nous voulons que l'utilisateur voie ces valeurs même après avoir arrêté le chronomètre.
Après cela, obtenez l’emplacement actuel de l’utilisateur et poussez-le sur le Emplacements tableau. Cela nous permet de le comparer au prochain emplacement plus tard, une fois que l'utilisateur ajoute un tour. Créez ensuite une minuterie qui s'exécute toutes les 10 millisecondes. Nous incrémentons à la fois le total temps et le chrono pour chaque exécution. Puis mettez à jour l’UI avec la valeur formatée en utilisant le formatTimer () une fonction:
function toggle () if (toggle_btn_text.value == 'Start') // le chronomètre est actuellement arrêté (vous pouvez également utiliser is_running) laps.clear (); // valeurs observables a une méthode clear () pour réinitialiser sa valeur time_elapsed.value = formatTimer (time); is_running.value = true; locations.push (GeoLocation.location); // récupère l'emplacement initial timer_id = Timer.create (function () time + = 1; // incrémenté toutes les 10 millisecondes lap_time + = 1; // temps actuel du tour time_elapsed.value = formatTimer (time); // met à jour l'interface utilisateur avec la chaîne de temps écoulé formatée, 10, true); else // suivant: ajout du code lorsque l'utilisateur arrête le chronomètre toggle_btn_text.value = (toggle_btn_text.value == 'Démarrer')? 'Stop': 'Démarrer';
Lorsque l’utilisateur arrête le chronomètre, nous le supprimons à l’aide du bouton effacer() méthode dans la minuterie. Cela nécessite la timer_id qui a été renvoyé lors de la création du minuteur:
Timer.delete (timer_id); // supprime la minuterie en cours // réinitialise le reste des valeurs time = 0; lap_time = 0; is_running.value = false;
Suivant est la fonction pour formater la minuterie. Cela fonctionne en convertissant les millisecondes en secondes et en minutes. Nous savons déjà que cette fonction est exécutée toutes les 10 millisecondes. Et le temps est incrémenté de 1 chaque fois qu'il s'exécute. Donc, pour obtenir les millisecondes, il suffit de multiplier le temps par dix. À partir de là, nous calculons simplement les secondes et les minutes en fonction de la valeur équivalente pour chaque unité de mesure:
fonction formatTimer (heure) pavé de fonction (d) retour (d < 10) ? '0' + d.toString() : d.toString(); var millis = time * 10; var seconds = millis / 1000; mins = Math.floor(seconds / 60); secs = Math.floor(seconds) % 60, hundredths = Math.floor((millis % 1000) / 10); return pad(mins) + ":" + pad(secs) + ":" + pad(hundredths);
Chaque fois que l'utilisateur appuie sur le bouton d'actualisation, le addLap () la fonction est exécutée. Cela ajoute une nouvelle entrée au-dessus de tours observable:
function addLap () if (time> 0) // n'est exécuté que lorsque le temporisateur est en cours d'exécution lap_time_value = formatTimer (lap_time); // formate le temps au tour actuel lap_time = 0; // réinitialiser le temps au tour var start_loc = locations [laps.length]; // récupère l'emplacement précédent var end_loc = GeoLocation.location; // récupère l'emplacement actuel locations.push (end_loc); // ajoute l'emplacement actuel var distance = getDistanceFromLatLonInMeters (start_loc.latitude, start_loc.longitude, end_loc.latitude, end_loc.longitude); // ajoute le nouvel élément en haut laps.insertAt (0, title: ("Lap" + (laps.length + 1)), time: lap_time_value, distance: distance.toString () + "m."); Voici la fonction pour obtenir la distance parcourue en mètres. Ceci utilise la formule Haversine:
fonction getDistanceFromLatLonInMeters (lat1, lon1, lat2, lon2) fonction deg2rad (deg) retour deg * (Math.PI / 180) var R = 6371; // rayon de la terre en km var dLat = deg2rad (lat2 - lat1); var dLon = deg2rad (lon2 - lon1); var a = Math.sin (dLat / 2) * Math.sin (dLat / 2) + Math.cos (deg2rad (lat1)) * Math.cos (deg2rad (lat2)) * Math.sin (dLon / 2) * Math.sin (dLon / 2); var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1 - a)); var d = (R * c) * 1000; // distance en m retour d;
N'oubliez pas d'exporter toutes les valeurs observables:
module.exports = toggle: toggle, toggle_btn_text: toggle_btn_text, is_running: is_running, time_elapsed: time_elapsed, tours: tours, addLap: addLap
Pour que les choses restent légères, Fuse n'inclut pas vraiment tous les paquets qu'il prend en charge par défaut. Pour des choses comme la géolocalisation et les notifications locales, vous devez dire à Fuse de les inclure lors de la création de l'application. Ouvrir StopWatch.unoproj à la racine de votre répertoire de projet et inclure Fuse.GeoLocation sous le Paquets tableau:
"Packages": ["Fuse", "FuseJS", "Fuse.GeoLocation" // ajouter ceci],
Cela devrait indiquer à Fuse d'inclure le package de géolocalisation lors de la création de l'application pour un aperçu personnalisé ou pour la création d'un programme d'installation..
Avant de pouvoir exécuter l'application sur votre appareil iOS, vous devez d'abord ajouter un identifiant d'ensemble à l'application. Ouvrez le Chronomètre.unoproj déposer et ajouter ce qui suit sous iOS. Ce sera l'identification unique de l'application lorsqu'elle sera soumise à l'App Store:
"Packages": [//…], "iOS": "BundleIdentifier": "com.yourname.stopwatch", "PreviewBundleIdentifier": "com.yourname.stopwatch.preview"
Ensuite, sur Xcode, connectez-vous avec votre compte de développeur Apple. Si vous n'en avez pas déjà un, vous pouvez aller sur le site Web du développeur Apple et en créer un. C'est en fait gratuit de développer et de tester des applications sur votre appareil iOS. Cependant, il existe certaines limitations si vous ne faites pas partie du programme de développement..
Une fois votre compte créé, accédez aux préférences Xcode et ajoutez votre compte Apple. Puis cliquez sur Gérer les certificats et ajouter un nouveau certificat pour le développement iOS. Ce certificat est utilisé pour garantir que l'application provient d'une source connue..
Une fois que cela est fait, vous devriez maintenant pouvoir exécuter l'application sur votre appareil. Cliquer sur Aperçu > Aperçu sur iOS dans Fuse Studio et attendez le lancement de Xcode. Une fois Xcode ouvert, sélectionnez votre appareil et cliquez sur le bouton de lecture. Cela construira l'application et l'installera sur votre appareil. S'il y a une erreur de construction, il est fort probable que l'identifiant de l'ensemble de prévisualisation n'est pas unique:
Changer le Identifiant de paquet à quelque chose d'unique devrait résoudre le problème. Une fois que l'erreur sous la section de signature disparaît, cliquez à nouveau sur le bouton de lecture pour reconstruire l'application. Cela devrait installer l'application sur votre appareil.
Cependant, vous ne pourrez pas ouvrir l'application avant de l'avoir approuvée. Vous pouvez le faire sur votre appareil iOS en allant à Réglages > Général > Gestion d'appareils et en sélectionnant l'email associé à votre compte développeur Apple. Approuvez-le et cela devrait déverrouiller l'application.
Pour Android, vous devriez pouvoir prévisualiser l'application sans aucune étape supplémentaire..
C'est tout! Dans ce tutoriel, vous avez appris les bases de la création d'une application à l'aide du cadre Fuse. Plus précisément, vous avez créé une application chronomètre. En créant cette application, vous avez appris à travailler avec UX Markup de Fuse et quelques-unes des API JavaScript de Fuse. Vous avez également appris à utiliser Fuse Studio pour prévisualiser l'application sur votre ordinateur et votre téléphone tout en la développant..
