Come costruire un'applicazione Pebble

Cosa starai creando

Lo smartwatch Pebble è in circolazione sin dalla sua fortunatissima campagna Kickstarter nel 2012 ed è una scelta popolare tra gli utenti di smartwatch. Ciò è dovuto alla sua eccellente durata della batteria, al prezzo basso, ai vari modelli tra cui scegliere e alla compatibilità sia con iOS che con Android.

Pebble ha avuto un SDK sviluppatore sin dal primo giorno, incoraggiando gli sviluppatori a creare applicazioni interessanti e innovative per la piattaforma Pebble. L'SDK è sempre stato aggiornato, con nuove funzionalità aggiunte nel tempo.

Le applicazioni Pebble sono state tradizionalmente codificate in C, ma recentemente, Pebble ha assunto JavaScript e ha aperto il mondo dello sviluppo di app sulla loro piattaforma a un numero ancora maggiore di sviluppatori. In questa introduzione allo sviluppo di Pebble, descrivo alcune delle nozioni di base su come iniziare lo sviluppo di Pebble utilizzando l'SDK e la libreria Pebble.js creando un'applicazione e inviandola all'archivio dell'applicazione Pebble.

Possedere un Pebble o qualsiasi conoscenza precedente del linguaggio C non è richiesto per questo tutorial.

1. Impostazione del progetto

Esistono attualmente due ambienti in cui è possibile creare applicazioni Pebble. CloudPebble consente di sviluppare app Pebble nel browser. Questo è grandioso se sei su Windows o usi una macchina meno potente.

L'altra opzione, e l'opzione che seguirà questo tutorial, è quella di avere il flusso di lavoro di sviluppo localmente. Questo ti consente di lavorare offline e utilizzare un editor di tua scelta. Per prima cosa installiamo lo strumento Pebble e l'SDK.

Al momento, non esiste un supporto ufficiale per lo strumento Pebble e l'SDK su Windows, quindi la sezione seguente descrive i passaggi per installare lo strumento Pebble e SDK su OS X e Linux. Pebble consiglia di utilizzare CloudPebble per lo sviluppo su Windows, ma è anche possibile utilizzare una macchina virtuale Linux.

Il modo più semplice per installare lo strumento Pebble su OS X è tramite Homebrew. Se non hai installato Homebrew, puoi ottenere le istruzioni di installazione sul sito Web di Homebrew. Con Homebrew installato, puoi installare lo strumento Pebble con il seguente comando:

brew install pebble / pebble-sdk / pebble-sdk

Ci sono alcuni passi aggiuntivi da fare per installare lo strumento Pebble e l'SDK su Linux. Pebble ha una guida dettagliata disponibile che puoi seguire. Una volta installato lo strumento Pebble, si avrà il ciottolo comando disponibile dalla riga di comando. In esecuzione ciottolo --versione mostra le informazioni sulla versione.

$ ~ pebble --version Pebble Tool v4.2.1

Il ciottolo l'interfaccia della riga di comando include diversi comodi comandi. Puoi elencare questi comandi eseguendo ciottolo - aiuto o ciottolo -h. Uno dei comandi imposta un nuovo progetto con un codice boilerplate. Crea una nuova directory ed esegui il seguente comando nella radice della nuova directory:

ciottolo nuovo progetto ciao-ciottolo

Se è la prima volta che crei un'applicazione Pebble, ti viene richiesto di accettare le condizioni d'uso e la licenza per sviluppatori Pebble. Una volta accettati questi, l'ultimo Pebble SDK (3.11.1 al momento della scrittura) viene scaricato e installato.

Dopo aver installato Pebble SDK, un progetto Pebble di base viene impostato nella directory corrente. Per creare, installare ed eseguire la tua app, devi fare quanto segue. Innanzitutto, assicurati di essere nella radice del tuo progetto Pebble. In questo caso, siamo nella radice del ciao-ghiaia elenco.

Quindi, esegui il costruire ghiaia comando. Quando il codice è compilato, dovresti vedere il messaggio 'build' è terminato correttamente e un numero di nuovi file nella directory di build. L'unico file di cui dobbiamo preoccuparci adesso è ciao-pebble.pbw. Questa è la tua app che verrà installata sull'orologio.

Per eseguire l'app, utilizziamo l'emulatore Pebble fornito con Pebble SDK. Pebble usa l'emulatore QEMU open source. Attualmente ci sono tre generazioni di Pebble disponibili per lo sviluppo. Pebble e Pebble Steel sono la generazione originale di Pebble. Pebble Time supporta 64 colori e utilizza la versione 3.x leggermente più recente del sistema operativo.

Il Pebble Time Round è quasi identico al Pebble Time ad eccezione del display circolare e più grande. Pebble utilizza i nomi delle piattaforme per differenziare le tre generazioni di smartwatch Pebble.

  • aplite è il nome della piattaforma utilizzato per Pebble e Pebble Steel.
  • Basalto è il nome della piattaforma per Pebble Time.
  • E Gesso è il nome della piattaforma per Pebble Time Round.

Possiamo lanciare uno di questi emulatori usando il --emulatore bandiera dopo il installazione di ghiaia comando, passando la piattaforma che vogliamo targetizzare. Ad esempio, se volessimo eseguire la nostra app sulla piattaforma per Pebble Time, dovremmo eseguire il seguente comando nella directory root del progetto Pebble:

installazione pebble - emulatore basalto

Questo comando avvia l'emulatore, avvia la piattaforma selezionata e installa il file .pbw file memorizzato nella directory di build. Questo è ciò che dovresti vedere nell'emulatore:

L'orologio Pebble non ha un touchscreen e viene fornito con quattro pulsanti, su, giù, selezionare, e indietro. Questi sono emulati con il su, giù, destra, e sinistra tasti sulla tastiera, rispettivamente. Premendo questi tasti, puoi navigare nell'app che hai creato.

Se apriamo il codice sorgente del progetto, vedete che è scritto in C. Per utilizzare Pebble.js per il progetto, useremo un modello che ci consentirà di iniziare più rapidamente. Pebble.js è ancora in beta al momento della scrittura, quindi alcune cose possono ancora cambiare in futuro.

Lascia la directory del progetto, crea una nuova directory e clona il repository GitHub come mostrato di seguito.

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

Una volta che hai clonato il repository, aprilo in un editor di testo e dai un'occhiata in giro. Il codice sorgente dell'applicazione può essere trovato nel src directory. All'interno di quella directory, hai altre tre directory, js, semplicemente, util, e a main.c file.

Il js directory è dove inseriamo il codice dell'applicazione. Il semplicemente directory è dove il codice nativo è che le funzioni JavaScript accedono e util la directory contiene più codice nativo che non è necessario toccare. Il punto di ingresso per l'applicazione vivrà in  js / app.js. Se costruiamo ed eseguiamo questa applicazione, dovresti vedere i seguenti risultati nell'emulatore:

Aperto js /app.js, dare un'occhiata in giro, e quindi eliminare questo file. Stiamo per iniziare da zero.

2. Costruiamo un'app

La prima cosa che dobbiamo imparare è come visualizzare il testo sullo schermo. Pebble.js ha un framework di interfaccia utente per l'istanziazione Elementi. Con questo framework, puoi creare elementi come testo, rettangoli e immagini. Aggiungi la seguente linea a app.js richiedere il quadro.

var UI = require ('ui');

Il primo elemento che useremo in questo tutorial è Finestra. Le finestre sono gli elementi costitutivi principali delle applicazioni Pebble. Ci sono tre tipi di finestre.

  • UN Carta può essere usato per visualizzare il testo in un modo preformattato, come un titolo in alto, un sottotitolo sotto di esso e un'area del corpo per un testo.
  • UN Menu è usato per visualizzare un elenco di opzioni.
  • UN Finestra è il più flessibile e ti consente di aggiungere vari elementi.

Per aggiungere del testo a una finestra, abbiamo anche bisogno Vector2, un modulo per disegnare vettori 2D e uno con cui avresti familiarità se hai fatto qualcosa con three.js o qualsiasi altra libreria di disegno vettoriale.

Il nostro primo obiettivo è creare una finestra, creare e aggiungere testo a quella finestra e visualizzarla all'utente. Il seguente snippet è il minimo richiesto per visualizzare il testo sullo schermo.

var UI = require ("ui"); var Vector2 = require ("vector2"); // Questa è la nostra finestra principale var main = new UI.Window (); // Questo è il nostro contenuto del testo var textfield = new UI.Text (size: new Vector2 (144, 60), text: 'Hello PebbleJS'); // aggiungi il testo alla finestra main.add (textfield); // mostra la finestra main.show ();

Costruisci il progetto e installa l'applicazione per vedere il risultato. Invece di fare entrambi i passaggi separatamente, preferisco concatenare i comandi ed eseguire il seguente comando:

pebble build && pebble install --emulator basalt

Se si desidera eseguire il test su tutte e tre le piattaforme contemporaneamente, è possibile aggiungere i comandi di installazione per ciascun emulatore:

build pebble e installa pebble --emulator basalt && pebble install --emulator aplite && pebble install --emulator chalk

Lo noterai aplite e basalto sembra quasi identico mentre gesso non sembra troppo bello Questo è dovuto allo schermo circolare e alle dimensioni dello schermo. Discuteremo del rilevamento della piattaforma tra un momento. Per ora, andiamo avanti con alcune delle funzionalità di base.

Nello snippet di codice precedente, creiamo a Testo elemento usando il Testo() metodo. L'istanziazione di Testo() prende un oggetto come parametro per configurare il Testo elemento. Il taglia chiave definisce la dimensione di un rettangolo (definito da a Vector2 istanza) in cui il Testo l'elemento è disegnato. Il valore del testo la chiave contiene la stringa che vogliamo mostrare. Quindi aggiungiamo il Testo elemento al Finestra prima di chiamare mostrare() sulla finestra per visualizzarlo.

Finora l'app utilizza le impostazioni predefinite per Finestra e Testo. Tuttavia, abbiamo la possibilità di personalizzarli. Abbiamo il controllo per cambiare posizione, colore e dimensione del carattere. Ci sono alcuni font di sistema disponibili e hai persino la possibilità di caricare font personalizzati che puoi usare nella tua app.

La nostra app ha un conto alla rovescia fino ad una certa data. Quando l'app si avvia, vogliamo che prenda la data odierna e calcoli quanti giorni è in atto fino a una data specifica in futuro. Diciamo, per esempio, che volevo un'app che mi dicesse quanti giorni sarebbe stato fino a quando Star Wars, Episodio VIII è qui.

So che voglio creare il mio principale Finestra all'avvio dell'app, calcolare il numero di giorni rimanenti fino al 15 dicembre 2017, quindi aggiungere quel numero al mio schermo al centro. Niente di troppo elegante.

Iniziamo con la visualizzazione di un numero statico, non troppo diverso dal codice "Hello PebbleJS" corrente che abbiamo scritto. Invece, usiamo una variabile come valore del testo chiave e aggiungi una nuova chiave, textAlign, centrare il testo.

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'); // aggiungi il testo alla finestra main.add (testo); // mostra la finestra main.show ();

L'esecuzione dell'applicazione ti dà l'output mostrato di seguito.

Come ho spiegato in precedenza, sono disponibili numerosi caratteri di sistema. Per questo tutorial, ci atterremo con uno dei font di sistema, Bitham 42 Bold, e posizionarlo un po 'più vicino al centro dello schermo, sia in orizzontale che in verticale. Il font opzione prende la stringa del carattere che si desidera utilizzare come riferimento nella documentazione. La posizione è determinata da un altro Vector2 istanza, che definisce il TestoLa posizione orizzontale e verticale.

Cambiare il TestoLa configurazione di questo tipo:

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

Ora dovresti avere qualcosa simile al seguente:

Sostituiamo il valore hard-coded con il numero corretto di giorni. Quando abbiamo clonato il progetto da GitHub, abbiamo ottenuto tutti i file necessari per accedere alle API del dispositivo e varie altre utilità per creare un'app Pebble con JavaScript. Una di queste utilità è la libreria moment.js, che puoi trovare in venditore directory. Questo renderà il calcolo più facile.

Richiedere moment.js nell'app e imposta il giorni rimanenti variabile a una funzione con la seguente implementazione:

var momento = require ('venditore / momento'); var daysRemaining = function () var eventdate = moment ("2017-12-15"); // Questa è la data in cui contiamo fino a - 15 dicembre var todaysdate = moment (); // Un'istanza di momento di todaysdate restituisce eventdate.diff (todaysdate, 'days'); // calcola la differenza in giorni. 

Quindi, cambiare il riferimento a giorni rimanenti a una chiamata di funzione come questa:

var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining (), // Questo è ora una funzione call textAlign: 'center', position: new Vector2 (0, 50), font : 'BITHAM_42_BOLD');

Se compili ed esegui l'app, dovresti vedere il numero corretto di giorni prima che venga rilasciato Star Wars, Episodio VIII. Potremmo lasciarlo qui e avere un'app che mostra semplicemente il numero di giorni fino all'evento che vogliamo monitorare, ma perché non approfittarne per aggiungere alcune funzionalità all'app. 

Innanzitutto, cambiamo il colore di sfondo del Finestra e il colore del testo in modo che lo sfondo sia bianco e il testo sia più scuro.

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', colore: ' nero' );

E aggiungiamo un altro Testo elemento per indicare cosa rappresenta il numero. Creiamo un nuovo Testo elemento e passare le opzioni per dimensioni, posizione, carattere, ecc.

var eventDetail = new UI.Text (size: new Vector2 (144, 168), text: 'Episodio VIII', textAlign: 'center', posizione: new Vector2 (0, 15), font: 'GOTHIC_24', colore: 'nero' );

Successivamente, aggiungiamo il Testo elemento alla finestra principale dopo aver aggiunto il testo oggetto.

main.add (testo) main.add (eventDetail);

Infine, aggiungiamo un terzo Testo elemento per indicare che il conto alla rovescia è in giorni.

var daysText = new UI.Text (size: new Vector2 (144, 168), text: 'days', textAlign: 'center', posizione: new Vector2 (0, 100), font: 'GOTHIC_24', colore: ' nero' ); main.add (daysText);

Per navigare, Pebble utilizza i pulsanti hardware anziché uno schermo tattile, trovato nella maggior parte degli altri smartwatch. Possiamo aggiungere la possibilità di consentire all'utente di approfondire la nostra applicazione utilizzando questi input. Diciamo, ad esempio, che volevamo anche mostrare la data di uscita per gli altri film in uscita nel franchise di Star Wars. Rogue One è uscito quest'anno e c'è già una data di uscita per l'episodio IX.

L'interazione con i pulsanti attiva eventi a cui è possibile abbonarsi. Quando viene rilevato un evento, possiamo decidere quale azione deve essere intrapresa. Se l'utente fa clic, potremmo costruirne uno nuovo Finestra per tenere la data di uscita per Rogue One e visualizzare il numero di giorni fino all'uscita di quel film.

Abboniamoci al pulsante giù e costruisci un nuovo Finestra. Il sopra() il metodo accetta tre parametri, l'azione, il pulsante e un gestore. Come accennato in precedenza, i possibili valori del secondo parametro sono su, giù, selezionare, o indietro. L'azione è di solito clic, ma hai anche la possibilità di usare longClick.

main.on ('click', 'down', function () var ro = new UI.Window (); console.log ('Down Clicked'); ro.show (););

Esegui l'applicazione e noterai che ottieni una schermata nera quando fai clic. Potresti chiederti come puoi ottenere l'accesso alla console per vedere i registri Pebble.

Quando l'app è in esecuzione, possiamo allegare un'altra console ad essa e ottenere i registri eseguendo tronchi di ghiaia - emulatore di basalto. Sostituisci il nome dell'emulatore se stai usando uno degli altri emulatori. Ora puoi vedere che la console registra Giù fatto clic quando si fa clic sul pulsante Giù.

log pebble - emulator basalt [06:33:11] javascript> Down Clicked [06:33:11] javascript> (+) [window 2]: [window 1], [window 2]

Come abbiamo fatto prima, calcoliamo il numero di giorni fino al rilascio e mostriamo queste informazioni all'utente. Per utilizzare la funzione di calcolo della data, ho intenzione di passare la data come parametro. Non vogliamo duplicare il codice.

var daysRemaining = function (dateString) var eventdate = moment (dateString); var todaysdate = moment (); return eventdate.diff (todaysdate, 'days'); 
main.on ('click', 'down', function () var ro = new UI.Window (); console.log ('Down Clicked'); var ro = new UI.Window (); var roCount = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining ("2016-12-16"), textAlign: 'center', posizione: new Vector2 (0, 50), font: 'BITHAM_42_BOLD', color: 'white'); var eventDetail = new UI.Text (size: new Vector2 (144, 168), text: 'Rogue One', textAlign: 'center', posizione: new Vector2 (0, 15), font: 'GOTHIC_24', color: 'white'); var roDays = new UI.Text (size: new Vector2 (144, 168), text: 'days', textAlign: 'center', position: new Vector2 ( 0, 100), carattere: 'GOTHIC_24', colore: 'bianco'); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.show ( ););

Se lo desideri, puoi anche aggiungere uno schermo per Episodio IX. Lascerò che sia una sfida per te provare te stesso.

Dovremmo risolvere il problema di visualizzazione per gli utenti con Pebble Time Round. Per fare ciò, dobbiamo rilevare la piattaforma su cui si trovano e aggiornare di conseguenza l'interfaccia utente.

Nella tua app, hai accesso a un oggetto globale, ciottolo. Questo oggetto ha alcune funzioni che possiamo usare, una delle quali è getActiveWatchInfo (), che restituisce un oggetto con le informazioni di runtime della piattaforma.

Possiamo ottenere il nome della piattaforma usando il piattaforma chiave. Se la piattaforma è uguale a gesso, abbiamo bisogno di apportare alcune modifiche all'interfaccia utente.

In cima a app.js, recuperiamo le informazioni sulla sorveglianza delle azioni e controlliamo se il nome della piattaforma corrente è uguale gesso.

var info = Pebble.getActiveWatchInfo (); // Restituisce informazioni sull'orologio var platform = info.platform; // Restituisce una stringa del nome della piattaforma var isChalk = platform === 'chalk';

Se esegui la tua app sulla piattaforma Chalk, dovresti vedere quanto segue:

Ovunque dimensioniamo e posizioniamo gli elementi dell'interfaccia utente, dobbiamo apportare piccole modifiche per accogliere la schermata circolare della piattaforma Chalk. Come inizio, creiamo una variabile che trattiene la larghezza dello schermo.

var sWidth = isChalk? 180: 144;

Pebble Time Round ha un display 180x x 180 px. Ciò significa che dobbiamo modificare la coordinata X di Vettore oggetti. Creiamo tre variabili per aiutarci con questo.

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

Il codice finale sarà simile a questo:

var UI = require ("ui"); var Vector2 = require ("vector2"); var momento = require ("momento"); var info = Pebble.getActiveWatchInfo (); var platform = info.platform; var isChalk = platform === "chalk"; 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); // Questa è la data che contiamo fino a - 24 aprile var todaysdate = moment (); // Un'istanza di momento di todaysdate var difference = eventdate.diff (todaysdate, "days"); return difference; var main = nuova UI.Window (backgroundColor: "white"); var text = new UI.Text (size: new Vector2 (sWidth, 168), text: daysRemaining ("2017-12-15"), textAlign: "center ", posizione: nuovo Vector2 (0, countPosition), carattere:" BITHAM_42_BOLD ", colore:" nero "); // Dettaglio evento Testo var eventDetail = new UI.Text (size: new Vector2 (sWidth, 168), testo: "Episodio VIII", textAlign: "center", posizione: new Vector2 (0, titlePosition), tipo: "GOTHIC_24", colore: "black") // Dettaglio evento Testo var daysText = new UI.Text ( dimensione: nuovo Vector2 (sWidth, 168), testo: "days", textAlign: "center", posizione: new Vector2 (0, daysPosition), carattere: "GOTHIC_24", colore: "black") // aggiungi il testo alla finestra main.add (testo); main.add (eventDetail); main.add (daysText); // mostra la finestra main.show (); // ROGUE 1 finestra main.on ("click", "dow n ", function () var ro = new UI.Window (); var roCount = new UI.Text (size: new Vector2 (sWidth, 168), text: daysRemaining ("2016-12-16"), textAlign: "center", posizione: new Vector2 (0, countPosition), tipo di carattere: "BITHAM_42_BOLD", colore: "bianco"); var eventDetail = new UI.Text (size: new Vector2 (sWidth, 168), testo: "Rogue One", textAlign: "center", posizione: new Vector2 (0, titlePosition), tipo: "GOTHIC_24", colore: "white") var roDays = new UI.Text (size: new Vector2 (sWidth, 168), testo: "days", textAlign: "center", posizione: new Vector2 (0, daysPosition), tipo: "GOTHIC_24 ", colore bianco" ); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.on ("click", "down", function () var nine = new UI.Window (backgroundColor: "white"); var nineCount = new UI.Text (size: new Vector2 (sWidth, 168 ), text: daysRemaining ("2019-05-24"), textAlign: "center", posizione: new Vector2 (0, countPosition), carattere: "BITHAM_42_BOLD", colore: "black"); var eventDetail = nuova UI .Text (size: new Vector2 (sWidth, 168), testo: "Episodio IX", textAlign: "center", posizione: new Vector2 (0, titlePosition), tipo: "GOTHIC_24", colore: "black") var nineDays = new UI.Text (size: new Vector2 (sWidth, 168), text: "days", textAlign: "center", posizione: new Vector2 (0, daysPosition), tipo: "GOTHIC_24", colore: " nero "); nine.add (nineCount); nine.add (nineDays); nine.add (eventDetail); nine.show ();); );

Sono sicuro che sei d'accordo sul fatto che ci sia un ampio margine di miglioramento. Stiamo duplicando il codice in vari punti, che non è una buona pratica. Detto questo, spero che tu abbia ora una conoscenza di base su come puoi creare app per Pebble usando JavaScript e l'SDK Pebble.

Nell'ultima sezione di questo tutorial, vorrei mostrarti come caricare la nostra app nell'app store Pebble.

3. Caricamento su Pebble App Store

Prima di caricare l'app, c'è una cosa di cui dobbiamo occuparci. Quando abbiamo avviato questa app da un modello, ci sono alcuni dettagli in appinfo.json, il manifest per la nostra applicazione, che dobbiamo cambiare. Puoi trovare questo file nella radice del progetto. Aperto appinfo.json e cambia il Nome della dittanome corto, e LongName valori.

L'ultima cosa di cui abbiamo bisogno è un UUID (Universally Unique Identifier). Il manifest contiene già uno, ma quando provi a caricare il file .pbw file nell'app store, riceverai un errore perché questo UUID è già in uso.

Il modo più semplice per ottenerne uno è prenderlo dall'originale ciao-ghiaia app che abbiamo creato all'inizio di questo tutorial, perché non caricheremo quell'app all'app store. Se hai cancellato il progetto, crea un nuovo progetto e copia l'UUID da quel progetto. Una volta fatto, crea una nuova build.

Ora abbiamo un'applicazione pronta per essere caricata nell'app store Pebble. Vai al portale per sviluppatori di Pebble e registrati per un account o accedi se ne hai già uno. Una volta effettuato l'accesso, fai clic sul link che dice Pubblica un'app Pebble.

Nella pagina successiva, scegli Crea un Watchapp in basso.

Il modulo nella pagina successiva sembra un po 'scoraggiante, ma i campi sono abbastanza auto-esplicativi. Per completare l'invio, devi caricare almeno due risorse, entrambe icone per la tua app.

Dopo questo passaggio, si viene portati all'anteprima dell'app store con alcuni dati dell'applicazione sul lato destro. È necessario aggiungere una data di rilascio per la tua app. Per fare ciò, fare clic Aggiungi una versione e carica il .pbw file, che puoi trovare nella cartella build del tuo progetto.

Una volta fatto questo, si ritorna alla schermata panoramica e al .pbw il file è verificato Questo di solito richiede solo pochi secondi. Una volta verificato, l'app è pronta per la pubblicazione. Se in questo caso si verificano problemi e la verifica non riesce, viene visualizzato un messaggio utile che spiega il motivo per cui la verifica ha avuto esito negativo.

Prima di andare avanti e colpire il Pubblicare pulsante, potresti voler aggiungere alcuni screenshot per far sì che le persone possano vedere cosa aspettarsi dopo averlo installato. Queste immagini sono mostrate nell'anteprima dell'app store.

Lo strumento Pebble CLI ha un ottimo e semplice metodo per fare screenshot. In esecuzione screenshot di ciottoli FILENAME prendere uno screenshot dell'emulatore corrente in esecuzione e salvarlo nella directory corrente.

Dopo aver caricato gli screenshot e aver compilato la descrizione per le varie piattaforme, sei pronto per pubblicare la tua prima app Pebble.

Conclusione

In questo articolo, hai imparato come installare e configurare Pebble SDK, come utilizzare alcuni dei comandi base di Pebble CLI e come creare un'applicazione di base utilizzando JavaScript. Inutile dire che abbiamo solo graffiato la superficie in questo tutorial. C'è molto altro da imparare, non solo sulla scrittura di applicazioni Pebble con JavaScript, ma anche sullo sviluppo di Pebble in generale e sugli strumenti a tua disposizione.