IoTizando com JavaScript

562 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
562
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
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

×