{"id":1240,"date":"2020-01-22T20:45:43","date_gmt":"2020-01-23T01:45:43","guid":{"rendered":"https:\/\/v3.ricardoromo.co\/?p=1240"},"modified":"2020-03-06T16:44:39","modified_gmt":"2020-03-06T21:44:39","slug":"regalo-secreto-una-web-app-para-toda-la-familia","status":"publish","type":"post","link":"https:\/\/v3.ricardoromo.co\/2020\/regalo-secreto-una-web-app-para-toda-la-familia\/","title":{"rendered":"Regalo Secreto – Juega Amigo Secreto online"},"content":{"rendered":"\t\t
En mi familia desde hace unos a\u00f1os tenemos la tradici\u00f3n de entregarnos regalos en navidad, esto lo hacemos jugando al amigo secreto (o santa secreto) el a\u00f1o anterior. Corr\u00eda el 24 de diciembre de 2018 y los papeles del 2019 se repartieron esa noche, muchos perdieron sus papeles otros no se acordaban de quien les habia tocado, entonces a esos no les qued\u00f3 m\u00e1s remedio que esperar a que todos terminaran para poder entregar los faltantes. \nEsto me hizo pensar, de que como programador, podr\u00eda idear una soluci\u00f3n a este problema, pero no el t\u00edpico programa de consola en C o de escritorio en visual basic, entonces como \u00faltimamente estoy metido en el desarrollo web, decid\u00edlla programar una aplicaci\u00f3n web faltando 7 d\u00edas para el 24 de diciembre. Esta aplicaci\u00f3n deb\u00eda ser un m\u00ednimo viable, sencilla de utilizar y que nos sirviera para jugar este a\u00f1o, para continuar con la tradici\u00f3n.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tVisitar la Aplicaci\u00f3n<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tEl Problema <\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tJugar al amigo secreto de manera tradicional, consiste en anotar los nombres de todos los participantes en papelitos y guardarlos en una bolsa, que posteriormente se ir\u00e1 puesto por puesto y cada quien deber\u00e1 sacar a alguien que no sea el mismo. Esta din\u00e1mica sugiere varios problemas.\u00a0 \u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\n
Puedes sacarte a ti mismo en el reparto.<\/pre><\/li>- Se pueden formar c\u00edrculos cerrados y dejar a otras personas afuera.<\/li>\n
- Todos deben estar presentes, esto es un inconveniente para los que viven lejos y se re\u00fanen en esas fechas especiales. <\/li>\n
- Corres el riesgo de perder el papel u olvidar el nombre.<\/li>\n<\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t[the_ad id=\"1218\"]<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tLa Soluci\u00f3n<\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tPara desarrollar una aplicaci\u00f3n que le de soluci\u00f3n todos estos problemas, decid\u00ed usar el stack de JavaScript preferido para mi en este tipo de proyectos. NodeJS, Express, MongoDB y Bootstrap, y para hacer deploy, Heroku.\nEste stack es el ideal para soluciones r\u00e1pidas, al no tener costo alguno para la econom\u00eda puedo hacer mis pruebas y validar proyectos.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tPaso 1: Crear el servicio de Base de Datos y sus modelos.<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tPara este paso puedo decir que ya ten\u00eda trabajo adelantado, llevaba unas semanas trabajando en peque\u00f1os m\u00f3dulos para NodeJS que me permitieran integrar funcionalidades como servicios de carga de im\u00e1genes y consultas a distintas bases de datos.\u00a0
Este proyecto esta en mi github :\u00a0modular_database<\/a><\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tconst { Schema, model } = require('mongoose')\nconst { ObjectId } = Schema\n\nconst RoomSchema = new Schema({\n userId: { type: String, required: true },\n name: { type: String, required: true },\n code: { type: Number, required: true },\n isOpen: {type: Boolean, default:true},\n users: {},\n number: { type: Number, default: 0 },\n createdAt: { type: Date, default: Date.now },\n updatedAt: { type: Date, default: Date.now }\n})\n\nmodule.exports = model('Room', RoomSchema)<\/span>\n<\/code><\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tconst { Schema, model } = require('mongoose')\nconst { ObjectId } = Schema\n\nconst UserSchema = new Schema({\n id: { type: String, unique: true, required: true },\n name: { type: String, required: true },\n username: { type: String, unique: true},\n email: { type: String, unique: true, required: true },\n password: { type: String },\n location: {},\n date: { type: Date },\n image: { type: String, default: 'default.png' },\n lastSign: { type: Date, default: Date.now },\n createdAt: { type: Date, default: Date.now },\n updatedAt: { type: Date, default: Date.now }\n})\n\nmodule.exports = model('User', UserSchema)<\/span>\n<\/code><\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\tPaso 2: Crear las rutas<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tPara las rutas escog\u00ed dos maneras de manejarlas, usando una para vistas y otra para una API que se usar\u00eda en cada sala. El enrutador se encargar\u00eda de decidir cu\u00e1les peticiones ir\u00e1n a la API y cu\u00e1les a las vistas, ya cada uno escoger\u00eda si usar el controlador de usuarios o el de las salas.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t[the_ad id=\"1218\"]<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tPaso 3: Crear los controladores<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tSiguiendo el patron MVC, la l\u00f3gica de los controladores no son m\u00e1s que una serie de CRUDs, para usuarios, salas y miembros de sala, estos controladores se conectan al servicio de base de datos, donde hacen sus consultas y operaciones.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tPaso 4: Autenticaci\u00f3n<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tPara la autenticaci\u00f3n utilice Google OAuth 2.0, a trav\u00e9s de una estrategia del m\u00f3dulo Passport de npm, este m\u00e9todo nos permite utilizar una sesi\u00f3n abierta de google para iniciar sesi\u00f3n en nuestra propia aplicaci\u00f3n, compartiendo datos como un id \u00fanico, nombre, correo y foto de perfil.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tPaso 5: Templates y comportamiento de la aplicaci\u00f3n.<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tPara los templates utilice un motor llamado handlebars de npm, me permite extender cierta l\u00f3gica sobre los archivos html. Y con JQuery y bootstrap termine el comportamiento de las salas, como agregar y eliminar miembros, etc.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tPaso 6: Firebase Real Time Data Base<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tEste es un paso adicional, ya que con todo lo anterior la aplicaci\u00f3n funcionaba perfectamente, pero decid\u00ed incluir la integraci\u00f3n con una base de datos en tiempo real, para que pudiera obtener un comportamiento reactivo y el frontend cambiar\u00e1 dependiendo de las acciones de los usuarios. \nEntonces cada cambio que realizaba en las salas, se modifica en firebase y los demas usuarios podr\u00edan ver ese cambio en tiempo real sin recargar la p\u00e1gina, ofreciendo una mejor experiencia de usuario.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\tPaso 7: Deploy<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tYa con la aplicaci\u00f3n terminada, es momento de llevarla a producci\u00f3n. Para esto utilizo un servicio gratuito como MLab para la base de datos y Heroku para el deploy. Heroku tiene integraci\u00f3n directa con GitHub cualquier cambio en el repositorio autom\u00e1ticamente puede ser llevado nuevamente a producci\u00f3n.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t[the_ad id=\"1235\"]<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\n\t\t\tConclusiones.<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t<\/a><\/figure>
Usuarios<\/a><\/h5><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t