Share
Ce que vous allez créerLa smartwatch de Pebble existe depuis la campagne très réussie de Kickstarter en 2012 et est un choix populaire parmi les utilisateurs de smartwatch. Cela s'explique par son excellente autonomie, son prix bas, son choix de modèles et sa compatibilité avec iOS et Android..
Depuis le premier jour, Pebble dispose d’un SDK de développement qui encourage les développeurs à créer des applications intéressantes et innovantes pour la plate-forme Pebble. Le SDK a toujours été mis à jour et de nouvelles fonctionnalités ont été ajoutées au fil du temps..
Les applications de Pebble ont toujours été codées en C, mais récemment, Pebble a adopté JavaScript et ouvert le monde du développement d'applications sur leur plate-forme à encore plus de développeurs. Dans cette introduction au développement de Pebble, je vais vous expliquer les bases du développement de Pebble à l'aide du SDK et de la bibliothèque Pebble.js en créant une application et en la soumettant au magasin d'applications Pebble..
Posséder un Pebble ou une connaissance préalable du langage C n'est pas nécessaire pour ce tutoriel..
Il existe actuellement deux environnements dans lesquels vous pouvez créer des applications Pebble. CloudPebble permet de développer des applications Pebble dans le navigateur. C'est très bien si vous utilisez Windows ou utilisez une machine moins puissante..
L’autre option, et celle que ce tutoriel va suivre, consiste à disposer du flux de travail de développement localement. Cela vous permet de travailler hors ligne et d'utiliser un éditeur de votre choix. Commençons par installer l'outil Pebble et le SDK.
Actuellement, l'outil Pebble et le SDK sous Windows n'étant pas officiellement pris en charge, la section suivante vous guide tout au long de la procédure d'installation de l'outil Pebble et du SDK sous OS X et Linux. Pebble vous recommande d’utiliser CloudPebble pour le développement sur Windows, mais vous pouvez également utiliser une machine virtuelle Linux..
Le moyen le plus simple d'installer l'outil Pebble sur OS X consiste à utiliser Homebrew. Si Homebrew n'est pas installé, vous pouvez obtenir les instructions d'installation sur le site Web Homebrew. Avec Homebrew installé, vous pouvez installer l'outil Pebble à l'aide de la commande suivante:
brasser installer galets / galets-sdk / galets-sdk
Il y a quelques étapes supplémentaires à suivre pour installer l'outil Pebble et le SDK sous Linux. Pebble a un guide détaillé disponible que vous pouvez suivre. Une fois que vous avez installé l'outil Pebble, vous aurez le caillou commande disponible pour vous à partir de la ligne de commande. Fonctionnement galet --version affiche les informations de version.
$ ~ pebble --version Pebble Tool v4.2.1
le caillou L'interface de ligne de commande comprend plusieurs commandes pratiques. Vous pouvez lister ces commandes en lançant galet - aide ou caillou -h. Une des commandes configure un nouveau projet avec du code standard. Créez un nouveau répertoire et exécutez la commande suivante à la racine du nouveau répertoire:
caillou nouveau projet bonjour caillou
Si vous créez une application Pebble pour la première fois, vous êtes invité à accepter les conditions d'utilisation et la licence de développeur Pebble. Une fois que vous les avez acceptés, le dernier SDK de Pebble (3.11.1 au moment de la rédaction) est téléchargé et installé..
Après l’installation du SDK Pebble, un projet Pebble de base est configuré dans le répertoire en cours. Pour créer, installer et exécuter votre application, vous devez procéder comme suit. Tout d’abord, assurez-vous d’être à la racine de votre projet Pebble. Dans ce cas, nous sommes à la racine du bonjour caillou annuaire.
Ensuite, lancez le construction en galets commander. Lorsque le code est compilé, vous devriez voir le message 'build' s'est terminé avec succès et un certain nombre de nouveaux fichiers dans le répertoire de construction. Le seul fichier dont nous devons nous préoccuper maintenant est bonjour-galet.pbw. Ceci est votre application qui sera installée sur la montre.
Pour exécuter l'application, nous utilisons l'émulateur Pebble fourni avec le SDK Pebble. Pebble utilise l'émulateur open source QEMU. Actuellement, trois générations de Pebble sont disponibles pour le développement. Pebble et Pebble Steel sont la génération originale de Pebble. Pebble Time prend en charge 64 couleurs et utilise la version 3.x légèrement plus récente du système d'exploitation..
Pebble Time Round est presque identique à Pebble Time à l'exception de l'affichage circulaire et plus grand. Pebble utilise des noms de plates-formes pour différencier les trois générations de smartwatches Pebble.
Nous pouvons lancer n'importe lequel de ces émulateurs en utilisant le --émulateur drapeau après le installation de galets commande, en passant la plate-forme que nous voulons cibler. Par exemple, si nous voulions exécuter notre application sur la plateforme pour Pebble Time, nous exécuterions la commande suivante dans le répertoire racine du projet Pebble:
galet installer - émulateur basalte
Cette commande lance l’émulateur, lance la plate-forme sélectionnée et installe le .pbw fichier stocké dans le répertoire de construction. Voici ce que vous devriez voir dans l'émulateur:
La montre Pebble n’a pas d’écran tactile et est livrée avec quatre boutons, en haut, vers le bas, sélectionner, et retour. Ceux-ci sont imités avec le en haut, vers le bas, droite, et la gauche touches de votre clavier, respectivement. En appuyant sur ces touches, vous pouvez naviguer dans l'application que vous avez créée..
Si nous ouvrons le code source du projet, vous verrez qu'il est écrit en C. Afin d'utiliser Pebble.js pour le projet, nous allons utiliser un modèle qui puisse nous permettre de démarrer plus rapidement. Pebble.js est toujours en version bêta au moment de la rédaction, de sorte que certaines choses peuvent encore changer à l'avenir..
Quittez le répertoire du projet, créez un nouveau répertoire et clonez le référentiel GitHub comme indiqué ci-dessous.
mkdir hello-pebblejs cd hello-pebblejs clone de git https://github.com/pebble/pebblejs .
Une fois le référentiel cloné, ouvrez-le dans un éditeur de texte et jetez un coup d'œil autour de vous. Le code source de l’application se trouve dans le répertoire src annuaire. Dans ce répertoire, vous avez trois autres répertoires, js, simplement, util, et un principal c fichier.
le js Le répertoire est l'endroit où nous mettons le code de l'application. le simplement répertoire est où le code natif est que les fonctions JavaScript accéder et la util Le répertoire contient plus de code natif que nous n'avons pas besoin de toucher. Le point d'entrée de l'application va vivre dans js / app.js. Si nous construisons et exécutons cette application, vous devriez voir le résultat suivant dans l'émulateur:
Ouvrir js /app.js, regardez autour de vous, puis supprimez ce fichier. Nous allons partir de zéro.
La première chose à apprendre est comment afficher du texte à l'écran. Pebble.js dispose d’un framework d’interface utilisateur pour l’instanciation Éléments. Avec ce cadre, vous pouvez créer des éléments, tels que du texte, des rectangles et des images. Ajouter la ligne suivante à app.js d'exiger le cadre.
Accentsconagua
var UI = require ('ui');Le premier élément que nous allons utiliser dans ce tutoriel est La fenêtre. Windows sont les principaux éléments constitutifs des applications Pebble. Il y a trois types de fenêtres.
Carte peut être utilisé pour afficher du texte de manière préformatée, comme un titre en haut, un sous-titre en dessous et une zone de corps pour du texte.Menu est utilisé pour afficher une liste d'options.La fenêtre est le plus flexible et vous permet d’y ajouter divers éléments.Pour ajouter du texte à une fenêtre, nous avons également besoin de Vecteur2, un module pour dessiner des vecteurs 2D et celui avec lequel vous seriez familier si vous aviez déjà utilisé quelque chose avec three.js ou toute autre bibliothèque de dessin vectoriel.
Notre premier objectif est de créer une fenêtre, de créer et d’ajouter du texte à cette fenêtre et de l’afficher à l’utilisateur. L'extrait suivant est le minimum requis pour afficher du texte à l'écran.
var UI = require ("ui"); var Vector2 = require ("vector2"); // Ceci est notre fenêtre principale var main = new UI.Window (); // Ceci est notre contenu texte var textfield = new UI.Text (size: new Vector2 (144, 60), text: 'Hello PebbleJS'); // ajoute le texte à la fenêtre main.add (textfield); // affiche la fenêtre main.show ();Générez le projet et installez l'application pour voir le résultat. Plutôt que de faire les deux étapes séparément, je préfère enchaîner les commandes et exécuter la commande suivante:
caillou construire && caillou installer - émulateur basalte
Si vous souhaitez tester simultanément sur les trois plates-formes, vous pouvez ajouter les commandes d'installation pour chaque émulateur:
cailloux construire && caillou installer - émulateur basalte && caillou installer - émulateur aplite && caillou installer - émulateur craie
Vous remarquerez que aplite et basalte regarder presque identique tandis que craie ça n'a pas l'air bien. Ceci est dû à l'écran rond et aux dimensions de l'écran. Nous allons discuter de la détection de plate-forme dans un instant. Pour l'instant, nous allons de l'avant avec certaines des fonctionnalités de base.
Dans l'extrait de code ci-dessus, nous créons un Texte élément utilisant le Texte() méthode. L'instanciation de Texte() prend un objet en tant que paramètre pour configurer le Texte élément. le Taille clé définit la taille d’un rectangle (défini par un Vecteur2 exemple) dans lequel le Texte l'élément est dessiné. La valeur de la texte key contient la chaîne que nous voulons afficher. Nous ajoutons ensuite le Texte élément du La fenêtre avant d'appeler spectacle() sur la fenêtre pour l'afficher.
Jusqu'à présent, votre application utilise les paramètres par défaut pour La fenêtre et Texte. Cependant, nous avons la possibilité de les personnaliser. Nous avons le contrôle pour changer la position, la couleur et la taille de la police. Quelques polices système sont disponibles et vous avez même la possibilité de charger des polices personnalisées que vous pouvez utiliser dans votre application..
Notre application va compter jusqu'à une certaine date. Lorsque l'application démarre, nous voulons qu'elle prenne la date du jour et calcule combien de jours il reste jusqu'à une date donnée dans le futur. Disons, par exemple, je voulais une application qui me dise combien de jours il faudra avant que Star Wars, Episode VIII ne soit là.
Je sais que je veux créer mon principal La fenêtre au démarrage de l'application, calculez le nombre de jours restants jusqu'au 15 décembre 2017, puis ajoutez ce nombre à mon écran au centre. Rien trop de fantaisie.
Commençons par montrer un numéro statique, pas trop différent du code actuel "Hello PebbleJS" que nous avons écrit. Au lieu de cela, nous utilisons une variable comme valeur de la texte clé et ajouter une nouvelle clé, textAlign, centrer le texte.
var UI = require ('ui'); var Vector2 = require ('vector2'); var daysRemaining = "400"; var main = new UI.Window (); var text = new UI.Text (taille: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center'); // ajoute le texte à la fenêtre main.add (text); // affiche la fenêtre main.show ();Exécuter l'application vous donne la sortie indiquée ci-dessous.
Comme je l'ai expliqué précédemment, un certain nombre de polices système sont disponibles. Pour ce tutoriel, nous allons nous en tenir à l’une des polices système., Bitham 42 Gras, et placez-le un peu plus près du centre de l'écran, horizontalement et verticalement. le Police de caractère option prend la chaîne de la police que vous souhaitez utiliser comme référence dans la documentation. La position est déterminée par un autre Vecteur2 exemple, qui définit le Texteposition horizontale et verticale de.
Changer la TexteLa configuration est comme ceci:
var text = new UI.Text (taille: nouveau Vector2 (144, 168), texte: daysRemaining, textAlign: 'center', position: nouveau Vector2 (0, 50), police: 'BITHAM_42_BOLD');
Vous devriez maintenant avoir quelque chose qui ressemble à ce qui suit:
Remplaçons la valeur codée en dur par le nombre correct de jours. Lorsque nous avons cloné le projet à partir de GitHub, nous avons obtenu tous les fichiers nécessaires pour accéder aux API de l'appareil et à divers autres utilitaires afin de créer une application Pebble avec JavaScript. L’un de ces utilitaires est la bibliothèque moment.js, que vous pouvez trouver dans la vendeur annuaire. Cela facilitera le calcul.
Exiger moment.js dans l'application et définissez le Jours restant variable à une fonction avec l'implémentation suivante:
var moment = require ('vendeur / moment'); var daysRemaining = function () var eventdate = moment ("2017-12-15"); // C'est la date du compte à rebours jusqu'au - 15 décembre var todaysdate = moment (); // Une instance de moment de todaysdate return eventdate.diff (todaysdate, 'days'); // calcule la différence en jours. Ensuite, changez la référence en Jours restant à un appel de fonction comme ceci:
var text = new UI.Text (taille: new Vector2 (144, 168), text: daysRemaining (), // Ceci est maintenant un appel de fonction textAlign: 'center', position: new Vector2 (0, 50), font : 'BITHAM_42_BOLD');
Si vous compilez et exécutez l'application, vous devriez voir le nombre correct de jours jusqu'à ce que Star Wars, Episode VIII soit publié. Nous pourrions laisser cela ici et avoir une application qui indique simplement le nombre de jours jusqu'à l'événement que nous voulons suivre, mais pourquoi ne pas en profiter pour ajouter quelques fonctionnalités à l'application.
Commençons par changer la couleur de fond du La fenêtre et la couleur du texte de sorte que le fond soit blanc et que le texte soit plus sombre.
var main = new UI.Window (backgroundColor: 'white'); var text = new UI.Text (taille: nouveau Vector2 (144, 168), texte: daysRemaining (), textAlign: 'center', position: nouveau Vector2 (0, 50), police: 'BITHAM_42_BOLD', couleur: ' noir' );
Et ajoutons un autre Texte élément pour indiquer ce que le nombre représente. Nous créons un nouveau Texte élément et passez les options pour la taille, la position, la police, etc..
var eventDetail = new UI.Text (taille: nouveau Vector2 (144, 168), texte: 'Episode VIII', textAlign: 'centre', position: nouveau Vector2 (0, 15), police: 'GOTHIC_24', couleur: 'noir' );
Ensuite, nous ajoutons le Texte élément de la fenêtre principale après l'ajout de la texte objet.
main.add (texte) main.add (eventDetail);
Enfin, ajoutons un troisième Texte élément pour indiquer que le compte à rebours est en jours.
var daysText = new UI.Text (taille: new Vector2 (144, 168), texte: 'days', textAlign: 'center', position: new Vector2 (0, 100), police: 'GOTHIC_24', couleur: ' noir' ); main.add (daysText);
Pour naviguer, Pebble utilise des boutons matériels par opposition à un écran tactile, présent sur la plupart des autres montres intelligentes. Nous pouvons ajouter la possibilité de permettre à l'utilisateur de plonger plus profondément dans notre application en utilisant ces entrées. Supposons, par exemple, que nous voulions également afficher la date de sortie des autres films à venir de la franchise Star Wars. Rogue One est sorti cette année et il y a déjà une date de sortie pour Episode IX.
L'interaction avec les boutons déclenche des événements auxquels nous pouvons nous abonner. Lorsqu'un événement est détecté, nous pouvons décider des actions à prendre. Si l'utilisateur clique vers le bas, nous pourrions créer un nouveau La fenêtre pour conserver la date de sortie de Rogue One et afficher le nombre de jours jusqu'à la sortie de ce film.
Abonnons-nous au bouton bas et construisons un nouveau La fenêtre. le sur() méthode prend trois paramètres, l'action, le bouton et un gestionnaire. Comme mentionné précédemment, les valeurs possibles du deuxième paramètre sont en haut, vers le bas, sélectionner, ou retour. L'action est généralement Cliquez sur, mais vous avez également la possibilité d'utiliser clic long.
main.on ('click', 'down', function () var ro = nouvelle UI.Window (); console.log ('Down Clicked'); ro.show (););Exécutez l'application et vous remarquerez que vous obtenez un écran noir lorsque vous cliquez vers le bas. Vous vous demandez peut-être comment vous pouvez accéder à la console pour voir les journaux de Pebble.
Lorsque l'application est en cours d'exécution, nous pouvons lui associer une autre console et obtenir les journaux en exécutant bûches de galets - émulseur basalte. Remplacez le nom de l'émulateur si vous utilisez l'un des autres émulateurs. Vous pouvez maintenant voir que les journaux de la console Bas cliqué quand le bouton bas est cliqué.
journaux de galets --emulator basalt [06:33:11] javascript> bas cliqué [06:33:11] javascript> (+) [fenêtre 2]: [fenêtre 1], [fenêtre 2]
Comme précédemment, calculons le nombre de jours jusqu'à la publication et affichons ces informations à l'utilisateur. Pour utiliser la fonction de calcul de la date, je vais passer à la date en tant que paramètre. Nous ne voulons pas dupliquer le code.
var daysRemaining = function (dateString) var eventdate = moment (dateString); var todaysdate = moment (); return eventdate.diff (todaysdate, 'days');
main.on ('clic', 'bas', fonction () var ro = nouvelle UI.Window (); console.log ('bas cliqué'); var ro = nouvelle UI.Window (); var roCount = nouvelle UI.Text (taille: nouveau Vector2 (144, 168), texte: daysRemaining ("2016-12-16"), textAlign: 'center', position: new Vector2 (0, 50), police: 'BITHAM_42_BOLD', color event: "white"; var eventDetail = new UI.Text (taille: nouveau Vector2 (144, 168), texte: "Rogue One", textAlign: "centre", position: nouveau Vector2 (0, 15), police: 'GOTHIC_24', couleur: 'blanc'); var roDays = nouvelle UI.Text (taille: nouveau Vector2 (144, 168), texte: 'jours', textAlign: 'centre', position: nouveau Vector2 ( 0, 100), police: 'GOTHIC_24', couleur: 'blanc'); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.show ( ););Si vous le souhaitez, vous pouvez également ajouter un écran pour Episode IX. Je vais laisser cela comme un défi pour vous d'essayer vous-même.
Nous devrions résoudre le problème d'affichage pour les utilisateurs avec un tour d'horizon de Pebble. Pour ce faire, nous devons détecter la plate-forme sur laquelle ils se trouvent et mettre à jour l'interface utilisateur en conséquence..
Dans votre application, vous avez accès à un objet global, Caillou. Cet objet a quelques fonctions que nous pouvons utiliser, l’une d’elles étant getActiveWatchInfo (), qui retourne un objet avec les informations d'exécution de la plateforme.
Nous pouvons obtenir le nom de la plateforme en utilisant le Plate-forme clé. Si la plate-forme est égale à craie, nous devons faire quelques ajustements à l'interface utilisateur.
Au sommet de app.js, nous récupérons les informations de surveillance d'action et vérifions si le nom de la plate-forme actuelle est identique craie.
var info = Pebble.getActiveWatchInfo (); // Renvoie les informations de surveillance var platform = info.platform; // retourne une chaîne du nom de la plateforme var isChalk = plateforme === 'craie';
Si vous exécutez votre application sur la plate-forme Chalk, vous devriez voir ce qui suit:
Partout où nous dimensionnons et positionnons des éléments d'interface utilisateur, nous devons apporter de petites modifications pour prendre en charge l'écran rond de la plate-forme Chalk. Pour commencer, nous créons une variable qui contient la largeur de l'écran.
var sWidth = isChalk? 180: 144;
Pebble Time Round a un affichage de 180px x 180px. Cela signifie que nous devons modifier la coordonnée X de la Vecteur objets. Nous créons trois variables pour nous aider avec ceci.
var countPosition = isChalk? 65: 50; var daysPosition = isChalk? 120: 100; var titlePosition = isChalk? 25: 15;
Le code final ressemblera à ceci:
var UI = require ("ui"); var Vector2 = require ("vector2"); var moment = require ("moment"); var info = Pebble.getActiveWatchInfo (); var platform = info.platform; var isChalk = plate-forme === "craie"; var sWidth = isChalk? 180: 144; var countPosition = isChalk? 65: 50; var daysPosition = isChalk? 120: 100; var titlePosition = isChalk? 25: 15; var daysRemaining = function (dateString) var eventdate = moment (dateString); // C'est la date à laquelle nous "comptons jusqu'au 24 avril var. Todaysdate = moment (); // une instance de moment de todaysdate var difference = eventdate.diff (todaysdate," days "); return difference; var main = new UI.Window (backgroundColor: "white"); var text = new UI.Text (taille: nouveau Vector2 (sWidth, 168), texte: daysRemaining ("2017-12-15"), textAlign: "center ", position: nouveau Vector2 (0, countPosition), police:" BITHAM_42_BOLD ", couleur:" noir "); // texte de détail de l'événement var eventDetail = new UI.Text (taille: nouveau Vector2 (sWidth, 168), text: "Episode VIII", textAlign: "center", position: new Vector2 (0, titlePosition), police: "GOTHIC_24", couleur: "black") // Texte de détail de l'événement var daysText = new UI.Text ( taille: nouveau Vector2 (sWidth, 168), texte: "jours", textAlign: "centre", position: nouveau Vector2 (0, daysPosition), police: "GOTHIC_24", couleur: "noir") // ajout du texte à la fenêtre main.add (texte); main.add (eventDetail); main.add (daysText); // affiche la fenêtre main.show (); // fenêtre ROGUE 1 main.on ("click", "dow n ", function () var ro = new UI.Window (); var roCount = new UI.Text (taille: nouveau Vector2 (sWidth, 168), texte: daysRemaining ("2016-12-16"), textAlign: "center", position: nouveau Vector2 (0, countPosition), police: "BITHAM_42_BOLD", couleur: "blanc"); var eventDetail = new UI.Text (taille: nouveau Vector2 (sWidth, 168), texte: "Rogue One", textAlign: "centre", position: nouveau Vector2 (0, titlePosition), police: "GOTHIC_24", couleur: "blanc") var roDays = nouvelle UI.Text (taille: nouveau Vector2 (sWidth, 168), texte: "jours", textAlign: "centre", position: nouveau Vector2 (0, daysPosition), police: "GOTHIC_24 ", Couleur blanche" ); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.on ("click", "down", function () var nine = nouvelle UI.Window (backgroundColor: "white"); var nineCount = nouvelle UI.Text (size: new Vector2 (sWidth, 168 ), text: daysRemaining ("2019-05-24"), textAlign: "center", position: nouveau Vector2 (0, countPosition), police: "BITHAM_42_BOLD", couleur: "noir"); var eventDetail = new UI .Text (taille: nouveau Vector2 (sWidth, 168), texte: "Episode IX", textAlign: "centre", position: nouveau Vector2 (0, titlePosition), police: "GOTHIC_24", couleur: "noir") var nineDays = new UI.Text (taille: new Vector2 (sWidth, 168), texte: "days", textAlign: "center", position: new Vector2 (0, daysPosition), police: "GOTHIC_24", couleur: " black "); neuf.add (neufCompte); neuf.add (neuf jours); neuf.add (événementDetail); nine.show ();); );Je suis sûr que vous êtes d'accord pour dire qu'il y a encore beaucoup à faire. Nous dupliquons le code à différents endroits, ce qui n’est pas une bonne pratique. Cela dit, j'espère que vous comprenez maintenant comment créer des applications pour Pebble à l'aide de JavaScript et du SDK de Pebble..
Dans la dernière partie de ce didacticiel, je voudrais vous montrer comment télécharger notre application sur la boutique d'applications Pebble..
Avant de télécharger l'application, il y a une chose dont nous devons nous occuper. Comme nous avons lancé cette application à partir d’un modèle, quelques détails se trouvent dans appinfo.json, le manifeste pour notre application, que nous devons changer. Vous pouvez trouver ce fichier à la racine du projet. Ouvrir appinfo.json et changer le Nom de la compagnie, nom court, et nom long valeurs.
La dernière chose dont nous avons besoin est un UUID (identificateur unique universel). Le manifeste en contient déjà un, mais lorsque vous essayez de télécharger le .pbw fichier dans l'App Store, vous obtiendrez une erreur car cet UUID est déjà utilisé.
Le moyen le plus simple d’en obtenir un est de le reprendre de l’original. bonjour caillou nous avons créé l'application au début de ce didacticiel, car nous ne téléchargerons pas cette application sur l'App Store. Si vous avez supprimé le projet, créez un nouveau projet et copiez l'UUID à partir de ce projet. Une fois que c'est fait, créez une nouvelle construction.
Nous avons maintenant une application prête à être téléchargée sur l'appli Pebble. Rendez-vous sur le portail de développement Pebble et enregistrez-vous pour un compte ou connectez-vous si vous en avez déjà un. Une fois que vous êtes connecté, cliquez sur le lien qui dit Publier une application Pebble.
Sur la page suivante, choisissez Créer un Watchapp au fond.
Le formulaire de la page suivante semble un peu intimidant, mais les champs sont assez explicites. Pour terminer la soumission, vous devez télécharger au moins deux ressources, qui sont toutes deux des icônes pour votre application..
Après cette étape, vous accédez à l'aperçu de la boutique d'applications avec des données d'application du côté droit. Il est nécessaire que vous ajoutiez une date de publication pour votre application. Pour ce faire, cliquez sur Ajouter un communiqué et télécharger le .pbw fichier que vous pouvez trouver dans le dossier de construction de votre projet.
Une fois que cela est fait, vous revenez à l'écran de synthèse et au .pbw le fichier est vérifié. Cela ne prend généralement que quelques secondes. Une fois vérifiée, l'application est prête pour la publication. Si vous rencontrez des problèmes ici et que la vérification échoue, vous recevez un message utile expliquant pourquoi la vérification a échoué..
Avant de vous lancer et frapper le Publier bouton, vous pouvez ajouter des captures d’écran pour que les utilisateurs sachent à quoi s’attendre après l’avoir installé. Ces images sont affichées dans l'aperçu de l'App Store..
L'outil CLI de Pebble offre une méthode simple et efficace pour prendre des captures d'écran. Fonctionnement galet capture d'écran FILENAME prendre une capture d'écran de l'émulateur en cours d'exécution et l'enregistrer dans le répertoire en cours.
Après avoir téléchargé les captures d'écran et rempli la description des différentes plateformes, vous êtes prêt à publier votre première application Pebble..
Dans cet article, vous avez appris à installer et configurer le SDK Pebble, à utiliser certaines des commandes de base de Pebble CLI et à créer une application de base à l'aide de JavaScript. Il va sans dire que nous n'avons fait qu'effleurer ce tutoriel. Il y a encore beaucoup à apprendre, non seulement sur l'écriture d'applications Pebble avec JavaScript, mais également sur le développement de Pebble en général et les outils à votre disposition..
