O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

German: Softwareprodukte aus einem Source Code mit Javascript

1.027 visualizações

Publicada em

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.

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

German: Softwareprodukte aus einem Source Code mit Javascript

  1. 1. Desktop & Mobile aus einer Quelle One source to rule them all! www.secryptor.de Juli 2014 – Ralf Schwoebel Twitter: @trabit - 1
  2. 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. 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
  4. 4. www.secryptor.de Twitter: @trabit - 4 Losgelaufen…
  5. 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. 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. 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”
  8. 8. www.secryptor.de Twitter: @trabit - 8 Was wir wollen: Boilerplate! <html> <head> <script type="text/javascript" src="js/fileio.js"></script> </head> <body> <script> document.write(FileIO.size("myfile.gif")); </script> </body> </html
  9. 9. www.secryptor.de Twitter: @trabit - 9 Entscheidung für node-webkit & Cordova… Professionelle Apps mit diesen tools? Node-webkit: Intel XDK Amazon Cloudreader Cordova:
  10. 10. www.secryptor.de Twitter: @trabit - 10 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
  11. 11. www.secryptor.de Twitter: @trabit - 11 So sieht’s aus OS X
  12. 12. www.secryptor.de Twitter: @trabit - 12 Alles beisammen?
  13. 13. www.secryptor.de Twitter: @trabit - 13 Das erste einfache Programm – Plain Javascript $> cordova create enableJS
  14. 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!
  15. 15. www.secryptor.de Twitter: @trabit - 15 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
  16. 16. www.secryptor.de Twitter: @trabit - 16 Genymotion: Android, schneller!
  17. 17. www.secryptor.de Twitter: @trabit - 17 Node-Webkit: The Desktop Way Und node-webkit rocked auch:
  18. 18. www.secryptor.de Twitter: @trabit - 18 Node-Webkit: The Desktop Way NodeJS + Browser + einfaches Verpacken
  19. 19. www.secryptor.de Twitter: @trabit - 19 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
  20. 20. www.secryptor.de Twitter: @trabit - 20 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 ./”
  21. 21. www.secryptor.de Twitter: @trabit - 21 Javascript only: schnell und einfach, kein Problem!
  22. 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. 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. 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. 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. 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. 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>
  28. 28. www.secryptor.de Twitter: @trabit - 28 Beispiel FileIO: Muss ich halt bestimmte Sachen 2x machen
  29. 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!
  30. 30. www.secryptor.de Twitter: @trabit - 30 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>
  31. 31. www.secryptor.de Twitter: @trabit - 31 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>
  32. 32. www.secryptor.de Twitter: @trabit - 32 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:
  33. 33. www.secryptor.de Twitter: @trabit - 33 Exkurs: Promises – wer’s mag…
  34. 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. 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
  36. 36. www.secryptor.de Twitter: @trabit - 36 Apps in Node-Webkit für OS X? One does not simply submit Node-Webkit Apps for OS X
  37. 37. www.secryptor.de Twitter: @trabit - 37 iOS Release… cordova build ios…
  38. 38. www.secryptor.de Twitter: @trabit - 38 Cordova: Released!
  39. 39. www.secryptor.de Twitter: @trabit - 39 Apps in Node-Webkit für OS X?
  40. 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. 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. 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. 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!
  44. 44. www.secryptor.de Twitter: @trabit - 44 Vielen Dank & …make it so! Ralf Schwoebel puzzler@tradebit.com

×