Share
Was Sie erstellen werdenEin Smart Watch App-Entwickler zu werden ist eine großartige Idee, aber was ist, wenn Sie ein HTML-Entwickler sind? Können Sie Ihren Traum verwirklichen, ohne auf eine völlig andere Plattform umzusteigen? Müssen Sie alle Ihre HTML-Kenntnisse aufgeben und noch einmal von vorne beginnen? Mach dir keine Sorgen. Tizen kommt zu deiner Rettung.
Tizen ist ein Betriebssystem der Linux-Familie, das eine Reihe von Geräten abdeckt, von Smartphones bis hin zu Smartwatches und vielem mehr. Tizen ist ein Projekt der Linux Foundation, wird jedoch von der Tizen Association geleitet, deren Mitglieder Samsung, Intel und andere bekannte Unternehmen der Technologiebranche sind.
In diesem Tutorial zeige ich Ihnen, wie Sie das Tizen SDK für Wearable installieren und konfigurieren und eine Smart-Watch-Anwendung mit der IDE entwickeln. Lass uns anfangen.
Derzeit sind zwei Arten von SDKs verfügbar: Tizen SDK und Tizen SDK für Wearable. Da es sich bei diesem Lernprogramm um die Entwicklung einer eigenständigen Smart Watch-App handelt, benötigen Sie das Tizen SDK für Wearable.
Sie können es von der Tizen Developers-Website herunterladen. Sie müssen ein entsprechendes herunterladen Manager installieren das passt zu Ihrem Betriebssystem und Ihrer Version. Wenn Sie eine Offline-Installation einer Online-Installation vorziehen, müssen Sie eine SDK-Bild auch. Wenn Ihr Betriebssystem Windows 8 oder Windows 8.1 ist, können Sie die Installationsdateien herunterladen, die unter Windows 7 kategorisiert sind. Sie werden unter Windows 8 und 8.1 problemlos funktionieren.
In den ausführlichen Anweisungen von Tizen finden Sie Informationen zu den Hardware- und Softwareanforderungen, die Ihr Computer erfüllen muss.
Sie können das SDK auch installieren, wenn Ihr Computer diese Hardwareanforderungen nicht erfüllt. In diesem Fall ist der Smart Watch-Emulator jedoch langsam, was zu einem schlechten App-Test führt. Weitere Informationen finden Sie in der Dokumentation. Es erklärt, wie man es aktiviert Virtualisierungs-Technologie (VT) in Ihrem BIOS und Verhinderung der Datenausführung unter Windows.
Wenn Sie möchten, können Sie installieren Intel HAXM separat. Wenn die Installation abgeschlossen ist, starten Sie Ihren Computer neu.
Im linken Bereich der IDE befinden sich zwei Fenster, Projekt Explorer und Verbindungs-Explorer. Das Projekt Explorer zeigt die vom Benutzer erstellten Projekte. Das Verbindungs-Explorer listet die aktuell verfügbaren verbundenen Geräte, Emulatorinstanzen oder Remote-Geräte auf.
Es dauert einige Zeit, bis der Emulator gestartet wird. Sie sollten ein Fenster mit einem Startbildschirm sehen, der dem unten abgebildeten Screenshot ähnlich ist, wenn er läuft. Die Emulatorinstanz sollte als Eintrag in der angezeigt werden Verbindungs-Explorer.
Wischen Sie vom unteren mittleren Punkt des Startbildschirms nach oben, um zu dem Bildschirm zu gelangen, auf dem die auf dem Gerät oder dem Emulator installierten Apps angezeigt werden. Da Sie noch keine Apps installiert haben, nur die die Einstellungen Symbol wird angezeigt.
Sie können zum vorherigen Bildschirm zurückkehren oder eine App beenden, indem Sie von der oberen Bildschirmmitte nach unten wischen.
In diesem Beispiel erstellen wir eine einfache App, um einen Comic anzuzeigen. Schauen wir uns jeden Schritt der Reihe nach an.
Erstellen wir ein neues Projekt in der IDE.
HTML, CSS und JavaScript bilden die Basis für die Programmierung auf der Tizen-Plattform. Wenn Sie ein HTML-Assistent sind, müssen Sie keine neue Programmiersprache lernen, um Anwendungen für die Tizen-Plattform zu schreiben. Sie können Ihre vorhandenen HTML-, CSS- und JavaScript-Kenntnisse verwenden.
Zuerst müssen wir dem Unterordner zwei Unterordner hinzufügen meine App Projekt, Comic und Bilder. Klicken Sie dazu mit der rechten Maustaste auf meine App Projektordner in der IDE und wählen Sie Neu> Ordner. Die Unterordner sollten im erweiterten Ordner angezeigt werden meine AppOrdner in der IDE.
Laden Sie die Quelldateien für dieses Projekt von GitHub herunter und navigieren Sie zum Bilder Unterordner, der eine Reihe von PNG-Dateien enthält. Kopieren Sie die PNG-Dateien in die Bilder Unterordner, den Sie vor einem Moment erstellt haben.
Sie können Dateien in die einfügen Bilder Unterordner in der Projekt Explorer Fenster, indem Sie mit der rechten Maustaste auf den Unterordner klicken und auswählen Einfügen aus dem Popup-Menü.
Als nächstes erstellen Sie neun HTML-Dateien mit den folgenden Dateinamen im Comic Unterordner durch Klicken mit der rechten Maustaste auf Comic Unterordner und Auswählen Neu> Datei. Stellen Sie sicher, dass Sie die .html Erweiterung für die Dateien.
Sie sollten jetzt neun HTML-Dateien in der Comic Unterordner.
Lassen Sie uns jetzt den Code in bearbeiten index.html. Diese Datei ist der Einstiegspunkt Ihrer Anwendung. Doppelklick index.html um die Datei in der IDE zu öffnen. Ändern Sie den Inhalt der tag mit dem folgenden:
<<>>
Alles, was wir getan haben, ist ein Bild auf der Seite und zwei Schaltflächen zum Navigieren zu den anderen Seiten hinzuzufügen, da unser Comic zehn Seiten haben wird. Wenn Sie diese Änderungen vorgenommen haben, speichern Sie die Datei, indem Sie auswählen Datei> Speichern aus dem menü.
Wenn Sie sich mit HTML und CSS noch nicht auskennen, bietet Tuts + eine große Sammlung exzellenter Tutorials, die Ihnen helfen, sich mit den Grundlagen der Webentwicklung vertraut zu machen.
Doppelklicken Sie anschließend style.css in dem css Unterordner und ändern Sie den Inhalt wie unten gezeigt.
* Schriftfamilie: Verdana, Lucida Sans, Arial, Helvetica, Serifenlos; body margin: 0px auto; Hintergrundfarbe: # 0a3003; img margin: 0; Polsterung: 0; Grenze: 0; Breite: 100%; Höhe: Auto; Bildschirmsperre; Schwimmer: links; .btn Anzeige: Inline-Block; Polsterung: 15px 4% 15px 4%; Marge links: 1%; rechte Marge: 1%; Rand oben: 5px; Rand unten: 5px; Schriftgröße: 30px; Text ausrichten: Mitte; vertikal ausrichten: Mitte; Grenze: 0; Farbe: #ffffff; Hintergrundfarbe: # 4b4237; Breite: 40%; Höhe: 80px; Textdekoration: keine;
Wir haben ein paar Stylings für Körper, Bilder und Navigationsmenüs hinzugefügt. Wenn Sie die Änderungen vorgenommen haben, speichern Sie die Datei.
Fügen Sie allen anderen HTML-Dateien, die Sie erstellt haben, Code hinzu. Das style.css Datei in der css Der Unterordner muss mit allen diesen HTML-Dateien extern verknüpft sein. Wenn Sie sich zu diesem Schritt sicher sind, laden Sie die Quelldateien von GitHub herunter und überprüfen Sie die Quelle.
Wählen Sie zum Testen Ihrer App die Option meine App Projektordner und wählen Sie im Menü Projekt> Projekt erstellen um das Projekt zu bauen. Stellen Sie sicher, dass die Emulatorinstanz ausgeführt wird.
Klicken Sie mit der rechten Maustaste auf meine App Ordner und wählen Sie Ausführen als> Tizen Wearable-Webanwendung um das Projekt im Emulator auszuführen. Verwenden Sie die Pfeiltasten in der Benutzeroberfläche, um zur nächsten oder vorherigen Seite zu navigieren. Wischen Sie vom oberen Bildschirmrand nach unten, um die App zu beenden.
In diesem Lernprogramm haben wir eine einfache Comic-App mit dem Tizen-SDK für Wearable erstellt und auf dem Smart Watch-Emulator ausgeführt, der im Lieferumfang der IDE enthalten ist. Der eigentliche Spaß beginnt, wenn Sie bereit sind, sie auf einem physischen Gerät zu installieren und auszuführen.
Auf den Websites von Samsung und Tizen Developers finden Sie zahlreiche zusätzliche Informationen. Worauf wartest du?
Accentsconagua