[nipos]

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:

Code:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

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:

Code:

naviBoard.setNavigation("ID_des_oberen_Elements");

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

Code:

<div id="homepage">Inhalte hier rein</div>

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.

[nipos]

6. Fuellen der index.html
Anschliessend muessen alle heruntergeladenen Dateien in der index.html verlinkt werden. Auch fuer die Sprache und fuer die Farbe der Statusleiste muessen dort Einstellungen vorgenommen werden.
Die Datei data/locales.ini kann geloescht werden, ebenso wie die Zeile in der index.html, die darauf verweist.
Die neuere Version von L10N setzt die Spracheinstellungen direkt in den Meta Tags voraus. Eine solche Einstellung koennte folgendermassen aussehen:

Code:

<meta name="defaultLanguage" content="en-US"/>
<meta name="availableLanguages" content="en-US, de-DE"/>
<link rel="localization" href="locales/{locale}.properties"/>

Fuer die Einstellung der Statusleistenfarbe wird folgende Zeile benoetigt:

Code:

<meta name="theme-color" content="HEX_Code"/>

Ein Beispiel einer korrekten index.html Datei, welche alle wichtigen Einstellungen und einige Elemente des KaiUI CSS Frameworks beinhaltet, koennte folgendermassen aussehen: https://paste.ggc-project.de/?3fa7b4cfde...XVIxyUWF0=
Diese Datei wird eine leere Seite zeigen, die oben eine Titelleiste mit Tabs darunter und ganz unten eine Leiste fuer die Softkeys hat.
Die Programmierung des HTML Codes im Hauptteil der Seite sowie der Javascripts unterscheidet sich im Grunde nicht von der Programmierung fuer Webseiten und Webapps.

7. Javascript Events
Der einzige wesentliche Unterschied im Javascript ist, dass nicht mit Click Events, sondern nur mit Tastaturevents gearbeitet werden kann. Ein Tastendruck mit dem Keycode 13 entspricht meistens der linken Maustaste. Ein Tastendruck mit dem Keycode 0 und Key SoftRight wuerde in den meisten Faellen der rechten Maustaste entsprechen, da der rechte Softkey meistens mit Optionen beschriftet ist. Ein Tastendruck mit dem Keycode 0 und Key SoftLeft bezeichnet den linken Softkey, welcher mit einer zusaetzlichen Funktion definiert werden kann, welche auf einer gewoehnlichen Maus nicht vorhanden ist. Rein technisch gesehen koennen die Funktionen aller Softkeys frei vergeben werden, aber in den meisten Apps wird es so wie beschrieben gehandhabt und um den Benutzern Verwirrung zu ersparen, wuerde es Sinn machen, diese Reihenfolge auch in neuen Apps einzuhalten.
Ersatzevents fuer Mouseover und Mouseout gibt es auf der Tastatursteuerung von KaiOS auch. Statt Mouseover muss Focus und statt Mouseout muss Blur verwendet werden. Zu beachten ist jedoch, dass ohne die Initialisierung des NaviBoard Javascripts ein Focus bei normalerweise nicht markierbaren Elementen wie Div Tags nicht moeglich ist. Folgende Tastencodes werden auch oft fuer Javascript Event Handler gebraucht:
37 – Links, 38 – Hoch, 39 – Rechts, 40 – Runter.
Sollte es innerhalb der App zu seltsamem Verhalten beim Scrollen kommen, so kann es hilfreich sein, bei Tastendruecken auf 38 und 40 mit

Code:

event.preventDefault();

die Ausfuehrung der Standardfunktionen zu unterbinden.

8. Groessere Projekte
Diese Anleitung ist nur dafuer gedacht, eher kleine und einfache Apps zu erstellen und erhebt keinesfalls einen Anspruch auf Vollstaendigkeit. Bei komplexeren Anwendungen kann der Einsatz von einem Javascript Framework wie jQuery Mobile oder auch einem groesseren UI Framework wie Vue.js Sinn machen. Diese koennen die Komplexitaet des Codes aber schnell sehr stark erhoehen, weshalb ich bei Anfaengern von der Nutzung abrate. Ein Tutorial zur Erstellung einer App mithilfe von jQuery Mobile koennte eventuell in ein paar Wochen kommen, denn wenn es auf KaiOS mit der Tastatursteuerung gut nutzbar ist, plane ich, das fuer meine naechste, groessere App zu verwenden.

9. Veroeffentlichung im Appstore
Der letzte Schritt nach dem Programmieren der App ist die Veroeffentlichung dieser im KaiOS Appstore, sodass Millionen Nutzer diese ganz einfach herunterladen koennen. Die Veroeffentlichung ist kostenlos, jedoch werden alle Apps vom KaiOS Team ausprobiert und gruendlich ueberprueft, sodass es einige Zeit dauern kann, bis eine App oeffentlich verfuegbar ist. Ausserdem behaelt sich KaiOS das Recht vor, Apps nicht zu veroeffentlichen, wenn diese nicht den Qualitaetsanspruechen genuegen oder die Regeln zur Veroeffentlichung von Apps nicht einhalten.
Leider ist es mir nicht moeglich, genauere Schritte zum Upload und Freischaltungsprozess zu erlaeutern, weil die Entwicklerplattform zum Zeitpunkt des Verfassens dieses Textes einen Fehler hat, der dafuer sorgt, dass ich direkt nach dem Einloggen immer wieder ausgeloggt werde und mich erneut einloggen soll.

10. Feedback, Ergaenzungen, Verbesserungen
Selbstverstaendlich freue ich mich ueber jegliches Feedback zu diesem Tutorial. Wenn ihr irgendwelche Moeglichkeiten kennt, mit denen ihr etwas noch besser umsetzen koennt, als in meinem Beispiel, dann werde ich das gerne ergaenzen.
Wenn ihr eure erste App mithilfe meiner Anleitung erstellt habt, dann schreibt es in die Antworten und ich werde eure App gerne ausprobieren.

[nokia5801]

Erst einmal vielen Dank für die tolle Anleitung/Einführung in die App Entwicklung fürs Nokia 8110 4g. Ich hab davor schon viel rum gestöbert aber mit deiner Anleitung hat es auf Anhieb geklappt.

Ein Problem habe ich aber noch des öfteren:
Wenn ich die Verbindung des WebIDE (Remote Runtime) zum 8110 trenne oder den Simulator verwende kann ich nicht neuerlich zum 8110 verbinden. Ich erhalte die Fehlermeldung "Operation fehlgeschlagen:Connecting to Externer Laufzeitumgebung".
Mit der ADB Shell komme ich nach wie vor aufs Handy. Mit der WebIDE kriege ich erst dann wieder eine Verbindung wenn ich das 8110 neu starte.
Ein neuerliches

Code:

C:\adb\> adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

hilft leider nicht

Kennst du das und gibts dafür eine einfachere Lösung?

lg

P.S. Windows10, Palemoon 28.5.2 oder Firefox 56, Nokia 8110 4g V13.0.x

[nipos]

Vielen Dank fuer dein Feedback.Selbstverstaendlich habe ich mich sofort mit dem Problem beschaeftigt.Ich konnte das Problem so jedoch nicht reproduzieren.Wenn ich direkt im Palemoon auf Disconnect klicke,dann kann ich mich danach sofort wieder mit der Remote Runtime verbinden.Wenn ich das USB Kabel komplett rausziehe,dann ist ein erneutes Ausfuehren des ADB Befehls notwendig.Danach kann ich mich aber auch sofort wieder verbinden.Ein paar Loesungsvorschlaege hab ich trotzdem,auch wenn ich ihre Wirksamkeit nicht testen kann,da das Problem hier nicht auftritt.
1. Du koenntest probieren,die Software deines Handys auf die neueste Version zu aktualisieren.Auf meinem ist die Version 16.00.17.00 installiert,aber es waere sogar moeglich,dass es inzwischen eine noch neuere gibt,das weiss ich nicht.Das Problem,welches bei dir auftritt,koennte ein Softwarefehler in der Version 13 sein,welcher mit 16 bereits behoben ist.
2. Du kannst im Terminal nach dem erneuten Verbinden den Befehl "adb kill-server" ausfuehren und danach nochmal den adb forward Befehl.Das wuerde dafuer sorgen,dass ADB auf deinem Computer komplett neu gestartet wird.Ob das irgendeinen Effekt hat,ist mir aber leider nicht bekannt.
3. Es koennte auch ein systemspezifischer Fehler sein,denn der einzige weitere Unterschied,den ich bei unseren Setups erkennen kann ist,dass ich Linux verwende und du Windows.Vielleicht passt da irgendwas mit den Treibern nicht so ganz oder es ist nicht perfekt kompatibel.Wenn die anderen Loesungsvorschlaege nicht helfen,koenntest du versuchen,in einer VirtualBox VM ein Linux System einzurichten und dich darin mit deinem Handy verbinden.Aber auch das ist nur eine Mutmassung,denn ich besitze kein Testgeraet mit Windows 10.

[nokia5801]

Danke für die Vorschläge!
zu 1: werde ich demnächst machen. Bei Updates bin ich immer etwas zögerlich ..
zu 2: hat leider nichts gebracht
zu 3: ist eher ein Langzeitprojekt, es ist schon einige Jahre her, dass ich auf Linux gearbeitet habe und müsste mich erst wieder eingewöhnen.

[nokia5801]

Übrigens das Update auf v16.0.x hat bei meinem Problem geholfen und ist damit gelöst.
Danke, lg