Share
Wat je gaat creërenDe Pebble-smartwatch bestaat al sinds de zeer succesvolle Kickstarter-campagne in 2012 en is een populaire keuze bij smartwatch-gebruikers. Dit komt door de uitstekende levensduur van de batterij, de lage prijs, verschillende modellen om uit te kiezen en compatibiliteit met zowel iOS als Android.
Pebble heeft sinds de eerste dag een SDK voor ontwikkelaars en moedigt ontwikkelaars aan om interessante en innovatieve toepassingen voor het Pebble-platform te bouwen. De SDK is altijd up-to-date gehouden, met nieuwe functies die in de loop van de tijd zijn toegevoegd.
Pebble-applicaties zijn van oudsher gecodeerd in C, maar sinds kort heeft Pebble JavaScript overgenomen en de wereld van app-ontwikkeling op hun platform geopend voor nog meer ontwikkelaars. In deze inleiding tot de ontwikkeling van Pebble loop ik door enkele basisprincipes van het starten met Pebble-ontwikkeling met behulp van de SDK en de Pebble.js-bibliotheek door een applicatie te bouwen en deze in te dienen bij de Pebble-toepassingswinkel.
Het bezit van een Pebble of enige eerdere kennis van de C-taal is niet vereist voor deze zelfstudie.
Er zijn momenteel twee omgevingen waarin u Pebble-toepassingen kunt bouwen. CloudPebble maakt het mogelijk om Pebble-apps in de browser te ontwikkelen. Dit is geweldig als u op Windows werkt of een minder krachtig apparaat gebruikt.
De andere optie en de optie die deze zelfstudie volgt, is om de ontwikkelingswerkstroom lokaal te hebben. Hiermee kunt u offline werken en een editor van uw keuze gebruiken. Laten we eerst de Pebble-tool en SDK installeren.
Op dit moment is er geen officiële ondersteuning voor de Pebble-tool en SDK op Windows, dus het volgende gedeelte beschrijft de stappen voor het installeren van de Pebble-tool en SDK op OS X en Linux. Pebble beveelt aan dat u CloudPebble voor ontwikkeling op Windows gebruikt, maar u kunt ook een virtuele Linux-machine gebruiken.
De eenvoudigste manier om de Pebble-tool op OS X te installeren, is via Homebrew. Als u Homebrew niet hebt geïnstalleerd, kunt u de installatie-instructies vinden op de Homebrew-website. Met Homebrew geïnstalleerd, kun je de Pebble-tool installeren met de volgende opdracht:
zet kiezel / pebble-sdk / pebble-sdk op brouwsel
Er zijn een paar extra stappen om de Pebble-tool en SDK op Linux te installeren. Pebble heeft een gedetailleerde gids beschikbaar die u kunt volgen. Nadat u de Pebble-tool hebt geïnstalleerd, heeft u de kiezelsteen commando beschikbaar voor u via de opdrachtregel. hardlopen kiezel - versie toont de versie-informatie.
$ ~ pebble --version Pebble Tool v4.2.1
De kiezelsteen opdrachtregelinterface bevat verschillende handige opdrachten. U kunt deze opdrachten weergeven door ze uit te voeren kiezel - hulp of kiezel -h. Een van de commando's stelt een nieuw project met wat boilerplate code in. Maak een nieuwe map en voer de volgende opdracht uit in de hoofdmap van de nieuwe map:
kiezel nieuw-project hallo-kiezelsteen
Als dit de eerste keer is dat u een Pebble-toepassing maakt, wordt u gevraagd de gebruiksvoorwaarden en de Pebble-ontwikkelaarslicentie te accepteren. Nadat u deze hebt geaccepteerd, wordt de nieuwste Pebble SDK (3.11.1 op het moment van schrijven) gedownload en geïnstalleerd.
Na het installeren van de Pebble SDK wordt een eenvoudig Pebble-project opgezet in de huidige map. Als u uw app wilt bouwen, installeren en uitvoeren, moet u het volgende doen. Zorg er eerst voor dat u in de root van uw Pebble-project bent. In dit geval zitten we in de root van de hello-pebble directory.
Voer vervolgens de kiezel bouwen commando. Wanneer de code is gecompileerd, zou u het bericht moeten zien 'build' is succesvol afgerond en een aantal nieuwe bestanden in de build-directory. Het enige bestand waarover we ons op dit moment zorgen moeten maken is hello-pebble.pbw. Dit is uw app die op het horloge wordt geïnstalleerd.
Om de app te gebruiken, gebruiken we de Pebble-emulator die wordt meegeleverd met de Pebble SDK. Pebble maakt gebruik van de open source QEMU-emulator. Momenteel zijn er drie generaties Pebble die beschikbaar zijn om voor te ontwikkelen. Pebble en Pebble Steel zijn de originele generatie van Pebble. De Pebble Time ondersteunt 64 kleuren en maakt gebruik van de iets nieuwere 3.x-versie van het besturingssysteem.
De Pebble Time Round is bijna identiek aan de Pebble Time, met uitzondering van het ronde en grotere display. Pebble gebruikt platformnamen om de drie generaties Pebble smartwatches te onderscheiden.
We kunnen een van deze emulators starten met behulp van de --emulator vlag na de kiezel installeren opdracht, passeren van het platform dat we willen richten. Als we bijvoorbeeld onze app op het platform voor de Pebble-tijd willen uitvoeren, voeren we de volgende opdracht uit in de hoofdmap van het Pebble-project:
kiezelinstallatie - basalt basismateriaal
Deze opdracht start de emulator, start het geselecteerde platform en installeert de .gd bestand opgeslagen in de build-map. Dit is wat u in de emulator zou moeten zien:
Het Pebble-horloge heeft geen touchscreen en wordt geleverd met vier knoppen, omhoog, naar beneden, kiezen, en terug. Deze worden geëmuleerd met de omhoog, naar beneden, rechts, en links toetsen op uw toetsenbord respectievelijk. Door op deze toetsen te drukken, kunt u door de gemaakte app navigeren.
Als we de broncode van het project openen, zie je dat het in C. is geschreven. Om Pebble.js voor het project te gebruiken, gaan we een sjabloon gebruiken waarmee we sneller kunnen beginnen. Pebble.js is nog steeds in bèta op het moment van schrijven, dus sommige dingen kunnen nog veranderen in de toekomst.
Verlaat de projectdirectory, maak een nieuwe map en kloon de GitHub-repo zoals hieronder wordt getoond.
mkdir hello-pebblejs cd hello-pebblejs git clone https://github.com/pebble/pebblejs .
Nadat je de repo hebt gekloond, open je deze in een teksteditor en kijk je rond. De broncode van de applicatie is te vinden in de src directory. In die map heb je drie andere mappen, js, eenvoudigweg, util, en een main.c het dossier.
De js directory is waar we de applicatiecode plaatsen. De eenvoudigweg directory is waar de native code is waar de JavaScript-functies toegang toe hebben en de util map bevat meer native code die we niet hoeven aan te raken. Het toegangspunt voor de applicatie zal gaan leven js / app.js. Als we deze applicatie bouwen en uitvoeren, zou u het volgende resultaat in de emulator moeten zien:
Open js /app.js, kijk rond en verwijder dit bestand. We beginnen helemaal opnieuw.
Het eerste dat we moeten leren, is hoe je tekst op het scherm kunt weergeven. Pebble.js heeft een gebruikersinterfacekader voor instantiëren Elements. Met dit kader kunt u elementen maken, zoals tekst, rechthoeken en afbeeldingen. Voeg de volgende regel toe aan app.js om het kader te eisen.
Accentsconagua
var UI = require ('ui');Het eerste element dat we in deze zelfstudie zullen gebruiken, is Venster. Windows zijn de belangrijkste bouwstenen van Pebble-toepassingen. Er zijn drie soorten vensters.
Kaart kan worden gebruikt om tekst op een vooraf geformatteerde manier weer te geven, zoals een titel bovenaan, een ondertitel eronder en een tekstgedeelte voor sommige tekst.Menu wordt gebruikt om een lijst met opties weer te geven.Venster is het meest flexibel en stelt u in staat er verschillende elementen aan toe te voegen.Om tekst aan een venster toe te voegen, hebben we dat ook nodig Vector2, een module voor het tekenen van 2D-vectoren en een module die je zou kennen als je iets hebt gedaan met three.js of een andere vectortekeningbibliotheek.
Ons eerste doel is om een venster te maken, tekst aan dat venster te maken en toe te voegen en dit aan de gebruiker weer te geven. Het volgende fragment is het minimum dat vereist is om tekst op het scherm weer te geven.
var UI = require ("ui"); var Vector2 = require ("vector2"); // Dit is ons hoofdvenster var main = new UI.Window (); // Dit is onze tekstinhoud var textfield = nieuwe UI.Text (size: new Vector2 (144, 60), text: 'Hello PebbleJS'); // voeg de tekst toe aan het venster main.add (textfield); // toon het venster main.show ();Bouw het project en installeer de applicatie om het resultaat te zien. In plaats van beide stappen afzonderlijk uit te voeren, geef ik er de voorkeur aan de opdrachten samen te ketenen en het volgende commando uit te voeren:
pebble build && pebble install - basalt basismodule
Als u tegelijkertijd op alle drie platforms wilt testen, kunt u de installatieopdrachten voor elke emulator toevoegen:
pebble build && pebble installeren --emulator basalt && pebble installeren --emulator aplite && pebble installeren --emulator krijt
Dat merk je aplite en bazalt zien er bijna identiek uit krijt ziet er niet al te goed uit. Dit komt door het ronde scherm en de afmetingen van het scherm. We zullen platformdetectie in een oogwenk bespreken. Voor nu gaan we verder met een deel van de basisfunctionaliteit.
In het bovenstaande codefragment maken we een Tekst element met behulp van de Tekst() methode. De instantiatie van Tekst() neemt een object als parameter om het te configureren Tekst element. De grootte toets definieert de grootte van een rechthoek (gedefinieerd door een Vector2 instantie) waarin de Tekst element is getekend. De waarde van de tekst sleutel bevat de string die we willen weergeven. Vervolgens voegen we de Tekst element voor de Venster voordat we bellen laten zien() in het venster om het weer te geven.
Tot nu toe gebruikt je app de standaardinstellingen voor Venster en Tekst. We hebben echter de mogelijkheid om ze aan te passen. We hebben de controle over het wijzigen van positie, kleur en lettergrootte. Er zijn een paar systeemlettertypen beschikbaar en je hebt zelfs de mogelijkheid om aangepaste lettertypen te laden die je in je app kunt gebruiken.
Onze app gaat aftellen naar een bepaalde datum. Wanneer de app wordt gestart, willen we dat deze de datum van vandaag overneemt en berekenen hoeveel dagen dit is tot een bepaalde datum in de toekomst. Laten we bijvoorbeeld zeggen dat ik een app wilde die me vertelde hoeveel dagen het zou duren tot Star Wars, Episode VIII is hier.
Ik weet dat ik mijn hoofd wil maken Venster wanneer de app start, bereken je het aantal resterende dagen tot 15 december 2017 en voeg je dat aantal toe aan mijn scherm in het midden. Niets bijzonders.
Laten we beginnen met het tonen van een statisch nummer, niet te verschillend van de huidige "Hello PebbleJS" code die we schreven. In plaats daarvan gebruiken we een variabele als de waarde van de tekst toets en voeg een nieuwe sleutel toe, textAlign, om de tekst te centreren.
var UI = require ('ui'); var Vector2 = require ('vector2'); var daysRemaining = "400"; var main = new UI.Window (); var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center'); // voeg de tekst toe aan het venster main.add (tekst); // toon het venster main.show ();Als u de app uitvoert, krijgt u de onderstaande uitvoer.
Zoals ik eerder heb uitgelegd, zijn er een aantal systeemlettertypen beschikbaar. Voor deze zelfstudie houden we vast aan een van de systeemlettertypen, Bitham 42 Vet, en plaats het iets dichter bij het midden van het scherm, zowel horizontaal als verticaal. De doopvont optie neemt de tekenreeks van het lettertype dat u wilt gebruiken waarnaar wordt verwezen in de documentatie. De positie wordt bepaald door een ander Vector2 Bijvoorbeeld, die de definieert Tekstde horizontale en verticale positie.
Verander de Tekstconfiguratie zoals deze:
var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center', position: new Vector2 (0, 50), font: 'BITHAM_42_BOLD');
Je zou nu iets moeten hebben dat er als volgt uitziet:
Laten we de hardgecodeerde waarde vervangen door het juiste aantal dagen. Toen we het project vanuit GitHub hebben gekloond, hebben we alle benodigde bestanden voor toegang tot de apparaat-API's en diverse andere hulpprogramma's om een Pebble-app met JavaScript te maken. Een van deze hulpprogramma's is de moment.js-bibliotheek, die u kunt vinden in de verkoper directory. Dit maakt de berekening eenvoudiger.
Vereisen moment.js in de app en stel de daysRemaining variabele naar een functie met de volgende implementatie:
var moment = vereisen ('leverancier / moment'); var daysRemaining = function () var eventdate = moment ("2017-12-15"); // Dit is de datum waarop we aftellen - 15 december var todaysdate = moment (); // Een moment exemplaar van todaysdate return eventdate.diff (todaysdate, 'days'); // bereken het verschil in dagen. Wijzig vervolgens de verwijzing naar daysRemaining naar een functie-oproep zoals deze:
var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining (), // Dit is nu een functieaanroep textAlign: 'center', position: new Vector2 (0, 50), font : 'BITHAM_42_BOLD');
Als je de app compileert en uitvoert, zou je het juiste aantal dagen moeten zien tot Star Wars, Episode VIII wordt vrijgegeven. We kunnen dit hier achterlaten en hebben een app die het aantal dagen tot het evenement dat we willen volgen, laat zien, maar waarom niet van de gelegenheid gebruik maken om een paar functies aan de app toe te voegen.
Laten we eerst de achtergrondkleur van de wijzigen Venster en de kleur van de tekst, zodat de achtergrond wit is en de tekst donkerder.
var main = new UI.Window (backgroundColor: 'white'); var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining (), textAlign: 'center', position: new Vector2 (0, 50), font: 'BITHAM_42_BOLD', color: ' zwart ');
En laten we er nog een toevoegen Tekst element om aan te geven wat het getal vertegenwoordigt. We creëren een nieuw Tekst element en geef het door voor grootte, positie, lettertype, enz.
var eventDetail = new UI.Text (size: new Vector2 (144, 168), text: 'Episode VIII', textAlign: 'center', position: new Vector2 (0, 15), font: 'GOTHIC_24', kleur: 'zwart');
Vervolgens voegen we de Tekst element in het hoofdvenster nadat we de tekst voorwerp.
main.add (tekst) main.add (eventDetail);
Laten we tot slot nog een derde toevoegen Tekst element om aan te geven dat het aftellen in dagen is.
var daysText = new UI.Text (size: new Vector2 (144, 168), text: 'days', textAlign: 'center', position: new Vector2 (0, 100), font: 'GOTHIC_24', color: ' zwart '); main.add (daysText);
Om te navigeren maakt Pebble gebruik van hardwareknoppen in tegenstelling tot een aanraakscherm, dat te vinden is op de meeste andere smartwatches. We kunnen de mogelijkheid toevoegen om de gebruiker toe te staan dieper in onze applicatie te duiken met behulp van deze inputs. Laten we bijvoorbeeld zeggen dat we ook de releasedatum wilden weergeven voor de andere aankomende films in de Star Wars-franchise. Rogue One wordt dit jaar uitgebracht en er is al een releasedatum voor Episode IX.
De interactie met de knoppen triggert evenementen waarop we ons kunnen abonneren. Wanneer een gebeurtenis wordt gedetecteerd, kunnen we beslissen welke actie moet worden ondernomen. Als de gebruiker klikt, kunnen we een nieuwe maken Venster om de releasedatum voor Rogue One vast te houden en het aantal dagen weer te geven tot de release van die film.
Laten we ons abonneren op de knop Omlaag en een nieuwe maken Venster. De op() methode neemt drie parameters, de actie, de knop en een handler. Zoals eerder vermeld, zijn de mogelijke waarden van de tweede parameter omhoog, naar beneden, kiezen, of terug. De actie is meestal Klik, maar je hebt ook de optie om te gebruiken longClick.
main.on ('klik', 'omlaag', functie () var ro = nieuwe UI.Window (); console.log ('Omgekeerde klik'); ro.show (););Start de applicatie en u zult merken dat u een zwart scherm krijgt als u klikt. U vraagt zich misschien af hoe u toegang kunt krijgen tot de console om de Pebble-logboeken te bekijken.
Wanneer de app wordt uitgevoerd, kunnen we er een andere console aan koppelen en de logboeken doorlopen kiezel logboeken - basalt basismateriaal. Vervang de emulatornaam als u een van de andere emulators gebruikt. U kunt nu zien dat de consolelogboeken Omgeklikt wanneer op de knop Down wordt geklikt.
kiezellogboeken --emulator basalt [06:33:11] javascript> Omlaag klikte [06:33:11] javascript> (+) [venster 2]: [venster 1], [venster 2]
Zoals we eerder deden, laten we het aantal dagen tot de release berekenen en deze informatie aan de gebruiker tonen. Om de datumberekeningsfunctie te gebruiken, ga ik de datum als parameter doorgeven. We willen code niet dupliceren.
var daysRemaining = function (dateString) var eventdate = moment (dateString); var todaysdate = moment (); return eventdate.diff (todaysdate, 'days');
main.on ('klik', 'omlaag', functie () var ro = nieuwe UI.Window (); console.log ('Omgeklikt'); var ro = new UI.Window (); var roCount = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining ("2016-12-16"), textAlign: 'center', position: new Vector2 (0, 50), font: 'BITHAM_42_BOLD', kleur: 'wit'); var eventDetail = nieuwe UI.Text (size: new Vector2 (144, 168), text: 'Rogue One', textAlign: 'center', position: new Vector2 (0, 15), lettertype: 'GOTHIC_24', kleur: 'wit'); var roDays = nieuwe UI.Text (size: new Vector2 (144, 168), text: 'days', textAlign: 'center', position: new Vector2 ( 0, 100), lettertype: 'GOTHIC_24', kleur: 'wit'); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.show ( ););Als je wilt, kun je ook een scherm voor Episode IX toevoegen. Ik laat dat als een uitdaging om jezelf uit te proberen.
We zouden het weergaveprobleem voor gebruikers met een Pebble Time Round moeten oplossen. Om dit te doen, moeten we detecteren op welk platform ze zich bevinden en de gebruikersinterface dienovereenkomstig bijwerken.
In je app heb je toegang tot een globaal object, Kiezelsteen. Dit object heeft een paar functies die we kunnen gebruiken, waaronder een getActiveWatchInfo (), die een object retourneert met de runtime-informatie van het platform.
We kunnen de naam van het platform verkrijgen met behulp van de platform sleutel. Als het platform gelijk is aan krijt, we moeten enkele aanpassingen aanbrengen aan de gebruikersinterface.
Bovenop app.js, we halen de actiewachtinformatie op en controleren of de huidige platformnaam gelijk is krijt.
var info = Pebble.getActiveWatchInfo (); // Retouren bekijken info var platform = info.platform; // Retourneert een tekenreeks van de platformnaam var isChalk = platform === 'krijt';
Als u uw app op het Chalk-platform uitvoert, ziet u het volgende:
Overal waar we elementen van de gebruikersinterface vergroten en positioneren, moeten we kleine wijzigingen aanbrengen om plaats te maken voor het ronde scherm van het Chalk-platform. Om te beginnen creëren we een variabele die de breedte van het scherm behoudt.
var sWidth = is Chalk? 180: 144;
Pebble Time Round heeft een 180 x 180 x 180 pixels scherm. Dit betekent dat we de X-coördinaat van de Vector voorwerpen. We creëren drie variabelen om ons hiermee te helpen.
var countPosition = isChalk? 65: 50; var daysPosition = isChalk? 120: 100; var titlePosition = isChalk? 25: 15;
De definitieve code ziet er ongeveer zo uit:
var UI = require ("ui"); var Vector2 = require ("vector2"); var moment = vereisen ("moment"); var info = Pebble.getActiveWatchInfo (); var platform = info.platform; var isChalk = platform === "krijt"; var sWidth = is Chalk? 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); // Dit is de datum waarop we aftellen tot - 24 april var todaysdate = moment (); // Een moment exemplaar van de datum var vandaag = eventdate.diff (todaysdate, "days"); return difference; var main = nieuwe UI.Window (backgroundColor: "white"); var text = new UI.Text (size: new Vector2 (sWidth, 168), text: daysRemaining ("2017-12-15"), textAlign: "center ", positie: nieuw Vector2 (0, countPosition), font:" BITHAM_42_BOLD ", color:" black "); // Event Detail Text var eventDetail = new UI.Text (size: new Vector2 (sWidth, 168), tekst: "Episode VIII", textAlign: "center", position: new Vector2 (0, titlePosition), font: "GOTHIC_24", color: "black") // Event Detail Text var daysText = new UI.Text ( size: new Vector2 (sWidth, 168), text: "days", textAlign: "center", position: new Vector2 (0, daysPosition), font: "GOTHIC_24", color: "black") // voeg de tekst toe naar het venster main.add (tekst); main.add (eventDetail); main.add (daysText); // toon het venster main.show (); // ROGUE 1 window main.on ("click", "dow n ", function () var ro = new UI.Window (); var roCount = nieuwe UI.Text (size: new Vector2 (sWidth, 168), text: daysRemaining ("2016-12-16"), textAlign: "center", position: new Vector2 (0, countPosition), font: "BITHAM_42_BOLD", kleur: "wit"); var eventDetail = new UI.Text (size: new Vector2 (sWidth, 168), text: "Rogue One", textAlign: "center", position: new Vector2 (0, titlePosition), font: "GOTHIC_24", kleur: "wit") var roDays = nieuwe UI.Text (size: new Vector2 (sWidth, 168), text: "days", textAlign: "center", position: new Vector2 (0, daysPosition), font: "GOTHIC_24 ", kleur wit" ); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.on ("klik", "omlaag", functie () var nine = nieuwe UI.Window (backgroundColor: "white"); var nineCount = new UI.Text (size: new Vector2 (sWidth, 168 ), text: daysRemaining ("2019-05-24"), textAlign: "center", position: new Vector2 (0, countPosition), font: "BITHAM_42_BOLD", color: "black"); var eventDetail = new UI .Text (size: new Vector2 (sWidth, 168), text: "Episode IX", textAlign: "center", position: new Vector2 (0, titlePosition), font: "GOTHIC_24", color: "black") var nineDays = nieuwe UI.Text (size: new Vector2 (sWidth, 168), text: "days", textAlign: "center", position: new Vector2 (0, daysPosition), font: "GOTHIC_24", color: " zwart "); nine.add (nineCount); nine.add (nineDays); nine.add (eventDetail); nine.show ();); );Ik ben er zeker van dat u het ermee eens bent dat er voldoende ruimte voor verbetering is. We dupliceren code op verschillende plaatsen, wat geen goede gewoonte is. Dat gezegd hebbende, ik hoop dat je nu een basiskennis hebt over hoe je apps voor Pebble kunt maken met JavaScript en de Pebble SDK.
In het laatste deel van deze tutorial wil ik je laten zien hoe je onze app kunt uploaden naar de Pebble app store.
Voordat we de app uploaden, is er één ding waarvoor we moeten zorgen. Toen we deze app vanuit een sjabloon begonnen, zijn er een paar details in appinfo.json, het manifest voor onze applicatie, dat we moeten veranderen. Je vindt dit bestand in de root van het project. Open appinfo.json en verander de Bedrijfsnaam, korte naam, en lange naam waarden.
Het laatste dat we nodig hebben is een UUID (Universally Unique Identifier). Het manifest bevat er al een, maar wanneer u het probeert te uploaden .gd bestand naar de app store, krijgt u een foutmelding omdat deze UUID al in gebruik is.
De gemakkelijkste manier om er een te krijgen, is door hem uit het origineel te halen hello-pebble app die we aan het begin van deze tutorial hebben gemaakt, omdat we die app niet naar de app store zullen uploaden. Als u het project hebt verwijderd, maakt u een nieuw project en kopieert u de UUID van dat project. Zodra dat is gebeurd, maakt u een nieuwe build.
We hebben nu een applicatie die klaar is om te uploaden naar de Pebble app store. Ga naar de ontwikkelaarportal van Pebble en registreer je voor een account of log in als je er al een hebt. Nadat u bent ingelogd, klikt u op de link die zegt Publiceer een Pebble-app.
Kies op de volgende pagina Maak een Watchapp aan de onderkant.
Het formulier op de volgende pagina ziet er een beetje angstaanjagend uit, maar de velden zijn behoorlijk duidelijk. Als u de inzending wilt voltooien, moet u ten minste twee items uploaden, beide pictogrammen voor uw app.
Na deze stap wordt u naar het voorbeeld van de app store gebracht met wat toepassingsgegevens aan de rechterkant. Je moet een releasedatum voor je app toevoegen. Om dit te doen, klik op Voeg een release toe en upload de .gd bestand, dat u kunt vinden in de buildmap van uw project.
Zodra dit is gebeurd, keert u terug naar het overzichtsscherm en de .gd bestand is geverifieerd. Dit duurt meestal maar een paar seconden. Na verificatie is de app klaar voor publicatie. Als u hier problemen ondervindt en de verificatie mislukt, krijgt u een handig bericht te zien waarin wordt uitgelegd waarom de verificatie is mislukt.
Voordat je doorgaat en op de Publiceren knop, misschien wilt u een aantal screenshots voor uw toevoegen zodat mensen kunnen zien wat ze kunnen verwachten na de installatie ervan. Deze afbeeldingen worden weergegeven in het voorbeeld van de app store.
De Pebble CLI-tool heeft een geweldige en eenvoudige methode om screenshots te maken. hardlopen screenshot van kiezelsteen FILENAME maak een screenshot van de huidige actieve emulator en sla deze op in de huidige map.
Na het uploaden van de screenshots en het invullen van de beschrijving voor de verschillende platforms, bent u klaar om uw eerste Pebble-app te publiceren.
In dit artikel hebt u geleerd hoe u de Pebble SDK installeert en instelt, hoe u enkele standaard Pebble CLI-opdrachten gebruikt en hoe u een basistoepassing bouwt met JavaScript. Het spreekt voor zich dat we in deze tutorial alleen maar het oppervlak hebben bekrast. Er valt nog veel meer te leren, niet alleen over het schrijven van Pebble-apps met JavaScript, maar ook over de ontwikkeling van Pebble in het algemeen en de hulpmiddelen die voor u beschikbaar zijn.
