Share
Vad du ska skapaPebble smartwatch har funnits sedan dess mycket framgångsrika Kickstarter-kampanj under 2012 och är ett populärt val bland smartwatch-användare. Detta beror på dess utmärkta batterilivslängd, lågt pris, olika modeller att välja mellan, och kompatibilitet med både iOS och Android.
Pebble har haft utvecklare SDK sedan dag ett, uppmuntrande utvecklare att bygga intressanta och innovativa applikationer för Pebble-plattformen. SDK har alltid hållits aktuell, med nya funktioner som läggs till över tiden.
Pebble-applikationer har traditionellt kodats i C, men nyligen har Pebble tagit på JavaScript och öppnat världen för app-utveckling på sin plattform till ännu fler utvecklare. I denna introduktion till Pebble-utveckling går jag igenom några av grunderna för att komma igång med Pebble-utveckling med hjälp av SDK och Pebble.js-biblioteket genom att bygga en ansökan och skicka den till Pebble Application Store.
Att äga en sten eller någon tidigare kunskap om C-språket behövs inte för denna handledning.
Det finns för närvarande två miljöer där du kan bygga Pebble-applikationer. CloudPebble gör det möjligt att utveckla Pebble apps i webbläsaren. Det här är bra om du är på Windows eller använder en mindre kraftfull maskin.
Det andra alternativet och det alternativ som denna handledning kommer att följa är att utveckla arbetsflödet lokalt. Detta gör att du kan arbeta offline och använda en redaktör efter eget val. Låt oss först få Pebble-verktyget och SDK installerat.
För närvarande finns det inget officiellt stöd för Pebble-verktyget och SDK på Windows så följande avsnitt går igenom stegen för att installera Pebble-verktyget och SDK på OS X och Linux. Pebble rekommenderar att du använder CloudPebble för utveckling på Windows, men du kan också använda en virtuell Linux-maskin.
Det enklaste sättet att installera Pebble-verktyget på OS X är genom Homebrew. Om du inte har Homebrew installerat kan du få installationsanvisningarna på Homebrew-webbplatsen. Med Homebrew installerat kan du installera Pebble-verktyget med följande kommando:
brygga installationen pebble / pebble-sdk / pebble-sdk
Det finns några ytterligare steg att ta för att installera Pebble-verktyget och SDK på Linux. Pebble har en detaljerad guide tillgänglig som du kan följa. När du har installerat Pebble-verktyget kommer du att ha sten kommando tillgängligt för dig från kommandoraden. Löpning pebble - version visar versionsinformationen.
$ ~ pebble - version Pebble Tool v4.2.1
De sten Kommandoradsgränssnittet innehåller flera praktiska kommandon. Du kan lista dessa kommandon genom att köra grus - hjälp eller pebble -h. En av kommandona sätter upp ett nytt projekt med en viss boilerplate-kod. Skapa en ny katalog och kör följande kommando i roten till den nya katalogen:
pebble new-project hej-pebble
Om det här är första gången du skapar ett Pebble-program, uppmanas du att acceptera användarvillkoren och Pebble-utvecklarlicensen. När du väl har accepterat dessa hämtas och installeras den senaste Pebble SDK (3.11.1 vid skrivetid).
Efter installationen av Pebble SDK, ställs ett grundläggande Pebble-projekt i den aktuella katalogen. För att bygga, installera och köra din app måste du göra följande. Först, se till att du är i roten till ditt Pebble-projekt. I det här fallet är vi i roden av hello-småsten katalog.
Kör sedan pebble build kommando. När koden sammanställs ska du se meddelandet "bygga" slutfördes framgångsrikt och ett antal nya filer i byggkatalogen. Den enda filen vi behöver oroa oss för just nu är hello-pebble.pbw. Det här är din app som kommer att installeras på klockan.
För att köra appen använder vi Pebble-emulatorn som följer med Pebble SDK. Pebble använder QEMU-emulatorn med öppen källkod. För närvarande finns det tre generationer av Pebble som är tillgängliga att utveckla för. Pebble and Pebble Steel är den ursprungliga generationen av Pebble. Pebble Time stöder 64 färger och använder den lite nyare 3.x-versionen av operativsystemet.
Pebble Time Round är nästan identisk med Pebble Time med undantag för den cirkulära och större skärmen. Pebble använder plattformsnamn för att skilja de tre generationerna av Pebble smartwatches.
Vi kan starta någon av dessa emulatorer med hjälp av --emulator flagga efter pebble install kommando, passerar plattformen vi vill rikta in. Om vi till exempel vill köra vår app på plattformen för Pebble Time skulle vi köra följande kommando i rotkatalogen i Pebble-projektet:
pebble install - emulator basalt
Kommandot startar emulatorn, startar den valda plattformen och installerar .pbw filen lagrad i byggkatalogen. Detta är vad du bör se i emulatorn:
Pebble klockan har inte en pekskärm och kommer med fyra knappar, upp, ner, Välj, och tillbaka. Dessa är emulerade med upp, ner, höger, och vänster nycklar på respektive tangentbord. Genom att trycka på dessa tangenter kan du navigera i appen du skapade.
Om vi öppnar källkoden för projektet ser du att det är skrivet i C. För att kunna använda Pebble.js för projektet ska vi använda en mall som kan få oss igång snabbare. Pebble.js är fortfarande i beta vid skrivningstillfället, så vissa saker kan ändå ändras i framtiden.
Lämna projektkatalogen, skapa en ny katalog och klona GitHub repo som visas nedan.
mkdir hello-pebblejs cd hello-pebblejs git klon https://github.com/pebble/pebblejs .
När du har klonat repo, öppna den i en textredigerare och ta en titt. Kodkoden för ansökan finns i src katalogen. Inuti den katalogen har du tre andra kataloger, js, helt enkelt, util, och a main.c fil.
De js katalog är där vi sätter programkoden. De helt enkelt katalog är där den ursprungliga koden är att JavaScript fungerar åtkomst och util katalog innehåller mer inbyggd kod som vi inte behöver röra. Ingångspunkten för ansökan kommer att leva i js / app.js. Om vi bygger och kör den här applikationen ska du se följande resultat i emulatorn:
Öppna js /app.js, ta en titt och ta bort den här filen. Vi ska börja från början.
Det första vi behöver veta är hur man visar text på skärmen. Pebble.js har ett användargränssnitt för instantiating element. Med denna ram kan du skapa element, till exempel text, rektanglar och bilder. Lägg till följande rad till app.js att kräva ramverket.
Accentsconagua
var UI = kräver ('ui');Det första elementet vi kommer att använda i denna handledning är Fönster. Windows är huvudbyggstenarna i Pebble-applikationer. Det finns tre typer av fönster.
Kort kan användas för att visa text på ett förformat sätt, till exempel en titel överst, en undertext under den och ett kroppsområde för lite text.Meny används för att visa en lista med alternativ.Fönster är den mest flexibla och låter dig lägga till olika element till den.För att lägga till text i ett fönster kräver vi också Vector2, en modul för att rita 2D-vektorer och en som du skulle känna till om du har gjort något med three.js eller något annat vektorritningsbibliotek.
Vårt första mål är att skapa ett fönster, skapa och lägga till text i det fönstret och visa det till användaren. Följande kod är det minimum som krävs för att visa text på skärmen.
var UI = kräver ("ui"); var Vector2 = kräver ("vektor2"); // Detta är vårt huvudfönster var main = nytt användargränssnitt.Window (); // Detta är vårt textinnehåll var textfield = ny UI.Text (size: new Vector2 (144, 60), text: 'Hello PebbleJS'); // lägg till texten till fönstret main.add (textfält); // visa fönstret main.show ();Bygg projektet och installera programmet för att se resultatet. Snarare än att göra båda stegen separat föredrar jag att köra kommandona tillsammans och köra följande kommando:
pebble build && pebble install - emulator basalt
Om du vill testa på alla tre plattformarna samtidigt kan du lägga till installationskommandon för varje emulator:
pebble build && pebble install - emulator basalt && pebble install - emulator aplite && pebble install - emulator krita
Du märker det aplit och basalt ser nästan identisk ut samtidigt krita ser inte så bra ut. Detta beror på runda skärmen och skärmens dimensioner. Vi diskuterar plattformsdetektering på ett ögonblick. För tillfället går vi framåt med några av de grundläggande funktionerna.
I ovanstående kodbunt skapar vi en Text element med hjälp av Text() metod. Inställningen av Text() tar ett objekt som dess parameter för att konfigurera Text element. De storlek nyckeln definierar storleken på en rektangel (definierad av a Vector2 exempel) där Text elementet är ritat. Värdet av text nyckeln innehåller strängen vi vill visa. Vi lägger sedan till Text element till Fönster innan vi ringer show() på fönstret för att visa det.
Hittills använder din app standardinställningarna för Fönster och Text. Vi har dock möjlighet att anpassa dem. Vi har kontrollen för att ändra position, färg och textstorlek. Det finns några systemfonter tillgängliga och du har till och med möjlighet att ladda anpassade teckensnitt som du kan använda i din app.
Vår app kommer att räkna ner till ett visst datum. När appen startar vill vi att det ska ta dagens datum och beräkna hur många dagar det är fram till ett visst datum i framtiden. Låt oss säga att jag till exempel ville ha en app som berättade hur många dagar det skulle vara förrän Star Wars, Episode VIII är här.
Jag vet att jag vill skapa min huvud Fönster När appen börjar, beräkna antalet dagar kvar till 15 december 2017 och lägg sedan till det numret på min skärm i mitten. Inget alltför fint.
Låt oss börja med att visa ett statiskt nummer, inte så annorlunda än den nuvarande "Hello PebbleJS" -koden vi skrev. I stället använder vi en variabel som värdet av text nyckeln och lägg till en ny nyckel, textAlign, för att centrera texten.
var UI = kräver ('ui'); var Vector2 = kräver ('vektor2'); var daysRemaining = "400"; var main = ny UI.Window (); var text = ny UI.Text (size: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center'); // lägg till texten till fönstret main.add (text); // visa fönstret main.show ();Om du kör appen får du den effekt som visas nedan.
Som jag förklarade tidigare finns det ett antal systemfonter tillgängliga. För denna handledning stämmer vi med en av systemfonterna, Bitham 42 Fet, och placera den lite närmare skärmens mitt, både horisontellt och vertikalt. De font alternativet tar strängen av teckensnittet som du vill använda enligt referens i dokumentationen. Positionen bestäms av en annan Vector2 exempel som definierar Texts horisontella och vertikala position.
Ändra Textkonfiguration så här:
var text = ny UI.Text (size: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center', position: ny Vector2 (0, 50), typsnitt: 'BITHAM_42_BOLD');
Du borde nu ha något som ser ut som följande:
Låt oss ersätta det hårdkodade värdet med rätt antal dagar. När vi klonade projektet från GitHub fick vi alla nödvändiga filer för att komma åt enhetens API och olika andra verktyg för att skapa en Pebble app med JavaScript. Ett av dessa verktyg är moment.js-biblioteket, som du kan hitta i Säljare katalogen. Detta kommer att göra beräkningen enklare.
Fordra moment.js in i appen och ställa in dagar kvar variabel till en funktion med följande implementering:
var moment = kräver ("leverantör / moment"); var daysRemaining = function () var eventdate = moment ("2017-12-15"); // Detta är det datum som vi räknar ner till - 15 december var todaysdate = moment (); // Ett ögonblick förekomst av dagens dagsdagar returnera eventdate.diff (dagens datum, dagar); // beräkna skillnaden i dagar. Ändra sedan referensen till dagar kvar till ett funktionssamtal så här:
var text = ny UI.Text (size: new Vector2 (144, 168), text: daysRemaining (), // Det här är nu ett funktionssamtal textAlign: 'center', position: ny Vector2 (0, 50) : 'BITHAM_42_BOLD');
Om du sammanställer och kör app ska du se rätt antal dagar tills Star Wars, Episode VIII släpps. Vi kan lämna det här och ha en app som bara visar antalet dagar fram till händelsen vi vill spåra, men varför inte ta tillfället i akt att lägga till några funktioner i appen.
Låt oss först ändra bakgrundsfärgen på Fönster och färgen på texten så att bakgrunden är vit och texten är mörkare.
var main = ny UI.Window (backgroundColor: 'white'); var text = ny UI.Text (size: new Vector2 (144, 168), text: daysRemaining (), textAlign: 'center', position: ny Vector2 (0, 50), typsnitt: 'BITHAM_42_BOLD', färg: ' svart ');
Och låt oss lägga till en annan Text element för att ange vad numret representerar. Vi skapar en ny Text element och skicka det till alternativ för storlek, position, typsnitt osv.
var eventDetail = ny UI.Text (size: new Vector2 (144, 168), text: 'Episode VIII', textAlign: 'center', position: ny Vector2 (0, 15), typsnitt: 'GOTHIC_24' "svart");
Därefter lägger vi till Text element till huvudfönstret när vi lägger till text objekt.
main.add (text) main.add (eventDetail);
Slutligen, låt oss lägga till en tredjedel Text element för att indikera att nedräkningen är i dagar.
var daysText = ny UI.Text (size: new Vector2 (144, 168), text: 'days', textAlign: 'center', position: ny Vector2 (0, 100), typsnitt: 'GOTHIC_24', färg: ' svart '); main.add (daysText);
För att navigera använder Pebble hårdvaruknappar i motsats till en pekskärm, som finns på de flesta andra smartwatches. Vi kan lägga till möjligheten att låta användaren dyka djupare in i vår applikation med hjälp av dessa ingångar. Låt oss säga, till exempel, vi ville också visa utgivningsdatum för de andra kommande filmerna i Star Wars-franchisen. Rogue One släpps i år och det finns redan ett release datum för Episode IX.
Samspelet med knapparna utlöser händelser som vi kan prenumerera på. När en händelse upptäcks kan vi bestämma vilken åtgärd som behöver vidtas. Om användaren klickar på kan vi bygga en ny Fönster för att hålla utgivningsdatumet för Rogue One och visa antalet dagar fram till utgåvan av den här filmen.
Låt oss prenumerera på nedåtknappen och bygga en ny Fönster. De på() Metoden tar tre parametrar, åtgärden, knappen och en hanterare. Som tidigare nämnts är de möjliga värdena för den andra parametern upp, ner, Välj, eller tillbaka. Åtgärden är vanligtvis klick, men du har också möjlighet att använda longClick.
main.on ("click", "down", funktionen () var ro = ny UI.Window (); console.log ('Down Clicked'); ro.show (););Kör programmet och du kommer märka att du får en svart skärm när du klickar ner. Du kanske frågar dig själv hur du kan få tillgång till konsolen för att se Pebble-loggarna.
När appen körs kan vi fästa en annan konsol på den och få loggarna att springa stenstenar - emulator basalt. Byt emulatornamnet om du använder en av de andra emulatorns. Nu kan du se att konsolen loggar Ned Clicked när ned-knappen är klickad.
pebble loggar - emulator basalt [06:33:11] javascript> Ned Clicked [06:33:11] javascript> (+) [fönster 2]: [fönster 1], [fönster 2]
Som vi gjorde tidigare, låt oss beräkna antalet dagar fram till utgåvan och visa denna information för användaren. För att kunna använda datumberäkningsfunktionen kommer jag att skicka in datumet som en parameter. Vi vill inte kopiera kod.
var daysRemaining = funktion (dateString) var eventdate = moment (dateString); var todaysdate = moment (); returnera eventdate.diff (dagens datum, dagar);
main.on ("klicka", "ner", funktion () var ro = ny UI.Window (); console.log ('Down Clicked'); var ro = ny UI.Window (); var roCount = ny UI.Text (size: new Vector2 (144, 168), text: daysRemaining ("2016-12-16"), textAlign: "center", position: ny Vector2 (0, 50), typsnitt: 'BITHAM_42_BOLD' färg: "white"); var eventDetail = ny UI.Text (storlek: ny Vector2 (144, 168), text: "Rogue One", textAlign: "center", position: ny Vector2 (0, 15) font: 'GOTHIC_24', färg: 'white'); var roDays = ny UI.Text (storlek: ny Vector2 (144, 168), text: 'dagar', textAlign: 'center', position: ny Vector2 0, 100), teckensnitt: 'GOTHIC_24', färg: 'white'); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.show ););Om du vill kan du också lägga till en skärm för Episode IX. Jag lämnar det som en utmaning för dig att försöka dig själv.
Vi bör fixa visningsproblemet för användare med en Pebble Time Round. För att kunna göra detta måste vi upptäcka vilken plattform de är på och uppdatera användargränssnittet i enlighet därmed.
I din app har du tillgång till ett globalt objekt, Sten. Detta objekt har några funktioner som vi kan använda, en av dem är getActiveWatchInfo (), som returnerar ett objekt med plattformen runtime information.
Vi kan få plattformsnamnet med hjälp av plattform nyckel. Om plattformen är lika med krita, Vi behöver göra vissa anpassningar till användargränssnittet.
På toppen av app.js, vi hämtar handlingsinformationen och kontrollerar om det aktuella plattformsnamnet är lika krita.
var info = Pebble.getActiveWatchInfo (); // Returnerar klockinfo var platform = info.platform; // Returnerar en sträng av plattformsnamnet var isChalk = plattform === 'krita';
Om du kör din app på Chalk-plattformen bör du se följande:
Överallt vi storlekar och positioner användargränssnitt, måste vi göra små förändringar för att rymma för rundskärmen på Chalk-plattformen. Som en början skapar vi en variabel som rymmer skärmens bredd.
var sWidth = isChalk? 180: 144;
Pebble Time Round har en 180px x 180px display. Det betyder att vi måste ändra X-koordinaten för Vektor objekt. Vi skapar tre variabler för att hjälpa oss med detta.
var countPosition = isChalk? 65: 50; var daysPosition = isChalk? 120: 100; var titlePosition = isChalk? 25: 15;
Den slutliga koden kommer att se ut så här:
var UI = kräver ("ui"); var Vector2 = kräver ("vektor2"); var moment = kräver ("moment"); var info = Pebble.getActiveWatchInfo (); var plattform = info.platform; var isChalk = plattform === "krita"; var sWidth = isChalk? 180: 144; var countPosition = isChalk? 65: 50; var daysPosition = isChalk? 120: 100; var titlePosition = isChalk? 25: 15; var daysRemaining = funktion (dateString) var eventdate = moment (dateString); // Detta är det datum som vi räknar ner till - 24 april var todaysdate = moment (); // Ett ögonblick förekomst av dagens dags varskillnad = eventdate.diff (dagens datum, dagar); returskillnad; var main = ny UI.Window (backgroundColor: "white"); var text = ny UI.Text (storlek: ny Vector2 (sWidth, 168), text: daysRemaining ("2017-12-15"), textAlign: "center ", position: ny vektor2 (0, countPosition), teckensnitt:" BITHAM_42_BOLD ", färg:" svart ") // Eventdetalj Text var händelseDetail = ny UI.Text (storlek: ny Vector2 (sWidth, 168) text: "Episode VIII", textAlign: "center", position: ny Vector2 (0, titlePosition), font: "GOTHIC_24", färg: "svart") // Eventdetalj Text var daysText = nytt UI.Text storlek: ny vektor2 (sWidth, 168), text: "days", textAlign: "center", position: ny Vector2 (0, daysPosition), font: "GOTHIC_24", färg: "svart") // lägg till texten till fönstret main.add (text); main.add (eventDetail); main.add (daysText); // visa fönstret main.show (); // ROGUE 1 fönster main.on ("click", "dow n ", funktion () var ro = ny UI.Window (); var roCount = ny UI.Text (size: new Vector2 (sWidth, 168), text: daysRemaining ("2016-12-16"), textAlign: "center", position: ny Vector2 (0, countPosition) "BITHAM_42_BOLD", färg: "vit"); var eventDetail = new UI.Text (size: new Vector2 (sWidth, 168), text: "Rogue One", textAlign: "center", position: ny Vector2 (0, titlePosition), font: "GOTHIC_24" "white") var roDays = ny UI.Text (size: new Vector2 (sWidth, 168), text: "days", textAlign: "center", position: ny Vector2 (0, daysPosition), font: "GOTHIC_24 ", färg vit" ); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.on ("click", "down", funktionen () var nio = ny UI.Window (backgroundColor: "white"); var nineCount = ny UI.Text (size: new Vector2 (sWidth, 168 ), text: daysRemaining ("2019-05-24"), textAlign: "center", position: ny Vector2 (0, countPosition), font: "BITHAM_42_BOLD", färg: "svart"); var eventDetail = nytt gränssnitt Text: "center", position: ny vektor2 (0, titelposition), typsnitt: "GOTHIC_24", färg: "svart") var nineDays = ny UI.Text (storlek: ny Vector2 (sWidth, 168), text: "days", textAlign: "center", position: ny Vector2 (0, daysPosition), font: "GOTHIC_24", färg: " svart "); nio.add (nioCount); nine.add (nineDays); nine.add (eventDetail); nine.show ();); );Jag är säker på att du håller med om att det finns gott om utrymme för förbättringar. Vi duplicerar kod på olika ställen, vilket inte är en bra praxis. Som sagt hoppas jag att du nu har en grundläggande förståelse för hur du kan skapa apps för Pebble med JavaScript och Pebble SDK.
I den sista delen av den här handledningen vill jag visa dig hur du laddar upp vår app till appen Pebble App Store.
Innan vi laddar upp appen finns det en sak vi behöver ta hand om. När vi startade den här appen från en mall finns det några detaljer i appinfo.json, manifestet för vår ansökan, som vi behöver ändra. Du kan hitta den här filen i projektets rot. Öppna appinfo.json och ändra Företagsnamn, kort namn, och Longname värden.
Det sista vi behöver är en UUID (universellt unik identitet). Manifestet innehåller redan en, men när du försöker ladda upp .pbw filen till appbutiken kommer du att få ett fel eftersom denna UUID redan används.
Det enklaste sättet att få en är att ta den från originalet hello-småsten app som vi skapade i början av denna handledning, eftersom vi inte laddar upp den appen till appbutiken. Om du raderade projektet skapar du ett nytt projekt och kopierar UUID från det projektet. När det är klart, skapa en ny byggnad.
Vi har nu en applikation som är klar för uppladdning till Pebble App Store. Gå vidare till Pebble Developer Portal och registrera dig för ett konto eller logga in om du redan har en. När du är inloggad, klicka på länken som säger Publicera en Pebble App.
På nästa sida väljer du Skapa en Watchapp på botten.
Blanketten på nästa sida ser lite skrämmande ut, men fälten är ganska självförklarande. För att slutföra inlämningen måste du ladda upp minst två tillgångar, vilka båda är ikoner för din app.
Efter det här steget tas du till förhandsgranskningen av appbutiken med vissa applikationsdata på höger sida. Det är obligatoriskt att du lägger till ett utgivningsdatum för din app. För att göra detta klickar du på Lägg till en release och ladda upp .pbw fil, som du hittar i byggmappen av ditt projekt.
När detta är klart återgår du till översiktsskärmen och .pbw filen är verifierad. Det tar vanligtvis bara några sekunder. När verifierad är appen klar för publicering. Om du stöter på några problem här och verifieringen misslyckas presenteras du med ett användbart meddelande som förklarar varför verifieringen misslyckades.
Innan du går och slår på Publicera knappen, kanske du vill lägga till några skärmdumpar för dig så att folk kan se vad man kan förvänta sig efter installationen. Dessa bilder visas i förhandsgranskningen av appbutiken.
Pebble CLI-verktyget har en bra och enkel metod för att ta skärmdumpar. Löpning pebble skärmdump FILENAME ta en skärmdump av den aktuella spåremulatorn och spara den i den aktuella katalogen.
Efter att du har laddat upp skärmdumparna och fyllt i beskrivningen för de olika plattformarna, är du redo att publicera din första Pebble-app.
I den här artikeln har du lärt dig hur du installerar och installerar Pebble SDK, hur du använder några av de grundläggande Pebble CLI-kommandon och hur du bygger en grundläggande applikation med JavaScript. Det är självklart att vi bara repade ytan i denna handledning. Det finns mycket mer att lära sig, inte bara om att skriva Pebble apps med JavaScript, men också om Pebble utveckling i allmänhet och de verktyg som är tillgängliga för dig.
