Web und Mobile Apps Programmieren Marco Jakob Kurzvortrag OSS an Schulen 28.03.2015.

Präsentation zum Thema: "Web und Mobile Apps Programmieren Marco Jakob Kurzvortrag OSS an Schulen 28.03.2015."—  Präsentation transkript:

1 Web und Mobile Apps Programmieren Marco Jakob Kurzvortrag OSS an Schulen 28.03.2015

2 ZIEL Programmier- unterricht aktuell attraktiv wenig Hürden

3

4 ABER… hat sich bewährt

5 "Läuft das auch auf meinem Handy?" "Kann ich damit eine Webseite programmieren?" Billdquelle: Webalys (webalys.com)

6 Billdquellen: Webalys (webalys.com) und IFA ?

7 AKTUELLE MÖGLICHKEITEN FÜR WEB UND MOBILE

8 Problematik mobiler Anwendungen iOS-Apps Sprache: Objective-C/Swift Laufen nur auf iPhones und iPads Android-Apps Sprache: Java (eigene Philosophie) Laufen nur auf Android-Geräten Billdquellen: Webalys (webalys.com)

9 Eine Möglichkeit – Alles im Webbrowser Billdquellen: Webalys (webalys.com), Visual Pharm (visualpharm.com) und IFA

10 Problematik webbasierter Anwendungen PHP, ASP.net, … Python, Java, C++, Visual Basic, … JavaScript Dart Billdquellen: Webalys (webalys.com) und IFA

11 (JavaScript) Billdquellen: Webalys (webalys.com) und IFA

12 Objektorientierte Sprache Stark an Java, C++, Smalltalk, … angelehnt Einfacher zu lernen Dart Ökosystem Dart Editor Viele nützliche Bibliotheken: Math, HTML, Kryptografie, Datenbanken, … Hilfsbereite Open Source Community

13 HTML & CSS Dart Dynamische Webapplikationen

14 Demo kanban.bitballoon.com

15 Demo (Prototypen) treasure.bitballoon.comdartagram.bitballoon.com

16 Unterlagen code.makery.ch HTML & CSS Tutorial Hello Dart: Einführung in die Programmierung Dart Kanban Tutorial

17 Fazit? Programmier- unterricht aktuell attraktiv wenig Hürden code.makery.ch

18

19 attraktivaktuell Objektorientierte Sprache Client-Server (in einer Sprache) Professionelle Entwicklungsumgebung

20 Einfacher Editor Grosse Ähnlichkeiten mit Java, C#, etc. wenig Hürden Viele nützliche Bibliotheken Elegante Sprache

21 Dart Editor Code completion Debugger Refactoring Warnings

22

23 DART CODE-BEISPIELE

24 Hello World main() { print("Hello, World!"); } public class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); } Dart Java

25 Funktionen und Variablen // Funktion definieren. printNumber(int number) { // Nummer auf Konsole ausgeben. } main() { // Variable deklarieren und initialisieren. var number = 42; // Funktion aufrufen. printNumber(number); }

26 Alles sind Objekte // String in einen int umwandeln. int i = int.parse("5"); // int in einen String umwandeln String s = 22.toString();

27 Klassen import 'dart:math'; class Point { num x; num y; // Konstruktor (kurz) Point(this.x, this.y); } main() { var p = new Point(2, 3); } // Konstruktor (lang) Point(num x, num y) { this.x = x; this.y = y; }

28 String Interpolation print('Hallo $name'); print('Distanz ${p.distanceTo(q)}');

29 Interaktion mit dem Browser // HTML Knopf erstellen. var button = new ButtonElement()..text = 'Bestellen'..classes.add('wichtig'); // Knopf in HTML einfügen. querySelector('#bestellung').children.add(button); // Beim Klicken die Funktion handleOnClick aufrufen. button.onClick.listen(handleOnClick); void handleOnClick(MouseEvent event) { window.alert('Danke!'); }