Wie man eine Pebble-Anwendung erstellt man

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Final product image — What You'll Be Creating

Die Pebble Smartwatch gibt es seit ihrer sehr erfolgreichen Kickstarter-Kampagne im Jahr 2012 und ist eine beliebte Wahl bei Smartwatch-Nutzern. Das liegt an der hervorragenden Akkulaufzeit, dem niedrigen Preis, den verschiedenen Modellen zur Auswahl und der Kompatibilität mit iOS und Android.

Pebble hat seit dem ersten Tag ein Entwickler-SDK, das Entwickler ermutigt, interessante und innovative Anwendungen für die Pebble-Plattform zu entwickeln. Das SDK wurde immer auf dem neuesten Stand gehalten, wobei im Laufe der Zeit neue Funktionen hinzugefügt wurden.

Pebble-Anwendungen wurden traditionell in C codiert, aber kürzlich hat Pebble JavaScript übernommen und die Welt der App-Entwicklung auf ihrer Plattform für noch mehr Entwickler geöffnet. In dieser Einführung in die Pebble-Entwicklung werde ich Ihnen einige Grundlagen für den Einstieg in die Pebble-Entwicklung mithilfe des SDK und der Pebble.js-Bibliothek erläutern, indem Sie eine Anwendung erstellen und an den Pebble-Anwendungsspeicher senden.

Der Besitz eines Pebble oder Vorkenntnisse in der Sprache C sind für dieses Tutorial nicht erforderlich.

1. Einrichten des Projekts

Derzeit gibt es zwei Umgebungen, in denen Sie Pebble-Anwendungen erstellen können. CloudPebble ermöglicht die Entwicklung von Pebble-Apps im Browser. Das ist großartig, wenn Sie Windows verwenden oder einen weniger leistungsstarken Computer verwenden.

Die andere Option und die Option, der dieses Tutorial folgen wird, besteht darin, den Entwicklungsworkflow lokal zu haben. Dadurch können Sie offline arbeiten und einen Editor Ihrer Wahl verwenden. Lassen Sie uns zuerst das Pebble-Tool und das SDK installieren.

Derzeit gibt es keine offizielle Unterstützung für das Pebble-Tool und das SDK unter Windows, daher führt Sie der folgende Abschnitt durch die Schritte zur Installation des Pebble-Tools und des SDKs unter OS X und Linux. Pebble empfiehlt, dass Sie CloudPebble für die Entwicklung unter Windows verwenden, Sie können jedoch auch eine virtuelle Linux-Maschine verwenden.

Der einfachste Weg, das Pebble-Tool unter OS X zu installieren, ist über Homebrew. Wenn Sie Homebrew nicht installiert haben, finden Sie die Installationsanweisungen auf der Homebrew-Website. Wenn Homebrew installiert ist, können Sie das Pebble-Tool mit dem folgenden Befehl installieren:

1	brew install pebble/pebble-sdk/pebble-sdk

Es sind einige zusätzliche Schritte erforderlich, um das Pebble-Tool und das SDK unter Linux zu installieren. Pebble hat eine detaillierte Anleitung zur Verfügung, der Sie folgen können. Sobald Sie das Pebble-Tool installiert haben, steht Ihnen der pebble-Befehl über die Befehlszeile zur Verfügung. Beim Ausführen von pebble --version werden die Versionsinformationen angezeigt.

1	$ ~ pebble --version
2
3	Pebble Tool v4.2.1

Die pebble-Befehlszeilenschnittstelle enthält mehrere praktische Befehle. Sie können diese Befehle auflisten, indem Sie pebble --help oder pebble -h ausführen. Einer der Befehle richtet ein neues Projekt mit etwas Boilerplate-Code ein. Erstellen Sie ein neues Verzeichnis und führen Sie den folgenden Befehl im Stammverzeichnis des neuen Verzeichnisses aus:

1	pebble new-project hello-pebble

Wenn Sie zum ersten Mal eine Pebble-Anwendung erstellen, werden Sie aufgefordert, die Nutzungsbedingungen und die Pebble-Entwicklerlizenz zu akzeptieren. Sobald Sie diese akzeptiert haben, wird das neueste Pebble SDK (3.11.1 zum Zeitpunkt der Erstellung) heruntergeladen und installiert.

Nach der Installation des Pebble SDK wird ein grundlegendes Pebble-Projekt im aktuellen Verzeichnis eingerichtet. Gehen Sie wie folgt vor, um Ihre App zu erstellen, zu installieren und auszuführen. Stellen Sie zunächst sicher, dass Sie sich im Stammverzeichnis Ihres Pebble-Projekts befinden. In diesem Fall befinden wir uns im Stammverzeichnis des hello-pebble-Verzeichnisses.

Führen Sie als Nächstes den Befehl pebble build aus. Wenn der Code kompiliert ist, sollten Sie die Meldung 'build' finished successfully sehen und eine Reihe neuer Dateien im Build-Verzeichnis. Die einzige Datei, um die wir uns im Moment kümmern müssen, ist hello-pebble.pbw. Dies ist Ihre App, die auf der Uhr installiert wird.

Um die App auszuführen, verwenden wir den Pebble-Emulator, der mit dem Pebble-SDK geliefert wird. Pebble verwendet den Open-Source-QEMU-Emulator. Derzeit gibt es drei Generationen von Pebble, die entwickelt werden können. Pebble und Pebble Steel sind die ursprüngliche Generation von Pebble. Die Pebble Time unterstützt 64 Farben und verwendet die etwas neuere 3.x-Version des Betriebssystems.

Die Pebble Time Round ist mit Ausnahme des runden und größeren Displays fast identisch mit der Pebble Time. Pebble verwendet Plattformnamen, um die drei Generationen von Pebble-Smartwatches zu unterscheiden.

Aplite ist der Plattformname, der für Pebble und Pebble Steel verwendet wird.
Basalt ist der Plattformname für die Pebble Time.
Und Chalk ist der Plattformname für die Pebble Time Round.

Wir können jeden dieser Emulatoren mit dem Flag --emulator nach dem Befehl pebble install starten und die Plattform übergeben, die wir ansprechen möchten. Wenn wir beispielsweise unsere App auf der Plattform für die Pebble Time ausführen wollten, würden wir den folgenden Befehl im Stammverzeichnis des Pebble-Projekts ausführen:

1	pebble install --emulator basalt

Dieser Befehl startet den Emulator, startet die ausgewählte Plattform und installiert die im Build-Verzeichnis gespeicherte .pbw-Datei. Das sollten Sie im Emulator sehen:

Die Pebble-Uhr hat keinen Touchscreen und wird mit vier Tasten geliefert, hoch, runter, auswählen und zurück. Diese werden mit den Aufwärts-, Abwärts-, Rechts- und Linkstasten Ihrer Tastatur emuliert. Durch Drücken dieser Tasten können Sie in der von Ihnen erstellten App navigieren.

Wenn wir den Quellcode des Projekts öffnen, sehen Sie, dass er in C geschrieben ist. Um Pebble.js für das Projekt zu verwenden, verwenden wir eine Vorlage, die uns einen schnelleren Einstieg ermöglicht. Pebble.js befindet sich zum Zeitpunkt des Schreibens noch in der Beta-Phase, sodass sich in Zukunft noch einige Dinge ändern können.

Verlassen Sie das Projektverzeichnis, erstellen Sie ein neues Verzeichnis und klonen Sie das GitHub-Repository wie unten gezeigt.

mkdir hello-pebblejs

cd hello-pebblejs

git clone https://github.com/pebble/pebblejs .

Nachdem Sie das Repository geklont haben, öffnen Sie es in einem Texteditor und sehen Sie sich um. Der Quellcode der Anwendung befindet sich im src-Verzeichnis. In diesem Verzeichnis befinden sich drei weitere Verzeichnisse, js, simply, util und eine main.c-Datei.

Im js-Verzeichnis legen wir den Anwendungscode ab. Im Verzeichnis simply befindet sich der native Code, auf den die JavaScript-Funktionen zugreifen, und das Verzeichnis util enthält mehr nativen Code, den wir nicht anfassen müssen. Der Einstiegspunkt für die Anwendung wird in js/app.js gespeichert. Wenn wir diese Anwendung erstellen und ausführen, sollten Sie im Emulator das folgende Ergebnis sehen:

Öffnen Sie js/app.js, sehen Sie sich um und löschen Sie dann diese Datei. Wir werden bei Null anfangen.

2. Lass uns eine App erstellen

Das erste, was wir lernen müssen, ist, wie man Text auf dem Bildschirm anzeigt. Pebble.js verfügt über ein Benutzeroberflächen-Framework zum Instanziieren von Elementen. Mit diesem Framework können Sie Elemente wie Text, Rechtecke und Bilder erstellen. Fügen Sie app.js die folgende Zeile hinzu, um das Framework zu erfordern.

1	var UI = require('ui');

Das erste Element, das wir in diesem Tutorial verwenden werden, ist Window. Windows sind die Hauptbausteine von Pebble-Anwendungen. Es gibt drei Arten von Fenstern.

Eine Card kann verwendet werden, um Text vorformatiert anzuzeigen, z. B. einen Titel oben, einen Untertitel darunter und einen Textbereich für einige Texte.
Ein Menu wird verwendet, um eine Liste von Optionen anzuzeigen.
Ein Window ist das flexibelste und ermöglicht es Ihnen, verschiedene Elemente hinzuzufügen.

Um einem Fenster Text hinzuzufügen, benötigen wir auch Vector2, ein Modul zum Zeichnen von 2D-Vektoren und eines, das Sie kennen würden, wenn Sie mit three.js oder einer anderen Vektor-Zeichenbibliothek vertraut sind.

Unser erstes Ziel ist es, ein Fenster zu erstellen, Text zu erstellen und an dieses Fenster anzuhängen und es dem Benutzer anzuzeigen. Das folgende Snippet ist das Minimum, das erforderlich ist, um Text auf dem Bildschirm anzuzeigen.

var UI = require("ui");
var Vector2 = require("vector2");
// This is our main window
var main = new UI.Window();

// This is our text content
var textfield = new UI.Text({
    size: new Vector2(144, 60),
    text: 'Hello PebbleJS'
});

//add the text to the window
main.add(textfield);

//show the window
main.show();

Erstellen Sie das Projekt und installieren Sie die Anwendung, um das Ergebnis anzuzeigen. Anstatt beide Schritte getrennt auszuführen, ziehe ich es vor, die Befehle miteinander zu verketten und den folgenden Befehl auszuführen:

1	pebble build && pebble install --emulator basalt

Wenn Sie auf allen drei Plattformen gleichzeitig testen möchten, können Sie die Installationsbefehle für jeden Emulator hinzufügen:

1	pebble build &&
2	pebble install --emulator basalt &&
3	pebble install --emulator aplite &&
4	pebble install --emulator chalk

Sie werden feststellen, dass aplite und basalt fast identisch aussehen, während chalk nicht so gut aussieht. Dies liegt an dem runden Bildschirm und den Abmessungen des Bildschirms. Wir werden die Plattformerkennung gleich besprechen. Im Moment gehen wir mit einigen der grundlegenden Funktionen voran.

Im obigen Code-Snippet erstellen wir ein Text-Element mithilfe der Text()-Methode. Die Instanziierung von Text() verwendet ein Objekt als Parameter, um das Text-Element zu konfigurieren. Der size-Schlüssel definiert die Größe eines Rechtecks (definiert durch eine Vector2-Instanz), in dem das Text-Element gezeichnet wird. Der Wert des text-Schlüssels enthält die Zeichenfolge, die wir anzeigen möchten. Dann fügen wir das Text-Element zum Window hinzu, bevor wir show() im Fenster aufrufen, um es anzuzeigen.

Bisher verwendet Ihre App die Standardeinstellungen für Window und Text. Wir haben jedoch die Möglichkeit, sie anzupassen. Wir haben die Kontrolle, um Position, Farbe und Schriftgröße zu ändern. Es stehen einige Systemschriftarten zur Verfügung und Sie haben sogar die Möglichkeit, benutzerdefinierte Schriftarten zu laden, die Sie in Ihrer App verwenden können.

Unsere App wird bis zu einem bestimmten Datum herunterzählen. Wenn die App startet, möchten wir, dass sie das heutige Datum nimmt und berechnet, wie viele Tage es bis zu einem bestimmten Datum in der Zukunft dauert. Nehmen wir zum Beispiel an, ich wollte eine App, die mir sagt, wie viele Tage es noch dauert, bis Star Wars, Episode VIII da ist.

Ich weiß, dass ich beim Start der App mein Hauptfenster erstellen möchte, die Anzahl der verbleibenden Tage bis zum 15. Dezember 2017 berechnen und diese Zahl dann zu meinem Bildschirm in der Mitte hinzufügen möchte. Nichts Besonderes.

Beginnen wir mit der Anzeige einer statischen Zahl, die sich nicht allzu sehr vom aktuellen "Hello PebbleJS"-Code unterscheidet, den wir geschrieben haben. Stattdessen verwenden wir eine Variable als Wert des text-Schlüssels und fügen einen neuen Schlüssel, textAlign, hinzu, um den Text zu zentrieren.

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'
});

//add the text to the window
main.add(text);

//show the window
main.show();

Wenn Sie die App ausführen, erhalten Sie die unten gezeigte Ausgabe.

Wie bereits erläutert, stehen eine Reihe von Systemschriftarten zur Verfügung. Für dieses Tutorial bleiben wir bei einer der Systemschriftarten, Bitham 42 Bold, und positionieren sie sowohl horizontal als auch vertikal etwas näher an der Bildschirmmitte. Die Option font verwendet die Zeichenfolge der Schriftart, die Sie verwenden möchten, wie in der Dokumentation angegeben. Die Position wird von einer anderen Vector2-Instanz bestimmt, die die horizontale und vertikale Position des Textes definiert.

Ändern Sie die Konfiguration des Text wie folgt:

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

Sie sollten jetzt etwas wie das Folgende haben:

Ersetzen wir den hartcodierten Wert durch die richtige Anzahl von Tagen. Als wir das Projekt von GitHub geklont haben, haben wir alle notwendigen Dateien erhalten, um auf die Geräte-APIs und verschiedene andere Dienstprogramme zuzugreifen, um eine Pebble-App mit JavaScript zu erstellen. Eines dieser Dienstprogramme ist die Bibliothek moment.js, die Sie im vendor-Verzeichnis finden. Dies erleichtert die Berechnung.

Fordern Sie moment.js in der App an und legen Sie die Variable daysRemaining auf eine Funktion mit der folgenden Implementierung fest:

var moment = require('vendor/moment');

var daysRemaining = function(){
    var eventdate = moment("2017-12-15"); // This is the date we're counting down to - December 15
    var todaysdate = moment(); // A moment instance of todaysdate
    return eventdate.diff(todaysdate, 'days'); // calculate the difference in days.
}

Als nächstes ändern Sie die Referenz in daysRemaining auf einen Funktionsaufruf wie folgt:

var text = new UI.Text({
    size: new Vector2(144, 168),
    text:daysRemaining(), // This is now a function call
    textAlign:'center',
    position: new Vector2(0, 50),
    font:'BITHAM_42_BOLD'
});

Wenn Sie die App kompilieren und ausführen, sollten Sie die richtige Anzahl von Tagen bis zur Veröffentlichung von Star Wars, Episode VIII sehen. Wir könnten dies hier belassen und eine App haben, die einfach die Anzahl der Tage bis zum Ereignis anzeigt, das wir verfolgen möchten, aber warum nicht die Gelegenheit nutzen, der App ein paar Funktionen hinzuzufügen.

Ändern wir zunächst die Hintergrundfarbe des Fensters und die Farbe des Textes, sodass der Hintergrund weiß und der Text dunkler ist.

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:'black'
});

Fügen wir ein weiteres text-Element hinzu, um anzugeben, was die Zahl darstellt. Wir erstellen ein neues text-Element und übergeben ihm Optionen für Größe, Position, Schriftart usw.

var eventDetail = new UI.Text({
    size: new Vector2(144, 168),
    text:'Episode VIII',
    textAlign:'center',
    position: new Vector2(0, 15),
    font:'GOTHIC_24',
    color:'black'
});

Als nächstes fügen wir das Text-Element zum Hauptfenster hinzu, nachdem wir das text-Objekt hinzugefügt haben.

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

Schließlich fügen wir ein drittes Text-Element hinzu, um anzugeben, dass der Countdown in Tagen läuft.

var daysText = new UI.Text({
    size: new Vector2(144, 168),
    text:'days',
    textAlign:'center',
    position: new Vector2(0, 100),
    font:'GOTHIC_24',
    color:'black'
});

main.add(daysText);

Zum Navigieren verwendet Pebble Hardware-Tasten im Gegensatz zu einem Touchscreen, der bei den meisten anderen Smartwatches zu finden ist. Wir können die Möglichkeit hinzufügen, dem Benutzer mithilfe dieser Eingaben ein tieferes Eintauchen in unsere Anwendung zu ermöglichen. Nehmen wir zum Beispiel an, wir wollten auch den Veröffentlichungstermin für die anderen kommenden Filme der Star Wars-Franchise anzeigen. Rogue One wird dieses Jahr veröffentlicht und es gibt bereits einen Veröffentlichungstermin für Episode IX.

Die Interaktion mit den Schaltflächen löst Ereignisse aus, die wir abonnieren können. Wenn ein Ereignis erkannt wird, können wir entscheiden, welche Maßnahmen ergriffen werden müssen. Wenn der Benutzer nach unten klickt, könnten wir ein neues Fenster erstellen, um das Veröffentlichungsdatum für Rogue One festzuhalten und die Anzahl der Tage bis zur Veröffentlichung dieses Films anzuzeigen.

Lassen Sie uns den Abwärts-Button abonnieren und ein neues Fenster erstellen. Die Methode on() benötigt drei Parameter, die Aktion, die Schaltfläche und einen Handler. Wie bereits erwähnt, sind die möglichen Werte des zweiten Parameters up, down, select oder back. Die Aktion ist normalerweise ein click, aber Sie haben auch die Möglichkeit, longClick zu verwenden.

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

Führen Sie die Anwendung aus und Sie werden feststellen, dass beim Klicken nach unten ein schwarzer Bildschirm angezeigt wird. Sie fragen sich vielleicht, wie Sie auf die Konsole zugreifen können, um die Pebble-Protokolle anzuzeigen.

Wenn die App ausgeführt wird, können wir eine weitere Konsole daran anschließen und die Protokolle abrufen, indem wir pebble logs --emulator basalt ausführen. Ersetzen Sie den Emulatornamen, wenn Sie einen der anderen Emulatoren verwenden. Sie können jetzt sehen, dass die Konsole Down Clicked protokolliert, wenn auf die Down-Schaltfläche geklickt wird.

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

Lassen Sie uns wie zuvor die Anzahl der Tage bis zur Veröffentlichung berechnen und diese Informationen dem Benutzer anzeigen. Um die Datumsberechnungsfunktion zu verwenden, werde ich das Datum als Parameter übergeben. Wir wollen keinen Code duplizieren.

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',
        position: 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',
        position: 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),
        font:'GOTHIC_24',
        color:'white'
    });

    ro.add(roCount);
    ro.add(roDays);
    ro.add(eventDetail);
    ro.show();

    ro.show();
});

Wenn Sie möchten, können Sie auch einen Bildschirm für Episode IX hinzufügen. Das überlasse ich Ihnen als Herausforderung, es selbst auszuprobieren.

New Screen Added for Two Additional Countdowns

Wir sollten das Anzeigeproblem für Benutzer mit einer Pebble Time Round beheben. Dazu müssen wir erkennen, auf welcher Plattform sie sich befinden und die Benutzeroberfläche entsprechend aktualisieren.

In Ihrer App haben Sie Zugriff auf ein globales Objekt, Pebble. Dieses Objekt verfügt über einige Funktionen, die wir verwenden können, darunter getActiveWatchInfo(), das ein Objekt mit den Laufzeitinformationen der Plattform zurückgibt.

Wir können den Plattformnamen mit dem plattform-Schlüssel abrufen. Wenn die Plattform chalk ebenbürtig ist, müssen wir einige Anpassungen an der Benutzeroberfläche vornehmen.

Oben in app.js holen wir die Action Watch-Informationen und prüfen, ob der aktuelle Plattformname gleich chalk ist.

1	var info = Pebble.getActiveWatchInfo(); // Returns watch info
2	var platform = info.platform; // Returns a string of the platform name
3	var isChalk = platform === 'chalk';

Wenn Sie Ihre App auf der Chalk-Plattform ausführen, sollten Sie Folgendes sehen:

Überall, wo wir Elemente der Benutzeroberfläche dimensionieren und positionieren, müssen wir kleine Änderungen vornehmen, um dem runden Bildschirm der Chalk-Plattform gerecht zu werden. Zu Beginn erstellen wir eine Variable, die die Breite des Bildschirms enthält.

1	var sWidth = isChalk ? 180 : 144;

Pebble Time Round hat ein 180px x 180px Display. Dies bedeutet, dass wir die X-Koordinate der Vektor-Objekte ändern müssen. Wir erstellen drei Variablen, um uns dabei zu helfen.

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

Der endgültige Code sieht in etwa so aus:

var UI = require("ui");
var Vector2 = require("vector2");
var moment = require("moment");

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); // This is the date we"re counting down to - 24th April
    var todaysdate = moment(); // A moment instance of todaysdate
    var difference = eventdate.diff(todaysdate, "days");
    return difference
};

var main = new UI.Window({
    backgroundColor: "white"
});

var text = new UI.Text({
    size: new Vector2(sWidth, 168),
    text: daysRemaining("2017-12-15"),
    textAlign: "center",
    position: new Vector2(0, countPosition),
    font: "BITHAM_42_BOLD",
    color: "black"
});

//Event Detail Text

var eventDetail = new UI.Text({
    size: new Vector2(sWidth, 168),
    text: "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"
})

//add the text to the window
main.add(text);
main.add(eventDetail);
main.add(daysText);

//show the window
main.show();


//ROGUE 1 window

main.on("click", "down", function() {

    var ro = new UI.Window();

    var roCount = new UI.Text({
        size: new Vector2(sWidth, 168),
        text: daysRemaining("2016-12-16"),
        textAlign: "center",
        position: new Vector2(0, countPosition),
        font: "BITHAM_42_BOLD",
        color: "white"
    });

    var eventDetail = new UI.Text({
        size: new Vector2(sWidth, 168),
        text: "Rogue One",
        textAlign: "center",
        position: new Vector2(0, titlePosition),
        font: "GOTHIC_24",
        color: "white"
    })

    var roDays = new UI.Text({
        size: new Vector2(sWidth, 168),
        text: "days",
        textAlign: "center",
        position: new Vector2(0, daysPosition),
        font: "GOTHIC_24",
        color: "white"
    });

    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",
            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 = new UI.Text({
            size: new Vector2(sWidth, 168),
            text: "days",
            textAlign: "center",
            position: new Vector2(0, daysPosition),
            font: "GOTHIC_24",
            color: "black"
        });

        nine.add(nineCount);
        nine.add(nineDays);
        nine.add(eventDetail);
        nine.show();
    });

});

Ich bin sicher, Sie stimmen zu, dass es reichlich Raum für Verbesserungen gibt. Wir duplizieren Code an verschiedenen Stellen, was keine gute Praxis ist. Ich hoffe jedoch, dass Sie jetzt ein grundlegendes Verständnis dafür haben, wie Sie Apps für Pebble mit JavaScript und dem Pebble SDK erstellen können.

Im letzten Abschnitt dieses Tutorials möchte ich Ihnen zeigen, wie Sie unsere App in den Pebble App Store hochladen.

3. Hochladen in den Pebble App Store

Bevor wir die App hochladen, müssen wir uns um eine Sache kümmern. Da wir diese App von einer Vorlage aus gestartet haben, müssen wir einige Details in appinfo.json, dem Manifest für unsere Anwendung, ändern. Sie finden diese Datei im Stammverzeichnis des Projekts. Öffnen Sie appinfo.json und ändern Sie die Werte für Firmenname, Kurzname und Langname.

Das Letzte, was wir brauchen, ist eine UUID (Universally Unique Identifier). Das Manifest enthält bereits eine, aber wenn Sie versuchen, die .pbw-Datei in den App Store hochzuladen, erhalten Sie eine Fehlermeldung, da diese UUID bereits verwendet wird.

Der einfachste Weg, um eine zu erhalten, besteht darin, sie aus der ursprünglichen hello-pebble-App zu nehmen, die wir zu Beginn dieses Tutorials erstellt haben, da wir diese App nicht in den App Store hochladen werden. Wenn Sie das Projekt gelöscht haben, erstellen Sie ein neues Projekt und kopieren Sie die UUID aus diesem Projekt. Sobald dies erledigt ist, erstellen Sie einen neuen Build.

Wir haben jetzt eine Anwendung, die zum Hochladen in den Pebble App Store bereit ist. Besuchen Sie das Pebble-Entwicklerportal und registrieren Sie sich für ein Konto oder melden Sie sich an, falls Sie bereits eines haben. Klicken Sie nach der Anmeldung auf den Link Publish a Pebble App.

Wählen Sie auf der nächsten Seite unten eine Watchapp erstellen.

Das Formular auf der nächsten Seite sieht etwas abschreckend aus, aber die Felder sind ziemlich selbsterklärend. Um die Übermittlung abzuschließen, müssen Sie mindestens zwei Assets hochladen, die beide Symbole für Ihre App sind.

Nach diesem Schritt gelangen Sie zur App-Store-Vorschau mit einigen Anwendungsdaten auf der rechten Seite. Es ist erforderlich, dass Sie ein Veröffentlichungsdatum für Ihre App hinzufügen. Klicken Sie dazu auf Release hinzufügen und laden Sie die .pbw-Datei hoch, die Sie im Build-Ordner Ihres Projekts finden.

Danach kehren Sie zum Übersichtsbildschirm zurück und die .pbw-Datei wird verifiziert. Dies dauert in der Regel nur wenige Sekunden. Nach der Überprüfung ist die App zur Veröffentlichung bereit. Wenn Sie hier auf Probleme stoßen und die Überprüfung fehlschlägt, wird Ihnen eine hilfreiche Meldung angezeigt, die erklärt, warum die Überprüfung fehlgeschlagen ist.

Bevor Sie fortfahren und auf die Schaltfläche Veröffentlichen klicken, möchten Sie möglicherweise einige Screenshots für Ihre hinzufügen, damit die Leute sehen können, was sie nach der Installation erwarten können. Diese Bilder werden in der App Store-Vorschau angezeigt.

Das Pebble CLI-Tool bietet eine großartige und einfache Methode zum Aufnehmen von Screenshots. Laufender pebble screenshot FILENAME macht einen Screenshot des aktuell laufenden Emulators und speichert ihn im aktuellen Verzeichnis.

Nachdem Sie die Screenshots hochgeladen und die Beschreibung für die verschiedenen Plattformen ausgefüllt haben, können Sie Ihre erste Pebble-App veröffentlichen.

Abschluss

In diesem Artikel haben Sie erfahren, wie Sie das Pebble SDK installieren und einrichten, einige der grundlegenden Pebble-CLI-Befehle verwenden und eine grundlegende Anwendung mit JavaScript erstellen. Es versteht sich von selbst, dass wir in diesem Tutorial nur an der Oberfläche gekratzt haben. Es gibt noch viel mehr zu lernen, nicht nur über das Schreiben von Pebble-Apps mit JavaScript, sondern auch über die Pebble-Entwicklung im Allgemeinen und die Ihnen zur Verfügung stehenden Tools.