9º Connecting KnowledgeHEIDER LOPES

Heider Lopes

• Pós-Graduado em Sistemas e Desenvolvimento Web

• Analista Programador

• THT Member

Redes Sociais do THT Member

twitter.com/heiderlopes

github.com/heiderlopes

slideshare.net/heiderlopes

www.heiderlopes.com.br

Agenda

O que é uma coisa

?

O que é uma coisa

?

O que é uma coisa

?

Coisa

Objeto ou ser inanimado. O que existe ou pode existir.

O Que é IoT?

•É a possibilidade de comunicação entre todos os objetos que existem – enviando e recebendo dados e informações com o intuito de facilitar a vida das pessoas.

•Estima-se que a IoT terá mais de 20 bilhões de devices em 2020

• Interação de objetos inteligentes

IoT em Casa

IoT no carro

IoT no trabalho

IoT nas compras

IoT ajudando pessoas

Vídeo 1

•Durex Fundawear -- Touch over the Internet [OFFICIAL]

http://www.youtube.com/watch?v=qb7DN3kpl2o

Arduino

Introdução

• Plataforma baseada em Atmel da AVR (ATMega168);

• Oferece um IDE e bibliotecas de programação de alto nível;

• Open-source hardware e software

Introdução ao Arduino

• Ampla comunidade

• Programado em C/C++

• Transferência de firmware via USB

• MCU com bootloader

Aplicações Práticas

• Robôs

• Roupas eletrônicas

• Máquinas de corte e modelagem 3D de baixo custo;

• Segway open-source

Aplicações Práticas

• Desenvolvimento de celulares customizados

• Instrumentos musicais

• Paredes interativas

• Instrumentação humana

• Circuit bending

Modelo de Arduino

Placa Arduino

Shields• Arquitetura modular inteligente

• Arduino estabeleceu um padrão de pinagem que é respeitado por diversas placas shield:

Componentes e Sensores Arduino

MiniComputadores

CubieTruck

BeagleBone

Raspberry Pi

CHIP

IoTizando com JS

Para nossa demo ao vivo

JavaScript• Criado por Brendan Eich em 1995

• Surgiu como script client-side de páginas web

• DISTINTA do JAVA

• Facilidade em interação com o Document Object Model (DOM)

NodeJS

https://nodejs.org/

NodeJS

Plataforma para desenvolvimento de aplicações

server-side baseadas em rede utilizando JavaScript e o V8 JavaScript Engine.

ExpressJS

Framework para Node.js que possui um robusto conjunto de recursos para desenvolver

aplicações web, como um sistema de Views intuitivo (MVC), um robusto sistema de

roteamento, um executável para geração de aplicações e muito mais.

Instalação do Express

npm install express@3.x

Instanciando o Express

var express = require('express');var app = express();

Liberação do CORSapp.all('/*', function(req, res, next) { // CORS headers res.header("Access-Control-Allow-Origin", "*"); // restrict it to the required domain res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); // Set custom headers for CORS res.header('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key,x-requested-with'); if (req.method == 'OPTIONS') { res.status(200).end(); } else { next(); }});

Exemplo de serviço

app.get('/', function(req, res){ res.send(‘Connecting Knowledge’); });

Criação do Servidor

var server = app.listen(3000);

console.log('Servidor Express iniciado na porta %s', server.address().port);

Rodando a Aplicação

node <<nomearquivo>>Ex: node app.js

Acessar a url

• Através do browser: – http://localhost:3000

• Através do curl– curl http://localhost:3000

Nodemon

É um file watcher que roda internamente o

próprio comando node. Ele faz auto-restart da aplicação, toda vez que um arquivo do projeto for

modificado.

Instalando e Rodando do Nodemon

npm install -g nodemon

nodemon <<nomearquivo>>nodemon app.js

Johnny Five

Framework de código aberto que nos permite

controlar o hardware utilizando JavaScript, desenvolvido pela Bocoup.

Instalação do Johnny Five

npm install johnny-five

Demo Serviço NodeJS, ExpressJS e Johnny Five

Esquema no arduino

Protocolo Firmata no Arduino

Exemplo de Código

var five = require("johnny-five"), board = new five.Board();

var led;

board.on("ready", function() { console.log("Arduino Conectado"); led = new five.Led(13); });

Serviço para ligar/desligarapp.get('/ligar', function(req, res){ led.on(); res.send('LED ligado');});

app.get('/desligar', function(req, res){ led.off(); res.send('LED desligado');});

AngularJS

https://angularjs.org/

AngularJSFramework MVC completo com suporte a:

• Data Binding

• Injeção de Dependência

• Criação de Elementos HTML Personalizados (Diretivas)

• Carga de Modulos com Gerenciamento de Dependências

• Roteamento e Gestão de Histórico

• Serviços

• Promessas

Demo Consumindo um Serviço

View<html ng-app='AngularIntro'> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="main.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <title>DemoIoT - Heider Lopes</title> </head> <body ng-controller='MainCtrl'> <div class="container"> <h1>IoT - Heider Lopes</h1> <div class="jumbotron"> <center><h1>IoTizando com JavaScript</h1></center> <p align="center"class="lead">Controlando Arduino atraves de JavaScript</p> <p align="center"> <a class="btn btn-lg btn-success" ng-click='ligar()' role="button">Ligar</a> <a class="btn btn-lg btn-danger" ng-click='desligar()' role="button">Desligar</a> </p> <p align="center" ng-class="result === 'LED ligado'? 'btn-success' : 'btn-danger'">{{result}}</p> </div> </div> </body></html>

Controllervar module = angular.module('AngularIntro', []); //Adição do Controller ao módulo module.controller('MainCtrl', function($scope, $http){ $scope.ligar = function() {

$http.get('http://localhost:3000/ligar'). success(function(data) { $scope.result = data; });

};

$scope.desligar = function() {$http.get('http://localhost:3000/desligar').

success(function(data) { $scope.result = data; });

}; });

IONIC Framework

http://ionicframework.com/

Ionic Framework

Framework front-end para o desenvolvimento de aplicativos móveis, que entrega um conjunto rico de elementos de mobile UI,

unindo excelentes tecnologias como Apache Cordova, AngularJS e Sass.

Instalação do IONIC Framework

npm install -g cordova ionic

Demo Consumindo um Serviço

Iniciando um projeto

Rodando a aplicação

View<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet”> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/controller.js"></script> </head>

View - cont <body ng-app="starter">

<ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">IoTizando com JS - Heider Lopes</h1> </ion-header-bar> <ion-content ng-controller="MainIonicCtrl"> <ion-list>

<ion-toggle ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked" ng-change="toggleLed(item)"> {{ item.text }} </ion-toggle> </ion-list> </ion-content> </ion-pane> </body></html>

Controllerapp.controller('MainIonicCtrl', function($scope, $stateParams, $http) { $scope.settingsList = [ { text: "Led", checked: false } ];

$scope.toggleLed = function(item) { console.log(item); if(item.checked) { $http.get('http://192.168.0.102:3000/ligar'). success(function(data) { }); } else { $http.get('http://192.168.0.102:3000/desligar'). success(function(data) { }); } };

});

Dúvidas

THT nas Redes Sociais

MEETUP.COM/THT-THINGS-HACKER-TEAM

THINGS HACKER TEAM

SLIDESHARE.NET/THINGSHACKERTEAM

TWITTER.COM/THINGSHACKERTM

GITHUB.COM/THINGSHACKERTEAM

FACEBOOK.COM/THINGSHACKERTEAM

WWW.THINGSHACKERTEAM.COM