Erstellung von Software-Produkten mit Javascript aus einem Quelltext: Diese Präsentation der EnterJS Entwicklerkonferenz in Köln 2014 zeigt den Weg der Erstellung von Software-Lösungen mit Javascript mit den Frameworks Cordova/Phonegap und Node-Webkit.
Vom Setup bis zur App-Store Anmeldung des fertigen Produktes wird auf 44 Folien dargestellt, welche Lernkurve hinter einer solchen Entwicklung steht.
German: Softwareprodukte aus einem Source Code mit Javascript
1. Desktop & Mobile aus einer Quelle
One source to rule them all!
www.secryptor.de Juli 2014 – Ralf Schwoebel Twitter: @trabit - 1
2. www.secryptor.de Twitter: @trabit - 2
Guck mal, wer da spricht…
Ralf Schwöbel
Vorstand der Tradebit AG (Frankfurt/M.)
• Erste kommerzielle Schritte 1987 auf Commodore
AMIGA (Assembler)
• Online Shopping Mall 1995 bei Germany.net
(HTML & Perl auf SuSE Linux)
• Online Marketing von 2001 bis heute
• Mitglied im Beirat “Junge digitale Wirtschaft” des
BMWi
• App-Entwicklung seit Anfang 2014:
www.secryptor.de
3. www.secryptor.de Twitter: @trabit - 3
Die Triologie - Inhalt
Teil 1: Die 4 Gefährten
Teil 2: Die 2 Code Umgebungen
Teil 3: Die Rückkehr in die App Stores
5. www.secryptor.de Twitter: @trabit - 5
Zuviel Auswahl: Der Überblick…
http://coronalabs.com/
http://xamarin.com/
http://www.appgyver.com/
http://www.telerik.com/
http://www.appcelerator.com/
http://xdk-software.intel.com/
https://www.ludei.com/cocoonjs/
http://phonegap.com/
http://cordova.apache.org/
https://github.com/rogerwang/node-webkit
Und natürlich “nativ” in Objective C, Java
und den Windows SDKs!
6. www.secryptor.de Twitter: @trabit - 6
Was wir wollen: Boilerplate!
Ziel definieren!
• Wir wollen mit einem Source-Code und wenig “doppelter
Arbeit” die 4 großen Plattformen bedienen.
• Wir wollen in die App-Stores für maximale Reichweite:
• OS X App Store
• Windows 8 Desktop List
• iOS App Store
• Google Play
• Wir wollen maximale Kontrolle über unser Setup
7. www.secryptor.de Twitter: @trabit - 7
Was wir wollen: Boilerplate!
Regeln definieren!
• Wir wollen nur Javascript und HTML5
• Wir wollen möglichst wenige “Einzelteile” (jQuery, Grunt,
Frameworks, Compiler, plattformspezifische Bibliotheken)…
• Wir wollen ein Revisioning System (git, SVN)
• Wir wollen die Applikation in “Einem Code-Release”
14. www.secryptor.de Twitter: @trabit - 14
Das erste einfache Programm – Plain Javascript
$> cd enableJS
Here you would install the template set from
App-o-Mat into www/
$> cordova plugin add org.apache.cordova.console
$> cordova plugin add org.apache.cordova.device
$> cordova plugin add org.apache.cordova.dialogs
$> cordova plugin add org.apache.cordova.splashscreen
$> cordova plugin add org.apache.cordova.statusbar
$> cordova plugin add org.apache.cordova.inappbrowser
The needed modules
$> cordova platform add ios
Edit the config.xml file!
$> cordova emulate ios
... Und das Xcode Projekt wird auch einfach erzeugt!
22. 21
www.secryptor.de Twitter: @trabit - 22
Grössere Projekte?
Es gibt im Grunde 2 Probleme, Apps für Desktop und
Smartphone aus 1 Quelle zu erzeugen:
Benutzeroberfläche:
• Ist der jQuery Mobile Theme
wirklich dafür zu gebrauchen?
• Nehme ich Bootstrap (oder andere
responsive themes), komme ich
dann in die App-Stores für iOS?
• Ist die App angenehm zu
verwenden wenn ich zuerst Mobile
dann Desktop entwickle?
Funktionen:
• Nicht alle Cordova Funktionen sind
auf allen Devices vorhanden!
iOS/Android
• Nicht alle node-webkit Funktionen
lassen sich in Cordova abbilden
• Nicht alle node-webkit Funktionen
schaffen es in die App-Stores (e.g.
webchat)
23. www.secryptor.de Twitter: @trabit - 23
Exkurs: Chrome?
http://blog.chromium.org/2014/01/run-chrome-apps-on-mobile-using-apache.html
identity - sign-in users using OAuth2 without
prompting for passwords
payments - sell virtual goods within
your mobile app
pushMessaging - push messages to your app
from your server
sockets - send and receive data over the
network using TCP and UDP
notifications (currently Android only)
send rich notifications from your mobile app
storage - store and retrieve key-value
data locally
syncFileSystem - store and retrieve files
backed by Google Drive
alarms - run tasks periodically
Bietet:
24. www.secryptor.de Twitter: @trabit - 24
Nochmal code, 1 Gang hochschalten…
Asynchronous: erstmal Umdenken: CommonJS
// getData(successFunc, failFunc);
getData(
function(data){ alert("We got data: " + data); },
function(ex){ alert("oops, some problem occured: " + ex); }
);
… da Apps nicht “anhalten” und auf Daten warten sollten …
25. www.secryptor.de Twitter: @trabit - 25
Beispiel FileIO: Cordova 3.x
Eine Datei runterladen und bei Erfolg das Formularfeld “fileinput” mit dem Pfad zum
“Wiederöffnen” setzen.
Einen Link zur Datei für das Plugin “inappbrowser” mit .toNativeURL() anzeigen…
26. www.secryptor.de Twitter: @trabit - 26
Beispiel FileIO: Cordova 3.x
Jetzt haben wir eine Binär-Datei, aber das Plugin “Filesystem” (unter anderem)…
27. www.secryptor.de Twitter: @trabit - 27
Beispiel FileIO: Conditional Include mit Node-Webkit
Bündeln wir die framework-abhängigen Methoden,
die wir brauchen, in eigene Includes …
<script type="text/javascript">
$(document).ready(function() {
if (typeof require != "undefined") {
$.getScript("js/NWKFileIO.js", function() {
myFrameWork="node-webkit";
fileTest.app.onDeviceReady();
console.log("node-webkit loaded");
});
} else {
$.getScript("js/CDVFileIO.js", function() {
myFrameWork="cordova";
fileTest.app.initialize();
console.log("cordova loaded");
});
}
});
</script>
29. www.secryptor.de Twitter: @trabit - 29
Datenbank: Mit sqlite auf der sicheren Seite
// setConfig with TAG SYSTEM, TEMP, etc. = STANDARD JAVASCRIPT, geht auf beiden frameworks
setConfig: function (myVar, myVal, myTag) {
DB.strQuery = "delete from SDCONFIG where sdVAR='"+myVar+"' and sdTAG='"+myTag+"'";
DB.db.transaction(function (tx) {
tx.executeSql(DB.strQuery, [], function (tx,results) {
DB.strQuery = "select max(sdINDEX) as newID from SDCONFIG";
DB.db.transaction(function (tx) {
tx.executeSql(DB.strQuery, [], function (tx,results) {
newId= 1 + results.rows.item(0).newID;
DB.strQuery="insert into SDCONFIG values ("+ newId +",'"+myTag+"','"+myVar+"','"+myVal+"')";
DB.db.transaction(function (tx){tx.executeSql(DB.strQuery);});
},
SP.app.myLog);
});
},
SP.app.myLog);
});
return;
}
Die “pyramid of doom” kann leicht Kopfschmerzen verursachen!
34. www.secryptor.de Twitter: @trabit - 34
Promises, Promises!
.then()
Macht das Leben nicht leichter, aber
den Code besser lesbar…
Schematisch:
var promise = readFile();
promise.then(readAnotherFile, errFunc);
Bedeutet aber auch:
Cordova & node-webkit sollten die gleiche
“promises” Bibliothek nehmen, z.B.:
bluebird.js
35. www.secryptor.de Twitter: @trabit - 35
Zusammenfassung
Komplexe Projekte in Kombination Cordova + node-webkit sind möglich,
aber vielleicht nicht sinnvoll!
1. Ordentlich Planen (vllt. Promises
nutzen und Methodennamen gleich
halten, z.B. myFileIO.readfile)
2. Responsive interface sorgfältig
wählen (Bootstrap, jquery-mobile,
iconic)
3. Deviceabhängige Funktionen in
Namespaces/Klassen
zusammenfassen
4. Framework-abhänging includen
node-webkit
cordova
Plain
Javascript
& HTML5
40. www.secryptor.de Twitter: @trabit - 40
Apps in Node-Webkit für OS X?
Die größten Hürden für ein Node-Webkit
basierenden Release im OS X App Store:
• Binary safe: Teile des Webkits wurden
seit Anfang 2014 nicht mehr
angenommen. Wir mussten node-webkit
patchen!
• Entitlements: Datei-Dialoge und
Netzwerkverbindungen mussten auf
bestimmte Art gehandhabt werden, um
nicht gegen die Entitlements zu
verstossen!
• Kleinigkeiten: Rechtschreibfehler oder
kryptische Fehlermeldungen, die selten
erscheinen können alles Verzögern!
41. www.secryptor.de Twitter: @trabit - 41
Apps für Windows 8?
Es geht schneller und ist einfacher:
Signing, Submission & Availability:
• Node-Webkit funktioniert prima auf
dem Windows Desktop.
• Mit InnoSetup flink den Installer
gebaut!
• Für Windows 8 Apps kann ebenfalls
Cordova verwendet werden –>
Achtung: Binary Files!
• Desktop ist nicht App Store!
42. www.secryptor.de Twitter: @trabit - 42
Google Play submission
Mit Cordova einfach vorzubereiten:
http://developer.android.com/tools/publishing/app-signing.html#cert
43. www.secryptor.de Twitter: @trabit - 43
Zusammenfassung
App Store Submission: ist nach 6 Monaten App-Entwicklung aus unserer
Sicht der Arbeitsschritt, der am meisten Arbeit verschlingen kann.
1. Win8: Identifikation mit Notar, etc.
für Windows Zertifikate.
2. Apple: Provisioning Profiles für
Apple, entitlements, interface,
3. Apple: Node-webkit binary safe Mac
OS X
4. Win 8:Windows 8 Desktop ist nicht
Windows 8 App!
5. Android: Nochmal, alles anders.
Details leicht unterschiedlich ob auf
OS X oder Win8 entwickelt wird!
Guten Morgen ... Und ...
Vielen Dank an das Team der EnterJS
Einladung, Gastfreundlichkeit und professionelle Betreuung.
Vielen Dank an die Gäste für das frühe Erscheinen.
Mein Name ist Ralf Schwöbel und wir reden über einen wichtigen Ansatz für Javascript-Entwickler...:
Die Erstellung von Softwareprodukten aus einer einzigen Quelle.
Diese Folien werde ich auf Slideshare zur Verfügung stellen. Einfach auf BING nach „slideshare schwoebel“ suchen.
Zunächst ein paar Informationen zu mir:
Ich sehe mich nicht als guten Software-Entwickler, auch wenn ich in den letzten
25 Jahren das eine oder andere Produkt komplett selbst an den Markt bringen konnte.
Für die Erstellung eines fertigen, erfolgreichen Produktes braucht es neben guten Codes jedoch noch viele weitere Teile, die das Ganze ergeben.
Als Allrounder hatte ich das Glück viel über diese einzelnen Abschnitte der Produktentwicklung zu lernen.
Seit Anfang des Jahres bin ich an der Secryptor GmbH in Frankfurt beteiligt und die Kollegen sind mitten in der Erstellung einer Verschlüsselungslösung für Mac, Windows, Linux, iOS und Android. Was wir in diesem Erstellungsprozess lernen und gelernt haben, ist Teil dieser Präsentation.
Mit ist bewusst, dass wir relativ spät in den Smartphone-Markt einsteigen, haben jedoch auf der anderen Seite das Glück gleich mit grossartigen Tools, die die meisten Kinderkrankheiten überstanden haben, beginnen zu können.
Entlang der Triologie „Der Herr der Ringe“, habe ich versucht die Theme in 3 Teilbereiche zu gliedern.
. Planung und erste Schritte
. Entwicklung in Node-Webkit und Cordova/Phonegap
. Das Ziel: die App Stores
Um meinen Lernprozess der letzten Monate nachzuvollziehen, sollten wir kurz über den Start-Punkt reden.
Wie viele Entwickler, die Weg
Wer als Web-Entwickler beginnt und eine Plattform für die App-Entwicklung sucht, findet jede Menge Frameworks, um den Prozess zu erleichtern.
Nativ fiel für mich raus, da wir ein kleines Team sind und alle den Source-Code zumindest patchen können sollten.
So haben wir die diversen Lösungen unter verschiedenen Gesichtspunkten angeschaut und Schwerpunkte gesetzt....
Schon bei der Zieldefinition sind Beschränkungen zu treffen und so wenig das hier aussieht, desto mehr steckt der Teufel im Detail.
Wenn wir sagen „ein Source Code“ bedeutet das natürlich nicht „schreiben, kompilieren, fertig“, sondern es gibt viele plattformabhängige
Komponenten im Produkt, die nicht auf allen Zielplattformen zur Verfügung stehen. Es soll vielmehr eine Code-Sammlung an einer
Stelle entstehen, die wir schnell und reproduzierbar auf die Zielsysteme bringen.
Auch für den Vertrieb ist die Bearbeitung der App-Stores extrem wichtig und muss reproduzierbar und modifizierbar sein.
Wenn möglich aus der gleichen Quelle mit Skripten und Dokumentation.
Als Webentwickler haben wir uns natürlich für HTML5 und Javascript entschieden.
Auch nachdem wir uns ein paar interessante Nischen wie XOJO angeschaut hatten.
Als „den einen Ort“, unser Auenland haben wir uns für SVN auf CentOS 6 entschieden, da wir das schon für Produkte verwenden und hier keine Lernkurve nötig war (wie Backup-Prozesse und ähnliches).
Wenn wir das alles jetzt zusammendampfen, ohne zu wissen was CommonJS wirklich bedeutet, hatten wir sowas im Kopf... Oh, wehe dem Unwissenden :-)
Zunächst hatten wir Titanium/appcelerator ausgeschaut, da ich vor 2-3 Jahren eine Version getestet hatte, die auch Desktop-Lösungen erstellt und musste feststellen, dass
1.) Titanium keine Desktop-Versionen mehr erzeugt
2.) TideSDK.org hoffnungslos veraltet ist und niemals im App-Store für OS X angenommen werden würde
3.) TideKit.com leider nicht rechtzeitig fertig werden würde...
Ich persönlich habe einen Riesenspaß an einer hybriden Umsetzung mit Mac OS X und Windows 8.1 Pro...
Mit dem SVN in der Mitte, einer guten Standleitung und einer guten Automation mit Skripten ist es mir mittlerweile total egal, ob ich auf einem Windows, Mac oder unter Linux entwickeln soll...