German: Softwareprodukte aus einem Source Code mit Javascript

Desktop & Mobile aus einer Quelle
One source to rule them all!
www.secryptor.de Juli 2014 – Ralf Schwoebel Twitter: @trabit - 1

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

Die Triologie - Inhalt
Teil 1: Die 4 Gefährten
Teil 2: Die 2 Code Umgebungen
Teil 3: Die Rückkehr in die App Stores

Losgelaufen…

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!

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

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”

<html>
<head>
<script type="text/javascript" src="js/fileio.js"></script>
</head>
<body>
<script>
document.write(FileIO.size("myfile.gif"));
</script>
</body>
</html

Entscheidung für node-webkit & Cordova…
Professionelle Apps mit diesen tools?
Node-webkit:
Intel XDK
Amazon Cloudreader
Cordova:

Was wir brauchen: Checkliste
Tools!
• IDE (z.B. PHPStorm)
• SVN (git geht auch) Server
• Windows 8 (Desktop!)
• Inno Setup 5
• Mac OS X
• iOS (Emulator ist OK)
• Android (Device/Emulator)
• node-webkit
• Apache cordova + plugins
• Diverse tools (7zip, code signing, etc.)
• App-o-mat template:
https://github.com/app-o-mat/jqm-cordova-template-project

So sieht’s aus
OS X

Alles beisammen?

Das erste einfache Programm – Plain Javascript
$> cordova create enableJS

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!

Apache Cordova: aka PhoneGap
Cordova rocks!
• Install JDK
• Install “apache ant”
• Install Google Android SDK
$> cordova platform add android
$> cordova build android
$> cordova emulate android

Genymotion: Android, schneller!

Node-Webkit: The Desktop Way
Und node-webkit rocked auch:

Node-Webkit: The Desktop Way
NodeJS + Browser + einfaches Verpacken

Ein Desktop-Release mit Inno Setup
Windows
> 7z a -tzip app.nw *
> copy app.nw wonode-webkit-ist
> copy /b nw.exe+app.nw MeinProgramm.exe
> signtool sign /f RS-Symantec.pfx /p meinpw
… /td SHA256 MeinProgramm.exe
> signtool sign /f RS-Symantec.pfx /p meinpw
… /td SHA256 MeinSetup.exe

Zusammenfassung
http://www.enablejs.org/media/cordova_www-directory.zip
• Cordova installieren
• Kommandozeilen-Tools für Cordova kapieren
• Projekt anlegen
• App-o-mat Tutorials anschauen
• App-o-mat Template installieren
• Module installieren
• Obiges ZIP drüberkopieren
• “$> cordova emulate ios” auf OS X
• “$> cordova build ios” für Xcode Projekt
• node-webkit installieren (Pfade, etc. beachten)
• Package.json modifizieren
• “$> cd www/”
• “$> nw ./”

Javascript only: schnell und einfach, kein Problem!

21
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)

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:

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 …

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…

Beispiel FileIO: Cordova 3.x
Jetzt haben wir eine Binär-Datei, aber das Plugin “Filesystem” (unter anderem)…

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>

Beispiel FileIO: Muss ich halt bestimmte Sachen 2x machen

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!

Brainwash, part 2
Asynchronous: wirklich Umdenken!
<script>
document.write(FileIO.size("myfile.gif"));
</script>
<div id=“myResultDiv”></div>
<script>
showInDiv(FileIO.size("myfile.gif“, “myResultDiv”));
</script>

Objekte und Namespace: der Kern der Planung!
…
<div id="myResultDiv"></div>
…
<script>
function somethingNext(theMsg) {
$("#myResultDiv").html(theMsg);
}
function myTest(myNext) {
var myMsg="test";
(myNext)(myMsg);
}
$( document ).ready(function() {
var nextFunc = somethingNext;
myTest(nextFunc);
});
</script>

Objekte und Namespace: Asynchron verkettet!
<script>
function ShowQueryRes(theResults) {
$("#myResultDiv").html(theResults);
}
function getResults(whatToDoWithRes) {
//… get SQL result set
(whatToDoWithRes)(myResults);
}
var nextFunc = ShowQueryRes;
myQuerySQL(theQuery, nextFunc, failFunc);
</script>
Schematisch heisst das:

Exkurs: Promises – wer’s mag…

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

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

Apps in Node-Webkit für OS X?
One does not simply submit
Node-Webkit Apps for OS X

iOS Release… cordova build ios…

Cordova: Released!

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!

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!

Google Play submission
Mit Cordova einfach vorzubereiten:
http://developer.android.com/tools/publishing/app-signing.html#cert

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!

Vielen Dank &
…make it so!
Ralf Schwoebel
puzzler@tradebit.com

German: Softwareprodukte aus einem Source Code mit Javascript

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie German: Softwareprodukte aus einem Source Code mit Javascript

Mehr von Ralf Schwoebel

German: Softwareprodukte aus einem Source Code mit Javascript

Hinweis der Redaktion