9º Connecting Knowledge
HEIDER 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....
Agenda
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çõ...
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;
...
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
• Instrument...
Modelo de Arduino
Placa Arduino
Shields
• Arquitetura modular inteligente
• Arduino estabeleceu um padrão de pinagem
que é respeitado por diversas placas ...
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
• Facilida...
NodeJS
https://nodejs.org/
NodeJS
Plataforma para desenvolvimento de aplicações
server-side baseadas em rede utilizando
JavaScript e o V8 JavaScript ...
ExpressJS
Framework para Node.js que possui um robusto
conjunto de recursos para desenvolver
aplicações web, como um siste...
Instalação do Express
npm install express@3.x
Instanciando o Express
var express = require('express');
var app = express();
Liberação do CORS
app.all('/*', function(req, res, next) {
// CORS headers
res.header("Access-Control-Allow-Origin", "*");...
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().p...
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...
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 Bocou...
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() {
con...
Serviço para ligar/desligar
app.get('/ligar', function(req, res){
led.on();
res.send('LED ligado');
});
app.get('/desligar...
AngularJS
https://angularjs.org/
AngularJS
Framework MVC completo com suporte a:
• Data Binding
• Injeção de Dependência
• Criação de Elementos HTML Person...
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.j...
Controller
var module = angular.module('AngularIntro', []);
//Adição do Controller ao módulo
module.controller('MainCtrl',...
IONIC Framework
http://ionicframework.com/
Ionic Framework
Framework front-end para o desenvolvimento
de aplicativos móveis, que entrega um
conjunto rico de elemento...
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,...
View - cont
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">IoTizando com JS - He...
Controller
app.controller('MainIonicCtrl', function($scope, $stateParams, $http) {
$scope.settingsList = [
{ text: "Led", ...
Dúvidas
THT nas Redes Sociais
MEETUP.COM/THT-THINGS-HACKER-TEAM
THINGS HACKER TEAM
SLIDESHARE.NET/THINGSHACKERTEAM
TWITTER.COM/THI...
IoTizando com JavaScript
IoTizando com JavaScript
Próximos SlideShares
Carregando em…5
×

IoTizando com JavaScript

515 visualizações

Publicada em

Palestra apresentada no 9º Connecting Knowledge realizado pelo Things Hacker Team. Palestra sobre como desenvolver para Internet das Coisas utilizando JavaScript.

Publicada em: Internet
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
515
No SlideShare
0
A partir de incorporações
0
Número de incorporações
10
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

IoTizando com JavaScript

  1. 1. 9º Connecting Knowledge HEIDER LOPES
  2. 2. Heider Lopes • Pós-Graduado em Sistemas e Desenvolvimento Web • Analista Programador • THT Member
  3. 3. Redes Sociais do THT Member twitter.com/heiderlopes github.com/heiderlopes slideshare.net/heiderlopes www.heiderlopes.com.br
  4. 4. Agenda
  5. 5. Coisa Objeto ou ser inanimado. O que existe ou pode existir.
  6. 6. 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
  7. 7. IoT em Casa
  8. 8. IoT no carro
  9. 9. IoT no trabalho
  10. 10. IoT nas compras
  11. 11. IoT ajudando pessoas
  12. 12. Vídeo 1 •Durex Fundawear -- Touch over the Internet [OFFICIAL] http://www.youtube.com/watch?v=qb7DN3kpl2o
  13. 13. Arduino
  14. 14. 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
  15. 15. Introdução ao Arduino • Ampla comunidade • Programado em C/C++ • Transferência de firmware via USB • MCU com bootloader
  16. 16. Aplicações Práticas • Robôs • Roupas eletrônicas • Máquinas de corte e modelagem 3D de baixo custo; • Segway open-source
  17. 17. Aplicações Práticas • Desenvolvimento de celulares customizados • Instrumentos musicais • Paredes interativas • Instrumentação humana • Circuit bending
  18. 18. Modelo de Arduino
  19. 19. Placa Arduino
  20. 20. Shields • Arquitetura modular inteligente • Arduino estabeleceu um padrão de pinagem que é respeitado por diversas placas shield:
  21. 21. Componentes e Sensores Arduino
  22. 22. MiniComputadores
  23. 23. CubieTruck
  24. 24. BeagleBone
  25. 25. Raspberry Pi
  26. 26. CHIP
  27. 27. IoTizando com JS
  28. 28. Para nossa demo ao vivo
  29. 29. 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)
  30. 30. NodeJS https://nodejs.org/
  31. 31. NodeJS Plataforma para desenvolvimento de aplicações server-side baseadas em rede utilizando JavaScript e o V8 JavaScript Engine.
  32. 32. 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.
  33. 33. Instalação do Express npm install express@3.x
  34. 34. Instanciando o Express var express = require('express'); var app = express();
  35. 35. Liberação do CORS app.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(); } });
  36. 36. Exemplo de serviço app.get('/', function(req, res){ res.send(‘Connecting Knowledge’); });
  37. 37. Criação do Servidor var server = app.listen(3000); console.log('Servidor Express iniciado na porta %s', server.address().port);
  38. 38. Rodando a Aplicação node <<nomearquivo>> Ex: node app.js
  39. 39. Acessar a url • Através do browser: – http://localhost:3000 • Através do curl – curl http://localhost:3000
  40. 40. 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.
  41. 41. Instalando e Rodando do Nodemon npm install -g nodemon nodemon <<nomearquivo>> nodemon app.js
  42. 42. Johnny Five Framework de código aberto que nos permite controlar o hardware utilizando JavaScript, desenvolvido pela Bocoup.
  43. 43. Instalação do Johnny Five npm install johnny-five
  44. 44. Demo Serviço NodeJS, ExpressJS e Johnny Five
  45. 45. Esquema no arduino
  46. 46. Protocolo Firmata no Arduino
  47. 47. 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); });
  48. 48. Serviço para ligar/desligar app.get('/ligar', function(req, res){ led.on(); res.send('LED ligado'); }); app.get('/desligar', function(req, res){ led.off(); res.send('LED desligado'); });
  49. 49. AngularJS https://angularjs.org/
  50. 50. AngularJS Framework 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
  51. 51. Demo Consumindo um Serviço
  52. 52. 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>
  53. 53. Controller var 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; }); }; });
  54. 54. IONIC Framework http://ionicframework.com/
  55. 55. 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.
  56. 56. Instalação do IONIC Framework npm install -g cordova ionic
  57. 57. Demo Consumindo um Serviço
  58. 58. Iniciando um projeto
  59. 59. Rodando a aplicação
  60. 60. 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>
  61. 61. 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>
  62. 62. Controller app.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) { }); } }; });
  63. 63. Dúvidas
  64. 64. 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

×