Cum se construiește o aplicație cu pietriș

Ce veți crea

Inteligentul Pebble a fost în preajma campaniei sale de succes Kickstarter din 2012 și este o alegere populară printre utilizatorii smartwatch. Acest lucru se datorează duratei excelente a bateriei, prețului scăzut, diferitelor modele pe care să le alegeți și compatibilității cu iOS și Android.

Pebble are un dezvoltator SDK din prima zi, încurajând dezvoltatorii să construiască aplicații interesante și inovatoare pentru platforma Pebble. SDK-ul a fost întotdeauna actualizat, cu noi caracteristici adăugate în timp.

Aplicațiile cu pietriș au fost în mod tradițional codificate în C, dar, recent, Pebble a preluat JavaScript și a deschis lumea dezvoltării de aplicații pe platforma lor chiar mai mult dezvoltatorilor. În această introducere a dezvoltării Pebble, vă dau câteva din elementele de bază ale dezvoltării Pebble folosind SDK și biblioteca Pebble.js, construind o aplicație și trimițând-o la magazinul de aplicații Pebble.

Deținerea unei Pebble sau orice cunoaștere anterioară a limbajului C nu este necesară pentru acest tutorial.

1. Configurarea proiectului

Există în prezent două medii în care puteți crea aplicații cu Pebble. CloudPebble face posibilă dezvoltarea aplicațiilor Pebble în browser. Acest lucru este minunat dacă sunteți pe Windows sau folosind o mașină mai puțin puternică.

Cealaltă opțiune și opțiunea pe care acest tutorial urmează să o urmeze este să aibă fluxul de lucru pentru dezvoltare local. Acest lucru vă permite să lucrați offline și să utilizați un editor la alegere. Să luăm mai întâi instrumentul Pebble și SDK instalat.

În prezent, nu există suport oficial pentru instrumentul Pebble și SDK pe Windows, astfel că următoarea secțiune vă arată pașii pentru a instala instrumentul Pebble și SDK pe OS X și Linux. Pebble vă recomandă să utilizați CloudPebble pentru dezvoltare pe Windows, dar puteți utiliza și o mașină virtuală Linux.

Cel mai simplu mod de a instala instrumentul Pebble pe OS X este prin Homebrew. Dacă nu aveți instalat Homebrew, puteți obține instrucțiunile de instalare pe site-ul Web Homebrew. Cu programul Homebrew instalat, puteți instala instrumentul Pebble cu următoarea comandă:

brew install pebble / pebble-sdk / pebble-sdk

Există câțiva pași suplimentari care trebuie urmați pentru a instala instrumentul Pebble și SDK pe Linux. Pebble are un ghid detaliat disponibil pe care îl puteți urma. Odată ce ați instalat instrumentul Pebble, veți avea prundiș care vă este disponibilă din linia de comandă. Alergare pebble --versiune afișează informațiile despre versiune.

$ ~ pebble --versiune Pebble Tool v4.2.1

 prundiș linia de comandă include mai multe comenzi convenabile. Puteți comanda aceste comenzi rulând pebble --help sau pebble -h. Una dintre comenzi stabilește un nou proiect cu un cod de boilerplate. Creați un director nou și executați următoarea comandă în rădăcina noului director:

prundis nou-proiect de salut-prundis

Dacă aceasta este prima dată când creați o aplicație Pebble, vi se solicită să acceptați termenii de utilizare și licența dezvoltatorului Pebble. După ce le-ați acceptat, cel mai recent SDK Pebble (3.11.1 în momentul redactării) este descărcat și instalat.

După instalarea kitului Pebble SDK, în directorul curent este creat un proiect de bază Pebble. Pentru a construi, a instala și a rula aplicația, trebuie să faceți următoarele. Mai întâi, asigurați-vă că vă aflați în rădăcina proiectului dvs. de Pietriș. În acest caz, suntem în rădăcină alo-prundiș director.

Apoi rulați construcție de pietriș comanda. Când codul este compilat, ar trebui să vedeți mesajul "build" a terminat cu succes și un număr de fișiere noi în directorul build. Singurul dosar de care trebuie să ne facem griji este chiar acum salut-pebble.pbw. Aceasta este aplicația dvs. care va fi instalată în ceas.

Pentru a rula aplicația, vom folosi emulatorul Pebble livrat împreună cu Pebble SDK. Pebble utilizează emulatorul QEMU cu sursă deschisă. În prezent, există trei generații de Pebble care sunt disponibile pentru dezvoltare. Pebble și Pebble Steel sunt generația originală de Pebble. Timpul Pebble suportă 64 de culori și utilizează versiunea 3.x mai puțin nouă a sistemului de operare.

Runda de timp cu pietricele este aproape identică cu cea a Pebble Time, cu excepția afișajului circular și mai mare. Pebble utilizează numele platformelor pentru a diferenția cele trei generații de smartwatch-uri Pebble.

  • Aplite este numele de platformă folosit pentru Pietriș și Pietriș.
  • Bazalt este numele platformei pentru Ora de pietriș.
  • Și Cretă este numele platformei pentru runda timpului cu pietricele.

Putem lansa oricare dintre aceste emulatoare folosind --emulator pavilion după instalare cu pietriș comandă, trecând platforma pe care vrem să o vizăm. De exemplu, dacă vrem să rulați aplicația noastră pe platforma Pebble Time, vom rula următoarea comandă în directorul rădăcină al proiectului Pebble:

instalare de pietriș - emulsie bazalt

Această comandă lansează emulatorul, pornește platforma selectată și instalează .p.g. fișierul stocat în directorul de configurare. Aceasta este ceea ce ar trebui să vedeți în emulator:

Ceasul Pebble nu are un touchscreen și vine cu patru butoane, sus, jos, Selectați, și înapoi. Acestea sunt emulate cu sus, jos, dreapta, și stânga de pe tastatură respectiv. Apăsând aceste taste, puteți naviga în aplicația pe care ați creat-o.

Dacă deschidem codul sursă al proiectului, vedeți că acesta este scris în C. Pentru a utiliza Pebble.js pentru proiect, vom folosi un șablon care ne poate face să începem mai repede. Pebble.js este încă în versiune beta la momentul scrisului, astfel încât unele lucruri se pot schimba în viitor.

Lăsați directorul proiectului, creați un director nou și clonați repo-ul GitHub așa cum se arată mai jos.

mkdir hello-pebblejs cd hello-pebblejs clona git https://github.com/pebble/pebblejs .

Odată ce ați clonat repo-ul, deschideți-l într-un editor de text și aruncați o privire în jur. Codul sursă al aplicației poate fi găsit în src director. În directorul respectiv, aveți alte trei directoare, js, pur şi simplu, UTIL, și a main.c fişier.

js este locul în care punem codul aplicației. pur şi simplu directorul este în cazul în care codul nativ este faptul că funcțiile JavaScript acces și UTIL directorul conține mai multe coduri native pe care nu trebuie să le atingem. Punctul de intrare al aplicației va trăi  js / app.js. Dacă construim și executăm această aplicație, ar trebui să vedem în emulator următorul rezultat:

Deschis js /app.js, aruncați o privire în jur, apoi ștergeți acest fișier. Vom începe de la zero.

2. Să construim o aplicație

Primul lucru pe care trebuie să-l învățăm este cum să afișăm textul pe ecran. Pebble.js are un cadru pentru interfața cu utilizatorul pentru instanțiare element. Cu acest cadru, puteți crea Elemente, cum ar fi textul, dreptunghiurile și imaginile. Adăugați următoarea linie app.js să ceară cadrul.

var UI = necesită ("ui");

Primul element pe care îl vom folosi în acest tutorial este Fereastră. Ferestrele sunt principalele elemente de construcție ale aplicațiilor de pietriș. Există trei tipuri de ferestre.

  • Card pot fi utilizate pentru afișarea textului într-un mod preformat, cum ar fi un titlu în partea de sus, o subtitrare de sub acesta și o zonă a corpului pentru un anumit text.
  • A Meniul este utilizat pentru a afișa o listă de opțiuni.
  • A Fereastră este cel mai flexibil și vă permite să adăugați diferite Elemente.

Pentru a adăuga text într-un Fereastră, avem nevoie, de asemenea Vector2, un modul pentru desenarea vectorilor 2D și unul cu care ați fi familiarizat dacă ați făcut ceva cu trei.js sau orice altă bibliotecă de desen vectorial.

Primul nostru obiectiv este să creăm un Ferestru, să creăm și să adăugăm text la acea fereastră și să îl afișăm utilizatorului. Fragmentul următor este minimul necesar pentru afișarea textului pe ecran.

var UI = necesită ("ui"); var Vector2 = necesită ("vector2"); // Aceasta este fereastra noastră principală var main = new UI.Window (); // Acesta este conținutul textului nostru var textfield = nou UI.Text (size: new Vector2 (144, 60), text: 'Hello PebbleJS'); // adăugați textul în fereastra main.add (câmpul de text); // arata fereastra main.show ();

Construiți proiectul și instalați aplicația pentru a vedea rezultatul. În loc să faceți separat ambii pași, prefer să lansez împreună comenzile și să executați următoarea comandă:

construcție de pietriș && pebble install - emulsie bazalt

Dacă doriți să testați simultan toate cele trei platforme, puteți adăuga comenzile de instalare pentru fiecare emulator:

construcție de pietriș && pebble install --emulator bazalt && pebble install --emulator aplite && pebble install --emulator cretă

Veți observa asta Aplite și bazalt arata aproape identic în timp ce cretă nu arata prea bine. Acest lucru se datorează ecranului rotund și dimensiunilor ecranului. Vom discuta despre detectarea platformei într-un moment. Deocamdată, avansăm cu câteva funcționalități de bază.

În fragmentul de cod de mai sus, creăm un Text folosind elementul Text() metodă. Instanția din Text() ia un obiect ca parametru pentru configurarea lui Text element. mărimea cheie definește dimensiunea unui dreptunghi (definit de a Vector2 exemplu) în care Text element este tras. Valoarea lui text cheia conține șirul pe care dorim să-l afișăm. Apoi adăugăm Text element la Fereastră înainte să sunăm spectacol() pe fereastră pentru ao afișa.

Până în prezent, aplicația utilizează setările implicite pentru Fereastră și Text. Cu toate acestea, avem opțiunea de a le personaliza. Avem controlul pentru a schimba poziția, culoarea și dimensiunea fontului. Există câteva fonturi de sistem disponibile și chiar aveți opțiunea de a încărca fonturi personalizate pe care le puteți utiliza în aplicația dvs..

Aplicația noastră va conta puțin până la o anumită dată. Când începe aplicația, vrem să se ia data de astăzi și să se calculeze câte zile este până la o anumită dată în viitor. Să spunem, de exemplu, că am vrut o aplicație care să-mi spună câte zile va fi până la Star Wars, episodul VIII este aici.

Știu că vreau să-mi creez principalul Fereastră când începe aplicația, calculați numărul de zile rămase până la data de 15 decembrie 2017 și apoi adăugați acel număr pe ecranul meu în centru. Nimic prea fantezist.

Să începem să arătăm un număr static, nu prea diferit de codul actual "Hello PebbleJS" pe care l-am scris. În schimb, folosim o variabilă ca valoare a lui text și adăugați o cheie nouă, aliniere text, pentru a centra textul.

var UI = necesită ("ui"); var Vector2 = necesită ('vector2'); zile varRemaining = "400"; var principal = nou UI.Window (); var text = nou UI.Text (dimensiune: nou Vector2 (144, 168), text: daysRemaining, textAlign: 'center'); // adăugați textul în fereastra main.add (text); // arata fereastra main.show ();

Rularea aplicației vă oferă ieșirea afișată mai jos.

După cum am explicat mai devreme, există mai multe fonturi de sistem disponibile. Pentru acest tutorial, vom rămâne cu unul dintre fonturile sistemului, Bitham 42 Bold, și poziționați-l puțin mai aproape de centrul ecranului, atât pe orizontală cât și pe verticală. font opțiunea ia șirul fontului pe care doriți să-l utilizați ca referindu-se în documentație. Poziția este determinată de alta Vector2 exemplu, care definește Textpoziția orizontală și verticală.

Schimba Text's astfel de configurație:

var text = nou UI.Text (size: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center', pozitie: new Vector2 (0, 50), font: 'BITHAM_42_BOLD');

Acum ar trebui să aveți ceva asemănător cu următorul:

Să înlocuim valoarea codată greu cu numărul corect de zile. Când am clonat proiectul de la GitHub, am obținut toate fișierele necesare pentru a accesa API-urile dispozitivului și diverse alte utilitare pentru a crea o aplicație Pebble cu JavaScript. Una dintre aceste utilități este biblioteca moment.js, pe care o puteți găsi în furnizor director. Acest lucru va ușura calculul.

necesita moment.js în aplicație și setați Zile Ramase variabilă la o funcție cu următoarea implementare:

var moment = cer ("vânzător / moment"); var daysRemaining = funcție () var eventdate = moment ("2017-12-15"); // Aceasta este data la care numărăm până la - 15 decembrie var todaysdate = moment (); // O instanță de moment a todaysdate retur eventdate.diff (todaysdate, 'days'); // calculați diferența în zile. 

Apoi, modificați referința la Zile Ramase la o astfel de funcție:

var text = nou UI.Text (mărime: new Vector2 (144, 168), text: daysRemaining (), // Aceasta este acum o funcție de apel textAlign: 'center', position: new Vector2 : 'BITHAM_42_BOLD');

Dacă compilați și rulați aplicația, ar trebui să vedeți numărul corect de zile până la lansarea Star Wars, Episode VIII. Am putea lăsa asta aici și avem o aplicație care arată pur și simplu numărul de zile până la evenimentul pe care dorim să-l urmărim, dar de ce să nu profităm de ocazia de a adăuga câteva caracteristici aplicației. 

Mai întâi, să schimbăm culoarea de fundal a Fereastră și culoarea textului astfel încât fondul să fie alb și textul să fie mai întunecat.

var principal = nou UI.Window (backgroundColor: 'alb'); var text = nou UI.Text (dimensiune: nou Vector2 (144, 168), text: daysRemaining (), textAlign: 'center', pozitie: new Vector2 (0, 50), font: 'BITHAM_42_BOLD' negru ');

Și să adăugăm altul Text element pentru a indica ce reprezintă numărul. Noi creăm un nou Text element și să îi transmiteți opțiunile pentru dimensiune, poziție, font etc.

var vectorDetail = nou UI.Text (mărimea: new Vector2 (144, 168), text: 'Episode VIII', textAlign: 'center', pozitie: new Vector2 (0, 15), font: 'GOTHIC_24' 'negru');

Apoi, adăugăm Text element în fereastra principală după ce adăugăm text obiect.

main.add (text) main.add (eventDetail);

În cele din urmă, să adăugăm oa treia Text element pentru a indica faptul că numărătoarea inversă este în zile.

var daysText = noul UI.Text (mărime: new Vector2 (144, 168), text: 'zile', textAlign: 'center', position: new Vector2 (0, 100), font: 'GOTHIC_24' negru '); main.add (daysText);

Pentru a naviga, Pebble folosește butoanele hardware, spre deosebire de un ecran tactil, găsit pe majoritatea celorlalte smartwatch-uri. Putem adăuga abilitatea de a permite utilizatorului să se scufunde mai adânc în aplicația noastră folosind aceste intrări. Să spunem, de exemplu, că am dorit să arătăm și data de lansare pentru celelalte filme viitoare din franciza Star Wars. Rogue One este lansat în acest an și există deja o dată de lansare pentru Episodul IX.

Interacțiunea cu butoanele declanșează evenimente la care ne putem abona. Când se detectează un eveniment, putem decide ce măsuri trebuie luate. Dacă utilizatorul dă clic în jos, am putea construi un nou Fereastră pentru a menține data de lansare pentru Rogue One și pentru a afișa numărul de zile până la lansarea acelui film.

Să ne abonați la butonul în jos și să construim un nou Fereastră. pe() metoda ia trei parametri, acțiunea, butonul și un manipulator. Așa cum am menționat anterior, valorile posibile ale celui de-al doilea parametru sunt sus, jos, Selectați, sau înapoi. Acțiunea este de obicei clic, dar aveți și opțiunea de a utiliza longClick.

main.on ('click', 'jos', functie () var ro = nou UI.Window (); console.log ('Down Clicked'); ro.show (););

Rulați aplicația și veți observa că obțineți un ecran negru când faceți clic în jos. S-ar putea să vă întrebați cum puteți obține accesul la consola pentru a vedea jurnalele Pebble.

Când aplicația se execută, putem atașa o altă consolă și putem obține jurnalele rulând busteni de prundis - bazalt pentru emulsie. Înlocuiți numele emulatorului dacă utilizați unul dintre celelalte emulatoare. Acum puteți vedea jurnalele consolei Apăsat în jos când este apăsat butonul în jos.

(jurnal 2): ​​[fereastră 1], [fereastră 2] javascript> (+) [fereastră 2]

La fel ca înainte, să calculam numărul de zile până la lansarea și afișarea acestor informații către utilizator. Pentru a utiliza funcția de calcul al datei, voi trece în data ca parametru. Nu vrem să duplicăm codul.

var zileRemaining = funcție (dateString) var eventdate = moment (dateString); var todaysdate = moment (); returnează eventdate.diff (todaysdate, 'zile'); 
main.on ('click', 'down', function () var ro = nou UI.Window (); console.log ('Down Clicked') var ro = new UI.Window; var roCount = UI.Text (mărime: new Vector2 (144, 168), text: daysRemaining ("2016-12-16"), textAlign: 'center', pozitie: new Vector2 (0, 50), font: 'BITHAM_42_BOLD', (size: new Vector2 (144, 168), text: 'Rogue One', textAlign: 'center', pozitie: new Vector2 (0, 15) font: 'GOTHIC_24', culoare: 'alb'); var roDays = nou UI.Text (mărime: new Vector2 (144, 168), text: 'days', textAlign: 0, 100), font: 'GOTHIC_24', culoare: 'alb'); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.show ););

Dacă doriți, puteți adăuga un ecran pentru Episodul IX, de asemenea. O să las asta ca o provocare pentru tine să încerci singur.

Ar trebui să rezolvăm problema de afișare pentru utilizatorii care au o rundă de timp cu pietricele. Pentru a face acest lucru, trebuie să detectăm ce platformă se află și să actualizeze interfața cu utilizatorul în consecință.

În aplicația dvs., aveți acces la un obiect global, prundiș. Acest obiect are câteva funcții pe care le putem folosi, unul dintre ele fiind getActiveWatchInfo (), care returnează un obiect cu informațiile despre timpul de funcționare al platformei.

Putem obține numele platformei folosind platformă cheie. Dacă platforma este egală cu cretă, trebuie să facem unele ajustări ale interfeței cu utilizatorul.

În partea superioară a app.js, vom prelua informațiile despre ceasul acțiunii și vom verifica dacă numele actual al platformei este egal cretă.

var info = Pebble.getActiveWatchInfo (); // Returnează informația ceasului var platform = info.platform; // Returnează un șir de nume de platformă var isChalk = platform === 'cretă';

Dacă rulați aplicația pe platforma Chalk, ar trebui să vedeți următoarele:

Oriunde am dimensionat și poziționăm elementele interfeței cu utilizatorul, trebuie să facem mici modificări pentru a se potrivi ecranului rotund al platformei Chalk. Pentru început, vom crea o variabilă care să păstreze lățimea ecranului.

var sWidth = isChalk? 180: 144;

Pebble Time Round are un afișaj de 180px x 180px. Aceasta înseamnă că trebuie să modificăm coordonatele X din Vector obiecte. Creăm trei variabile pentru a ne ajuta în acest sens.

var countPosition = isChalk? 65: 50; var daysPosition = isChalk? 120: 100; var titlePosition = isChalk? 25: 15;

Codul final va arata cam asa:

var UI = necesită ("ui"); var Vector2 = necesită ("vector2"); var moment = necesită ("moment"); var info = Pebble.getActiveWatchInfo (); var platform = info.platform; var isChalk = platformă === "cretă"; var sWidth = isChalk? 180: 144; var countPosition = isChalk? 65: 50; var daysPosition = isChalk? 120: 100; var titlePosition = isChalk? 25: 15; var zileRemaining = funcție (dateString) var eventdate = moment (dateString); // Aceasta este data la care numărăm până la - 24 aprilie var todaysdate = moment (); // O instanță moment de todaysdate var difference = eventdate.diff (todaysdate, "days"); noul UI.Window (backgroundColor: "alb"); var text = nou UI.Text (mărime: new Vector2 (sWidth, 168), text: daysRemaining ("2017-12-15"), textAlign: ", pozitie: nou Vector2 (0, countPosition), font:" BITHAM_42_BOLD ", culoare:" negru "); text: "Episodul VIII", textAlign: "centru", pozitie: nou Vector2 (0, titlePosition), font: "GOTHIC_24", culoare: "negru" dimensiune: nou Vector2 (sWidth, 168), text: "zile", textAlign: "centru", pozitie: new Vector2 (0, daysPosition), font: "GOTHIC_24" la fereastra main.add (text); main.add (eventDetail); main.add (daysText); // arata fereastra main.show (); // ROGUE 1 window main.on ("click", "dow n ", funcția () var ro = noua fereastră UI.Window (); var roCount = noul UI.Text (mărime: new Vector2 (sWidth, 168), text: daysRemaining ("2016-12-16"), textAlign: "center", position: new Vector2 (0, countPosition) "BITHAM_42_BOLD", culoare: "alb"); var eventDetail = nou UI.Text (mărime: new Vector2 (sWidth, 168), text: "Rogue One", textAlign: "center", position: new Vector2 (0, titlePosition), font: "GOTHIC_24" "alb") var roDays = nou UI.Text (mărime: nou Vector2 (sWidth, 168), text: "zile", textAlign: "center", position: new Vector2 (0, daysPosition), font: "GOTHIC_24 ", culoare albă" ); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.on ("faceți clic", "jos", funcția () var nouă = noua fereastră UI.Window (backgroundColor: "white") var nouCount = ), text: daysRemaining ("2019-05-24"), textAlign: "centru", pozitie: nou Vector2 (0, countPosition), font: "BITHAM_42_BOLD"; .Text (mărime: new Vector2 (sWidth, 168), text: "Episodul IX", textAlign: "center", pozitie: new Vector2 (0, titlePosition), font: "GOTHIC_24" var: nouă Vector2 (0, daysPosition), font: "GOTHIC_24", culoare: "" negru "); nouă.add (nouăCount); nouă.add (nouă zile); nouă.add (eventDetail); nouă.show ();); );

Sunt sigur că sunteți de acord că există suficient spațiu pentru îmbunătățire. Replicăm codul în diferite locuri, ceea ce nu este o practică bună. Acestea fiind spuse, sper că acum aveți o înțelegere de bază a modului în care puteți crea aplicații pentru Pebble folosind JavaScript și Pebble SDK.

În ultima secțiune a acestui tutorial, aș vrea să vă arăt cum să încărcați aplicația noastră în magazinul de aplicații Pebble.

3. Încărcarea în App Store Pebble

Înainte de a încărca aplicația, trebuie să avem de-a face cu un lucru. Când am lansat această aplicație dintr-un șablon, există câteva detalii în appinfo.json, manifestul pentru cererea noastră, că trebuie să ne schimbăm. Puteți găsi acest fișier în rădăcina proiectului. Deschis appinfo.json și schimbați Numele Companieinume scurt, și longname valorile.

Ultimul lucru de care avem nevoie este un UUID (Universal Unique Identifier). Manifestul conține deja unul, dar când încercați să încărcați .p.g. fișier la magazinul de aplicații, veți primi o eroare deoarece acest UUID este deja utilizat.

Cel mai simplu mod de a obține unul este să îl luați din original alo-prundiș app pe care am creat-o la începutul acestui tutorial, deoarece nu vom încărca acea aplicație în magazinul de aplicații. Dacă ați șters proiectul, creați un proiect nou și copiați UUID-ul din acel proiect. După ce sa terminat, creați o nouă construcție.

Acum avem o aplicație care este gata de încărcare în magazinul de aplicații Pebble. Mergeți pe portalul de dezvoltatori Pebble și înregistrați-vă pentru un cont sau conectați-l dacă aveți deja unul. După ce v-ați conectat, dați clic pe link-ul de mai jos Publicați o aplicație Pebble.

În pagina următoare, alegeți Creați un Watchapp în partea de jos.

Formularul de pe pagina următoare arată puțin cam descurajant, dar câmpurile sunt destul de explicative. Pentru a finaliza trimiterea, trebuie să încărcați cel puțin două elemente, ambele fiind icoane pentru aplicația dvs..

După acest pas, veți fi îndreptat spre previzualizarea magazinului de aplicații, cu unele date despre aplicații din partea dreaptă. Este necesar să adăugați o dată de lansare pentru aplicația dvs. Pentru aceasta, faceți clic pe Adăugați o versiune și încărcați .p.g. fișier, pe care îl puteți găsi în folderul de construire al proiectului dvs..

Odată ce ați terminat, reveniți la ecranul general și la .p.g. fișierul este verificat. De obicei, acest lucru durează doar câteva secunde. După verificare, aplicația este pregătită pentru publicare. Dacă întâmpinați probleme aici și verificarea nu reușește, vi se prezintă un mesaj util care explică de ce verificarea a eșuat.

Înainte de a merge și a lovi Publica , poate doriți să adăugați câteva capturi de ecran pentru dvs., astfel încât utilizatorii să poată vedea ce să aștepte după instalarea acestora. Aceste imagini sunt afișate în previzualizarea magazinului de aplicații.

Instrumentul CLI Pebble are o metodă excelentă și ușoară de a face capturi de ecran. Alergare pebble screenshot FILENAME să faceți o captură de ecran a emulatorului rulat curent și să îl salvați în directorul curent.

După încărcarea capturilor de ecran și completarea descrierii pentru diferitele platforme, sunteți gata să publicați prima aplicație Pebble.

Concluzie

În acest articol, ați învățat cum să instalați și să configurați kitul Pebble SDK, cum să utilizați unele dintre comenzile de bază Pebble CLI și cum să construiți o aplicație de bază utilizând JavaScript. Este de la sine înțeles că numai în acest tutorial am zgâriat suprafața. Mai sunt multe de învățat, nu numai despre scrierea aplicațiilor Pebble cu JavaScript, dar și despre dezvoltarea Pebble în general și despre instrumentele disponibile pentru dvs..

Cod