Telegram Bot: Track and Field

Telegram Bot: Track and Field Jesús De Oro García Héctor Gálvez Bernal Emilio Chico Muñoz Director: Carlos Gregorio Rodríguez GRADO EN INGENIERÍA INFORMÁTICA FACULTAD DE INFORMÁTICA DEPARTAMENTO DE SISTEMAS INFORMÁTICOS Y COMPUTACIÓN UNIVERSIDAD COMPLUTENSE DE MADRID TRABAJO FIN DE GRADO Junio 2017 I Resumen Todo el mundo está conectado, ya sea a través de su teléfono móvil, tablet, Smart TV o cualquier tipo de ordenador, por eso, decidimos buscar un Trabajo Final de Grado que nos permitiese explorar estas condiciones en las que hoy en día vivimos. Nos decantamos por un trabajo que tuviera relación con las aplicaciones de mensajería y los juegos, que conecte a la gente, entretenga y tenga posibilidades de futuro. Resulta curioso ver la cantidad de juegos que hay en las tiendas de aplicaciones, pero son muy pocos los que existen integrados en las aplicaciones de mensajería. Esto es debido a que la mayoría están centrados en las redes sociales y en las grandes plataformas de videojuegos. Nuestro proyecto consiste en la creación de un juego dentro de la aplicación de mensajería multiplataforma Telegram, concretamente hablamos del desarrollo de un bot que nos permita jugar en cualquier momento con nuestros amigos. El tema elegido para el juego, ha sido la prueba de atletismo de los 100 metros lisos. Para lograr nuestro fin necesitamos una aplicación que transfiera datos entre el cliente y el servidor de manera instantánea, para dar sensación de dinamismo y realismo al juego. Con este objetivo en mente, hemos desarrollado dos web services, el primero para hospedar el bot en Telegram, el cual reúne la información necesaria del usuario y el segundo para gestionar las conexiones del juego, conexiones que son únicas en función a los datos personales del usuario obtenidos del primer web service. El único requisito que se necesita para jugar es tener instalado Telegram actualizado a su última versión. Una vez dentro de la aplicación, basta con abrir una conversación entre cualquiera de tus amigos o grupos, e invocar al bot mediante el comando requerido. En cuanto a modos de juego, disponemos de modo Single, para jugar contra la propia inteligencia artificial, el cual proporciona una serie de bots rivales que competirán contra el jugador. En el modo Multiplayer podremos jugar contra cualquier persona del mundo que esté jugando en ese momento al juego, y finalmente, considerando que es la opción más social, está la opción Group, donde podremos jugar contra los miembros de tu grupo de amigos. Podemos empezar la partida cuando los usuarios dispuestos a jugar estén listos, sin tener que esperar a los demás indecisos. Para terminar, también disponemos de un tutorial para hacer al usuario con las funcionalidades de la aplicación. Como conclusión podemos decir, y estar orgullosos de haber aceptado el reto de crear uno de los primeros juegos multijugador en tiempo real en una plataforma de mensajería, con el objetivo de pasar un rato agradable con nuestros amigos desde la distancia. II Abstract Everyone is connected, whether through their mobile phone, tablet, Smart TV or any kind of computer, so we decided to look for a Bachelor Final Project that could allow us to explore these world in which we live in. We opted for a project related to messaging applications and games, to connect people, entertain and have possibilities for the future. It is interesting to see the amount of games that are in the application stores, but very few of them are integrated into messaging applications. This is because most of them are focused on social networks or on big video game platforms. Our project consists on the creation of a game within the multiplatform messaging application Telegram, we are talking about the development of a bot that allows us to play at any time with our friends. The chosen theme for the game is the 100 metres race from the track and field competitions. To achieve our goal, we need an application that transfers data between the client and the server instantly, to give this sense of dynamism and realism to the game. Keeping this goal in mind, we have developed two web services, the first one to host the bot in Telegram, which gathers the necessary information of the user and the second one to manage the connections of the game, connections that are unique depending on the personal information provided from the first web service. The only requirement you must meet to be able to play the game is having Telegram updated to the latest version. Once inside the application, simply open a conversation between any of your friends or groups, and invoke the bot using the required command. In terms of game modes, we have a Single mode, to play against the artificial intelligence, which provides a series of rival bots that will compete against the player. In the Multiplayer mode, we can play against any person in the world who is playing the game at that moment, and finally, considered for us to be the most social mode, is the Group option, where we can play against the members of our group of friends. The game can be started when the rest of users willing to play are ready, without having to wait for the undecided ones. Finally, we also have a tutorial to get the user through the features of the application. As a conclusion, we are proud we accepted the challenge of creating one of the first realtime multiplayer games on a messaging platform, with the goal of having a quality and comfortable time with our friends in the distance. III Palabras clave  Bot  Telegram  Websockets  HTML5  Motor Gráfico  Javascript  Node.js Keywords  Bot  Telegram  Websockets  HTML5  Graphic Engine  Javascript  Node.js IV Índice Resumen ............................................................................................................................ I Abstract ............................................................................................................................ II Palabras clave .................................................................................................................. III Keywords ......................................................................................................................... III Índice de Ilustraciones ..................................................................................................... VI Capítulo 1: Introducción ................................................................................................... 1 Motivaciones ................................................................................................................. 1 Introduction ...................................................................................................................... 2 Motivations ................................................................................................................... 2 Capítulo 2: Planteamiento del trabajo ............................................................................. 3 Objetivos ....................................................................................................................... 3 Estructura del trabajo ................................................................................................... 3 Capítulo 3: Estudio de Tecnologías ................................................................................... 5 Aplicaciones de mensajería. .......................................................................................... 5 Lenguajes de programación .......................................................................................... 8 Motores gráficos ......................................................................................................... 11 Comunicación con cliente y servidor .......................................................................... 14 Herramientas de desarrollo ........................................................................................ 17 Capítulo 4: Descripción del Sistema ............................................................................... 19 Ámbito del sistema ..................................................................................................... 19 Funcionalidades de la Aplicación ................................................................................ 19 Exploración de la Aplicación ....................................................................................... 20 Requisitos .................................................................................................................... 27 Capítulo 5: Arquitectura del sistema .............................................................................. 28 Web service para Telegram ......................................................................................... 28 Web service para el juego ........................................................................................... 29 Estados de la aplicación en el cliente.......................................................................... 30 Estados de la aplicación en el servidor ....................................................................... 32 Estados de la aplicación en el conector ...................................................................... 32 Capítulo 6: Problemas y soluciones ................................................................................ 34 Capítulo 7: Conclusiones del Proyecto ........................................................................... 37 Project’s Conclusions ...................................................................................................... 38 V Capítulo 8: Ampliaciones futuras ................................................................................... 39 Future Extensions ........................................................................................................... 40 Capítulo 9: Contribuciones personales ........................................................................... 41 Jesús de Oro García ..................................................................................................... 41 Héctor Gálvez Bernal ................................................................................................... 43 Emilio Chico Muñoz ..................................................................................................... 45 Anexo I: Referencias ....................................................................................................... 47 Anexo II: Bibliografía ....................................................................................................... 48 VI Índice de Ilustraciones Imagen 1 - Estructura HTML5 ........................................................................................... 9 Imagen 2 - Ejemplo JavaScript .......................................................................................... 9 Imagen 3 - Flujo de evento Node.js ................................................................................ 11 Imagen 4 - Ejemplo Phaser.io Gravitron ......................................................................... 12 Imagen 5 - Ejemplo Phaser.io Parallel ............................................................................ 12 Imagen 6 - Constructor Websocket ................................................................................ 14 Imagen 7 - Controladores y control de errores Websocket ............................................ 14 Imagen 8 - Websocket conexión con Servidor ................................................................ 15 Imagen 9 - Servidor Websocket ...................................................................................... 15 Imagen 10 - Ejemplo Instancia Servidor ......................................................................... 16 Imagen 11 - Ejemplo Instancia Cliente ........................................................................... 16 Imagen 12 - Búsqueda Track & Field .............................................................................. 20 Imagen 13 - Start bot Track & Field ................................................................................ 21 Imagen 14 - Play bot Track & Field ................................................................................. 21 Imagen 15 - Start bot Track & Field ................................................................................ 21 Imagen 16 – Chat de grupo ............................................................................................ 21 Imagen 17 - Llamada Track & Field en grupo ................................................................. 21 Imagen 18 – Track & Field compartido en grupo ........................................................... 22 Imagen 19 - Menu Track & Field ..................................................................................... 22 Imagen 20 - Tutorial Track & Field ................................................................................. 23 Imagen 21 - Single Track & Field .................................................................................... 23 Imagen 22 - Multiplayer lobby Track & Field .................................................................. 24 Imagen 23 - Multiplayer partida Track & Field ............................................................... 24 Imagen 24 - Resultados Multiplayer Track & Field ......................................................... 25 Imagen 25 - Group lobby Track & Field .......................................................................... 25 Imagen 26 - Group partida Track & Field ....................................................................... 26 Imagen 27 - Resultados Group Track & Field ................................................................. 26 Imagen 28 - Arquitectura del sistema ............................................................................ 28 Imagen 29 - Problema con el GET de información a la URL ........................................... 34 Imagen 30 - Problema al pasar datos al socket sin machacar las sesiones previas ....... 35 Imagen 31 - Problemas con el testing de juegos online ................................................. 36 1 Capítulo 1: Introducción El propósito de este primer capítulo, es dar a conocer la motivación que nos ha llevado a desarrollar este proyecto, y explicar su estrecha relación con la sociedad en la que vivimos y las tecnologías actuales. El uso de dispositivos móviles está creciendo a un ritmo elevado [1], y con ello, el uso de las redes sociales y la mensajería instantánea [2]. Pues bien, este tipo de mensajería no siempre se utiliza como medio de comunicación, sino que también posee un gran abanico de posibilidades entre ellas el mundo de los juegos integrados. Motivaciones Actualmente existen millones de aplicaciones con diferentes finalidades, ya sea para realizar una tarea básica como apuntar una nota hasta poder controlar satélites a millones de kilómetros de la tierra. Sin duda hay aplicaciones para todos los gustos, pero nos centramos en las aplicaciones de mensajería, ya que vivimos en un mundo saturado por la información y donde estar conectado y disponible es esencial [3]. Las aplicaciones de mensajería sirven para mantener el contacto mediante mensajes de texto principalmente, pero es cierto que también existen llamadas y video llamadas. También hay una gran variedad de juegos ya sea por descarga directa o mediante aplicaciones como Google Play. ¿Y si pudiésemos mezclar ambos mundos, la mensajería instantánea y los juegos? Hoy en día estos servicios de mensajería están en continua expansión, siendo de las aplicaciones más descargadas, pero hasta hace muy poco, no existía el desarrollo por parte de terceros de juegos para estas aplicaciones, por lo que optamos por elaborar un juego con el que poder competir con varios integrantes dentro de una conversación en tiempo real. Una de estas aplicaciones de mensajería es Telegram, en la cual hace poco se apostó por el desarrollo de terceros y así poder acceder al desarrollo de juegos. El hecho de poder ser de los primeros en elaborar un juego multijugador en tiempo real dentro de esta aplicación supuso una gran motivación, además de tratarse de un reto, ya que hay muy poca información disponible acerca de este tema. Nos referimos a los llamados bots con los que podemos acceder a juegos añadiendo un simple comando dentro de una conversación, lo cual explicaremos más adelante en este documento. 8 Lenguajes de programación Para poder llevar a cabo nuestro proyecto tenemos que entender cómo funcionan los lenguajes de programación sobre los que se desarrollan Juegos para Telegram. En este apartado vamos a estudiar y analizar las posibilidades que nos ofrece cada uno para elaborar un bot completamente funcional. HTML5 HyperText Markup Language (de ahora en adelante, HTML) se remonta al año 1980. Aquí ya existía un tipo de documentos denominados Hipertexto, pero eran demasiado primitivos y por eso no eran muy utilizados, salvo para algún enlace web. Entonces su inventor, el físico Tim-Berners-Lee, propuso un sistema de Hipertexto para compartir documentos. Una vez desarrollado su sistema, y junto con la ayuda del ingeniero de sistemas Robert Cailliau, fundaron la World Wide Web. Desde su creación hubo varias propuestas para que HTML se convirtiera en un estándar. La primera fue en 1993 por el Internet Engineering Task Force (IETF), pero no fue hasta 1995 cuando se consiguió, bajo el nombre de HTML 2.0. Durante los siguientes años surgieron nuevas actualizaciones, como la 3.1 que incluía java y texto alrededor de las imágenes, pero fue con la 4.0 cuando lograron dar el gran salto, pues esta llegó a integrar hojas de estilo CSS, tablas, formularios y los conocidos scripts. Llegamos a la actualidad. HTML5 es un elemento principal para el funcionamiento de webs. Se trata de un lenguaje encargado de ordenar y presentar el contenido de las páginas web, es decir, es el encargado de modificar el layout y su aspecto. HTML funciona a través de etiquetas. Éstas son la parte encargada de que todos los navegadores interpreten el código. Esta última actualización hace que la interpretación sea más rápida y fácil debido a la incorporación de nuevas etiquetas, ahorrándonos el uso de otros productos como flash. Aquí podemos ver un ejemplo: 9 Imagen 1 - Estructura HTML5 JavaScript Debido a que HTML5 solo actúa sobre el texto y el estilo, rápidamente surgió la necesidad de añadir animaciones. Según avanzamos en nuestro proyecto, vemos necesario el uso de JavaScript para proporcionar dinamismo al código HTML. Pues bien, JavaScript es un lenguaje de programación ejecutado en el lado del cliente. El código siempre debe tener este formato: Imagen 2 - Ejemplo JavaScript Como vemos está entre las marcas: <script type="text/javascript"> </script> Este tipo de lenguaje es interpretado por el navegador y funciona mientras la página carga, pero solo sobre las acciones programadas en el código HTML. A su vez todos los archivos de JavaScript son archivos de texto guardados con la extensión .js. 10 Node.js Ryan Dahl, conocido ingeniero de Software crea en 2009 Node.js con la ayuda del motor V8 de Google, intentado compensar los malos hábitos de los desarrolladores a la hora de crear una nueva aplicación y que se vuelva inconsistente e inútil con el tiempo. Por ello, crea un entorno JavaScript Node.js que consiste en JavaScript, pero del lado del servidor, siguiendo la dinámica de la programación orientada a objetos. Node.js funciona en una gran variedad de sistemas como Linux, Windows y MacOS. Una de las características más importantes de Node.js es que se trata de una librería asíncrona. La programación asíncrona consiste en devolver el control al programa llamante antes de que termine las funciones y así seguir operando en segundo plano; esto agiliza la ejecución y aumenta la escalabilidad. Las funcionalidades de Node.js que más nos han llamado la atención son:  Gestión de paquetes: Node.js cuenta con un gestor de paquetes preinstalado llamado Node Package Manager (NPM), que se encarga de instalar librerías y gestionar su dependencia desde la línea de comandos. Ponemos atención especial en este gestor de paquetes, pues nos resulta muy útil para conseguir que nuestro proyecto sea más liviano. NPM facilita la reutilización y actualización del código, lo que hace más ameno el trabajo para los desarrolladores. Utiliza el archivo package.json para la definición de librerías a instalar.  Bucle de eventos: Node.js funciona a través del método bucle de eventos. Cuando ejecutas una aplicación se crea un hilo y queda a la espera de que alguien llegue y le haga una petición; una vez obtenida, ninguna otra puede ser procesada hasta que acabe el proceso actual. 11 Recordemos que Node.js trabaja de forma asíncrona, por lo que esto no le supone ninguna complicación; aquí entra el bucle de eventos. Para cada petición, Node.js añade una función callback a un evento de respuesta, entonces cuando el recurso queda libre para las peticiones, llama a dicha función y procesa cada petición. Imagen 3 - Flujo de evento Node.js Motores gráficos Un motor gráfico es un conjunto de librerías usadas por aplicaciones y programas para renderizar gráficos y sonidos de una forma más sencilla. Nuestro proyecto al basarse en un juego, necesita de un motor gráfico que se amolde a nuestra visión del juego. Phaser.io Con Phaser.io podemos construir juego en HTML5, tanto para dispositivos móviles como para equipos sobremesa. Se trata de un framework de código libre bastante nuevo y en pleno crecimiento, proporcionando herramientas de rápido desarrollo que ayudan a manejar las tareas que completan el juego. Este framework está basado en Pixi.js, que se trata de una biblioteca con la que podemos crear imágenes y gráficos interactivos, juegos y aplicaciones sin necesidad de meternos de lleno en la API de WebGL y evitando problemas de compatibilidad con los navegadores. Veamos unas capturas a modo de ejemplo sobre las interfaces de algunos de los juegos creados con Phaser.io. 12 Imagen 4 - Ejemplo Phaser.io Gravitron Gravitron es un juego 2D creado con Phaser.io cuya finalidad es encajar el cubo rojo en el cuadrado con los bordes rojos, con la dificultad de no poder parar hasta que se encuentra con otro cubo, una vez elegida la dirección del movimiento. Imagen 5 - Ejemplo Phaser.io Parallel Parallel es otro juego creado con Phaser.io con un desarrollo 2D que consiste en dirigir la bola hacia el final de la pantalla saltando obstáculos y combinando la parte superior con otra inferior para ello, utilizando los botones arriba y abajo para cambiar entre ellas y la barra espaciadora para saltar. El funcionamiento de Phaser.io está dividido por estados que se basan en callbacks, (funciones integradas que nos ayudan con el desarrollo del juego), los principales son:  Preload: carga imágenes y varios recursos del juego al invocarlo.  Create: sirve para crear los personajes, el fondo, los enemigos, sonidos y animaciones.  Update: este estado está en continua ejecución dependiendo del tiempo que necesitemos, se encarga de configurar los movimientos de los personajes, así como colisiones e interacciones con el mundo. Unity 13 Creado por Unity Technologies, Unity es un motor gráfico orientado a juegos multiplataforma programado en C++, C Y Sharp que permite elaborar juegos en 2D y 3D. Su soporte multiplataforma es líder hoy en día, pues permite conectarse con gran cantidad de los dispositivos existentes, plataformas móviles, escritorio, consolas, Web, TV y es compatible con la mayoría de los sistemas como Microsoft Windows, OS X, Linux y Android. Pero no es solo un motor, Unity ofrece también servicios integrados como aplicaciones para manejar los ingresos de los usuarios, herramientas de análisis, sincronizar proyectos, compilar y compartir creaciones de forma automática. Entre sus características cabe destacar su rapidez a la hora del desarrollo debido a su interfaz intuitiva que permite la creación de plataformas con renderizado de una manera totalmente personalizable y flexible sin la necesidad de tener una plantilla de programadores y artistas que se encarguen de llevar a cabo la construcción del juego. Tanto es así que los propios usuarios comparten sus códigos para poder ayudar los demás en sus problemas con el desarrollo. Unity tiene un futuro prometedor dentro del mundo de los videojuegos ya que está muy en uso por desarrolladores independientes. Conclusión En nuestro proyecto hemos optado por Phaser.io. Hemos querido apostar por un motor gráfico nuevo y más sencillo que Unity. Nuestra idea inicial era hacer un juego ligero y en un lenguaje web, optamos por JavaScript, y Phaser.io es el que mejor se amoldaba a nuestros requisitos. 14 Comunicación con cliente y servidor Para realizar las conexiones entre el cliente y el servidor necesitamos de una tecnología que sea capaz de realizar dicha tarea de una forma rápida y eficiente Websockets WebSocket es una tecnología que proporciona la conexión bidireccional por medio de un único socket entre el cliente y el servidor. Posee una API para el desarrollo con Websockets y su funcionamiento básico es el siguiente: Primero debemos ejecutar el constructor para abrir una conexión Websocket. Imagen 6 - Constructor Websocket Ponemos especial atención en el comando ws; significa que estamos estableciendo una nueva conexión Websocket. También hay wss, utilizado para conexiones seguras, al igual que Hypertext Transfer Protocol Secure (HTTPS) se usa para una conexión tipo HTTP segura. Este tipo de conexión también nos ofrece la posibilidad de añadir varios controladores de conexión para saber cuándo se mantiene abierta la conexión y el uso de subprotocolos y control de errores. Imagen 7 - Controladores y control de errores Websocket 15 A continuación, tenemos que establecer conexión con el servidor: Imagen 8 - Websocket conexión con Servidor Esto se produce cuando se activa el evento open, entonces ya podemos enviar mensajes al servidor mediante el método send; así mismo, también el servidor puede enviarnos mensajes mediante la llamada onmessage. La conexión tipo Websocket tiene una principal característica, y es que utiliza comunicaciones de origen cruzado, esto te permite la comunicación entre las partes de cualquier dominio, siendo el servidor quien decide si ofrece su servicio a todos los clientes o a un conjunto que esté dentro de un dominio. Pero esta tecnología tiene una desventaja respecto a las otras, y es que es incompatible con los servidores proxy que utilizan las conexiones HTTP. Imagen 9 - Servidor Websocket Este tipo de tecnología, se utiliza principalmente para la creación de videojuegos online multijugador, chats, actividades online e información deportiva. Como podemos observar, Websocket se utiliza siempre que exista la necesidad de crear una conexión en tiempo real y con una baja latencia entre cliente y servidor. 16 Socket.io Socket.io nos permite establecer una comunicación bidireccional para aplicaciones web en tiempo real mediante eventos. Una de las ventajas más importantes de usar Socket.io es que no nos tenemos que preocupar por la compatibilidad entre navegadores. Para las aplicaciones web, es muy importante la retroalimentación entre los usuarios, por lo que comenzaron a usarse los sockets TCP (Transmission Control Protocol) entre desarrolladores para enviar y recibir datos. La primera versión de Socket.io vio la luz el día 28 de mayo de 2014, incluyendo una API de alto nivel permitiendo crear nuevas aplicaciones dándole uso. La forma de comunicación cliente y servidor entre los sockets se realiza a través de señales. El cliente emite una señal, el servidor tiene un manejador que se encarga de buscar la respuesta para la misma, y éste emite de nuevo otra señal que interpretará con su manejador el cliente. Veamos un ejemplo: Imagen 10 - Ejemplo Instancia Servidor Imagen 11 - Ejemplo Instancia Cliente Conclusiones De entre las tecnologías estudiados, hemos escogido Socket.io. Es una implementación de Websockets muy avanzada, entre sus principales funcionalidades encontramos que utiliza diversas tecnologías para adaptarse al navegador utilizado, permite las reconexiones del cliente, está actualizándose constantemente, y el uso de canales (rooms) necesario en nuestro proyecto, es de los más avanzados hasta la fecha. 17 Herramientas de desarrollo A continuación, se nombran las herramientas de apoyo que hemos utilizado para el desarrollo del código de este proyecto. Google Chrome Google Chrome es considerado el navegador más rápido del mundo, creado por la compañía Google INC en septiembre de 2008, ya es el navegador líder del mercado. Es compatible con cualquier sistema operativo, y está disponible en alrededor de unos 50 idiomas. Su principal ventaja es la agilidad a la hora de interpretar código JavaScript que utiliza la mayoría de las páginas web. Hace unos años ningún navegador disponía de herramientas adecuadas para el desarrollo de aplicaciones web, por lo que dependías de herramientas de terceros, que no siempre eran compatibles con el navegador actual o no se integraban correctamente. Ahora esto ha cambiado y los navegadores incluyen herramientas, como la consola y el depurador de código. Nosotros nos vamos a centrar en la consola de Google Chrome. Una de las partes más importantes para los desarrolladores es la depuración de código, y la búsqueda y corrección de errores por lo que la consola de Google Chrome es necesaria para apoyar nuestro proyecto. Utilizamos la consola de depuración en nuestro proyecto, ya que nos proporciona muchas de las herramientas que necesitamos para comprobar el correcto funcionamiento del código de nuestro juego. Esta consola nos permite ver los mensajes de información, error o alerta que recibimos al realizar la carga de los elementos seleccionados; incluye depurador de código y también nos permite interactuar con la página mediante comandos JavaScript. La consola contiene todas las variables y objetos declarados en el código de la página, por lo que podemos acceder a ellas mediante llamadas. En cuanto a la depuración del código podemos elegir el archivo sobre el cual queremos ejercer la depuración, nos ofrece también la posibilidad de añadir breakpoints sobre la línea interesada y añadir un observador para poder ver lo que almacenan las variables que nos interesen. 24 Al entrar en el modo Multiplayer, el jugador queda en un lobby o sala de espera, aguardando a que se conecten otros cuatro jugadores más y se inicie la partida. Según se van creando partidas, se van generando nuevos lobbies, por lo que no hay una única partida multijugador en el juego, sino que hay múltiples partidas ejecutándose a la vez. De esta forma se puede dar servicio a una gran cantidad de usuarios y permite que el juego sea dinámico y rápido. Imagen 22 - Multiplayer lobby Track & Field Imagen 23 - Multiplayer partida Track & Field Al finalizar la partida, a cada usuario se le muestra su puntuación y el puesto en el que ha quedado, indicándole si ha ganado al resto o no. 25 Imagen 24 - Resultados Multiplayer Track & Field Por último, el modo Group o grupo, en esta modalidad el jugador se enfrenta solo a las personas pertenecientes a la conversación en la que se ha invocado al bot. Al entrar, los jugadores esperan en el mismo y único lobby por grupo a que se conecte el resto de miembros. En este modo la partida no se inicia solo al llenar la sala, sino que también puede empezar manualmente pulsando el botón Start, por si el grupo es de menos de cinco integrantes o solo quieren jugar unos pocos. Cualquier miembro del grupo que esté en la sala puede darle a comenzar la carrera. Imagen 25 - Group lobby Track & Field 26 Imagen 26 - Group partida Track & Field Imagen 27 - Resultados Group Track & Field El juego posee una jugabilidad sencilla, ya que el usuario solo tiene que tocar dos botones más rápidos que el resto para ganar. Pero lo importante no era la complejidad del juego en sí, sino la correcta y optima gestión de las conexiones por parte del servidor y el cliente y la integración con Telegram. 27 Requisitos En este apartado se va a hablar de los requisitos necesarios por parte del usuario o cliente, para que pueda ejecutar la aplicación, y por parte del servidor, para poder instalarlo. Requisitos por parte del cliente Siendo Telegram una aplicación multiplataforma era necesario que Track and Field también lo fuese. Los requisitos son los mismos para todas las plataformas, siendo:  Disponer de un usuario de Telegram.  Aplicación de Telegram actualizada a la última versión.  Navegador actualizado y habilitada la opción de ejecutar código JavaScript.  Conexión a internet estable. Requisitos por parte del servidor Tanto el web service del bot en Telegram como el del cliente-servidor, están desarrollados con Node.js. Tenerlo instalado es el único requisito para ejecutar e instalar los servidores. 28 Capítulo 5: Arquitectura del sistema Una vez especificados los requisitos, se desarrolla un diagrama que servirá de resumen y a la vez de base de la aplicación con el fin de poder continuar su desarrollo de forma sencilla y orientada. A continuación, se explicará paso a paso y de forma concreta el funcionamiento del sistema. Imagen 28 - Arquitectura del sistema Web service para Telegram Para comenzar, se ha instalado un web service en la universidad que nos permite la comunicación entre el cliente y el servidor a tiempo real. Se utiliza como túnel entre Telegram y la aplicación, así los usuarios, añadiendo el bot en Telegram, son capaces de comunicarse fácilmente con él por medio de comandos; el principal comando es /play, que se usará como lanzadera. Con este comando, el usuario recibirá la opción de jugar, y una vez haga click, la misma API de Telegram, implementada en el web service, responderá en un callback con la URL (Uniform Resource Locator) del juego, la cual será lanzada desde la propia aplicación de mensajería. Para añadir el bot será necesario escribir @gametfbot en cualquier instancia de chat de Telegram (ya sea de grupo o privado), una vez llamado ofrecerá la opción de juego a todos los usuarios presentes en la sala. 29 Web service para el juego Una vez se hace click en jugar, Telegram lanza una ventana de navegación con el contenido de la URL obtenida del callback. En este momento el nuevo web service se encarga de recopilar los datos de la URL (la ID de Telegram, el nombre utilizado por el usuario y la ID del chat en cuestión). Estos datos son recibidos por el cliente que ha hecho click previamente, y aparece la primera vista del juego, el menú principal, con el cual el usuario podrá interactuar. Arriba en el diagrama, aparecen los distintos modos de juego. En este momento, ya podemos decir que el usuario está identificado. Primero hemos invocado al bot de Telegram, el cual nos ha dado la opción de lanzar el juego. Al lanzar el juego, se comparte la información del usuario de Telegram entre web services por medio de una URL. El servidor del juego identifica la URL y genera información del jugador a través de los datos recopilados con Telegram. A continuación, vamos a explicar el funcionamiento paso a paso de cada uno de los modos de juegos una vez capturada la información y enviada al servidor del juego:  Tutorial: Se realiza en el lado del cliente, por lo que no necesita comunicarse con el servidor de nuevo, cambia la vista mostrando unas instrucciones básicas para jugar.  Single Player: Es el modo de práctica. El jugador local compite contra cuatro jugadores controlados por la máquina. No necesita comunicación con el servidor, ya que la información propia del jugador es suficiente. Los cuatro jugadores son generados automáticamente.  Multiplayer: Una vez entramos a este modo, se emite información al servidor por medio de sockets. Se añade un nuevo jugador en la lista en el lado del servidor (el jugador que invoca), el servidor comprueba la lista, y siempre que sea menor que cinco (límite de jugadores en la pista en este modo), éste pertenecerá a la misma room (sala de jugadores). Una room dentro de los sockets, es una forma de limitar la comunicación cliente-servidor entre un grupo de usuarios, por lo tanto, los primeros cinco jugadores compartirán un identificador de room común y único, los siguientes cinco otro, etc. Así aseguramos que no haya interferencias en la comunicación entre sockets, aislando la información del exterior. Una vez el servidor añade a la lista el jugador, y le asigna la roomID, la lista completa es devuelta al emisor inicial y a los demás usuarios de la misma. Por lo tanto, cada jugador que entre en el modo, irá compartiendo la lista de jugadores entre sí mientras que compartan la misma room, por lo que por cada room tendremos cinco jugadores que tendrán la lista de los mismos de forma local. 30 Una vez la sala de espera se llena (matchmaking), la instancia local de cada jugador (del lado del cliente) lanza la nueva vista, que será la pista donde correrán. Cada jugador tiene asignada la calle en la que realizará la carrera y el sprite (modelo gráfico del jugador) propio. Por cada instancia local, se tiene una lista de cuatro enemigos, que nos permite actualizar la vista cada vez que cambien de velocidad o posición.  Group Mode: Es muy similar al modo anterior, pero orientado a los grupos de Telegram. La idea es jugar online, pero con conocidos, con tus amigos de cualquier grupo de Telegram. Una vez invocado el bot desde un grupo, cualquier usuario del mismo podrá hacer click en jugar y unirse a la partida en el Group Mode. Como hemos explicado anteriormente, se envía información a través de la URL, siendo una de ellas el ChatID. Éste es un identificador único común a todos los miembros del grupo, por lo tanto, si hay veinte usuarios en un grupo, los veinte compartirán el mismo ChatID, del mismo modo que en un chat privado, los dos usuarios compartirán el mismo identificador. Por lo tanto, es muy útil para relacionarlos y poder así jugar en grupo. Al entrar, los usuarios en este modo realizan la misma funcionalidad que en el Multiplayer, pero en vez de generar room dinámicamente, como hacemos en el otro modo, la ID de la room será el ChatID; como es evidente todos los miembros de ese grupo compartirán sala de espera. Otra diferencia respecto del modo anterior, es la posibilidad de jugar sin esperar el llenado de la sala (cinco personas). Esto quiere decir que, si estás en un chat privado, o en un grupo de tres, también podrás competir con ellos al instante. Una vez estén en la lista todos los jugadores deseados, pulsando el botón Play Now la lista es enviada al siguiente estado (cambio de vista) y se inicia la carrera entre los miembros que hubiese en el momento de darle al botón. Estados de la aplicación en el cliente Gracias al motor gráfico (Phaser.io), hemos dividido el proyecto en varios estados, facilitando el trabajo al ser modular, y permitiendo cambios futuros de forma sencilla simplemente añadiendo un nuevo módulo, sin tener que modificar otros. A continuación, se explican los distintos módulos de la aplicación:  index.html: Es la puerta a la aplicación, la ventana contenedora de las vistas, y donde están vinculados cada uno de los archivos necesarios o incluidos. Incluye todos los archivos JavaScript necesarios, librerías (Phaser.io, Socket.io…), modelos y estados del juego.  game.js: Se inicia la aplicación, dentro de la misma encontramos la inicialización de la ventana del juego. Después, se realiza la conexión del cliente con el servidor mediante socket; si todo ha ido correctamente, se recibe la información recogida 31 de la URL desde el servidor. Por último, se cargan los estados posibles del juego dentro de la aplicación y se lanza el primero de ellos (boot).  boot.js: Se escala la pantalla y se carga la barra de carga que será utilizada en el siguiente estado, el cual es invocado.  preload.js: Mediante la barra de carga anterior (la cual se mantiene en todo este estado), se cargan todas las imágenes, sonidos y demás útiles de la aplicación, que serán almacenados en memoria y enviados de estado a estado, evitando que vuelvan a tener que ser cargados.  menu_modes.js: Vista sencilla del menú del juego mencionado anteriormente con los distintos modos, single player, multiplayer, etc. Según el botón pulsado variará el estado siguiente.  single_player.js: Utiliza dos funciones del motor gráfico, create() y update(), la primera inicializa al jugador local leyendo los datos del servidor (socket) y lo guarda en la lista de jugadores; la segunda se encarga de esperar hasta que el jugador es cargado, y una vez en la lista, se rellena con otros cuatro jugadores (controlados por la máquina en este caso) y se lanza el estado de la carrera (track100m).  tutorial.js: Carga una imagen sencilla y explicativa del juego; una vez se hace click en ella desaparece y aparece nuevamente el menú principal.  multi_player.js y group_mode.js: Ambos utilizan la función create() para inicializar los datos del jugador local. Una vez iniciados, son enviados al servidor a través del socket y el servidor devuelve la lista actualizada de jugadores (incluido nuestro jugador). Una vez se cumplen los requisitos, bien cinco jugadores en la sala de espera, o en el caso del group_mode, que alguien pulse el botón de Start, la función update() entra en acción, y llama al estado de la carrera (track100m).  track100m: Se encarga de la lógica del juego. Primero, en la función init() se cargan los atributos pasados desde los estados anteriores, como es el caso de la lista de jugadores. En la función preload() se asignan atributos para evitar que con el cambio de pantalla se pause el juego. La función create() inicializa todos los estados de la partida, temporizadores, sonidos, la pista en sí con los límites de la misma, y por supuesto, los controles (tanto para PC como para dispositivos con pantalla táctil). Usando la lista completa de jugadores recibida del estado anterior, dando igual el modo de juego del que proceda, buscamos a nuestro jugador en la lista (el que 32 coincida con el identificador único del socketID de la instancia local) y añadimos los demás enemigos de la lista como enemigos en otro array. Cada jugador en su propia instancia local tendrá la lista de todos los jugadores (incluido el mismo) y a los otros cuatro como enemigos en otra lista. La razón por la que dividimos la lista inicial con todos los jugadores en jugador local y enemigos, es que el jugador local se mueve con la combinación de botones, mientras que los enemigos necesitan ser actualizados ya que sus estados (posición/velocidad) no dependen de la instancia local (salvo en el modo single player con los bots) sino del estado que recibe desde cada uno de los enemigos. Para terminar, la función update() se encarga de comprobar todas las variables inicializadas anteriormente, el tiempo, la velocidad, la posición de los enemigos, si el jugador local se está moviendo (por medio de la combinación de teclas), si todos han llegado a meta, y por supuesto, de mostrar los resultados al final de la partida. Una vez terminada la partida, se reinician los estados. Estados de la aplicación en el servidor En este apartado vamos a hablar del Server.js. Es el web service del juego mediante el cual los usuarios se conectan pudiendo formar rooms para jugar por grupos o en multijugador. Para empezar, se encarga de recolectar la información de la URL, obteniendo así el id/nombre del usuario en Telegram y el chatID, que será el identificador de las room en el modo group, y enviarla a cada cliente que la pida. Una vez se solicita conexión (al entrar al juego), el servidor emite por medio de sockets la información, y el usuario queda identificado por su socketID. El servidor dispone de un manejador de eventos, encargado de ejecutar una función u otra, dependiendo de la orden emitida por el cliente en el socket. También se encarga de gestionar las room, haciendo posible el sistema de matchmaking a tiempo real. Cada vez que un cliente entra en el modo group o multiplayer, éste es añadido al array de jugadores del servidor identificado por la room en la que esté, y desde ese momento, solo los mensajes referidos a la roomID asignada llegarán al destinatario. Por supuesto, también se encarga de las desconexiones, eliminando al usuario de la lista que corresponde, y avisando a los demás clientes de la room del suceso de forma inmediata. Estados de la aplicación en el conector El conector es un web service que nos permite la entrada/salida de datos, en este caso utiliza una implementación de la API de Telegram basada en JavaScript que se utiliza como lanzadera. El cliente llama al web service mediante una orden, escribiendo @gametfbot en cualquier chat de Telegram, invocando al bot directamente añadiéndolo como un contacto más, o desde cualquier navegador accediendo a la siguiente URL: “https://telegram.me/gametfbot”. 33 Telegram utiliza un token, que es un identificador único para el bot; éste servirá para vincular la API de Telegram directamente con nuestro bot. Como cualquier bot de Telegram, permanece a la espera mediante unos manejadores, y en cuanto recibe una petición de un usuario, comienza su funcionamiento. Se ejecuta automáticamente la orden /start que saluda al usuario y le invita a jugar. Si el usuario utiliza el comando /play, aparecerá una imagen con un botón de jugar, que, si es pulsado, comenzará el proceso de vinculación con el web service del juego, el cual será lanzado dentro de la misma aplicación de Telegram. 40 Future Extensions This section explains the possible functionalities that could be added to the bot in the near future. More game modes As the game is structured, it is very easy to implement new game modes. The server and the client only have the necessary dependencies, so by adding a new .js with the structure of track100m.js, keeping the classes and variables and simply modifying the update() method with the new set of rules for the new mode, would be enough. As a future action, we could abstract the rules of each game, so only adding a .js for the new game modes and not having to repeat the rest of the code. Improved connections The current connection handler is efficient, but there is still room for improvement, since in some of our tests, cross-connections have occurred. This problem could be solved by adding in the client's cache your current connection, so it will resume when unexpected disconnections occur or when you run the bot from different devices at the same time with the same account. Unlinking the game from Telegram Telegram currently serves us as a user registration and game launcher, but we could unlink the game from Telegram and create a native application for each operating system. Since we programmed using JavaScript, the task is simple, because it would be enough by generating a web container and launch the application in it. The main problem developing a game in Telegram was following its design guidelines, if not followed, Telegram would not let the bot to be published on the messaging platform. There are several restrictions, but the worst is the prohibition of saving user data in a database and not being able to use a rewards or achievement system. Until a few weeks ago the bots could not be monetized, but with the last update of May, the ad support and payment methods were added. 41 Capítulo 9: Contribuciones personales En este apartado cada participante va a hablar sobre sus aportaciones al proyecto, detallando su participación y las ayudas ofrecidas al resto de compañeros. Se detallará todo en las siguientes partes: Conocimientos, Investigación, Pruebas, Desarrollo de la Aplicación y Memoria Jesús de Oro García Conocimientos Como alumno del Grado en Ingeniería del Software, tengo conocimientos ampliados en el área de programación y algoritmos, sabiendo aplicar de una forma más eficiente patrones de diseño que hagan más sencillo el entendimiento del código desarrollado. Cabe destacar mi experiencia previa en el tema de programación de videojuegos ya que he participado activamente en el desarrollo de un juego online masivo, aunque las tecnologías usadas en este proyecto sean totalmente diferentes. Investigación Primero empecé a buscar información sobre Telegram, más específicamente sobre el desarrollo de bots, y encontré que se podía desarrollar en multitud de lenguajes, pero nuestro tutor nos recomendó usar Python ya que había una API llamada Telepot, que es bastante sencilla, pero tiene una documentación muy escasa, ya que se trata de una API desarrollada por un chico en tu tiempo libre. Una vez vimos más o menos como iba a ser nuestro bot, y que teníamos claro que iba a ser un juego, empecé a investigar HTML5, JavaScript y motores gráficos. En cuanto a motores gráficos, decidimos usar Phaser.io, estaba en auge y la gente hablaba muy bien de él. Pruebas Previas Mis primeras pruebas con los bots de Telegram fue desarrollar junto a mis compañeros un bot muy sencillo en Python, el cuál te pedía un tipo de restaurante que te apeteciese, y pasándole tu ubicación actual te mandaba un enlace a Google Maps con los restaurantes de esa comida más cercanos. Después hice un bot individual más complejo; se trataba de una alarma, también en Python. A este bot le indicabas un evento a una hora y lo guardaba en la Base de Datos; cuando llegase la hora del evento, te avisa mandándote un mensaje privado. Fue entonces cuando nos dimos cuenta de que no queríamos hacer un bot en el cual para interactuar con el tuvieses que mandar líneas de comandos por el chat, nos parecía una forma de interacción lenta y no apta para todos los públicos. Así que optamos por hacer un juego que conectase con Telegram, sabíamos que sería más tedioso, ya que 42 tendríamos que estar pasando información entre dos web service, pero nos motivaba ese reto. Desarrollo de la Aplicación El desarrollo de un juego en Telegram está dividido en tres partes, bot en Telegram (conector), Cliente del Juego y Servidor del Juego. Decidimos desarrollar Héctor y yo conjuntamente el cliente-servidor, focalizándome yo en la parte de conexiones y de trata de información, y mi compañero en la lógica del juego y gráficos. Utilizamos como motor gráfico Phaser.io y como gestor de conexiones Socket.io, buscando en la documentación de estas dos APIs, encontramos un ejemplo muy sencillo en el que había un monigote que iba donde tu pinchabas. Usando ese ejemplo como base, e implementando sobre él las conexiones con Socket.io, logramos tener a varias personas conectadas a el mismo mapa y poder ver el movimiento de cada uno de ellos, un juego muy tosco, pero era un comienzo. Una vez completado el bot en Telegram y conectado con nuestro servidor, era capaz de leer los datos del usuario, ID del chat y Nombre. Con esa información se creaban sockets y el usuario disponía de un perfil en la aplicación. El juego fue ganando en complejidad y era el momento de introducir los modos de juego. Empecé por el modo multijugador, donde después de varias reuniones acabamos pensando que la mejor forma de implementarlo sería con la creación de un lobby o sala de espera y varias rooms o habitaciones que se irían llenando según fuesen entrando los usuarios al modo multijugador. La siguiente iteración del modo multijugador sería que los usuarios pudiesen jugar sus amigos, hasta entonces solo se podía jugar con todo el mundo. Utilizando la información obtenida del bot de Telegram, disponía del ID del chat del grupo en el que se había compartido el juego; usé ese ID como identificador de la habitación, de ese modo, solo los usuarios con un ID concreto podrían entrar en la sala de espera del grupo. Hubo que añadir una forma de iniciar la partida con menos de cinco personas, ya que puede haber grupos menos poblados. De aquí en adelante quedaba pulir la aplicación e ir resolviendo problemas que nos íbamos encontrando poco a poco. Destacar que no hay apenas juegos totalmente online en Telegram, por lo que no había absolutamente nada de información ni documentación y esto nos complicó bastante el desarrollo, pero no nos desmotivó. Memoria En cuanto a la memoria me he ocupado del apartado más técnico, ya que, al desarrollar el servidor, y con mis conocimientos de Ingeniería del Software, sabia explicarlo de una forma más comprensible que mis compañeros. También he colaborado en el apartado de Problemas y Soluciones que más me competían. 43 Héctor Gálvez Bernal Conocimientos Siendo alumno del Grado en Ingeniería Informática tengo conocimientos de programación y de patrones de diseño, y por optativas, he tratado de dirigir mi enseñanza hacia la programación web y las redes de datos. A destacar mis conocimientos adquiridos en varios cursos de diseño web (HTML5, JavaScript, Node.js, Angular.js) y de editores gráficos como Photoshop. Investigación Llevo varios años usando Telegram a diario y utilizando bots, pero nunca me había picado la curiosidad de buscar información sobre cómo se hacían, hasta que nos confirmaron el trabajo de fin de grado. Empecé a buscar documentación sobre bots de Telegram y de los distintos lenguajes de programación en los que se podían implementar, centrándome más en Python, ya que es el que recomendaba nuestro tutor, especialmente la API Telepot, desarrollada por @nickoala. Después de varias reuniones con mis compañeros de grupo, decidimos que haríamos un juego en Telegram, ya que daba la casualidad de que se habían estrenado un par de meses antes de elegir el trabajo de fin de grado y sería una oportunidad de aprender algo muy nuevo. Además, al investigar y darme cuenta de que se programaban en lenguajes en los que yo había dedicado más tiempo (JavaScript, HTML5), me resultaría más sencillo ayudar a mis compañeros en los contratiempos que nos pudieran surgir durante la realización. Por último, comencé a investigar sobre motores gráficos, y Jesús me recomendó Phaser.io para empezar a programar la lógica del juego. Pruebas Previas Nuestro primer acercamiento a los bots de Telegram fue programado en Python, y consistía en un recomendador de restaurantes en base a tu ubicación actual, pasando por el chat los comandos necesarios para interactuar con el bot. Con ese bot aprendí la forma que tenía Telegram de enviar los metadatos de los mensajes, y empecé a probar el envío y recepción de mensajes filtrando por esos datos. Probé también los bots del resto de compañeros, haciendo mención a uno muy interesante, que creaba conversaciones anónimas entre dos personas a través del bot. Habiendo visto cómo funcionaban los bots por línea de comandos, me di cuenta de que eso no es lo que quería hacer con nuestro bot, quería hacer algo más dinámico, más intuitivo. Y ahí es cuando me introduje en el mundo de los juegos de Telegram. Busqué ejemplos de juegos en Telegram sin comandos, y encontré varios ya accesibles a través de la aplicación de mensajería, sencillos pero adictivos, y eso es lo que 44 queríamos buscar nosotros, aun sabiendo que no iba a ser fácil desarrollar el juego en Telegram ya que era muy reciente y no se encontraba nada de documentación por la red. Desarrollo de la Aplicación Después de hablar con mis compañeros para dividirnos el trabajo de la forma más eficiente, escogí centrarme en la lógica del juego e implementarla junto a Jesús a toda la parte del servidor. Empecé a investigar sobre Phaser.io y encontré varias guías y ejemplos para empezar a probar y aprender su funcionamiento. Encontramos un juego sencillo donde el jugador se movía donde hacías click. No era nuestra idea de juego, pero nos sirvió para entender cómo funcionaba la arquitectura de Phaser.io, que es muy sencilla y tiene tres partes: preload, create y update. Preload para cargar las imágenes necesarias en el juego, create para definir las variables del juego como los sprites de usuarios, tipo de físicas o tamaño del mapa, y el update que se ejecuta cada 20 milisegundos (por defecto) y tiene la lógica del juego y la interacción del usuario con él. Una vez entendido el funcionamiento de Phaser.io, pude hacer una base del juego donde el usuario entraba, y pulsando dos botones, avanzaba de forma horizontal. Con la ayuda de Jesús, y añadiendo el servidor y el uso de sockets, pudimos añadir varios usuarios al mapa y poder verles moverse a la vez. Jesús se siguió encargando de los modos de juego y de la parte online, mientras que yo me ocupaba del modo offline, que es el single, donde a parte de tu usuario se generan cuatro bots controlados por la máquina para competir contra ti. Una vez que estaba la parte de la lógica del juego definida, faltaba darle personalidad. Busqué inspiración en varios juegos de móvil para ver qué elementos usar y cuáles eran las tendencias del momento. En base a eso diseñe los sprites de jugadores, el mapa, los botones, logos, todos los gráficos. Memoria Me he encargado de escribir la Definición del Sistema, explicando cómo funciona la aplicación y que se puede hacer con ella en un lenguaje sencillo y amigable. También he completado el documento hablando de las futuras expansiones posibles y sobre como poder continuar con el proyecto. Para concluir, le he dedicado tiempo al formato del texto, a la traducción y a dar coherencia al texto después de reunir los apartados de cada uno de los miembros. 45 Emilio Chico Muñoz Conocimientos Soy estudiante del Grado en Ingeniería Informática y tengo conocimientos en distintos lenguajes de programación y en organización de proyectos. Investigación Mirando los Trabajos de Fin de Grado, me encontré con este sobre bots de Telegram. En aquel momento no sabía ni que hacían los bots, ni siquiera había usado Telegram, pero me decidí a investigar y acabe maravillado por la cantidad de cosas que se pueden hacer: compartir gifs, mandar mapas, buscar videos en YouTube y mandarlos desde el chat, ver el tiempo, juegos y muchas cosas más. Me introduje en el mundo de los bots de Telegram y estuve mirando los distintos lenguajes en los que se podía programar, nuestro tutor nos presentó Python como lenguaje de desarrollo. Ya lo había utilizado anteriormente en la carrera, y las primeras pruebas fueron creadas en este lenguaje. Según fue avanzando el proyecto y cuando vimos que la API de Python no estaba optimizada para juegos, tuve que desecharla y pasarme a JavaScript, más concretamente a Node.js y una API para Telegram del usuario @yagop, muy similar a la de Python recomendada por el tutor, pero para Node.js. Pruebas Previas Para ir familiarizándonos con el entorno creamos un bot simple, pero que utilizaba todos los datos provenientes de los mensajes que el usuario le enviaba, y en función a esos datos, sugerirle restaurantes cercanos de la comida que ha especificado el usuario. Este primer bot me sirvió para comprender el funcionamiento de paquetes en Telegram, aunque tuve que complementarlo también varios tutoriales en internet sobre chats, donde mejor se plasmaba dicho intercambio. Después de esta prueba y vistos los diferentes bots de los demás compañeros, llegamos a la conclusión de que queríamos hacer algo más entretenido y dinámico que una simple interacción entre usuario y bot mediante comandos, por lo que nos decantamos por el desarrollo de un juego multijugador en tiempo real, sabiendo que iba a ser complicado debido a la poca información disponible y la escasez de ejemplos que nos permitieran enfocar la dinámica del juego. El siguiente punto consistió en buscar algún juego que nos sirviera de ejemplo, no a nivel de funcionalidad, pero sí que nos ofreciera un patrón o algunas líneas para poder continuar y desarrollarlo a nuestro modo. Encontramos algunos que, aunque no nos sirvieran de gran ayuda incrementó nuestras ganas de superar este reto y seguir adelante con el trabajo. Desarrollo de la Aplicación Hicimos una reunión para dividirnos el trabajo, ya que vivo bastante más lejos que mis compañeros y de esta forma podíamos ir trabajando por nuestra cuenta. 46 Elegí hacerme cargo de la parte más cercana a Telegram, del conector. Se trata de un bot que recopila la información del usuario y la envía a través de un callback al servidor del juego. Empecé siguiendo las pautas del profesor, y utilizando la API Telepot, una API en lenguaje Python con la que ya estuvimos haciendo pruebas, por lo que sería sencillo realizar este conector. Después de haber desarrollado la captura de información por parte del bot, tenía que generar el callback y sacarle al usuario el juego para jugar; problema, los juegos en Telegram eran algo muy nuevo y el desarrollador de la API en Python no había dado soporte a los juegos todavía. Por lo que me tocó empezar de cero buscando otra tecnología. Hablé con mis compañeros y me dijeron que estaban usando Node.js para la lógica del juego, así que empecé a investigar por ahí y acabe encontrando la API de Telegram en Node.js que casualmente acababa de dar soporte a los callback de juegos. Volví a reprogramar el bot en Node.js, y fui cambiado la salida del callback en función a lo que mis compañeros necesitaban. Primero pasándoles el ID de Telegram y el nombre del usuario, y más adelante el Chat ID para los modos multijugador. Memoria En el apartado de la memoria me he encargado de la parte de la Introducción, Planteamiento de trabajo y del Estudio de las tecnologías que hemos tenido en cuenta a la hora de reunir toda la información para comenzar nuestro proyecto. También he participado en la selección de Keywords y en el Índice de ilustraciones con el que completamos gran parte de la investigación. 47 Anexo I: Referencias [1] Crecimiento exponencial del uso del teléfono móvil: Isabel F. Lantigua, (abril 2016). “El móvil supera por primera vez al ordenador para acceder a Internet”. http://www.elmundo.es/sociedad/2016/04/04/57026219e2704e90048b465e.html [2] Auge de las aplicaciones de mensajería: Carlos Polo (enero 2017). “El auge de las aplicaciones de mensajería anticipa la era de los chatbots”. https://es.linkedin.com/pulse/el-auge-de-las-aplicaciones-mensajer%C3%ADaanticipa-la-era-carlos-polo [3]Vivimos en un mundo saturado de información: Antonio Ruíz-Giménez (mayo 2016). “La importancia de estar conectados en un mundo global”. http://www.univision.com/noticias/opinion/la-importancia-de-estar-conectados-enun-mundo-global 48 Anexo II: Bibliografía Telegram: https://telegram.org/ https://es.wikipedia.org/wiki/Telegram_Messenger API Telegram: https://core.telegram.org/api Telepot API, autor: Nickoala: https://github.com/nickoala/telepot Node.js Telegram API, autor: Yagop: https://github.com/yagop/node-telegram-bot-api WhatsApp: https://es.wikipedia.org/wiki/WhatsApp http://www.informatica-hoy.com.ar/aprender-informatica/Que-es-Whatsapp.php Line: https://line.me/es/ https://es.wikipedia.org/wiki/LINE Facebook Messenger: https://www.messenger.com/ https://es.wikipedia.org/wiki/Facebook_Messenger https://tecnologia.uncomo.com/articulo/como-funciona-la-app-facebook-messenger26182.html HTML5: https://es.wikipedia.org/wiki/HTML5 https://developer.mozilla.org/es/docs/HTML/HTML5 http://es.html.net/tutorials/html/ 49 JavaScript: https://www.javascript.com/ https://es.wikipedia.org/wiki/JavaScript https://developer.mozilla.org/es/docs/Web/JavaScript Node.js: https://nodejs.org/en/ https://www.ibm.com/developerworks/ssa/opensource/library/os-nodejs/ https://www.genbetadev.com/frameworks/como-funciona-node-js http://www.netconsulting.es/blog/nodejs/ Node.js API: https://nodejs.org/dist/latest-v6.x/docs/api/ Phaser.io: https://es.wikipedia.org/wiki/Phaser http://nicholls.co/blog/post/Creando-Juegos-HTML5-con-Phaser-en-Monaco https://phaser.io/ Unity: https://unity3d.com/es/unity https://es.wikipedia.org/wiki/Unity_(motor_de_juego) Websockets: https://developer.mozilla.org/es/docs/WebSockets-840092-dup https://es.wikipedia.org/wiki/WebSocket https://www.html5rocks.com/es/tutorials/websockets/basics/ https://www.websocket.org/aboutwebsocket.html Socket.io: https://socket.io/ https://en.wikipedia.org/wiki/Socket.IO