51
Criando um chat app com Android + Node.js

Android chat app com Node.js

Embed Size (px)

Citation preview

Page 1: Android chat app com Node.js

Criando um chat app com Android + Node.js

Page 2: Android chat app com Node.js

Graduado em Ciência da Computação

Pós-graduado em Computação Móvel

Suporte, dev, analista, gerente...

11 anos trabalhando com software

- 10 anos com Java e C#

- 5 anos com Android

- desde 2016 com Node.js

Page 3: Android chat app com Node.js

Node.js

Socket.io

Android

Referências

DúvidasCronograma

Page 4: Android chat app com Node.js

Node.js

Page 5: Android chat app com Node.js
Page 6: Android chat app com Node.js

Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/

+

Page 7: Android chat app com Node.js

Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/

Page 8: Android chat app com Node.js

Fonte: http://www.dotnetcurry.com/nodejs/1143/nodejs-tutorial-series-beginner-experienced-developer

Page 9: Android chat app com Node.js

Font

e:ht

tps:

//ww

w.te

chem

pow

er.c

om/b

ench

mar

ks/#

sect

ion=

data

-r13

&hw

=ph&

test

=pla

inte

xt

Page 10: Android chat app com Node.js

Fonte: http://www.luiztools.com.br/post/por-que-aprender-nodejs/

Page 11: Android chat app com Node.js

Node.js

"...Node.js uses an event-driven, non-blocking I/O model...""...Node is designed to build scalable network applications..."

Cenários de Usos:- APIs e serviços;

- bots e automação;

- mensageria;

- aplicações real-time e colaboração;

- backend de games;

- IoT;

Fonte: https://nodejs.org/en/about/

Page 12: Android chat app com Node.js

Node.js

Onde baixo?http://nodejs.org

Como verifico se está funcionando?node

node -v

sudo npm -g express-generator

O que mais vou precisar?Visual Studio Code: https://code.visualstudio.com/download

Page 13: Android chat app com Node.js
Page 14: Android chat app com Node.js

Node.js

Criando um projeto Express:C:\nodejs> express -e --git chatapi

Executando um projeto Express:C:\nodejs\chatapi> npm start

Acessando um projeto Express:http://localhost:3000

Page 15: Android chat app com Node.js
Page 16: Android chat app com Node.js

Node.js

Criando a view chat.ejs:<!doctype html>

<html>

<body>

<form action="">

<input id="m" /><button>Send</button>

</form>

<ul id="messages"></ul>

<script src="/javascripts/jquery-3.2.1.min.js"></script>

</body>

</html>

Page 17: Android chat app com Node.js

Node.js

Configurando a rota /chat:

router.get('/chat', function(req, res){

res.render('chat', {});

});

Page 18: Android chat app com Node.js
Page 19: Android chat app com Node.js
Page 20: Android chat app com Node.js

Socket.io

Page 21: Android chat app com Node.js
Page 22: Android chat app com Node.js

Fonte: https://pt.wikipedia.org/wiki/WebSocket

WebSocket é uma tecnologia que permite a comunicação bidirecional por canais full-duplex sobre um único soquete TCP. A API WebSocket é

padronizada pela W3C e o protocolo pela IETF.

Page 23: Android chat app com Node.js

Socket.io

Instalando a dependência:$ npm install -S socket.io

Configurando o servidor em bin/www:var io = require('socket.io')(server);

io.on('connection', function(socket){

socket.on('chat message', function(msg){

io.emit('chat message', msg);

});

socket.on('disconnect', function(){

console.log('user disconnected');

});

});

Page 24: Android chat app com Node.js

Socket.io

Configurando o cliente web:<script src="/socket.io/socket.io.js"></script>

<script src="/javascripts/jquery-3.2.1.min.js"></script>

<script>

$(function () {

var socket = io();

$('form').submit(function(){

socket.emit('chat message', $('#m').val());

return false;

});

socket.on('chat message', function(msg){

$('#messages').append($('<li>').text(msg));

});

});

</script>

Page 25: Android chat app com Node.js
Page 26: Android chat app com Node.js
Page 27: Android chat app com Node.js

Android

Page 28: Android chat app com Node.js

Android

O que vou precisar?Android Studio:

https://developer.android.com/studio/index.html?hl=pt-br

Android 4.0.3

Page 29: Android chat app com Node.js
Page 30: Android chat app com Node.js
Page 31: Android chat app com Node.js
Page 32: Android chat app com Node.js

Android

Customizando layout_main.xml: <ListView android:id="@+id/mensagens"

android:layout_width="0dp"

android:layout_height="0dp"></ListView>

<EditText android:id="@+id/txtMensagem"

android:hint="Digite sua mensagem"

android:layout_width="0dp"

android:layout_height="wrap_content"/>

<Button android:id="@+id/btnEnviar"

android:text="Enviar"

android:onClick="btnEnviarOnClick"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

Page 33: Android chat app com Node.js

Android

Customizando MainActivity.java:

//declarando variáveis locais

EditText txtMensagem = null;

ListView mensagens = null;

ArrayAdapter<String> adapter = null;

Page 34: Android chat app com Node.js

Android

Customizando MainActivity.java:

// no onCreate

txtMensagem = (EditText)findViewById(R.id.txtMensagem);

mensagens = (ListView)findViewById(R.id.mensagens);

adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1);

mensagens.setAdapter(adapter);

Page 35: Android chat app com Node.js

Android

Customizando MainActivity.java:

//novo método

public void btnEnviarOnClick(View v){

adapter.add(txtMensagem.getText().toString());

adapter.notifyDataSetChanged();

mensagens.smoothScrollToPosition(adapter.getCount() - 1);

}

Page 36: Android chat app com Node.js
Page 37: Android chat app com Node.js

Android

Customizando build.gradle:

dependencies {

...

compile 'io.socket:socket.io-client:+'

}

Page 38: Android chat app com Node.js

Android

Customizando AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"

/>

Page 39: Android chat app com Node.js

Android

Customizando MainActivity.java:

//nova variável local

Socket socket = null;

//novo método

public void waitMessage(){

// a seguir

}

//chamada no onCreate

waitMessage();

Page 40: Android chat app com Node.js

Android

Customizando MainActivity.java://waitMessage

socket = IO.socket("http://10.0.2.2:3000");

socket.on("chat message", new Emitter.Listener() {

@Override

public void call(final Object... args) {

MainActivity.this.runOnUiThread(new Runnable() {

@Override

public void run() { adapter.add(args[0].toString()); }

});

}

});

socket.connect();

Page 41: Android chat app com Node.js

Android

Customizando MainActivity.java:

//alterando método

public void btnEnviarOnClick(View v){

socket.emit("chat message", txtMensagem.getText().toString());

}

Page 42: Android chat app com Node.js

Android

Customizando MainActivity.java:

@Override

protected void onDestroy() {

super.onDestroy();

if (socket != null) socket.disconnect();

}

Page 43: Android chat app com Node.js
Page 44: Android chat app com Node.js
Page 45: Android chat app com Node.js
Page 46: Android chat app com Node.js

Referências

Page 47: Android chat app com Node.js
Page 48: Android chat app com Node.js
Page 49: Android chat app com Node.js
Page 50: Android chat app com Node.js

Dúvidas?

Page 51: Android chat app com Node.js

Obrigado!