IoTizando com JavaScript

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

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

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

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

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

Componentes e Sensores Arduino

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

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

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

AngularJS
https://angularjs.org/

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

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>

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').
$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

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


<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="cordova.js"></script>

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

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').
});
} else {
$http.get('http://192.168.0.102:3000/desligar').
});
}
};
});

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

IoTizando com JavaScript

Mais conteúdo relacionado

Mais procurados (16)

Destaque (8)

Semelhante a IoTizando com JavaScript (20)

Mais de Heider Lopes (13)

Último (12)

IoTizando com JavaScript