Android chat app com Node.js
•
3 j'aime•30,575 vues
O documento fornece instruções passo-a-passo para criar um aplicativo de chat usando Android e Node.js, incluindo como configurar o backend com Node.js, Socket.io e Express, e como desenvolver o aplicativo Android para se conectar ao backend e exibir mensagens.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Android chat app com Node.js
Similaire à Android chat app com Node.js (20)
Plus de Luiz Duarte
Plus de Luiz Duarte (20)
Android chat app com Node.js
- 1. Criando um chat app com Android + Node.js
- 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
- 4. Node.js
- 6. Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/ +
- 7. Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/
- 8. Fonte: http://www.dotnetcurry.com/nodejs/1143/nodejs-tutorial-series-beginner-experienced-developer
- 11. 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/
- 12. 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
- 14. 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
- 16. 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>
- 17. Node.js Configurando a rota /chat: router.get('/chat', function(req, res){ res.render('chat', {}); });
- 20. Socket.io
- 22. 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.
- 23. 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'); }); });
- 24. 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>
- 27. Android
- 28. Android O que vou precisar? Android Studio: https://developer.android.com/studio/index.html?hl=pt-br Android 4.0.3
- 32. 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" />
- 33. Android Customizando MainActivity.java: //declarando variáveis locais EditText txtMensagem = null; ListView mensagens = null; ArrayAdapter<String> adapter = null;
- 34. 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);
- 35. Android Customizando MainActivity.java: //novo método public void btnEnviarOnClick(View v){ adapter.add(txtMensagem.getText().toString()); adapter.notifyDataSetChanged(); mensagens.smoothScrollToPosition(adapter.getCount() - 1); }
- 37. Android Customizando build.gradle: dependencies { ... compile 'io.socket:socket.io-client:+' }
- 39. Android Customizando MainActivity.java: //nova variável local Socket socket = null; //novo método public void waitMessage(){ // a seguir } //chamada no onCreate waitMessage();
- 40. 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();
- 41. Android Customizando MainActivity.java: //alterando método public void btnEnviarOnClick(View v){ socket.emit("chat message", txtMensagem.getText().toString()); }
- 42. Android Customizando MainActivity.java: @Override protected void onDestroy() { super.onDestroy(); if (socket != null) socket.disconnect(); }
- 46. Referências
- 50. Dúvidas?
- 51. Obrigado!