IoT mit JavaScript

Navigation mit Esc, → und ↓

![tools](images/johannes.png) ### [Johannes Hoppe](http://JohannesHoppe.de)

1. Diverse untereinander kompatible Platinen mit Microcontroller
("Board") 2. Name einer Entwicklungsumgebung (IDE)
(Programme nennt man "Sketch")

## Arduino Uno 16MHz

3x GND ("Ground") Pins (→ Masse)
Oben: Digitale Input und Output Pins
Unten rechts: Analoge Input Pins
Unten links: Versorgungs-Pins

## Galileo Gen2 400 MHz

von Intel®
identische Pin-Anordnung wie bei Arduino Uno REV 3 ("Arduino 1.0 Pinout")
unterstützt Arduino Shields mit 3.3 V und 5 V (→ IOREF Jumper)
Zusätzlich u.a.: Mini-PCI Express, Ethernet 10/100 Mbps, Micro-SD, USB-Client, USB-Host...

## Breadboards [Widerstand](http://www.leds.de/Widerstandsrechner/) nicht vergessen! Breadboard - Steckboard/Experimentierboard

```c contenteditable // Blinking LED - Arduino Sketch int led = 13; void setup() { pinMode(led, OUTPUT); } void loop() { digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); } ```

pinMode() Configures the specified pin to behave either as an input or an output.
digitalRead() Reads the value from a specified digital pin, either HIGH or LOW.
digitalWrite() Write a HIGH (3.3/5 volts) or a LOW (0 volt, ground) value to a digital pin.
analogRead() Reads the value from the specified analog input pin.
analogWrite() Writes an 'analog' value (PWM wave) to a digital pin (marked with ~).

## PWM

[Freie Hardware](http://www.oshwa.org/), wird nach [lizenzkostenfreien](http://www.ohwr.org/projects/cernohl/wiki) Bauplänen [hergestellt](http://www.instructables.com/tag/type-id/category-technology/channel-arduino/?sort=FEATURED)

#### Open-Source Hardware Toolkit

#### Einfache und sichere
Elektronikaufbauten

Arduino-kompatibles Base Shield ("Stem")
Einzelne Module ("Twig")
alle Twigs haben ein vereinheitlichtes 4Pin Interface

Base Shield v2

![Logo Node.js](images/logo_node.js.svg)

V8, NPM, CommonJS

```js contenteditable // Blinking LED - Node.js var mraa = require('mraa'); myOnboardLed = new mraa.Gpio(13), ledState = true; myOnboardLed.dir(mraa.DIR_OUT); function loop() { myOnboardLed.write(ledState ? 1 : 0); ledState = !ledState; setTimeout(loop, 1000); } loop(); ```

![Cordova](images/logo_cordova.png)

![Phonegap](images/img_web-view.png)

Distributionen

* [Apache Cordova](http://cordova.apache.org/) * [Adobe PhoneGap](http://phonegap.com/) * [Telerik AppBuilder](http://www.telerik.com/appbuilder) * [Visual Studio Tools for Apache Cordova](http://www.visualstudio.com/en-us/explore/cordova-vs.aspx) * **[Intel XDK](https://software.intel.com/de-de/html5/tools)** * uvm...

![Logo AngularJS](images/logo_angularjs.svg)

MVC, MVVM, Directives, IoC

## UI-Router ```html contenteditable data-show-source="examples/HelloWorldAngular.html" loading source... ``` ```js contenteditable data-show-source="examples/HelloWorldAngular.js" loading source... ``` [plnkr.co/Z0YXdw](http://plnkr.co/Z0YXdw) / [Fallback](http://johanneshoppe.github.io/IonicPresentation/Demos/HelloWorldAngular/HelloWorldAngular/index.html)

## Controller ```js contenteditable data-show-source="examples/01_bindings/angular2.js" loading source... ``` ```html contenteditable small data-show-source="examples/01_bindings/angular2.html" loading source... ``` [Demo](examples/01_bindings/angular2.html)

## Directive ```html contenteditable data-show-source="examples/02_templating/angular.html" loading source... ``` ```html contenteditable data-show-source="examples/02_templating/angular_short.js" loading source... ``` [Demo](examples/02_templating/angular.html)

## Service / Factory ```js contenteditable angular.module('exampleApp', []) // constructor .service('helloWorldService', function() { this.sayHello = function() { return "Hello World!"; }; }) .factory('helloWorldFactory', function() { return { sayHello: function() { return "Hello World!"; } }; }); ```

![Logo Ionic](images/logo_ionic.svg)

![Image Ionic](images/img_ionic_phones.png)

[![Logo Ionic Creator](images/logo_ionic-creator.png)](https://creator.ionic.io/) [![Screenshot Ionic Creator](images/screen_creator-preview.png)](https://creator.ionic.io/) [creator.ionic.io](https://creator.ionic.io/)

### Herunterladen / Einrichten
```html contenteditable $ npm install -g cordova ionic $ ionic start SpartakiadeApp creator:6e4bc968306c $ cd SpartakiadeApp Optional $ npm install gulp -g $ ionic setup sass # auf Sass updaten ```

### Ionic Distibution ```html $ cd [appName] $ ionic serve # im Browser entwickeln! :-) $ ionic platform add android # Java SDK, Apache Ant, Android SDK... :-/ $ ionic build android $ ionic emulate android $ ionic platform add ios # OS X? Nope! :-( ```

### Alternative: Intel XDK

### Alternative: Telerik App Builder (CLI) ```html $ npm install -g appbuilder $ appbuilder create hybrid [appName2] --template=Blank $ cd [appName2] $ appbuilder simulate ``` [mehr Infos](http://developer.telerik.com/featured/supercharge-app-development-ionic-appbuilder/)

## Downloads ![tools](images/icon_file.png) #### [github.com/JohannesHoppe](https://github.com/JohannesHoppe/Workshop_Javascript_Internet-of-Things/)

# Danke!
* [johanneshoppe.de](http://johanneshoppe.de) * [@JohannesHoppe](https://twitter.com/JohannesHoppe) * [Johannes.Hoppe](https://www.facebook.com/johannes.hoppe)