Introduction: COINK Alcancía Inteligente
COINK es un proyecto que se ha desarrollado en conjunto por estudiantes de la Universidad Autonóma de Occidente para la asignatura Computación Física. El proyecto consiste en una alcancía inteligente que consta de dos componentes: la alcancía y una aplicación móvil para sistemas operativos Android desde la cual se puede llevar un control de los ahorros y además acceder a otras funciones.
Ya que el objetivo del proyecto es fomentar el ahorro en niños pequeños, la alcancía es una alcancía familiar y todos los miembros de la familia pueden tener un perfil para ver sus ahorros individuales en una cuenta conectada a la alcancía similar a como funciona Netflix.
El proyecto se compone de las siguientes etapas:
- Construcción de la alcancía física con el sistema de clasificación del dinero.
- Incorporación de un sensor de proximidad (módulo RFID) con el fin de diferenciar entre usuarios.
- Implementación de un sistema de reacciones por parte de la alcancía como respuesta a la interacción con diferentes usuarios (implementando el punto anterior).
- Desarrollo de aplicación para dispositivos móviles (Sistema de conteo de dinero, sistema de ingreso, registro y reconocimiento de usuario, sistema de metas de ahorro).
Materiales a utilizar
- 5 pares de diodos LED infrarrojo (emisor-receptor). Ver imagen
- Cable (diferentes colores para distinguir las conexiones). Ver imagen
- Protoboard. Ver imagen
- Arduino MEGA. Ver imagen
- Jumpers o cables de conexión (macho - macho y macho - hembra). Ver imagen
- Modulo RFID-522 (diferentes tags). Ver imagen
- Dos matrices LED con gobernador MAX7219. Ver imagen
- Pela cable. Ver imagen
- Cautin. Ver imagen
- Cinta aislante. Ver imagen
- Estaño. Ver imagen
- Madera 70x70cm (Madeflex de 5.5mm de espesor). Ver imagen
- Colbón para madera. Ver imagen
- Cinta adhesiva. Ver imagen
- Módulo WiFi Esp866. Ver imagen
- Resistencias. Ver imagen
Step 1: Primera Etapa: Construcción De La Alcancía Física Con El Sistema De Clasificación Del Dinero
En la primera etapa vamos a empezar con lo básico del proyecto; armar la alcancía con el sistema de clasificación e implementar el código de Arduino para el conteo del dinero
Step 2: Paso 1: Diseño De Los Planos Para El Corte.
Para esta parte del proceso se recomienda utilizar una cortadora láser para que los cortes de la alcancía sean precisos. Para la construcción de los planos utilizaremos Adobe Illustrator, configuraremos el espacio de trabajo en milimetros (700x700) y exportaremos en DXF.
Aquí dejamos los archivos para descargar. Estos planos están hechos para corte en mdf de máximo 6mm (5.5mm es lo recomendado) pero tu puedes hacer tus propios planos de acuerdo a lo que necesites y quieras de la alcancía.
Aquí puedes descargar los planos: Planos en .ai y .DXF
Step 3: Paso 2: Armar La Alcancía Y Pintarla a Tu Gusto.
Para armar la alcancía necesitaras colbón madera, y para pintarla necesitaras lijar la madera, pintarla de blanco y luego pintarla con el diseño de tu preferencia.
Step 4: Paso 3: Montaje Del Circuito Que Cuenta Las Monedas En La Alcancía.
Para el montaje del circuito se deben llevar a cabo los siguientes pasos:
Paso 1:
Soldar los cables a cada una de las patas de los Diodos LED infrarrojos. Se recomienda que haya un color de cable para la pata positiva y otro para la pata negativa (la pata larga del LED es el positivo).Ver imagen
Paso 2:
Se deben aislar cada una de las patas de los Diodos LED infrarrojos de manera que la pata del negativo no se toque con la pata del positivo, esto se separa por medio de cinta aislante. Ver imagen
Paso 3:
En la protoboard se ubican las resistencias de 150 ohmios para el emisor y 10000 ohmios para el receptor, también se unen los raíl positivos mediante un cable y los negativos a cada extremo de la protoboard. Ver imagen
Paso 4:
Se conectan los LED'S a la protoboard, el negativo del receptor (el led negro) va al positivo de la protoboard y el positivo del receptor va a la línea de la resistencia. El negativo del emisor (led blanco) va al negativo de la protoboard y el positivo va a la línea de la resistencia. En la misma línea de cada resistencia a la que se conectan los receptores se conectan los jumpers que irán a los pines del arduino. Ver imagen
Paso 5:
Se conectan los pines correspondientes a cada una de las monedas, el ground y los 5V a la protoboard y al arduino así:
Primer sensor al pin 3 del Arduino, segundo sensor al pin 4 del Arduino, tercer sensor al pin 5 del Arduino, cuarto sensor al pin 6 del Arduino, quinto sensor al pin 7 del Arduino. Ver imagen
Paso 6:
Se ubican los LED'S uno frente a otro debajo de los orificios por donde caen cada una de las monedas. Ver imagen
En el siguiente link encontrarán el montaje final: Ver imagen
Step 5: Paso 4: Código En Arduino Para El Conteo De Las Monedas Introducidas En La Alcancía
Este paso es opcional ya que más adelante se le irán agregando otros componentes, pero lo pueden hacer para que prueben que el montaje anterior este funcionando correctamente.
Paso 1:
- Lo primero que se debe hacer es declarar unas variables (cada una de las monedas) que corresponden a los pines a utilizar, también se declaran unas variables con el valor de cada una de las denominaciones .
//declaración de variables
const int m1 = 3;
const int m2 = 4;
const int m3 = 5;
const int m4 = 6;
const int m5 = 7;
- Después se declaran unas variables con el valor de cada una de las denominaciones.
const int d = 200;
const int q = 500;
const int m = 1000;
const int c = 100;
const int ci = 50;
- Luego se declara el estado inicial y estado final de los contadores.
int em1 = 0; int efm1 = 0;
int em2 = 0; int efm2 = 0;
int em3 = 0; int efm3 = 0;
int em4 = 0; int efm4 = 0;
int em5 = 0; int efm5 = 0;
- Después se declaran unas variables para que guarden la cantidad de monedas de cada una de las denominaciones.
double c1 = 0;
double c2 = 0;
double c3 = 0;
double c4 = 0;
double c5 = 0;
- Luego se declaran unas variables para que guarden el total de cada una de las denominaciones y después estos totales se suman y esa suma se guarda en otra variable que da el total de dinero en la alcancía.
double total1 = 0;
double total2 = 0;
double total3 = 0;
double total4 = 0;
double total5 = 0;
double total = 0;
Paso 2:
Después de haber declarado todas las variables a usar, en el paso 2 se definen los pines de entrada en el setup.
pinMode(m1, INPUT);
pinMode(m2, INPUT);
pinMode(m3, INPUT);
pinMode(m4, INPUT);
pinMode(m5, INPUT);
Paso 3:
Después de declarar las variables y definir los pines de entrada se revisan los sensores, cuando estos se están viéndose el pin recibe un cero, cuando pasa una moneda la comunicación se interrumpe y el pin recibe un uno, como esta lectura se hace cada segundo el estado inicial y final de los contadores son distintos y esto se traduce en un incremento en uno de la cantidad de monedas de esa denominación.
Después el estado final es igual al inicial y el total de esa denominación es igual a la cantidad de monedas por el valor de esta.
Este método es el mismo para cada una de las denominaciones de las monedas.
void loop( ) {
em1 = digitalRead(m1);
if (em1 != efm1){
if (em1 == LOW){
c1++;
}
}
efm1 = em1;
total1 = c1 * ci;
- Para finalizar cuando hay un valor en los totales de cada una de las denominaciones se suman y se imprime este valor como el total de dinero que hay en la alcancía.
total = total1 + total2 + total3;
Serial.print ("total dinero : $");
Serial.println (total);
El código completo se encuentra en el siguiente link: Codigo completo
Step 6: Segunda Etapa: Incorporación De Un Sensor De Proximidad (módulo RFID) Para Diferenciar Entre Usuarios
Para esta etapa usaremos el módulo RFID-RC522 y los diferentes tags que vienen incluidos.
Step 7: Paso 1: Conexión Del Módulo RFID a Arduino
Paso 1:
Lo primero que se debe hacer para poder conectar el módulo a arduino se debe soldar una de las regletas de pines (rectos o curvos) a los agujeros.Ver imagen
Se debe tener cuidado al soldar cada pin al agujero ya que si hay los puntos de soldadura conectan 2 agujeros entre sí el módulo puede no funcionar correctamente.
Al soldar quedaría así: Ver imagen
Paso 2:
Después de haber soldado la regleta de pines al módulo realizamos la conexión de este a un arduino MEGA.
El módulo RFID trabaja con una librería (MFRC522) que debe instalarse en el Arduino IDE, esta librería tiene un ejemplo el cual en los comentarios trae la explicación de como se debe conectar el módulo a los diferentes arduinos.
Como el arduino que vamos a usar es el MEGA entonces el módulo RFID conectado con jumpers Hembra-Macho a este quedaría así:
- VCC en módulo a 3.3V en arduino.
- RST en módulo a pin 9 en Arduino.
- SDA en módulo a pin digital 53 en Arduino.
- SCK en módulo a pin digital 52 en Arduino.
- MOSI en módulo a pin digital 51 en Arduino.
- MISO en módulo a pin digital 50 en Arduino.
En el siguiente link encontrarán la imagen de la conexión: Ver imagen
Step 8: Paso 2: Código En Arduino Para Reconocer Diferentes Usuarios
Paso 1:
Lo primero que debemos hacer es descargar la librería para trabajar con el módulo RFID, esta librería la debemos incluir en el Arduino IDE. Para saber si la librería fue correctamente incluida vamos a la opción programa del Arduino IDE y buscamos MFRC522 en incluir librería, si se encuentra ahí es porque fue incluida con éxito.
Paso 2:
Para tener una idea de como funciona el módulo podemos hacer uso de los ejemplos que vienen con la librería. Para acceder a ellos vamos a Archivo luego Ejemplos, señalamos la librería RFID y nos aparecerá una lista de todos los ejemplos de uso de la librería. En este caso seleccionamos el ejemplo ReadNUID y Arduino abrirá una ventana nueva con el código del ejemplo.
Ya con el ejemplo ReadNuid podemos empezar a leer los tags con el módulo, en el siguiente link podrás ver una imagen de los tags. Ver imagen
¿Cómo funciona el ejemplo?
El código del ejemplo ReadNuid lee si hay un tag presente, si lo hay imprime el código del tag en hexadecimal y decimal. Ya que no necesitamos imprimir esta información, este código fue modificado de tal manera que siguiera reconociendo si hay un tag presente pero en lugar de imprimir la identificación del tag en hexadecimal y decimal convertía ésta a binario. Se usó ese dato en binario para asociarlo a un nombre de usuario.
En la siguiente línea de código se convierte la identificación a código binario y se imprime esa identificación:
String identificacionBIN =String ( buffer [ i ], BIN);
Serial.println (identificacionBIN);
Estas dos líneas de código se deben incluir en uno de los dos métodos llamados printDEC y printHEX. En el Monitor Serie de arduino podemos ver la identificación en binario de los diferentes tags que tenemos.
Paso 3:
Después de convertir la identificación a código binario, se usan estos valores para definir los usuarios (la cantidad de usuarios se define dependiendo del número de tags RFID que se tengan).
Después de definir los usuarios se comparan estos con lecturas de tags posteriores, como se esta trabajando con dos tags, el código reconocerá a los dos usuarios pero se puede hacer que si no reconoce la id envíe un mensaje diciendo que el usuario no existe.
Si tienen en casa una tarjeta MIO pueden probar que el sistema está funcionando correctamente. El código quedaría así:
Se definen los usuarios así:
String idUsuario1 = "11000101";
String idUsuario2 = "100001";
El método para comparar la identificación del tag leído con las identificaciones de los usuarios e imprimir sus nombres es el siguiente:
String imprimirCadena (byte *buffer, byte bufferSize) {
for (byte i = 0; i < bufferSize; i++) {
String identificacionBIN = String( buffer [ i ], BIN);
if (identificacionBIN == idUsuario1){
Serial.println("VIVIANA FLOREZ");
}
if (identificacionBIN == idUsuario2){
Serial.println("DANIELA BUENDIA");
}
if (identificacionBIN == idUsuario3){
Serial.println("ANA MARÍA PANTOJA");
}
if (identificacionBIN!=idUsuario1 && identificacionBIN!=idUsuario2 && identificacionBIN!=idUsuario3){
Serial.println ("El usuario no esta registrado");
}
return identificacionBIN;
}
En el código anterior se puede ver que solo se esta imprimiendo una cadena con un nombre cualquiera con el fin de comprobar si reconoce o no a los usuarios. Más adelante al combinar los códigos de lectura de RFID y del conteo del dinero se trabajará con la identificación del usuario solamente.
Aquí está el código completo para descargar: Codigo completo
Para ver un vídeo del funcionamiento puedes acceder al siguiente link: Funcionamiento
Step 9: Tercera Etapa: Integración Del Conteo De Monedas Con El Reconocimiento De Usuarios E Implementación Del Sistema De Reacciones Por Parte De La Alcancía
Step 10: Paso 1: Combinación De Los Códigos (conteo De Monedas Y Reconocimiento De Usuarios)
En esta tercera etapa se decidió combinar los códigos explicados anteriormente con el fin de que cada usuario tenga un total de dinero ahorrado, es decir, que cada vez que un usuario se identifica por medio de su tag y ingresa una moneda, esta moneda aumente en el total ahorrado de él y no de los demás.
Paso 1:
Para la combinación de estos códigos primero se definen todas las variables como arreglos de la siguiente manera:
byte nuidPICC [ 4 ];
//Iniciar variables de identificación
String idUsuario [ 3 ];
String nombreUsuario [ 3 ];
int presente [ 3 ];
//Iniciar variables de conteo de dinero
int pinMonedas [ 5 ];
int valorMonedas [ 5 ];
int estadoInCont [ 5 ];
int estadoAnCont [ 5 ];
double cantidadMonedas [ 5 ];
double total [ 5 ];
double totalAhorrado [ 3 ];
int r;
double total1 = 0;
double total2 = 0;
double total3 = 0;
Paso 2:
- Luego de haber definido las variables, en el setup se inicializan de la siguiente manera:
//Definir los valores de las variables de identificación
idUsuario [ 0 ] = "11000101";
idUsuario [ 1 ] = "100001";
idUsuario [ 2 ] = "1000110";
nombreUsuario [ 0 ] = "Daniela Buendia";
nombreUsuario [ 1 ] = "Viviana Florez";
nombreUsuario [ 2 ] = "Ana Pantoja";
//Definir valores de las variables de conteo de dinero
pinMonedas [ 0 ] = 3;
pinMonedas [ 1 ] = 4;
pinMonedas [ 2 ] = 5;
pinMonedas [ 3 ] = 6;
pinMonedas [ 4 ] = 7;
valorMonedas [ 0 ] = 50;
valorMonedas [ 1 ] = 100;
valorMonedas [ 2 ] = 200;
valorMonedas [ 3 ] = 500;
valorMonedas [ 4 ] = 1000;
for (int i = 0; i < 5; i++) {
estadoInCont [ i ] = 0;
estadoAnCont [ i ] = 0;
cantidadMonedas [ i ] = 0;
total [ i ] = 0;
}
for (int i = 0; i < 3; i++) {
totalAhorrado [ i ] = 0;
}
//Inicializar los pines
for (int i = 0; i < 5; i++) {
pinMode(pinMonedas[ i ], INPUT);
}
}
- Después de haber realizado la inicialización de cada variable, en el setup se hace un método para identificar a los usuarios por medio del tag RFID:
//Método que identifica los usuarios por medio del tag RFID
String imprimirCadena(byte *buffer, byte bufferSize) {
for (byte i = 0; i < bufferSize; i++) {
String identificacionBIN = String(buffer [ i ], BIN);
if (identificacionBIN == idUsuario [ 0 ]) {
Serial.println(nombreUsuario [ 0 ]);
}
if (identificacionBIN == idUsuario [ 1 ]) {
Serial.println(nombreUsuario [ 1 ]);
}
if (identificacionBIN == idUsuario [ 2 ]) {
Serial.println(nombreUsuario[2]);
}
if (identificacionBIN != idUsuario[0] && identificacionBIN != idUsuario[1] && identificacionBIN != idUsuario[2]) { Serial.println("El usuario no esta registrado");
}
}
return identificacionBIN;
}
- Otro método para el conteo del dinero que se está ahorrando:
//Método que cuenta el dinero ahorrado
double contarDinero(int i) {
for (int j = 0; j < 5; j++) {
for (int k = 0; k < 5; k++) {
estadoInCont[ j ] = digitalRead(pinMonedas[ j ]);
if (estadoInCont[ j ] != estadoAnCont[ j ]) {
if (estadoInCont[ j ] == LOW) {
++total[ j ];
}
}
estadoAnCont[j] = estadoInCont[ j ];
}
}
totalAhorrado[ i ] = total[ 0 ] * valorMonedas[ 0 ] + total[ 1 ] * valorMonedas[ 1 ] + total[ 2 ] * valorMonedas[ 2 ] + total[ 3 ] * valorMonedas[ 3 ] + total[ 4 ] * valorMonedas[ 4 ];
return totalAhorrado[ i ];
}
- Y por último un método que asigna la posición del arreglo en la que se guardará el total del dinero ahorrado por cada usuario:
//Método que asigna un numero de identificación a cada usuario
int validarEstado( byte *buffer, byte bufferSize) {
for ( byte i = 0; i < bufferSize; i++) {
String identificacionBIN = String (buffer [ i ], BIN);
if ( identificacionBIN == idUsuario [ 0 ]) {
r = 0;
}
if ( identificacionBIN == idUsuario [ 1 ]) {
r = 1;
}
if ( identificacionBIN == idUsuario [ 2 ]) {
r = 2;
}
return r;
}
}
Paso 3:
Luego en el void loop se lee el tag y se llama el método imprimir cadena para recibir el nombre del usuario y llama el método de validar estado para recibir el número de la posición del arreglo en la que está el dinero ahorrado de cada usuario:
void loop() {
// Look for new cards
if ( ! rfid.PICC_IsNewCardPresent())
return;
// Verify if the NUID has been readed
if ( ! rfid.PICC_ReadCardSerial())
return;
// Check is the PICC of Classic MIFARE type
if (rfid.uid.uidByte[0] != nuidPICC[0] ||
rfid.uid.uidByte[1] != nuidPICC[1] ||
rfid.uid.uidByte[2] != nuidPICC[2] ||
rfid.uid.uidByte[3] != nuidPICC[3] ) {
Serial.println(F("A new card has been detected."));
// Store NUID into nuidPICC array
for (byte i = 0; i < 4; i++) {
nuidPICC[i] = rfid.uid.uidByte[i];
}
}
else Serial.println(F("Card read previously."));
//Recibe el nombre del usuario
String nombre = imprimirCadena(rfid.uid.uidByte, rfid.uid.size);
//Recibe el número de identificación del usuario
String id = validarEstado(rfid.uid.uidByte, rfid.uid.size);
- Después se inicia el conteo de dinero para cada uno de los usuarios:
//inicia el conteo de dinero para el usuario 1
if (id==0){
totalAhorrado [ 0 ]= totalAhorrado [ 0 ]+total1;
while (id==0){
total1 = contarDinero(0);
Serial.println(total1);
delay(500);
if(rfid.PICC_IsNewCardPresent( ) ) {
id = 5;
}
}
}
Para los otros dos usuarios se realiza lo mismo, lo único que cambia es la posición del arreglo.
- Para finalizar se reinician los contadores con el fin de que cada uno de los usuarios tengan una cuenta propia del dinero que han ingresado a la alcancía:
for ( int contador = 0; contador < 5; contador++) {
total [contador] = 0;
}
rfid.PICC_HaltA( );
rfid.PCD_StopCrypto1( );
}
Para descargar el código completo haz clic en el siguiente link: Código conteo y reconocimiento de usuarios
Step 11: Paso 2: Conexión De La Matriz De LED'S Al Arduino MEGA
La conexión de la matriz de LED al a Arduino es así:
VCC a 5V
GND a GND.
DIN al pin 10 del Arduino.
CS al pin 11 del Arduino.
CLK al pin 12 del Arduino.
Step 12: Paso 3: Código En Arduino Para Comprobar El Correcto Funcionamiento De Las Matrices
Lo primero que se debe hacer es definir los pines, también se definen unos datos del MAX7219 (gobernador) y se dibuja con 0s y 1s lo que se quiere ver en la matriz, en este caso un corazón ya que el cerdito está muy feliz porque ese usuario lo alimenta constantemente:
int DIN_PIN = 10; // data in pin
int CS_PIN = 11; // load (CS)
pin int CLK_PIN = 12; // clock pin
// MAX7219 registers
byte MAXREG_DECODEMODE = 0x09;
byte MAXREG_INTENSITY = 0x0a;
byte MAXREG_SCANLIMIT = 0x0b;
byte MAXREG_SHUTDOWN = 0x0c;
byte MAXREG_DISPTEST = 0x0f;
//Dibujar la expresión
const unsigned char heart [ ] =
{
B01100110,
B10011001,
B10000001,
B10000001,
B01000010,
B00100100,
B00011000,
B00000000
};
Después en el setup se inicializan los pines, los datos del MAX7219 y se manda cada línea de la matriz a un método setRegistry que se encarga de encender los leds correspondientes:
pinMode(DIN_PIN, OUTPUT);
pinMode(CLK_PIN, OUTPUT);
pinMode(CS_PIN, OUTPUT);
// initialization of the MAX7219
setRegistry(MAXREG_SCANLIMIT, 0x07);
setRegistry(MAXREG_DECODEMODE, 0x00);
setRegistry(MAXREG_SHUTDOWN, 0x01);
setRegistry(MAXREG_DISPTEST, 0x00);
setRegistry(1, heart[0]);
setRegistry(2, heart[1]);
setRegistry(3, heart[2]);
setRegistry(4, heart[3]);
setRegistry(5, heart[4]);
setRegistry(6, heart[5]);
setRegistry(7, heart[6]);
setRegistry(8, heart[7]);
Aquí está el código para probar las matrices: Código de prueba matrices LED
Step 13: Paso 4: Montaje Del Sistema De Conteo, Con El Sistema De Reconocimiento Y El Sistema De Reacciones
Al montaje anterior vamos a añadir las matrices LED. Estas las usaremos como los ojos de nuestro personaje para así implementar las expresiones y reacciones.
Step 14: Paso 5: Código Combinado Con Las Reacciones
Al código que teníamos del conteo del dinero con el reconocimiento de los usuarios se le añadieron las siguientes partes:
Primera parte: Con esto iniciamos los parámetros del controlador de las matrices
int DIN_PIN = 10; // data in pin
int CS_PIN = 11; // load (CS) pin
int CLK_PIN = 12; // clock pin
// MAX7219 registers byte
MAXREG_DECODEMODE = 0x09;
byte MAXREG_INTENSITY = 0x0a;
byte MAXREG_SCANLIMIT = 0x0b;
byte MAXREG_SHUTDOWN = 0x0c;
byte MAXREG_DISPTEST = 0x0f;
Segunda parte: Los arreglos correspondientes a cada expresión de nuestro personaje.
//Dibujar la expresión
const unsigned char heart [ ] = {
B01100110,
B10011001,
B10000001,
B10000001,
B01000010,
B00100100,
B00011000,
B00000000 };
Para cada expresión será un arreglo similar a este.
Tercera parte: Con un while hacemos que se pinte la expresión de acuerdo al usuario que identifica.
while (id == 0) {
// dibujar expresión
setRegistry(1, heart[0]);
setRegistry(2, heart[1]);
setRegistry(3, heart[2]);
setRegistry(4, heart[3]);
setRegistry(5, heart[4]);
setRegistry(6, heart[5]);
setRegistry(7, heart[6]);
setRegistry(8, heart[7]);
}
Esto mismo lo podemos hacer para que responda a diferentes variables como la denominación de dinero ahorrada en el momento de la identificación, la cantidad de dinero ahorrado en total y muchos más.
El código completo esta aquí: Código conteo y reconocimiento de usuarios con reacciones de matrices LED
Step 15: Cuarta Etapa: Creación De Servidor Node.js
Con el fin de llevar nuestro proyecto un paso más lejos, implementaremos una aplicación para dispositivos móviles desarrollada en Android Studio a través de la cual las personas podrán ver y llevar registro de todo lo que hasta ahora veíamos en el Monitor serie de Arduino. Para esto crearemos un servidor web usando Node.js.
Step 16: Paso 1: Usando Codepicnic Como Administrador De Nuestro Servidor
En primer lugar nos dirigiremos a Codepicnic. Una vez allí se registrarán o si ya tienen una cuenta, deberán ingresar.
Una vez hayan ingresado, verán en la parte superior derecha de la página un botón que dice "new console" o "nueva consola". Ver imagen
Habrá que seleccionar como tecnología NodeJS(6.9.0) y darle crear.
Esto los redigirá a una nueva página, esta es la página de su consola. Ahí encontrarán en la parte izquierda una carpeta llamada archivos o files y un terminal para ejecutar comando en su servidor.
Así luce la página: Página de administración del servidor
El título, en mi caso "A NodeJS console" es el nombre de su consola, este pueden cambiarlo dando clic sobre el mismo.
Para el siguiente paso hay dos opciones, o bien descargar un editor de texto (Atom, VisualStudio u otros), o crear los documentos necesarios para poder "levantar" el servidor desde codepicnic.
Para poner en funcionamiento el servidor deberán crear dos archivos principales, uno llamado package.json y otro llamado server.js
Si deciden crear los documentos en codepicnic deben ir a el panel izquierdo de la página, en donde dice file y arriba aparecen tres iconos, el primero es para crear documentos. Le dan clic y le ponen como nombre package.json
Deberá aparecer el archivo creado en la lista de archivos en el panel, le dan doble clic y pegan lo siguiente:
{
"name":"NOMBRE DE TU CONSOLA",
"version":"1.0.0",
"description":"Este es el servidor de la aplicacion NOMBRE DE TU APLICACION",
"main":"server.js",
"private": true,
"scripts":{
"test":"echo 'test'" },
"author":"Daniela",
"license":"ISC",
"dependencies":{
"body-parser":"^1.15.2",
"cors":"^2.7.1",
"express":"^4.14.0",
"mongoose":"^4.5.9",
"csprng" : "^0.1.1",
"connect": "^2.14.4",
"nodemailer":"^0.6.3",
"crypto":"^0.0.3",
"gravatar":"^1.0.6"
}
}
Si deciden hacerlo en un editor de texto, crean el archivo llamado package.json, copian lo anterior le dan guardar y luego desde el explorador de archivos de su computador, lo arrastran al panel en la página. El archivo deberá cargarse, si no les aparece de inmediato prueben refrescar la página.
Repitan los pasos anteriores esta vez con el archivo server.js que contendrá lo siguiente:
var cors= require('cors');
var express= require('express');
var connect= require('connect');
var bodyParser=require('body-parser');
var app=express();
var puerto=8080;
app.all('*',cors());
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
app.use(connect.logger('dev'));
app.use(connect.json());
app.use(bodyParser.urlencoded({extended:true}));
app.get('/',cors(),function(req,res){ return res.json({test:"prueba"}); });
app.listen(puerto, function(){
console.log("Servidor corriendo por el puerto"+ puerto); });
Guardan y van a la pestaña terminal.
Deberán ver esto: Terminal
Ahí escribirán el comando npm install y darán enter.
Empezarán a descargar los distintos módulos que se usarán en el servidor y cuando acabé verán algo así: Ver imagen
Prueben ahora el comando node server.js y enter, deberá aparecerles el siguiente aviso: "servidor corriendo por el puerto 8080".
Con esto tenemos corriendo nuestro servidor.
Step 17: Paso 2: Adaptar El Servidor a Nuestro Proyecto
El paso anterior explicaba como "levantar un servidor estandar" en NodeJS, ahora lo modificaremos para que se adapte a nuestras necesidades.
Primero habrá que agregar los métodos post y get que es como funciona cualquier servidor, con peticiones de usuarios (POST) y respuestas del servidor (GET).
Primero vamos a crear en el panel de archivos de nuestro servidor el cual debería lucir así: imagen, una carpeta llamada routes, en ella crearemos un archivo llamado routes.js, de manera que ahora la estructura de nuestro proyecto se verá así: imagen.
En este archivo pegaremos lo siguiente:
var register = require('config/register');
var login = require('config/login');
var conteo = require('config/conteo');
module.exports = function(app) {
app.get('/', function(req, res) {
res.end("Node-Android-Project"); });
app.post('/login',function(req,res){
var email = req.body.email;
var password = req.body.password;
login.login(email,password,function (found) {
console.log(found);
res.json(found);
});
});
app.post('/conteo',function(req,res){
var email = req.body.email;
var usuario1 = req.body.usuario1;
var usuario2 = req.body.usuario2;
var dineroUsuario1 = req.body.dineroUsuario1;
var dineroUsuario2 = req.body.dineroUsuario2;
var user = req.body.user;
var moneda1 = req.body.moneda1;
conteo.conteo(email,usuario1,usuario2,dineroUsuario1,dineroUsuario2,user,moneda1,function (found) {
console.log(found);
res.json(found);
});
});
app.post('/register',function(req,res){
var email = req.body.email;
var password = req.body.password;
var confPass= req.body.confPass;
var nombre= req.body.nombre;
var mascota = req.body.mascota;
var nombreMasc = req.body.nombreMasc;
var usuario1 = req.body.usuario1;
var usuario2 = req.body.usuario2;
var dineroUsuario1 = req.body.dineroUsuario1;
var dineroUsuario2 = req.body.dineroUsuario2;
register.register(email,password, confPass, nombre, mascota, nombreMasc, usuario1, usuario2, dineroUsuario1, dineroUsuario2, function (found) {
console.log(found);
res.json(found);
});
}); };
Con esto tenemos los post para un login, un registro y una moneda insertada, estos los podremos modificar mas adelante de acuerdo a lo que queramos añadir a nuestra aplicación.
Ahora tendremos que cambiar el archivo server.js para incluir este archivo. El archivo quedará así:
var cors= require('cors');
var express= require('express');
var connect= require('connect');
var bodyParser=require('body-parser');
var app=express();
var puerto=8080;
app.all('*',cors());
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
app.use(connect.logger('dev'));
app.use(connect.json());
app.use(bodyParser.urlencoded({extended:true}));
require('./routes/routes.js')(app);
app.get('/',cors(),function(req,res){
return res.json({test:"prueba"}); });
app.post('/login', cors(), function(req,res){
console.log(req.body);
return res.json({test:"prueba2"}); });
app.post('/register', cors(), function(req,res){
return res.json({test:"prueba3"}); });
app.post('/conteo', cors(), function(req,res){
console.log(req.body);
return res.json({test:"prueba4"}); });
app.listen(puerto, function(){
console.log("Servidor corriendo por el puerto"+ puerto); });
Por ultimo habrá que agregar cuatro archivos más para definir el contenido de los POST. Estos archivos son login.js, register.js, conteo.js, models.js. Estos archivos deben crearse en una carpeta llamada config dentro de la carpeta node_modules y en uno de estos es donde haremos la conexión a nuestra base de datos.
La base de datos que utilizaremos será MongoDB ya que esta trabaja bien con NodeJS. Para crear nuestra base de datos iremos a MongoLab, nos registramos, damos clic en el botón "create new" con el icono de un rayo en la sección MongoDB deployments. Seleccionamos Amazon Web Services en la opción Cloud, la región la dejamos en lo que esta, en plan escogemos single-node y Sandbox ya que esta es la opción gratis, le damos un nombre (alcanciainteligente por ejemplo) y damos clic en "Create new MongoDB deployment".
Cuando acabemos, la página nos dirigirá a nuestra página de inicio de mongolab con todas nuestras bases de datos, en la lista aparecerá la que recién hemos creado. Daremos clic sobre ella y deberían llegar aquí: imagen
Ahora van a copiar el link mostrado con la descripción "To connect using a driver via the standard MongoDB URI (what's this?):"
Será algo como esto: mongodb://: @ab1234567.mlab.com:34567/basededatosalcancia
Mas abajo hay una sección con diferentes "atributos" de la base de datos, iremos a la pestaña users o usuarios y daremos clic en add database user. Deberán reemplazar ese usuario y contraseña en el link anterior cuando vayan a pegarlo en el archivo models.js quedando así:
mongodb://usuarioanonimo:root@ab1234567.mlab.com:34567/basededatosalcancia
Ahora si podemos pasar a crear el archivo models.js que tendrá lo siguiente:
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var userSchema = mongoose.Schema({
token : String,
nombre: String,
mascota: String,
nombreMasc: String,
email: String,
usuario1: String,
usuario2: String,
dineroUsuario1: Number,
dineroUsuario2: Number,
password: String,
salt : String,
temp_str:String,
user:String,
moneda1:Number });
(aquí va el link que mencionamos antes) :
mongoose.connect('mongodb://usuarioanonimo:root@ab1234567.mlab.com:34567/basededatosalcancia');
module.exports = mongoose.model('usuario', userSchema);
El archivo login.js que como se imaginarán define el login de un usuario ya registrado en nuestra base de datos tiene lo siguiente:
var crypto = require('crypto');
var rand = require('csprng');
var mongoose = require('mongoose');
var gravatar = require('gravatar');
var user = require('config/models');
exports.login = function(email,password,callback,req,res) {
var passwordenterd = password;
user.find({email: email, password:password},function(err,usuario){
if(usuario.length !== 0){
var passworddb = usuario.password;
if(passworddb == passwordentered){
callback({'response':"Login Sucess",'res':true});
}else{
callback({'response':"Invalid Password",'res':false});
} }else {
callback({'response':"User not exist",'res':false});
}
});
}
Para registrar un nuevo usuario en la base de datos tenemos el archivo register.js que contiene lo siguiente:
var crypto = require('crypto');
var rand = require('csprng');
var mongoose = require('mongoose');
var user = require('config/models');
exports.register = function(email,password, nombre, confPass, callback) {
var y=confPass;
var x = email;
var token = crypto.createHash('sha512').update(email +rand).digest("hex");
var newuser = new user({
token: token,
password:password,
nombre:nombre,
mascota:mascota,
nombreMasc:nombreMasc,
usuario1:usuario1,
usuario2:usuario2,
dineroUsuario1:dineroUsuario1,
dineroUsuario2:dineroUsuario2,
email: email,
});
user.find({email: emai,password:password},function(err,usuario){
var len = usuario.length;
if(len === 0){
newuser.save(function (err) {
callback({'response':"Sucessfully Registered"}); });
}else{ callback({'response':"Email already Registered"}); }}); }
Para contar el dinero tenemos el archivo conteo.js que por ahora tiene esto:
var mongoose = require('mongoose');
var conteo = require('config/models');
exports.conteo = function(email,usuario1,usuario2,dineroUsuario1,dineroUsuario2,user,moneda1,callback) {
var correo=email;
var primerUsuario = usuario1;
var segundoUsuario= usuario2;
var dineroAhorradoUs1=dineroUsuario1;
var dineroAhorradoUs2=dineroUsuario2;
var moneda=moneda1;
conteoDinero.findOne({email:email}, function(err,usuario){
if(usuario.usuario1==primerUsuario){
usuario.dineroUsuaro1=usuario.dineroUsuario1+dineroAhorradoUs1;
usuario.save();
callback({'response':"usuario1"});
}
if (usuario.usuario2==segundoUsuario){
usuario.dineroUsuario2=usuario.dineroUsuario2+dineroAhorradoUs2;
usuario.save();
}
});}
Para comprobar que hemos hecho todo adecuadamente, una vez guardados los cambios refrescamos la página y volvemos a introducir el comando node server.js en el terminal, cuando aparezca el aviso de "servidor corriendo por el puerto 8080" probaremos los post que hemos añadido.
Iremos desde Google Chrome a la Chrome Web Store y buscaremos Postman. En mi caso, me aparece de primero en la sección aplicaciones: imagen, le damos añadir a chrome y esperamos. Una vez añadido le damos iniciar, nos pedira ingresar o crear una cuenta.
Vamos a volver un momento a codepicnic a nuestra consola en donde deberán ver una serie de iconos en la parte superior derecha , así: imagen. Si les aparece así darán clic en el icono de play; si por el contrario les aparece un icono de un mundo, darán clic en este; ambos los redirigirán a una página con un link bastante largo que deberán copiar y guardar en un lugar donde puedan acceder a él fácilmente. Con este link irán a postman, lo pegarán en donde dice Enter URL request. ver imagen
Pondrán POST en lugar de GET en el menú desplegable justo al lado y al final del lnk pondrán /login por ejemplo para probar si funciona este archivo en particular (login.js).
Van a la pestaña que diga body justo debajo del espacio para pegar el url, marcan la opción raw y escriben lo siguiente:
{
"user":"daniela",
"moneda1":4
}
y le dan send, como respuesta debería aparecerles lo siguiente: ver imagen. Con esto comprobamos que los POST están bien definidos y que nuestro servidor responde correctamente a las solicitudes de los clientes.
Step 18: Paso 3: Desarrollo De La Aplicación Móvil
Para el desarrollo de la aplicación móvil se utilizó Android Studio.
¿Cómo funciona?
La aplicación recibe información por medio de Wi-Fi. Esta información corresponde a cambios en el estado de comunicación entre cada par de ledes infrarrojos de los orificios de las monedas.
De acuerdo a qué pin del Arduino llega la información del cambio del estado de la comunicación de los sensores, el total de dinero ahorrado incrementa en el valor correspondiente.
Para crear esta aplicación en Android Studio lo primero es crear un proyecto y seleccionar una actividad vacía. Ver imagen
Por defecto Android Studio crea una clase java y un layout, esta clase se llama MainActivity y el layout se llama activity_main.xml. En los xml se diseñan las interfaces y en la clase java se realizan las interacciones entre estas interfaces.
Para esta aplicación se realizan tres clases (MainActivity, RegistroActivity y InicioActivity) y tres layouts (activity_inicio, activity_main y activity_registro).
La clase principal es MainActivity y en ella se realiza el login con la conexión a el servidor y la base de datos en MongoDB, acá también tiene habilitada la opción para ir al registro.
El layout que corresponde a la clase MainActivity es activity_main y en el se diseña la interfaz del login, en esta interfaz se le presenta al usuario un campo para agregar su correo, otro para la contraseña y dos botones, uno para ingresar a la aplicación y otro para ir al registro si aún no tiene cuenta. Ver imagen del login
La segunda clase es RegistroActivity y en ella se realiza el registro de los datos del usuario, cuando el usuario presiona el botón registrar, los datos que ingreso se guardan en la base de datos en MongoDB.
El layout que corresponde a la clase RegistroActivity es activity_registro y en el se diseña la interfaz del registro, en esta interfaz se le presenta al usuario cuatro campos que corresponden al nombre del usuario, el correo, la contraseña y la confirmación de la contraseña. También tiene dos botones para seleccionar una mascota virtual y dos botones, uno para confirmar el registro y otro para cancelarlo. Ver imagen del registro.
La última clase es InicioActivity esta clase es la que aparece cuando el usuario ingresa a la aplicación o cuando se registra y podrá encontrar un menú que lo llevará a las diferentes funciones que tiene la aplicación, en este caso solo se encuentra la función que permite que el usuario vea el dinero que lleva ahorrado en la alcancía. El layout que corresponde a esta clase es activity_inicio y en el se encuentra diseñada la interfaz del inicio con el menú desplegable y la función mencionada anteriormente. Ver imagen del inicio
Si deseas descargar el proyecto completo da clic en el siguiente link:
