Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Criando um chat app com
Android + Node.js
Graduado em Ciência da Computação
Pós-graduado em Computação Móvel
Suporte, dev, analista, gerente...
11 anos trabalhando ...
Node.js
Socket.io
Android
Referências
Dúvidas
Cronograma
Node.js
Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/
+
Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/
Fonte: http://www.dotnetcurry.com/nodejs/1143/nodejs-tutorial-series-beginner-experienced-developer
Fonte:
https://www.techempower.com/benchmarks/#section=data-r13&hw=ph&test=plaintext
Fonte: http://www.luiztools.com.br/post/por-que-aprender-nodejs/
Node.js
"...Node.js uses an event-driven, non-blocking I/O model..."
"...Node is designed to build scalable network applic...
Node.js
Onde baixo?
http://nodejs.org
Como verifico se está funcionando?
node
node -v
sudo npm -g express-generator
O que ...
Node.js
Criando um projeto Express:
C:nodejs> express -e --git chatapi
Executando um projeto Express:
C:nodejschatapi> npm...
Node.js
Criando a view chat.ejs:
<!doctype html>
<html>
<body>
<form action="">
<input id="m" /><button>Send</button>
</fo...
Node.js
Configurando a rota /chat:
router.get('/chat', function(req, res){
res.render('chat', {});
});
Socket.io
Fonte: https://pt.wikipedia.org/wiki/WebSocket
WebSocket é uma tecnologia que permite a comunicação bidirecional por
canai...
Socket.io
Instalando a dependência:
$ npm install -S socket.io
Configurando o servidor em bin/www:
var io = require('socke...
Socket.io
Configurando o cliente web:
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/jquery-3.2...
Android
Android
O que vou precisar?
Android Studio:
https://developer.android.com/studio/index.html?hl=pt-br
Android 4.0.3
Android
Customizando layout_main.xml:
<ListView android:id="@+id/mensagens"
android:layout_width="0dp"
android:layout_heig...
Android
Customizando MainActivity.java:
//declarando variáveis locais
EditText txtMensagem = null;
ListView mensagens = nu...
Android
Customizando MainActivity.java:
// no onCreate
txtMensagem = (EditText)findViewById(R.id.txtMensagem);
mensagens =...
Android
Customizando MainActivity.java:
//novo método
public void btnEnviarOnClick(View v){
adapter.add(txtMensagem.getTex...
Android
Customizando build.gradle:
dependencies {
...
compile 'io.socket:socket.io-client:+'
}
Android
Customizando AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET"
/>
Android
Customizando MainActivity.java:
//nova variável local
Socket socket = null;
//novo método
public void waitMessage(...
Android
Customizando MainActivity.java:
//waitMessage
socket = IO.socket("http://10.0.2.2:3000");
socket.on("chat message"...
Android
Customizando MainActivity.java:
//alterando método
public void btnEnviarOnClick(View v){
socket.emit("chat message...
Android
Customizando MainActivity.java:
@Override
protected void onDestroy() {
super.onDestroy();
if (socket != null) sock...
Referências
Dúvidas?
Obrigado!
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Android chat app com Node.js
Upcoming SlideShare
Loading in …5
×

Android chat app com Node.js

27,428 views

Published on

Tutorial de criação de um chat app Android com backend em Node.js e Socket.io. Mais informações em luiztools.com.br

Published in: Internet
  • Dating direct: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Android chat app com Node.js

  1. 1. Criando um chat app com Android + Node.js
  2. 2. 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
  3. 3. Node.js Socket.io Android Referências Dúvidas Cronograma
  4. 4. Node.js
  5. 5. Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/ +
  6. 6. Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/
  7. 7. Fonte: http://www.dotnetcurry.com/nodejs/1143/nodejs-tutorial-series-beginner-experienced-developer
  8. 8. Fonte: https://www.techempower.com/benchmarks/#section=data-r13&hw=ph&test=plaintext
  9. 9. Fonte: http://www.luiztools.com.br/post/por-que-aprender-nodejs/
  10. 10. 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/
  11. 11. 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
  12. 12. Node.js Criando um projeto Express: C:nodejs> express -e --git chatapi Executando um projeto Express: C:nodejschatapi> npm start Acessando um projeto Express: http://localhost:3000
  13. 13. 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>
  14. 14. Node.js Configurando a rota /chat: router.get('/chat', function(req, res){ res.render('chat', {}); });
  15. 15. Socket.io
  16. 16. 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.
  17. 17. 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'); }); });
  18. 18. 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>
  19. 19. Android
  20. 20. Android O que vou precisar? Android Studio: https://developer.android.com/studio/index.html?hl=pt-br Android 4.0.3
  21. 21. 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" />
  22. 22. Android Customizando MainActivity.java: //declarando variáveis locais EditText txtMensagem = null; ListView mensagens = null; ArrayAdapter<String> adapter = null;
  23. 23. 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);
  24. 24. Android Customizando MainActivity.java: //novo método public void btnEnviarOnClick(View v){ adapter.add(txtMensagem.getText().toString()); adapter.notifyDataSetChanged(); mensagens.smoothScrollToPosition(adapter.getCount() - 1); }
  25. 25. Android Customizando build.gradle: dependencies { ... compile 'io.socket:socket.io-client:+' }
  26. 26. Android Customizando AndroidManifest.xml: <uses-permission android:name="android.permission.INTERNET" />
  27. 27. Android Customizando MainActivity.java: //nova variável local Socket socket = null; //novo método public void waitMessage(){ // a seguir } //chamada no onCreate waitMessage();
  28. 28. 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();
  29. 29. Android Customizando MainActivity.java: //alterando método public void btnEnviarOnClick(View v){ socket.emit("chat message", txtMensagem.getText().toString()); }
  30. 30. Android Customizando MainActivity.java: @Override protected void onDestroy() { super.onDestroy(); if (socket != null) socket.disconnect(); }
  31. 31. Referências
  32. 32. Dúvidas?
  33. 33. Obrigado!

×