Diese Präsentation zeigt wie man Hybrid Apps mit dem Ionic 2 Framework erstellt kann. Dazu wird eine Beispielapp auf Basis der Open Movie Database programmiert.
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreGregor Biswanger
HTML5 ist überall - im Web, Mobile und natürlich auch auf den Desktop. Die große Stärke an HTML5 ist nicht nur, dass diese Plattform übergreifend unterstützt wird, sondern dass es immer mehr Features aus der Desktop-Welt bietet. Dennoch erfordert die Entwicklung von Desktop Anwendungen auf Basis von HTML & JavaScript neue Frameworks und Sprachen. Das Open Source Projekt Electron.NET verbindet ihr bekanntes C# & ASP.NET Core KnowHow mit den Möglichkeiten von Electron. In Kombination von C# und HTML5 können hoch performante Desktop Geschäftsanwendung für Windows, Mac und Linux entwickelt werden. Sie steigen mit den Grundlagen von Electron.NET ein und werden dann mit den wichtigsten Tools und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Platform Entwickler mit .NET auf.
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
HTML5 ist langsam, oder? Nein, in der Tat zeigt sich die grundlegende Geschwindigkeit von Cross-Plattform-HTML5-Anwendungen heutzutage in einem sehr positiven Licht. Es gibt aber doch ein paar Fallstricke, in denen sich der Entwickler schnell verfängt, wenn er nicht auf ein paar Punkte achtet. Der Vortrag geht zuerst auf die Vorgehensweise der Performancemessung ein. Anschließend werden die Top Performance-Tipps gezeigt, um nochmal einen ordentlichen Schub an Power herausholen zu können. Lassen Sie uns Gas geben!
Ionic is a great tool for building hybrid mobile apps and AngularJS is a great JavaScript framework that plays very nicely with Ionic. In this talk we'll go over the basics of getting started with AngularJS+Ionic. We'll look at some real code from each of the 2 libraries and see what all is involved in building a hybrid mobile application. We will finish our journey with a real-life Ionic app presentation powered by RESTFul services.
Target Audience: People that want to see where to start with AngularJS and how it fits into Ionic. This talk assumes no prior knowledge with either library. If you've built a PhoneGap mobile app but felt lost when adding MVC-style structure or Bootstrap-esque UI components, this is the talk for you.
Assumed Knowledge: Attendees should be comfortable with "modern JavaScript". A basic understanding of classes and objects and variable scopes will be helpful. Some basic prior exposure to PhoneGap/Cordova and a UI-framework such as Bootstrap will also be helpful.
The document discusses the Ionic framework for building hybrid mobile apps using web technologies like Angular. It highlights how Ionic allows web developers to build native-feeling apps, provides an SDK for developing these apps, and empowers developers. Ionic 2 aims to push the limits of what is possible with web technology by keeping apps simple, providing a better native experience, and reducing tooling fatigue. Ionic also makes it easy to build progressive web apps that can be installed like native apps and work offline.
Effective Communication Of Data Inspired by Stephen FewCory Grenier
The document discusses effective strategies for communicating data through visualizations. It identifies three common data scenarios - strategic, analytical, and operational - and provides examples of visualizations that work best for each scenario. Key recommendations include keeping visualizations simple, using labels and context to ensure understandability, and designing for the limitations of human memory and cognition.
Ionic Framework - get up and running to build hybrid mobile appsAndreas Sahle
Overview over frameworks for hybrid app development. Cordova, Supersonic, Ionic. Architecture, differences, setup and scaffolding for development. Angular based development for Apps with a web view.
This document discusses building native mobile apps with Cordova, Angular, and Ionic. It introduces these tools: Cordova handles the native layer and can build apps for different platforms; Angular is used for MVC and data binding; and Ionic provides UI components with mobile design patterns. It then demonstrates how to create a chat room app with these technologies, using Firebase for real-time data syncing across clients. The document estimates that a basic Ionic app can be made in 1 hour, with additional time spent adding Angular functionality, modifying layouts, and integrating Firebase. Source code for the example chat room app is provided on GitHub with tags indicating different implementation stages.
A dive into Ionic Framework. What is it, why should you use it, how can it work for you and we build a basic application to show how easy and fast it is to use.
To correctly portray complex data a developer must utilize modern data visualization techniques. This session describes how to create data graphics (charts) and dashboards that are concise, attractive and usable. Learn the practical design principles that apply to every data graphic you produce. Without this firsthand knowledge one can innocently construct visuals that erroneously represent data and mislead viewers. I cover Important Visual Perception Patterns to Know and the Top Common Chart Design Errors. I will also share the knowledge framework for creating effective graphical data dashboards. Apply the best design pattern every time using the "3 threes" — a convenient memory hook representing the distinctions between systems that “monitor, measure, and manage” performance metrics for “operations, tactical or strategic” purposes. Become a hero of interactive data visualization. Copious examples included.
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...Juliano Martins
Neste conjunto de slides, demonstro a criação de uma aplicação híbrida para Android e IOs (Iphone) utilizando Ionic, Cordova e acessando SQLite, que irá executar as oprações básicas: incluir, listar, excluir e alterar dados.
Código fonte disponível em https://github.com/julianommartins/ionicDataBase
This document summarizes a presentation about building mobile apps using the Ionic framework. The presentation introduces Ionic, a framework that allows developing cross-platform mobile apps using HTML, CSS, and JavaScript. It discusses the benefits of hybrid mobile development using Ionic over native development. The agenda includes explaining why to build mobile apps, comparing hybrid and native development, introducing AngularJS which powers Ionic, demonstrating how to install and use Ionic, and building a sample to-do list app to demonstrate Ionic in action.
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps.
Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions.
In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device.
Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.
Ionic - Revolutionizing Hybrid Mobile Application DevelopmentJustin James
This document discusses the Ionic framework for developing hybrid mobile apps. It begins with an overview of Ionic and its features, such as using HTML5, AngularJS, and Cordova to build apps that look and feel like native apps. It then covers various UI elements included in Ionic like lists, tabs, menus. It provides instructions on getting started with Ionic and discusses additional tools like Ionic View, Creator and Crosswalk. It emphasizes that Ionic makes mobile development easier but still requires modern web skills and lists several resources for learning more.
This document discusses Cordova, Ionic, and IBM MobileFirst for developing hybrid mobile apps. It begins with an introduction to Cordova for creating apps with HTML, CSS, and JavaScript. Ionic is presented as a framework that improves upon Cordova apps. MobileFirst is then introduced as a platform from IBM that further enhances hybrid apps with features like push notifications, security, and integration with backend systems and services.
Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha
Presentation materials for workshop on Hybrid App Development with Ionic Framework. Organized by Women Leaders in Technology, Nepal. Workshop conducted by Aayush Shrestha.
Hybrid mobile app development slide with Ionic Framework. This is a subset of slides presented during my Ionic Mobile Development course.
In addition to the items in this slide, the course will cover Ionic application Architecture, Important AngularJS principles for Ionic development, Native vs Hybrid and code signing to Google Play and AppStore.
It is a hands-on based approach training where 80% of the course (normally from 10 am to 5 pm) will be guided lab activity or mini project activity.
Intro to Ionic for Building Hybrid Mobile ApplicationsSasha dos Santos
Ionic is a free framework that allows users to easily build hybrid mobile applications for iOS and Android using Angular and Cordova. Ionic provides a command line interface, CSS classes, reusable components (directives) and various tools for testing and development. In this session, you'll get a birdseye view of what Ionic has to offer, as well as guidelines for building your first Ionic app, including the use of tools such as Yeoman, Bower and Grunt.
Building Mobile Applications with IonicMorris Singer
The document provides an introduction and overview of the Ionic framework for building mobile apps. It discusses that Ionic builds on existing technologies like AngularJS, Cordova plugins, and a layout engine. It reviews Ionic's technology stack including AngularJS, UI Router for routing, and Ionic components. It demonstrates how to generate a starter app, and shows examples of lists, buttons, icons, and touch gestures in Ionic.
In ihrem Referat stellten Daniel Bühlmann und Roman Andres hilfreiche Tipps für die Fehler- und Problemanalyse in SCC vor. Dabei wird zeigten sie auf, wie die häufigsten Probleme, die mit SCCM auftreten können, schnell identifiziert werden können und in welchen Situationen welche Logfiles wichtig sein können.
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...Marc Müller
Mittlerweile haben sich im VS-Umfeld immer mehr Nicht-MSTest-Testframeworks etabliert. Im Vortrag wollen wir auf mögliche Alternativen zu MSTest und Coded UI eingehen (z. B. Selenium, Ranorex, Protractor, …). Es geht dabei um Vor-/Nachteile, sinnvolle Szenarien und wie man es geschickt in die TFS-Werkzeugwelt integriert. Das Ziel ist dabei, das Beste aus beiden Welten zu bekommen
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...Gregor Biswanger
Das Jahr 2009 war die Geburtsstunde von Node.js. Dass hierbei JavaScript ebenfalls serverseitig verwendet werden kann, ist nur ein Teilaspekt für den hohen Erfolg. Viel relevanter ist die extrem hohe Performance, Skalierbarkeit und Produktivität. Nicht ohne Grund wird ASP.NET komplett neu erfunden und basiert auf den gleichen Ideen wie Node.js. Namenhafte Firmen wie Microsoft selbst, Google, PayPal, New York Times, GitHub, uvw. setzen bereits auf das leistungsstarke Node.js. Der Vortrag zeigt durch eine Reise der Node.js Architektur, woher die Vorteile kommen. Durch einen Vergleich von ähnlichen Funktionen, wird zudem der ideale Einstieg für .NET Entwickler geboten.
Plug-In Development mit dem Oracle Cloud Control - Enterprise Manager 12c
DOAG 2014 -Die größte Anwenderkonferenz rund um alle Oracle Themen, vom 18.11.2014 - 20.11.2014 in Nürnberg
Plug-In Development mit dem Oracle Enterprise Manager 12c
Entwicklung einer eigenen Lösung für das Monitoring von Applikationen mit den Enterprise Manager 12c am Beispiel der Überwachung für die Oracle NoSQL Datenbank.
Im Vortrag wird das generelle Konzept der OEM Plug-Ins im OEM 12c vorgestellt und die eigenen Erfahrungen und Grenzen beim Entwurf von Plug-Ins für eine größere NoSQL Umgebung werden aufgezeigt.
Ziel ist es über die Fallstricke in der Anfangsphase eines eigenen Projektes zu informieren, um eine schnelle Umsetzung eigener Ideen ohne allzu große Hürden zu ermöglichen.
Das dreckige Dutzend - ADF Migration nach 12c in der IKB - DOAG 2014.Torsten Kleiber
Das Team Kreditplattform der IKB entwickelt seit etwa 2 Jahren mit ADF. Wegen der aktuellen Bindung an die SOA Suite verharrten wir seitdem auf der Version 11.1.1.5 mit diversen Bugs. Seit dem Erscheinen der Version 12c wurde die Migration der Anwendung vorbereitet und zum Zeitpunkt des Vortrags gerade abgeschlossen.
Dieser Praxisbericht beleuchtet das Vorgehen und Fallstricke der Migration
- Vorbereitung der Server
- Vorbereitung Entwicklungsumgebung
- Migrationspfad
- Aufgetretene Probleme und deren Lösung
- Bugs & Patches
- Migration MDS
- Automatische und manuelle Tests
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreGregor Biswanger
Das Dokumentieren einer API wird oft als mühsame, aber wesentliche Aufgabe angesehen. Mit OpenAPI / Swagger können wir eine API-Dokumentation angenehm einfach in ASP.NET Core integrieren. Gregor Biswanger zeigt, wie eine API-Dokumentation mit einer Benutzeroberfläche hinzugefügt wird, mit der wir die API testen können.
Als Nächstes erfahren wir, wie wir Attribute und Konventionen verwenden, um die generierte OpenAPI-Spezifikation zu verbessern. Abschließend wird gezeigt, wie wir mit der Authentifizierung, Versionierung und Anpassung der Benutzeroberfläche umgehen.
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
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.
Das Build-Tool Apache Maven hält zunehmend Einzug in Projekte. Es ist aber mehr als "nur" ein Build-Tool. In seinem Vortrag „Automatischer Build mit Maven“ stellt Stefan Scheidt Maven vor und beleuchtet einige fortgeschrittene Themen.
Software has several characteristics that distinguish it from other goods. These include, that it is not subject to any laws of nature, is easy to change, theoretically infinitely replicable and largely invisible. This culminates in a special kind of complexity that makes it difficult even for experienced software developers and architects to lead their projects to success. In this talk, we will therefore look deeper into the effects that the described characteristics have and how they affect any software system, be it the small mobile app or the enterprise cloud cluster.
We (don't) need a software architect!?!Hendrik Lösch
„Softwarearchitekt“ – in Zeiten agiler Entwicklung wirkt dieser Begriff fast schon angestaubt und veraltet, vermittelt er doch den Eindruck, man würde vorrangig Blaupausen erstellen, die dann von anderen Personen in Beton gegossen und nie wieder verändert werden. Dies ist nicht korrekt. Software verändert sich kontinuierlich und evolutionär. Beachtet man dies nicht, kann es zu erheblichen Problemen kommen.
Der Vortrag soll daher einen Einblick in die Arbeit von Softwarearchitekten bieten und aufzeigen, was passieren kann, wenn es sie nicht gibt oder ihre Arbeit falsch verstanden wird. Hierbei wird auf die unterschiedlichen Arten von Software und die Zusammenstellung von Teams eingegangen sowie betrachtet, welche Aspekte der Softwareentwicklung in besonderem Maße von Softwarearchitekten profitieren können.
Dabei sei gleich vorweg verraten: Es geht nicht nur um Quellcode…
Restrukturierung einer industriellen GroßapplikationHendrik Lösch
In diesem Vortrag stellt Hendrik Lösch seine Erkenntnisse aus der Restrukturierung einer industriellen Großapplikation vor und zieht ein Zwischenfazit. Damit soll den Zuschauern ein Bild von den Punkten vermittelt werden, auf die bei einem solchen Vorhaben besonders zu achten ist.
Der Software auf den Zahn gefühlt - Einstieg in die ArchitekturbewertungHendrik Lösch
Eine Softwarearchitektur ist kein starres Gebilde. Sie wird nicht einmal festgelegt, dann errichtet und danach nie wieder angefasst. Softwarearchitekturen leben. Sie verändern sich und können gegebenenfalls auch mutieren. Aus diesem Grund sollten sie regelmäßig überprüft und bewertet werden, denn sonst droht der Verfall.
In diesem Workshop sehen wir uns verschiedene Vorgehen und Werkzeuge zur Bewertung von Softwarearchitekturen an. Wir betrachten Qualitätsziele, erstellen passende Überprüfungsszenarien und widmen uns objektiven Risikobewertungen.
„Wie reden Sie denn mit mir?!?“ – Stakeholder überzeugen als SoftwarearchitektHendrik Lösch
Softwarearchitekt wird man nicht von heute auf morgen. In aller Regel erhält man den Titel, nachdem man viele Jahre Quellcode geschrieben und sich mit technischem Klein-Kram beschäftigt hat. Dies hat gegebenenfalls zur Folge, dass wir Architekten nicht so recht vorbereitet sind, wenn es dann darum geht, unsere Belange gegenüber Personen zu erläutern, die keinen technischen Hintergrund besitzen. Schnell läuft man also Gefahr, notwendige Maßnahmen an der falschen Stelle zu adressieren, wichtige Stakeholder zu vergessen oder – dank zu technischen Begründungen – jene gänzlich zu verschrecken.
Aus diesem Grund wollen wir uns zunächst einige allgemeine Hilfsmittel ansehen, die nicht zwangsläufig etwas mit Softwarearchitekturen zu tun haben, uns aber bspw. helfen, Gespräche besser zu planen und vorzubereiten. Es geht aber auch um konkrete Werkzeuge wie zum Beispiel Stakeholder-Maps, mit denen wir unsere Zielgruppen im Blick behalten, Issue-Maps, mit denen wir die Problemstellen überblicken können oder auch Risikomatrizen, durch die es uns leichter fällt, Maßnahmen zu priorisieren.
Ziel des Ganzen ist es, den Teilnehmern neben den Werkzeugen auch ein Gefühl dafür zu geben, welche Stolpersteine außerhalb des Softwaredesigns und der Implementierung liegen, damit diese zukünftig leichter umschifft werden können.
Ziel des Vortrags ist es ein Gefühl für Themen außerhalb der reinen Programmierung zu schaffen. Hierbei siollen vor allem die Auswirkungen wichtiger Entscheidungen herausgearbeitet werden. Zielgruppe: Studierende
.NET 5 klopft nicht mehr nur leicht an die Tür, es trommelt vielmehr in ohrenbetäubender Lautstärke. Seit Microsoft angekündigt hat, dass das klassische .NET zukünftig nicht mehr unterstützt wird, stellt sich kaum noch die Frage ob, sondern nur noch wann, eine Migration notwendig wird.
In dieser Dev Session betrachten wir deshalb zunächst was es mit den verschiedenen .NET Versionen auf sich hat und wie sich diese über die Jahre entwickelt haben. Anschließend migrieren wir eine WPF Anwendung und betrachten hierbei das Vorgehen, sowie die damit verbundenen Herausforderungen. Dabei gehen wir auch auf die Zukunft von so wichtigen Bestandteilen wie Entity Framework und Windows Communication Foundation ein. Abschließend behandeln wir Migrationsszenarien bei denen nicht die gesamte, sondern nur Teile von Anwendungen migriert werden und erläutern die damit verbundenen Migrationsstrategien beispielhaft.
Nichts ist so beständig wie die Veränderung, so auch in der Softwareentwicklung. War das System an dem man arbeitet vor Jahren noch jung, frisch und voller Neuerungen, ist ihm der Alterungsprozess nicht gut bekommen. Daher soll es nun abgelöst oder zumindest in Teilen ersetzt werden. Doch wie geht man vor? Worauf soll man achten?
In diesem Vortrag behandeln wir die unterschiedlichen Strategien anhand eines fiktiven Beispiels und klären auf Basis welcher Voraussetzungen, welches Migrationsstrategien gewählt werden sollten. Zeitgleich werden aber auch die damit verbundenen Gefahren erläutert und wie man sie möglicherweise kompensieren kann.
Im Kosmos der Web UI Frameworks ist es nicht leicht sich neben den Platzhirschen Angular und React zu behaupten, bieten diese doch scheinbar alles was das Entwicklerherz begehrt. Nichts desto trotz hat sich Vue.js in den vergangenen Jahren einen Namen als dritte Möglichkeit erarbeitet.
In dieser Session soll daher begründet werden wie dem Framework das gelingen konnte. Wie es grundsätzlich funktioniert und wie es das Ökosystem aussieht, dass sich mittlerweile rund um Vue.JS gebildet hat. Zeitgleich werden die darin befindlichen Ansätze mit denen in Angular und React verglichen um eine Entscheidungsgrundlage für oder auch gegen Vue.JS bieten zu können.
Das Dasein eines Codehausmeisters ist schon nicht einfach. Da müht man sich tagein, tagaus damit ab die Software am Laufen zu halten und niemand dankt es einem. Schlimmer noch, ständig kommt jemand und beschwert sich das etwas nicht funktioniert oder macht die ganze Sache sogar noch schlimmer. Bloß wenn man mal etwas ändern will, dann ist kein Weg drin. Erkennen Sie sich hier wieder? Wenn ja hilft Ihnen unser Survival Kit weiter. Es unterstützt Sie mit Werkzeugen sowie Argumenten beim steten Kampf um Softwarequalität, Wartbarkeit und Restrukturierungsbudgets; mit dem Ziel Ihnen die Arbeit zu erleichtern und Ihrer Software endlich die Pflege zu Teil werden zu lassen, die sie so bitter nötig hat.
Dieser Vortrag beschreibt typische Fehler bei der Pflege von Software, anhand von Realbeispielen und welche Schlüsse man aus diesen Fehlern ziehen kann.
Haben Sie das Ihr Softwaresystem schon einmal gefragt? Haben Sie sich schon einmal ernsthaft mit dem Befinden der Applikation beschäftigt, die Sie oder Ihre Entwickler tagtäglich erweitern? Hat sie vielleicht keine Lust mehr und will kündigen, oder geht es ihr blendend und sie verlangt nach MEHR?
In diesem Vortrag sehen wir uns an wie wir das Befinden unserer Software ermitteln können. Dazu zählen Prozess- und Codemetriken, aber auch direkte Betrachtungen im Alltag. Ziel ist es, eine Art Frühwarnsystem zu etablieren, das uns sagt wann wir evtl. zu viel oder sogar zu wenig verlangen in dem wir Symptome aufdecken und diesen mögliche Krankheitsbilder zuordnen.
Clean Code ist wichtig, darin sind wir uns einig. Doch wie stellt man sicher, dass der Code sauber wird und auch sauber bleibt? Vor allem: was heißt eigentlich Sauberkeit und woran genau misst sie sich?Hendrik Lösch erklärt in seinem Vortrag verschiedene Qualitätsmetriken und wie diese mit Visual Studio geprüft werden können. Zu den betrachteten Metriken und Begriffen zählen zum Beispiel Klassiker wie Code Coverage und Lines of Code, aber auch die zyklomatische Komplexität und technische Schuld. Darüber hinaus wird der generelle Umgang mit Coding Conventions betrachtet und welche Herausforderungen sich ergeben wenn man sie in einem Unternehmen einführen möchte.
Refactoring gehört zum wichtigen Handwerkszeug eines jeden Entwicklers. Dabei wird der Code schrittweise transformiert um ihn besser verständlich und lesbar zu gestalten. In dieser Session beschäftigen wir uns mit unterschiedlichen Refactoring Patterns, basierend auf häufig auftretenden Fehlersituation. Zu diesen gehören die einfachen Grundlagen wie das extrahieren und Zusammenfassen von Funktionalität, insbesondere aber komplexe Szenarien wie beispielsweise das Aufbrechen von Vererbungshierarchien hin zu einer Objektkomposition, oder das Auflösen von statischen Klassen hin zu Dependency Injection.
Erfahrene Ärzte können einige Krankheiten bereits am Geruch ihres Patienten erkennen. Ähnliches können erfahrene Softwareentwickler, im übertragenen Sinne auch mit Software tun. Beide Berufsgruppen nehmen dazu unterschwellige Hinweise auf und können Rückschlüsse darauf ziehen welche Bereiche nicht arbeiten wie sie sollten. Typische schlechte Gerüche wollen wir uns in diesem Vortrag ansehen und darüber sprechen wie man ihnen begegnet. Um sie leichter zu verstehen, werden sie dabei als Antipattern beschrieben. Auf diese Weise wird der Rahmen abgesteckt in dem sie auftreten und wie man ihnen begegnen kann.
14. npm --version Version con NPM abrufen
npm help {befehl} Ruft die Hilfe für den entsprechenden Befehl auf
npm install [-g] {Paketname} Installiert das Paket im aktuellen Projekt bzw. global
npm install {Paketname}@{Version} Installiert das Paket mit der entsprechenden Version in das aktuelle Projekt.
--save Das Paket wird in die Liste der Abhängigkeiten des Projekts eingetragen
--save-dev
Das Paket wird in die Liste der Abhängigkeiten des Projekts eingetragen die zur
Entwicklungszeit gelten.
--force Das Paket wird installiert selbst wenn es schon vorhanden ist.
npm list Zeigt alle installierten Pakete im aktuellen Projekt an.
npm view {Paketname} Ruft diverse Informationen zum angegebenen Paket ab.
npm view {Paketname} {Detailbezeichnung} Ruft nur die Detailinformationen ab (bspw. Versions)
npm update
Aktualisiert alle Pakete des aktuellen Projekts die als Abhängigkeiten gespeichert
wurden.
npm update [-g] {Paketname}[@{Version}]
Aktualisiert das gegebene Paket ggf. auf eine bestimmte Version oder auf die
neuste.
npm uninstall {Paketname} Deinstalliert das angegebene Paket.
--save Entfernt das Paket aus den Projektabhängigkeiten.
--save-dev Entfernt das Paket aus den Projektabhängigkeiten für die Entwicklungszeit.
Die wichtigsten Befehle für NPM im Kontext von Ionic
15. ionic start {AppName} blank --v2 Leeres Projekt für Ionic 2 erstellen.
ionic start {AppName} tabs Projekt mit Tab Template für Ionic 1 erstellen.
ionic start {AppName} sidemenu Projekt mit Sidemenu Template für Ionic 1 erstellen.
ionic platform add android/ios Android bzw. iOs als Plattform hinzufügen.
ionic platform list Zeigt alle installierten Plattformen an.
Ionic platform remove {platform} Entfern die angegebene Plattform.
ionic build android/ios Plattform bauen.
ionic emulate android/ios Plattformversion im Emulator starten.
ionic run android/ios Plattformversion auf Gerät starten.
ionic serve
--lab
--consolelogs |-c
--serverlogs |-s
App im Browser ausführen.
App im Browser mit Ansichten für iOS und Android ausführen.
Ausgabe des Consolen loggings in der CLI.
Server Logs in der CLI ausgeben.
ionic login Bei den Ionic Services anmelden.
ionic upload Die aktuelle App in die Ionic Cloud hochladen.
ionic share Die aktuelle App über die Ionic Cloud mit anderen Personen teilen.
ionic --help Auflistung und Erläuterung aller CLI Befehle.
cordova clean Entfernt alle
Die wichtigsten Befehle für Ionic und Cordova
22. Das Bootstrapping wird an zentraler Stelle verwaltet und beim Programmstart eingeleitet.
23. Cordova plugins werden zentral gespeichert und direkt über Ionic verwendet.
Es gibt kein ngCordova!
24. Cordova Plugins u.ä. werden über Hooks in die Applikation eingebunden.
Dies geschieht weitestgehend automatisch.
25. Ionic speichert alle wichtigen Bibliotheken und Frameworks zunächst
im node_modues Verzeichnis.
Zusätzliche Pakete sollten IMMER über NPM installiert werden damit
der Buildprozess korrekt fuktioniert!
26. Splash screens und App Icons können für jedes plattform gesondert
angegeben werden.
Sie werden über die CLI aus einer Vorlage heraus generiert.
27. Type Script 1.x benötigt Typeings um Javascript Frameworks ansprechen zu können.
Diese sind separat mit jedem Framework herunter zu laden.
28. Die eigentliche App wird nach einem ionic build im www Verzeichnis zur Verfügung gestellt.
Im www Verzeichnis sollte nicht entwickelt werden!!!
29. Konfiguration aller wichtigen Umgebungsparameter der App (Version, App Package, API Version, …)
Konfiguration des Buildprozesses
Konfiguration der Ionic Parameter (welche Ionic Version, wird typscript verwendet, …)
NPM und Cordova Config (welche Pakete werden verwendet, Plattformen addressiert, Plugins verwendet)
Konfiguration des Typescript Transpilings (in welche JS Version, welche Dateien, wo liegen die Typings)
Konfiguration des Linters zur statischen Codeanalyse
Registrierung der eigentlichen Typings
35. import {beforeEachProviders, it, describe, expect, inject} from '@angular/core/testing';
import {Movies} from './movies';
describe('movie services', () => {
it('should return true', () => {
expect(true).toBeTruthy();
});
});
1. Füge neue Datei hinzu movies.spec.ts
2. Schreibe folgenden Inhalt in die Datei:
3. npm test
-> Test sollte erfolgreich sein
4. Ändere im test expect(true) zu expect(false)
-> Test sollte fehlschlagen
40. Beispiel lodash
npm install -g typings
npm install lodash --save
typings install lodash –save
import {[Funktionen die verwendet werden]} from 'lodash';
Überall wo es verwendet wird
43. import {beforeEachProviders, it, describe, expect, inject} from '@angular/core/testing';
import {Movies} from './movies';
import {includes, find} from 'lodash';
describe('movie search', () => {
beforeEachProviders(() => [Movies]);
it('should return an array of movies for the search text lo', inject([Movies], (movieRepository) =>{
var movies = movieRepository.search("lo");
expect(Array.isArray(movies)).toBeTruthy;
expect(movies.length).toBeGreaterThan(0);
}));
[2. Test]
});
Der 1. Test
44. Der (Fake)Provider + Domain Object
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class Movies {
constructor() {}
public search(searchText: string) {
let data = new Array();
let movie = {};
movie.Title = "olo";
data.push(movie);
return data;
}
}
export class Movie {
public Title : string;
public Year : number;
public imdbID: string;
public Type: string;
public Poster: string;
}
Beispiel: http://www.omdbapi.com/?s=lo
{
"Title":"The Hi-Lo Country",
"Year":"1998",
"imdbID":"tt0120699",
"Type":"movie",
"Poster":"https://images-na.ssl-images-...
},
46. Der echte Provider
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Http } from '@angular/http';
@Injectable()
export class Movies {
constructor(private http: Http) {}
public search(searchText: string) {
return new Promise(resolve => {
let url = 'http://www.omdbapi.com/?s=' + searchText;
console.log('start searching:' + url);
this.http.get(url)
.map(result => result.json())
.subscribe(data => resolve(data.Search));
});
}
}
47. it('should return movies which titles contain the text lo', inject([Movies], (movieRepository) => {
var movies = movieRepository.search("lo");
var foundSearchPhrase = find(movies, function(movie) {
var missmatchFound = !includes(movie.Title, 'lo');
return missmatchFound;
});
expect(movies.length).toBeGreaterThan(0);
expect(foundSearchPhrase).toBeFalsy("Found at least one element which does not contain lo.");
}));
Der 2. Test
48. ionic g page Search
Die Search Page – noch ohne Suche (1)
View:
<ion-header>
<ion-navbar>
<ion-title>Search</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list >
<ion-item *ngFor="let movie of movies">
{{movie.Title}}
</ion-item>
</ion-list>
</ion-content>
Logik:
import { Component } from '@angular/core';
import { Movies } from '../../providers/movies/movies';
@Component({
templateUrl: 'build/pages/search/search.html',
providers: [Movies]
})
export class SearchPage {
public movies: any;
constructor(private movieRepository: Movies) {
this.movieRepository.search("lo").then(data => {
this.movies = data;
});
}}
49. Die Search Page – noch ohne Suche (2)
import { Component } from '@angular/core';
import { ionicBootstrap, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { SearchPage } from './pages/Search/Search';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>‚
})
export class MyApp {
rootPage: any = SearchPage;
constructor(public platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}}
ionicBootstrap(MyApp);
app.ts anpassen
64. Navigationsparameter abrufen
import { Component, OnInit } from '@angular/core';
import { Movies } from '../../providers/movies/movies';
import { NavParams } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/details/details.html',
providers: [Movies]
})
export class DetailsPage implements OnInit{
public movie: any = {};
constructor(private movieRepository: Movies, private params: NavParams) { }
ngOnInit()
{
this.setMovie(this.params.get("id"));
}
…
65. Zurück navigieren
Logik
…
import { NavController } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/search/search.html',
providers: [Movies]
})
export class SearchPage {
public goBack() {
this.navCtrl.pop();
}
constructor(private movieRepository: Movies,
public navCtrl: NavController) {
}
…
<ion-navbar>…</ion-navbar>
66. Navigation ohne Stack
import { App, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
@App({
template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
@ViewChild('myNav') nav: NavController
private rootPage = TabsPage;
// Wait for the components in MyApp's template to be initialized
// In this case, we are waiting for the Nav with id="my-nav"
ngAfterViewInit() {
// Let's navigate from TabsPage to Page1
this.nav.push(Page1);
}
}
67. Favorites Page
ionic g page Favorites
<ion-header>
<ion-navbar>
<ion-title>Favorites</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
Hier finden sich irgend wann einmal die beliebtesten Filme des Nutzers.
</ion-content>
69. About Page
ionic g page About
<ion-header>
<ion-navbar>
<ion-title>About</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Diese App wurde von Hendrik Lösch gebaut...</p>
<p> Alle Quellen finden sich <a href="https://github.com/HerrLoesch/MoviewMania">hier</a></p>
</ion-content>
79. Native Storage & Plugins
Why?
This plugin is created because of the non-persistent property of LocalStorage in the WebView of
Android and iOS. In iOS stored data from LocalStorage can be removed by the OS, when running out of
memory.
When to use the plugin
•Simple: Uniform and convenient way of organizing, storing, and accessing the data
•Fast: Less than 1 milisecond to save or retrieve an object (in general)
•Persistence: Save data over multiple sessions, i.e. holds the data till the application is
removed from the device
•Small data: Store small amounts of persistent data (less than a few hundred kilobytes)
• It is possible to store more than a few megabytes, but that's not the intended usage of
the plugin.
Quelle: https://github.com/TheCocoaProject/cordova-plugin-nativestorage
80. Plugin hinzufügen
npm install –g cordova
ionic plugin add cordova-plugin-nativestorage
ionic g provider store
Nur falls Cordova noch nicht installiert ist.
Fügt es nur der config.xml aber nicht
package.json hinzu!!!
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard",
"cordova-plugin-nativestorage"
],
89. Probleme beim Erstellen eines neuen Projekts weil npm kein install ausführen kann.
Lösung: Aller neuste Node Version installieren und den Rechner neu starten.
90. Man kann selbst in neuen Projekten keine Ionicons sehen
(betrifft vor allem RC0)
^ Symbol entfernen oder auf Version 2.0.0 wechseln
Danach noch einmal npm install ausführen.
91. Es ist nicht möglich zu einer bestimmten Seite zu wechseln
Die Seite muss in declarations und(!) entryComponents der app.module.ts
eingetragen werden.