German: Softwareprodukte aus einem Source Code mit Javascript
Melden
Ralf SchwoebelFolgen
1. Jul 2014•0 gefällt mir•1,144 views
German: Softwareprodukte aus einem Source Code mit Javascript
1. Jul 2014•0 gefällt mir•1,144 views
Downloaden Sie, um offline zu lesen
Melden
Software
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.
Ralf SchwoebelFolgen
Recomendados
Modern HTML5 for JSF Developers: BootsFaces and AngularFacesRiccardo Massera
Nürnberg WordPress Meetup - Custom Post Types mit PODS.iofrankstaude
BootsFaces and AngularFaces - Modern HTML5 for JSF developers OPITZ CONSULTING Deutschland
Suche war gestern – Mit Facettierter Navigation schneller zum Zielfrankstaude
Pressmaticfrankstaude
Sessions aufzeichnen mit möglichst wenig Aufwandfrankstaude
Más contenido relacionado
Destacado
Mobile Convergence: Trends for Online MarketeersRalf Schwoebel
Mastering On-Site Search / Custom Site SearchRalf Schwoebel
Frankfurt am Main, Germanymayday74
Anatomy of mobile App developmentRalf Schwoebel
HTML5 AppCache: The ManifestRalf Schwoebel
Updated: NW.js - Desktop Apps with JavascriptRalf Schwoebel
Similar a German: Softwareprodukte aus einem Source Code mit Javascript
Hdc2012 cordova-präsiDeveloperConference
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...Gregor Biswanger
RhomobileJan Ow
Augmented Reality Workshopargency
elemente websolutions - Zusammenfassung T3DD09elemente websolutions
Top 10 Internet Trends 2006Jürg Stuker
Más de Ralf Schwoebel
Pagespeed SEO 2018: Google Mobile Index OptimizationRalf Schwoebel
APIconference London 2018: Turning code into wineRalf Schwoebel
Technologie und SEO: Cloud, Big Data und Mobile First angeschautRalf Schwoebel
German: SMX Munich - Twitter MarketingRalf Schwoebel
German Online Roundtable Frankfurt (OSF)Ralf Schwoebel
International and European SEO - Pubcon 2008Ralf Schwoebel
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
- 4. www.secryptor.de Twitter: @trabit - 4 Losgelaufen…
- 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”
- 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. 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. 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. www.secryptor.de Twitter: @trabit - 11 So sieht’s aus OS X
- 12. www.secryptor.de Twitter: @trabit - 12 Alles beisammen?
- 13. www.secryptor.de Twitter: @trabit - 13 Das erste einfache Programm – Plain Javascript $> cordova create enableJS
- 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. 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. www.secryptor.de Twitter: @trabit - 16 Genymotion: Android, schneller!
- 17. www.secryptor.de Twitter: @trabit - 17 Node-Webkit: The Desktop Way Und node-webkit rocked auch:
- 18. www.secryptor.de Twitter: @trabit - 18 Node-Webkit: The Desktop Way NodeJS + Browser + einfaches Verpacken
- 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. 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. www.secryptor.de Twitter: @trabit - 21 Javascript only: schnell und einfach, kein Problem!
- 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>
- 28. www.secryptor.de Twitter: @trabit - 28 Beispiel FileIO: Muss ich halt bestimmte Sachen 2x machen
- 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. 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. 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. 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. www.secryptor.de Twitter: @trabit - 33 Exkurs: Promises – wer’s mag…
- 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
- 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. www.secryptor.de Twitter: @trabit - 37 iOS Release… cordova build ios…
- 38. www.secryptor.de Twitter: @trabit - 38 Cordova: Released!
- 39. www.secryptor.de Twitter: @trabit - 39 Apps in Node-Webkit für OS X?
- 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!
- 44. www.secryptor.de Twitter: @trabit - 44 Vielen Dank & …make it so! Ralf Schwoebel puzzler@tradebit.com
Hinweis der Redaktion
- 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...