ION2

ION2-0417, Beginn Mi 1. Nov, Dauer 4 Tage

Ionic 2 Mobile Applikationen mit Webtechnologien (ION2-0417)

Kurspreis 3400 CHF

Kurstermine

1. Tag

Mi 1. Nov 2017

2. Tag

Do 2. Nov 2017

3. Tag

Mi 8. Nov 2017

4. Tag

Do 9. Nov 2017

Kursbeschreibung

Ionic 2 Mobile Applikationen mit Webtechnologien

Die nächste Generation von mobilen Applikationen.

Ionic ist ein Open-Source-Framework zur Erstellung von Hybrid-Apps auf der Basis von HTML5, CSS, Sass und JavaScript. Dabei basiert es auf AngularJS und Apache Cordova. Es stellt eine Programmbibliothek aus verschiedenen Komponenten zur Verfügung, mit denen interaktive Apps programmiert werden können. Der Fokus des Frameworks liegt auf der Seite des Front-Ends, also der Benutzerschnittstelle.
Ionic wird in Verbindung mit AngularJS genutzt, welches die Struktur der App erstellt, während Ionic die Benutzeroberfläche realisiert. Weder AngularJS noch Ionic sind objektorientierte JavaScript-Frameworks. Ionic ist ein npm-Modul und benötigt Node.js.
Mit Ionic können Hybrid-Apps für iOS, Android und mit Ionic 2 auch für die Universal Windows Platform von Windows 10 entwickelt werden. Diese Apps können zudem über die App Stores der jeweiligen Plattform vertrieben werden.
Angular arbeitet mit «jqLite», das DOM Manipulation ermöglicht. Für erweiterte Funktionalitäten kann jQuery mit einem Dokument geladen werden.
Ionic nutzt vorhandene HTML- und CSS-Funktionen, um schnelle Ergebnisse zu liefern. Gestaltbar über SASS, kann das individuelle Design der App durch Ionic-Variablen erweitert werden. Zusätzlich gibt es noch eine Bibliothek mit über 440 Symbolen.
Ionic ist vollständig Open Source. Es hat eine MIT-Lizenz, wodurch es privat als auch geschäftlich genutzt werden kann.
(Text: Wikipedia)

Voraussetzungen

Moderate Kenntnisse in Angular 2
Gute Kenntnisse in HTML
Gute Kenntnisse in CSS
Gute Kenntnisse in JavaScript
Erfahrungen mit OOP

Unterlagen

ZFI-Kursmaterial

Teilnehmerbeitrag

Der Teilnehmerbeitrag versteht sich rein netto. Das ZFI ist (gemäss MwSt-Gesetz) nicht Mehrwertsteuerpflichtig und erhebt somit keine MwSt. Bei länger als einen Monat dauernden Lehrgängen ist die Zahlung des Teilnehmerbeitrages in mehreren Raten möglich (pro rata temporis).

Kursinhalt

Welcome

Introduction of course participants & teacher
Discuss expectation and suggested procedure of course

Getting started

Why Ionic 2
Advantages on Ionic 2
Install required software
Setting up our dev environment
Creating our simulators
Inspecting the Ionic 2 technology stack

Run your first ionic app

Git clone
Starting the simulator
Starting an app

Ionic necessary knowledge / refresher

Typescript
Angular 2: Components, Directives, HTTP, Router, AuthGuard, Pipes, Etc…
Node
SASS

Typescript a quick reference

What is typescript?
Why using typescript?
Classes
Built in types
Typescript the angular 2 way
Inheritance

Ionic 2 deep dive

Setting up a new project
Screen values and bindings
Ionic 2 components
Project: Creating a calculator app

Ionic 2 create themes & inspecting default themes

Inspect default themes
Adjust a theme to your need
Ionic style components

Ionic 2 Navigation

Create a ionic 2 router
Angular 2 service
Share data in ionic
Slider in ionic

Ionic 2 layouts

Quick look at different layouts in ionic
Using Ionic layouts
When to use them
Project: Create an list-view app (e.g. Countries capitol city)

Ionic 2 http

Angular 2 HTTP
Create a restfull api with node
Access rest content with ionic
Swipe to delete in angular
Project: Create a task app in angular 2

Ionic 2 Cordova Plugins

How to use native functionality of the phone
Install cordova plugins
Use cordova plugins
Use sqlite storage with cordova
Project: Save tasks on phone till connection re-established

Project 1: Ionic 2 Google Map

Create a coffee shop app with Ionic 2
Access the Yalp-API

Project 2: Create a WA/Telegram clone

Create a WA/Telegram clone

Review & further information

What’s next
Great blog posts & communities