Tutorial: Deine erste KaiOS App
Handys mit KaiOS sind klein, guenstig und kompakt, aber haben ausreichend Leistungum einige coole Dinge damit anzustellen. Woran es aktuell noch mangelt sind die Apps, denn das System ist noch ziemlich neu und es gibt noch nicht viele Leute, die dafuer entwickeln wollen, aber das ist ueberhaupt nicht so schwierig. Vielleicht findet nach meiner Anleitung ja der eine oder andere die Lust, es einfach mal selbst auszuprobieren. Nachdem ich meine erste App fuer KaiOS fertiggestellt und damit einige Erfahrung gesammelt hab, moechte ich hier nochmal ausfuehrlich meinen Einstieg in die Appentwicklung schildern.
1. Die Voraussetzungen
Zuerst einmal sollte man ein Geraet besitzen, auf dem KaiOS laeuft. Dazu eignet sich zum Beispiel das Nokia 8110, welches derzeit das einzige unterstuetzte Geraet von Nokia ist, aber von anderen Herstellern gibt es auch einige interessante Geraete.
Alternativ dazu kann auch ein Emulator installiert werden, aber das alleine empfinde ich nicht als ausreichend, da dieser nicht zu 100% das Gefuehl einer Nutzung auf dem Handy wiedergeben kann. Auf dem Computer braucht ihr zur Verbindung mit dem Handy das Programm ADB und laut offizieller Anleitung eine veraltete Version von Firefox. Die aktuelle Version ist aufgrund zahlreicher Erneuerungen nicht mehr kompatibel. Ich empfehle stattdessen jedoch den Browser Palemoon, welcher auf einer veralteten Firefox Version basiert, aber auch neuere Sicherheitsluecken behoben hat. Das verhindert gleichzeitig Probleme, die auftreten koennen, wenn man zum Surfen den aktuellen Firefox offen hat und eben den aelteren zur Entwicklung braucht, da beide auf den gleichen Profilordner zugreifen wollen, waehrend Palemoon einen eigenen hat.
2. Einrichtung der Entwicklungsumgebung
Um die Entwicklungsfunktionen auf dem Handy zu aktivieren, muss die Nummer *#*#33284#*#* angerufen werden. Dies ist ein einmaliger Befehl, welcher auf dem Handy dauerhaft wirksam bleibt. Anschliessend sollte das Handy ueber ein USB Kabel mit dem Computer verbunden werden, eine ADB Verbindung ist jetzt ohne weiteres moeglich. Im Terminal des Computers muss nach dem Verbinden des USB Kabels jedes Mal folgender Befehl eingegeben werden:
Danach oeffnest du den Palemoon Browser (oder den alten Firefox) und im Menue bei Web Developer oeffnest du die WebIDE. Dort kannst du dich jetzt mit der Remote Runtime auf localhost:6000 verbinden, um Apps direkt auf das Handy zu installieren oder zu debuggen.
Damit sind die ersten Schritte zum Aufsetzen einer Entwicklungsumgebung abgeschlossen und wir koennen direkt mit der ersten App beginnen. In der offiziellen Entwicklerdokumentation, wo auch mit einem Emulator gearbeitet wird, klingt das alles sehr viel komplizierter, aber wenn man ein echtes Handy verwendet, sind keine weiteren Programme notwendig.
3. Grundlegende Appeinstellungen
Um eine neue App zu erstellen, klickst du auf New App in der linken Seitenleiste und waehlst im Popup Privileged Empty App aus.
Die neue App enthaelt standardmaessig einige Dateien, welche in jeder App benoetigt werden und die du einfach umschreiben kannst, um sie an deine Anforderungen anzupassen.
Als erstes betrachten wir die Datei manifest.json. Man koennte sie als eine Art Inhaltsverzeichnis fuer die App bezeichnen. In ihr steht, wo welche Dateien zu finden sind, welche Berechtigungen benoetigt werden, wie die App heisst, was sie macht, welche Sprachen sie unterstuetzt und so weiter. Ich gehe hier von einem Grundwissen zum Thema Programmierung aus und werde deshalb nicht jede einzelne Variable in der Manifest Datei einzeln abhandeln. Es ist wichtig zu erwaehnen, dass die Beispielapps fuer Firefox OS sind und die Icons in anderen Groessen enthaelt, als sie von KaiOS gebraucht werden, ansonsten sind die Einstellungen aber identisch. KaiOS benoetigt die Icons in den Groessen 56x56px und 112x112px. Alle weiteren Einstellungen in der Manifest Datei koennen hier nachgelesen werden:
https://developer.kaiostech.com/first-app/manifest
4. Starten der App und Einleitung
Die Beispielapp ist bereits vollstaendig und kann mit einem einfachen Klick auf den Play Button oben in der WebIDE auf dem Handy installiert und geoeffnet werden.
Mit einem Klick auf den Schraubenschluessel koennen die Entwicklertools geoeffnet werden, welche bereits durch das Debuggen von Webseiten bekannt sein sollten.
Deine erste eigene App wird jetzt eine Ueberschrift und einen kurzen Text anzeigen, aber nichts, womit man irgendetwas sinnvolles machen kann. Man koennte jetzt natuerlich beginnen, eine komplett eigene App ohne irgendwelche Drittanbietersoftware zu programmieren, aber das wird sehr lange dauern und ueberhaupt keinen Spass machen, denn man wird sich mit hoch komplizierten Dingen wie etwa der Steuerung ueber die Tastatur beschaeftigen muessen.
5. Nuetzliche Drittanbietersoftware
Stattdessen binden wir im naechsten Schritt einige Drittanbieter Bibliotheken ein, welche uns die Nebensaechlichkeiten abnehmen, sodass wir uns um die eigentlichen Funktionen der App kuemmern koennen.
5.1 NaviBoard
Ich empfehle das Javascript NaviBoard von https://github.com/amanboss9/naviboard fuer die vereinfachte Navigation mit den Tasten. Es muss jetzt einfach nur die Klasse “navigable” zu allen Elementen hinzugefuegt werden, die mit NaviBoard ansprechbar sein sollen und danach muss das Script noch durch ein einzeiliges Javascript initialisiert werden:
Mit oberem Element ist dabei das Element gemeint, was alle Elemente der aktuellen Navigation enthaelt. Wenn man mehrere Seiten in einer HTML Datei unterbringen will, dann legt man fuer die Seiten jeweils ein <div> an und gibt diesem eine eindeutige ID, zum Beispiel
und wuerde dementsprechend die Navigation auf homepage starten.
5.2 KaiUI
Natuerlich sollte die App nicht einfach nur funktionieren, sondern auch nach einer richtigen App aussehen. Dafuer gibt es auf der KaiOS Entwicklerseite eine ausfuehrliche Designanleitung: https://developer.kaiostech.com/design-g...-component
Leider wird dort kein fertiges CSS Framework zur Verfuegung gestellt, mit dem sich diese Vorgaben standardisiert und mit geringem Aufwand erfuellen lassen. Das ist aber alles kein Problem, denn selbstverstaendlich sind auch andere Menschen schon an diesem Punkt angekommen und haben selbst Loesungen geschaffen. Besonders nuetzlich hierfuer finde ich das open source Projekt KaiUI: https://github.com/nadim1992/KaiUI
Leider enthaelt dieses nicht alle in der Anleitung von KaiOS vorgegebenen Elemente, zum Beispiel Tabs, und laesst keine Anpassungen der Farbe zu. Aus diesem Grund habe ich dieses Projekt selbst weiterentwickelt und stelle es als Teil meiner eigenen ersten App zur Verfuegung: https://notabug.org/kaitools/searx/src/m...kaiui.less
Es handelt sich dabei nicht um eine gewoehnliche CSS, sondern um eine LESS Datei. Dort kann in einer Variable der gewuenschte HEX Code fuer die Farbe eingetragen werden und danach musst du die Datei kompilieren, was mit diversen Online Tools machbar ist.
5.3 L10N
Um die Mehrsprachigkeit der App zu gewaehrleisten, wird das Javascript L10N eingesetzt, welches bereits im Beispielprojekt enthalten ist. Leider ist dort aber eine veraltete Datei enthalten, weshalb ich es empfehle, diese durch die Version von folgendem Link zu ersetzen: https://github.com/kaios-design/gaia-l10n
5.4 jQuery
Die bereits von Webseiten sehr bekannte Javascript Bibliothek jQuery sollte auch in einer KaiOS App nicht fehlen. Am Anfang sieht jQuery vielleicht ein bisschen kompliziert aus, aber wenn man sich ein bisschen damit beschaeftigt, wird man schnell feststellen, dass jQuery einiges viel einfacher macht, als normales Javascript und dass man dafuer auch weniger Code schreiben muss. jQuery kann hier heruntergeladen werden: https://code.jquery.com
5.5 FontAwesome und KDE Icons
Um manche Dinge innerhalb der App besser veranschaulichen zu koennen, sind Icons ein elementarer Bestandteil von Appdesigns. Sie brauchen weniger Platz, als Text, sind international verstaendlich und werten die App optisch auf.
Direkt von KaiOS gibt es dazu auch wieder eine sehr schoene Anleitung, die auch besagt, dass man wenn moeglich die Icons nutzen sollte, die von KaiOS zur Verfuegung gestellt werden: https://developer.kaiostech.com/design-g...ction-icon
Um Appuebergreifend ein konsistentes Design zu haben, wuerde das definitiv Sinn machen, nur leider hat man vergessen, fuer diese Icons einen Download anzubieten, also muss man sich doch wieder selbst helfen. Ich nutze fuer Icons gerne FontAwesome, was sich auch bei vielen Webseiten und Webapps bereits bewaehrt hat und Icons fuer wirklich jede nur erdenkliche App zur Verfuegung stellt: https://fontawesome.com
Alternativ koennen auch SVG Icons von KDE Plasma 5 benutzt werden: https://github.com/KaOSx/midna/tree/master/icons
Aufgrund der Laengenbegrenzung muss ich mein Tutorial in zwei Beitraege aufteilen. In der Antwort auf dieses Thema geht es mit der Anleitung weiter.
1. Die Voraussetzungen
Zuerst einmal sollte man ein Geraet besitzen, auf dem KaiOS laeuft. Dazu eignet sich zum Beispiel das Nokia 8110, welches derzeit das einzige unterstuetzte Geraet von Nokia ist, aber von anderen Herstellern gibt es auch einige interessante Geraete.
Alternativ dazu kann auch ein Emulator installiert werden, aber das alleine empfinde ich nicht als ausreichend, da dieser nicht zu 100% das Gefuehl einer Nutzung auf dem Handy wiedergeben kann. Auf dem Computer braucht ihr zur Verbindung mit dem Handy das Programm ADB und laut offizieller Anleitung eine veraltete Version von Firefox. Die aktuelle Version ist aufgrund zahlreicher Erneuerungen nicht mehr kompatibel. Ich empfehle stattdessen jedoch den Browser Palemoon, welcher auf einer veralteten Firefox Version basiert, aber auch neuere Sicherheitsluecken behoben hat. Das verhindert gleichzeitig Probleme, die auftreten koennen, wenn man zum Surfen den aktuellen Firefox offen hat und eben den aelteren zur Entwicklung braucht, da beide auf den gleichen Profilordner zugreifen wollen, waehrend Palemoon einen eigenen hat.
2. Einrichtung der Entwicklungsumgebung
Um die Entwicklungsfunktionen auf dem Handy zu aktivieren, muss die Nummer *#*#33284#*#* angerufen werden. Dies ist ein einmaliger Befehl, welcher auf dem Handy dauerhaft wirksam bleibt. Anschliessend sollte das Handy ueber ein USB Kabel mit dem Computer verbunden werden, eine ADB Verbindung ist jetzt ohne weiteres moeglich. Im Terminal des Computers muss nach dem Verbinden des USB Kabels jedes Mal folgender Befehl eingegeben werden:
Code:
adb forward tcp:6000 localfilesystem:/data/local/debugger-socketDamit sind die ersten Schritte zum Aufsetzen einer Entwicklungsumgebung abgeschlossen und wir koennen direkt mit der ersten App beginnen. In der offiziellen Entwicklerdokumentation, wo auch mit einem Emulator gearbeitet wird, klingt das alles sehr viel komplizierter, aber wenn man ein echtes Handy verwendet, sind keine weiteren Programme notwendig.
3. Grundlegende Appeinstellungen
Um eine neue App zu erstellen, klickst du auf New App in der linken Seitenleiste und waehlst im Popup Privileged Empty App aus.
Die neue App enthaelt standardmaessig einige Dateien, welche in jeder App benoetigt werden und die du einfach umschreiben kannst, um sie an deine Anforderungen anzupassen.
Als erstes betrachten wir die Datei manifest.json. Man koennte sie als eine Art Inhaltsverzeichnis fuer die App bezeichnen. In ihr steht, wo welche Dateien zu finden sind, welche Berechtigungen benoetigt werden, wie die App heisst, was sie macht, welche Sprachen sie unterstuetzt und so weiter. Ich gehe hier von einem Grundwissen zum Thema Programmierung aus und werde deshalb nicht jede einzelne Variable in der Manifest Datei einzeln abhandeln. Es ist wichtig zu erwaehnen, dass die Beispielapps fuer Firefox OS sind und die Icons in anderen Groessen enthaelt, als sie von KaiOS gebraucht werden, ansonsten sind die Einstellungen aber identisch. KaiOS benoetigt die Icons in den Groessen 56x56px und 112x112px. Alle weiteren Einstellungen in der Manifest Datei koennen hier nachgelesen werden:
https://developer.kaiostech.com/first-app/manifest
4. Starten der App und Einleitung
Die Beispielapp ist bereits vollstaendig und kann mit einem einfachen Klick auf den Play Button oben in der WebIDE auf dem Handy installiert und geoeffnet werden.
Mit einem Klick auf den Schraubenschluessel koennen die Entwicklertools geoeffnet werden, welche bereits durch das Debuggen von Webseiten bekannt sein sollten.
Deine erste eigene App wird jetzt eine Ueberschrift und einen kurzen Text anzeigen, aber nichts, womit man irgendetwas sinnvolles machen kann. Man koennte jetzt natuerlich beginnen, eine komplett eigene App ohne irgendwelche Drittanbietersoftware zu programmieren, aber das wird sehr lange dauern und ueberhaupt keinen Spass machen, denn man wird sich mit hoch komplizierten Dingen wie etwa der Steuerung ueber die Tastatur beschaeftigen muessen.
5. Nuetzliche Drittanbietersoftware
Stattdessen binden wir im naechsten Schritt einige Drittanbieter Bibliotheken ein, welche uns die Nebensaechlichkeiten abnehmen, sodass wir uns um die eigentlichen Funktionen der App kuemmern koennen.
5.1 NaviBoard
Ich empfehle das Javascript NaviBoard von https://github.com/amanboss9/naviboard fuer die vereinfachte Navigation mit den Tasten. Es muss jetzt einfach nur die Klasse “navigable” zu allen Elementen hinzugefuegt werden, die mit NaviBoard ansprechbar sein sollen und danach muss das Script noch durch ein einzeiliges Javascript initialisiert werden:
Code:
naviBoard.setNavigation("ID_des_oberen_Elements");Code:
<div id="homepage">Inhalte hier rein</div>5.2 KaiUI
Natuerlich sollte die App nicht einfach nur funktionieren, sondern auch nach einer richtigen App aussehen. Dafuer gibt es auf der KaiOS Entwicklerseite eine ausfuehrliche Designanleitung: https://developer.kaiostech.com/design-g...-component
Leider wird dort kein fertiges CSS Framework zur Verfuegung gestellt, mit dem sich diese Vorgaben standardisiert und mit geringem Aufwand erfuellen lassen. Das ist aber alles kein Problem, denn selbstverstaendlich sind auch andere Menschen schon an diesem Punkt angekommen und haben selbst Loesungen geschaffen. Besonders nuetzlich hierfuer finde ich das open source Projekt KaiUI: https://github.com/nadim1992/KaiUI
Leider enthaelt dieses nicht alle in der Anleitung von KaiOS vorgegebenen Elemente, zum Beispiel Tabs, und laesst keine Anpassungen der Farbe zu. Aus diesem Grund habe ich dieses Projekt selbst weiterentwickelt und stelle es als Teil meiner eigenen ersten App zur Verfuegung: https://notabug.org/kaitools/searx/src/m...kaiui.less
Es handelt sich dabei nicht um eine gewoehnliche CSS, sondern um eine LESS Datei. Dort kann in einer Variable der gewuenschte HEX Code fuer die Farbe eingetragen werden und danach musst du die Datei kompilieren, was mit diversen Online Tools machbar ist.
5.3 L10N
Um die Mehrsprachigkeit der App zu gewaehrleisten, wird das Javascript L10N eingesetzt, welches bereits im Beispielprojekt enthalten ist. Leider ist dort aber eine veraltete Datei enthalten, weshalb ich es empfehle, diese durch die Version von folgendem Link zu ersetzen: https://github.com/kaios-design/gaia-l10n
5.4 jQuery
Die bereits von Webseiten sehr bekannte Javascript Bibliothek jQuery sollte auch in einer KaiOS App nicht fehlen. Am Anfang sieht jQuery vielleicht ein bisschen kompliziert aus, aber wenn man sich ein bisschen damit beschaeftigt, wird man schnell feststellen, dass jQuery einiges viel einfacher macht, als normales Javascript und dass man dafuer auch weniger Code schreiben muss. jQuery kann hier heruntergeladen werden: https://code.jquery.com
5.5 FontAwesome und KDE Icons
Um manche Dinge innerhalb der App besser veranschaulichen zu koennen, sind Icons ein elementarer Bestandteil von Appdesigns. Sie brauchen weniger Platz, als Text, sind international verstaendlich und werten die App optisch auf.
Direkt von KaiOS gibt es dazu auch wieder eine sehr schoene Anleitung, die auch besagt, dass man wenn moeglich die Icons nutzen sollte, die von KaiOS zur Verfuegung gestellt werden: https://developer.kaiostech.com/design-g...ction-icon
Um Appuebergreifend ein konsistentes Design zu haben, wuerde das definitiv Sinn machen, nur leider hat man vergessen, fuer diese Icons einen Download anzubieten, also muss man sich doch wieder selbst helfen. Ich nutze fuer Icons gerne FontAwesome, was sich auch bei vielen Webseiten und Webapps bereits bewaehrt hat und Icons fuer wirklich jede nur erdenkliche App zur Verfuegung stellt: https://fontawesome.com
Alternativ koennen auch SVG Icons von KDE Plasma 5 benutzt werden: https://github.com/KaOSx/midna/tree/master/icons
Aufgrund der Laengenbegrenzung muss ich mein Tutorial in zwei Beitraege aufteilen. In der Antwort auf dieses Thema geht es mit der Anleitung weiter.
