Exchange O' Learn

Exchange O' Learn

Proyectos Charlemos Proyectos

 

TL;DR - Conoce el antes, el durante y el después del proyecto Exchange O' Learn para presentarlo en el concurso Desafío Stem 2017. Puedes ver el repositorio del proyecto en mi portfolio.


Como os comenté, participé en el concurso Desafío Stem 2017, la verdad es que nuestro desarrollo quedó bastante bien y lo pudimos entregar todo a pesar de los muchos problemas que tenía la plataforma de entrega de proyectos del concurso.

Pero vamos a empezar por el principio, llegó un correo al instituto promocionando el concurso y nuestra tutora, de la que estoy muy contento por haberla tenido, decidió proponernos participar, al principio yo era el único que quería, ya que no tenía nada que perder, pero tenía un problema, para realizar la inscripción necesitábamos un mínimo de 4 personas, así que tuve que convencer a otras 3 personas. El problema que teníamos es que debían tener menos de 18 años a la hora de inscribirse y más de la mitad del aula tiene 18 o más.

Al final, convencí a 3 compañeros los cuales de programación sabían más bien poco, por lo que conseguí convencerles al decirles que no tendrían que programar nada, ya que del desarrolló me encargaría yo, ellos lo único que tenían que hacer, en un principio, era probar la aplicación, es decir, beta testers, y escribir la documentación de utilización del proyecto, es decir, el manual de instrucciones. Vale, ya teníamos equipo, pero para completar la primera fase necesitábamos un nombre y un logo. Al instante un integrante del equipo sugirió que nos llamáramos Anonimouse, y como no había más propuestas, adoptamos ese nombre. El logo lo diseñé utilizando una herramienta que no voy a nombrar, pero el resultado fue este.

Anonimouse Logo

 

La verdad es que la primera fase fue la que menos nos costó realizar ya que con las ganas de participar, la realizamos casi sin darnos cuenta. En este punto no sabíamos aún que hacer para el concurso, lo que tenía claro es que quería que fuera un proyecto de desarrollo web. Teníamos que identificar un problema en nuestro entorno, optamos por escoger la conexión a internet, ya que además de ser muy limitada y lenta, los profesores nos cortan la conexión. Un profesor del instituto desarrollo un proyecto que poniéndolo en el servidor que actúa como puerta de enlace, puede cortarnos la conexión al exterior del aula, pero sí que podemos comunicarnos internamente. Os dejo aquí el blog del profesor y aquí el repositorio del proyecto que os comento.

Yo hacía unos meses me metí junto con un compañero que sabía algo de programación Front-End a hacer un chat en HTML5 y PHP, mi compañero hizo el Front-End y yo me dediqué a hacer el Back-End. Nunca terminamos el proyecto.

Aproveché esa idea para adoptarla y añadirle más funcionalidades, como mis compañeros no tenían que programar nada, les pareció buena idea.

Ya teníamos claro que queríamos una aplicación web para poder compartir la información proporcionada por el profesor, así como crear eventos en una agenda y mantener un chat de aula para poder compartir las dudas con los compañeros. Además, no sería necesario tener una conexión a internet para poder acceder y utilizarla.

Y aquí terminó la primera fase.

La segunda fase requería realizar una investigación del proyecto a fondo, por lo que teníamos que escribir un marco teórico y metodológico sobre nuestro proyecto, entre otras cosas.

Marco Teórico

Los antecedentes a destacar en este proyecto son la problemática derivada a causa de una lenta conexión a Internet, o incluso sin conexión, para tareas diarias de clase. Esto supone una pérdida de tiempo para la impartición correcta de las materias, por lo tanto, el tema de investigación que queremos abordar en este proyecto, consiste en solucionar diversos problemas encontrados en un aula de informática con 25 ordenadores más un ordenador para el profesor.

Los objetivos a abordar son:

 Compartir información y recursos entre alumnos y profesores.
• Establecer una comunicación activa para compartir dudas y soluciones, mediante un chat.
• Mantener la información actualizada de eventos importantes, tales como exámenes o entregas de trabajos.
• No depender de la conexión continua a Internet, utilizando únicamente el ancho de banda de la red local del aula.

Marco Metodológico

Los mecanismos utilizados para el análisis de nuestra problemática de investigación han sido la propia observación directa en el aula día tras día. El presente proyecto se propone como una solución para dichos problemas observados, tomando como objeto principal mejorar el funcionamiento en el aula, tanto entre alumnos como entre profesores.

Con este objetivo, hemos ideado, propuesto y desarrollado una solución funcional para tratar este problema sin romper la estructura ni el funcionamiento correcto en el aula. Desde que se puso en desarrollo el proyecto ha estado en funcionamiento, de forma que mientras iba progresando, podíamos observar nuevas necesidades que iban surgiendo durante la utilización de esta herramienta.

Por ese motivo, hemos podido llegar a un sistema que mejora el funcionamiento y comunicación en el aula, así como ayudar a ofrecer recursos de forma rápida y sencilla entre los alumnos, de esa forma, reducimos el tiempo perdido intentando ofrecer recursos y herramientas, tanto entre alumnos como entre profesores.

Tras esto, teníamos que redactar que tecnologías habíamos utilizado y por qué.

• PHP 7
• CSS 3
• Angular.JS
• Bootstrap
• Datatables
• JQuery
• Colorpicker

Hemos decidido utilizar estas tecnologías para que nuestra aplicación esté actualizada con las últimas tecnologías de programación web, además decidimos utilizar Angular.JS para que fuera SPA (Single Page Application), de forma que no es necesario actualizar la página para mostrar los datos en formato JSON, ya que llegan a través de una API creada por nosotros.

También teníamos que poner las herramientas a utilizar en la construcción o diseño del proyecto.

• Ubuntu Server 64 bits
• Apache
• PHP 7
• phpMyAdmin
• MySQL
• Vsftpd
• Webmin
• NetBeans
• Filezilla

Además, también utilizamos Bootstrap Studio para crear el prototipo funcional de nuestra aplicación.

Por último, teníamos que poner los obstáculos identificados y las conclusiones obtenidas tras el proceso de investigación.

Uno de los obstáculos era que nos habíamos propuesto que la aplicación utilizara lo mínimo posible de consumo de internet, de forma que no podíamos utilizar los CDN para los CSS y los JS, así que los teníamos que incluir junto con la aplicación, pero aprovechando que está en la red local el tiempo de carga es incluso mucho más rápido y eficaz.

Necesitábamos esa aplicación cuanto antes, ya que así podríamos tener una comunicación activa y transferencias de archivos de forma rápida y eficaz, sin perturbar el funcionamiento del aula con respecto al consumo de ancho de banda de acceso a internet, por lo que nos pusimos cuanto antes a desarrollarla.

La tercera fase ya era la entrega del proyecto, teníamos que poner un vídeo de Youtube a modo de presentación del proyecto, yo realizé este montaje a modo de vídeo promocional.


También teníamos que poner una breve descripción de máximo 100 palabras.

Hemos creado una aplicación web totalmente funcional y a día de hoy presente en nuestra aula, lo que nos permite interactuar entre todos los compañeros y el profesor del aula. Además, pese a los comunes problemas de internet, nuestra aplicación no se ve afectada.

Para que lo pudieran probar teníamos que proporcionarles unas pautas básicas.

Para poder poner en marcha la aplicación, será necesario un servidor web en el cual volcar el código fuente, no debemos olvidar que en algunos servidores tendremos que configurar los permisos de archivos y carpetas, accedemos al servidor a través de un navegador e instalamos la aplicación. Debemos recordar que es necesaria una conexión a una base de datos para poder instalarlo. Si todo se ha instalado correctamente nuestra aplicación debe estar funcionando. Recuerde que puede ver la documentación del proyecto en https://sertxudeveloper.github.io/Exchange-O-Learn/

Creé un instalador para que fuera más sencilla la puesta a punto de la aplicación, por último, teníamos que listar los lenguajes utilizados en el desarrollo del proyecto.

• HTML5
• CSS3
• PHP 7
• JavaScript
• AngularJS

Como la plataforma para ir enviando las fases no iba bien, decidieron aumentar el plazo de entrega, en un principio finalizaba en Junio de 2017, lo ampliaron a mitad de Diciembre de 2017. Pude aprovechar para añadir funciones que tenía pensadas, pero que en un principio no me iba a dar tiempo a implementarlas.

Sobre Octubre ya estaba completamente finalizado y en fase de pruebas en el aula, en Noviembre lo entregué para poder quitármelo de encima, ya que llevaba más de medio año en el proyecto. Varios días antes de finalizar el plazo, volvieron a ampliarlo hasta finales de Diciembre de 2017. Yo no hice ningún cambio en el proyecto desde que lo entregué porque estaba metido en otros proyectos, uno de ellos esta web.

A día de hoy, 7 de Febrero de 2018, ya han dado a conocer a los finalistas, pero no a los ganadores del concurso. Lamentablemente no estoy entre los finalistas, pero estoy más que satisfecho del buen trabajo que hice, si a alguien le interesa, lo tiene disponible en GitHub bajo la licencia GPL 3.0, el enlace está en mi portfolio.

Gracias a este proyecto aprendí a utilizar AngularJS, conocí las cosas buenas y malas, gracias al proyecto que realicé me abrió un nuevo campo de programación que actualmente estoy explorando. En un futuro espero poder traeros proyectos realizados con este tipo de lenguajes.

Sin nada más que comentar del proyecto, me despido, un saludo y hasta la semana que viene.