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

1. 9º Connecting Knowledge
HEIDER LOPES

2. Heider Lopes
• Pós-Graduado em Sistemas e Desenvolvimento Web
• Analista Programador
• THT Member

3. Redes Sociais do THT Member
twitter.com/heiderlopes
github.com/heiderlopes
slideshare.net/heiderlopes
www.heiderlopes.com.br

4. Agenda

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

7. 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

9. IoT em Casa

10. IoT no carro

11. IoT no trabalho

12. IoT nas compras

13. IoT ajudando pessoas

14. Vídeo 1
•Durex Fundawear -- Touch over the Internet [OFFICIAL]
http://www.youtube.com/watch?v=qb7DN3kpl2o

15. Arduino

16. 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

17. Introdução ao Arduino
• Ampla comunidade
• Programado em C/C++
• Transferência de firmware via USB
• MCU com bootloader

18. Aplicações Práticas
• Robôs
• Roupas eletrônicas
• Máquinas de corte e modelagem 3D de baixo
custo;
• Segway open-source

19. Aplicações Práticas
• Desenvolvimento de celulares customizados
• Instrumentos musicais
• Paredes interativas
• Instrumentação humana
• Circuit bending

20. Modelo de Arduino

21. Placa Arduino

22. Shields
• Arquitetura modular inteligente
• Arduino estabeleceu um padrão de pinagem
que é respeitado por diversas placas shield:

23. Componentes e Sensores Arduino

24. MiniComputadores

25. CubieTruck

26. BeagleBone

27. Raspberry Pi

28. CHIP

29. IoTizando com JS

30. Para nossa demo ao vivo

31. 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)

32. NodeJS
https://nodejs.org/

33. NodeJS
Plataforma para desenvolvimento de aplicações
server-side baseadas em rede utilizando
JavaScript e o V8 JavaScript Engine.

34. 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.

35. Instalação do Express
npm install express@3.x

36. Instanciando o Express
var express = require('express');
var app = express();

37. 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();
}
});

38. Exemplo de serviço
app.get('/', function(req, res){
res.send(‘Connecting Knowledge’);
});

39. Criação do Servidor
var server = app.listen(3000);
console.log('Servidor Express iniciado na porta
%s', server.address().port);

40. Rodando a Aplicação
node <<nomearquivo>>
Ex: node app.js

41. Acessar a url
• Através do browser:
– http://localhost:3000
• Através do curl
– curl http://localhost:3000

42. 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.

43. Instalando e Rodando do Nodemon
npm install -g nodemon
nodemon <<nomearquivo>>
nodemon app.js

44. Johnny Five
Framework de código aberto que nos permite
controlar o hardware utilizando JavaScript,
desenvolvido pela Bocoup.

45. Instalação do Johnny Five
npm install johnny-five

46. Demo Serviço NodeJS,
ExpressJS e Johnny Five

47. Esquema no arduino

48. Protocolo Firmata no Arduino

49. 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);
});

50. 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');
});

51. AngularJS
https://angularjs.org/

52. 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

53. Demo Consumindo um
Serviço

54. 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>

55. 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;
});
};
});

56. IONIC Framework
http://ionicframework.com/

57. 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.

58. Instalação do IONIC Framework
npm install -g cordova ionic

59. Demo Consumindo um
Serviço

60. Iniciando um projeto

61. Rodando a aplicação

62. 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>

63. 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>

64. 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) {
});
}
};
});

65. Dúvidas

66. 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