Hackschool - Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser!

Die Web-Anwendung auf jedem gängigen Smartphone? Gleichzeitig im Browser und auf einem PC? Ist das überhaupt möglich? Ja das ist es! In diesem Workshop werden eure Fragen beantwortet.

Echtes Cross-Plattform ist heute keine Zauberei mehr. Es ist möglich mit nur einer Code-Basis alle relevanten Geräte und Plattformen zu bedienen. Egal ob Smartphone, ein Tablet, Windows-, Apple oder Linux-PC. Die App für jede Plattform. Echtes Cross-Plattform eben!

Steffen Jahr und Sebastian Gingter entwickeln mit euch zusammen in diesem Workshop eine echte Cross-Plattform Anwendung auf Basis von Open-Source Technologien, welche auf jedem relevanten Device und zusätzlich noch auf PCs und im Browser lauffähig ist. Zum Einsatz kommen Technologien wie Angular 2, Type- bzw. JavaScript und Apache Cordova.

GitHub: https://github.com/thinktecture/hackschool-crossplatform

Transcript

1. Hackschool – Cross-Plattform Steffen Jahr & Sebastian Gingter Thinktecture AG
2. Speaker Steffen Jahr Software Developer Fokus: - Frontend - Angular - Apache Cordova @SteffenJahr steffen.jahr@thinktecture.com Sebastian P.R. Gingter Software Engineer Fokus: - Backend - TypeScript - C# / .NET Core @PhoenixHawk sebastian.gingter@thinktecture.com Thinktecture AG 2
3. Agenda • Block 1: Intro & Setup • Block 2: Angular • Block 3: Angular & Cordova • Block 4: Cordova & FAQ Thinktecture AG 3
4. Intro • Was haben wir vor? Thinktecture AG 4
5. Setup • Repository: https://github.com/thinktecture/hackschool- crossplatform Thinktecture AG 5
6. API • Mini Pokémon API • Im Ordner api – npm i – npm start • GET http://localhost:8090/pokemon (Liste) • GET http://localhost:8090/pokemon/{id} (Details) Thinktecture AG 6
7. Angular 2 • Was ist Angular? • Was ist es nicht? Thinktecture AG 7
8. Komponenten und Direktiven • Was sind Komponenten? – Erzeugt ein neues HTML-Tag innerhalb dessen ein Template angezeigt werden kann. Das Template kann Daten, welche aus der Komponente stammen, anzeigen. • Was sind Direktiven? –Nehmen Einfluss auf den DOM innerhalb oder auf einem HTML-Tag Thinktecture AG 8
9. Direktiven • Strukturdirektiven – ngFor – Iteration über ein Array <div *ngFor=“let item of itemList”> {{item}} </div> – ngIf – Bedingung muss zur Anzeige erfüllt werden <div *ngIf=“myCondition”> <h1>Hello Hackschool!</h1> </div> Thinktecture AG 9
10. Direktiven • Attribut-Direktiven – ngStyle – Setzen eines Styles durch Zuweisung eines Propertys aus der Komponente <div [ngStyle]=“{ ’font-size’: mySizeValue }”> – ngClass – Nutzung einer CSS-Klasse bei Erfüllung einer Bedingung <div [ngClass]=“{ “myClass”: myCondition }”> Thinktecture AG 10
11. Bindings • Event: (click)=“myEvent()” • One-Way: [myProperty]=“myValue” • Two-Way: [(myProperty)]=“myValue” Thinktecture AG 11
12. Routing • Navigation innerhalb der Applikation • Austausch der Inhalte definierter Bereiche Thinktecture AG 12
13. Was ist Gulp? • Gulp ist ein Task-Runner • Basiert auf Node.js • Gulp-Tasks sind kleine, eigenständige JavaScript- Funktionen • Erlaubt es, Aufgaben im Build-Prozess bequem zu automatisieren Thinktecture AG 13
14. Apache Cordova • Framework zu Erstellung hybrider Applikationen auf verschiedenen Plattformen • Erweiterbar durch Plugins • Ermöglicht Zugriff auf native Funktionen und Hardware Thinktecture AG 14
15. Fragen? Antworten!
16. Quellen/Links • Angular: https://angular.io • Cordova: https://cordova.apache.org/ • Genymotion: https://www.genymotion.com/ • BoardZ: https://github.com/thinktecture/boardz- cross-platform-sample Thinktecture AG 16