Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hackschool - Ran ans Werk: Echte Cross-Plattfor...

Steffen Jahr
September 17, 2016

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

Steffen Jahr

September 17, 2016
Tweet

More Decks by Steffen Jahr

Other Decks in Programming

Transcript

  1. Speaker Steffen Jahr Software Developer Fokus: - Frontend - Angular

    - Apache Cordova @SteffenJahr [email protected] Sebastian P.R. Gingter Software Engineer Fokus: - Backend - TypeScript - C# / .NET Core @PhoenixHawk [email protected] Thinktecture AG 2
  2. Agenda • Block 1: Intro & Setup • Block 2:

    Angular • Block 3: Angular & Cordova • Block 4: Cordova & FAQ Thinktecture AG 3
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. Apache Cordova • Framework zu Erstellung hybrider Applikationen auf verschiedenen

    Plattformen • Erweiterbar durch Plugins • Ermöglicht Zugriff auf native Funktionen und Hardware Thinktecture AG 14
  9. 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