Que tal queridos lectores. Después de un buen rato de ausencia hemos regresado con los tutoriales!!!
En esta ocasión voy a explicar como lograr la practica que hicimos hace algunos días en Facebook, en la cual hicimos un vídeo en vivo desde nuestra pagina da ARDUINO CENTER, cuando los usuarios comentaban dentro del directo en un display LCD conectado al Nodemcu se mostraba su nombre. Aquí les dejo el link de esa transmisión.
Listo, explicado lo anterior vamos al lío!!
Para realizar esta practica necesitamos lo siguiente:
1 NodeMCU.
1 Diplay LCD 16x2.
1 Modulo I2C.
Editor de texto para HTML. (yo uso Sublime Text).
Cuenta de desarrollador de Facebook.
Arduino IDE para programar el NodeMCU.
Cuenta de Google para utilizar Firebase.
Pagina de Facebook para transmitir en vivo.
Primero vamos a configurar la cuenta de Facebook de desarrollador, para esto vamos a este link:
En la ventana principal vamos a crear una nueva aplicacion dando clic en "Mis aplicaciones" y "Agregar una aplicacion".
Le damos un nombre a la aplicación, escribimos un correo de contacto y damos en "Crear identificador de la aplicación":.
Estando en el dashboard damos clic en Documentos que se encuentra en la esquina superior derecha.
En la ventana siguiente damos clic en el menú "Herramientas y ayuda".
Después en "Explorador de la API Graph":
Clic en "Graph API Explore" y elegimos el nombre de la aplicación que acabamos de crear:
Ahora damos clic en "Obtener token" y en la lista desplegable elegimos la pagina de Facebook desde la que trasmitiremos el vidéo.
Listo ya hemos creado el Token de acceso a la aplicación, solo copiamos y guardamos para usarlo después.
Ahora vamos con Firebase.
Primero tenemos que ir a FIREBASE y loguearnos con una cuenta de gmail, en caso de no tenerla hay que crearla. Oprimimos el boton "Ira a la Consola".
Seguido de esto vamos a crear un proyecto nuevo oprimiendo "Add project"
En el cuadro que se despliega debemos elegir un nombre para nuestro proyecto y seleccionar la region en la que nos encontramos y oprimir el boton "Create Project".
Estando en el dashboard damos clic en "Agregar Firebase a u app web".
En la siguiente ventana nos aparece un script de JavaScript que debemos copiar y después pegar en nuestro HTML que les dejare posteriormente.
Ahora tenemos que cambiar las "reglas" de la Base de Datos ya que por default están restringidas a solo usuarios autenticados, pero para efectos de esta practica no es necesario que sea así. Para esto entramos a la BD (Base de Datos) oprimiendo el botón correspondiente luego en el boton "COMENZAR".
En la siguiente ventana nos aparece un script de JavaScript que debemos copiar y después pegar en nuestro HTML que les dejare posteriormente.
Ahora tenemos que cambiar las "reglas" de la Base de Datos ya que por default están restringidas a solo usuarios autenticados, pero para efectos de esta practica no es necesario que sea así. Para esto entramos a la BD (Base de Datos) oprimiendo el botón correspondiente luego en el boton "COMENZAR".
En la pestaña de reglas (rules) debemos cambiar lo que esta dentro de el recuadro negro por lo siguiente:
{
"rules": {
".read": "true",
".write": "true"
}
}
Al momento de cambiar las reglas tenemos que oprimir el botón "Publicar" para que los cambios surtan efecto. En caso de que nos aparezca una leyenda advirtiendo que cualquiera podrá leer y escribir en la BD solo damos clic al botón "Dismiss" y listo.
Hecho esto ya podemos leer y escribir en nuestra BD.
Por ultimo tenemos que copiar la URL de la BD para después usarla en el script y en el código de el Nodemcu, para esto regresamos a la pestaña "Datos" y damos clic a la URL, copiamos con CTRL+C y pegamos en algún Archivo de texto para utilizarla posteriormente.
Listo, ya terminamos con la parte de Firebase, ahora continuemos con el script.
Aquí esta el código HTML que yo utilice, también se los dejare al final para que puedan descargarlo.
En el código anterior debemos de poner el ID de la transmisión en vivo de Facebook,explicare a continuación como obtenerlo:
1.- Creamos una transmisión en vivo.
2.- Cuando comience la transmisión damos clic donde dice cuanto tiempo tienes transmitiendo.
3.- Al dar clic nos va a mandar a una pagina nueva de donde extraeremos el ID de la barra de dirección(es el segundo numero):
Ya con esto tenemos el id de la transmisión, el cual debemos pegar en el código Html que puse arriba.
Ahora vamos con la parte del NodeMCU.
La conexión es muy sencilla, de todos modos les dejo el esquema:
El código para el NodeMCU:
Hasta aquí llega esta entrada, espero les funcione y de no ser así no duden en comentar su dudas, problemas o sugerencias en este mismo post!
Video Tutorial y prueba de funcionamiento:
Aquí el enlace a la carpeta que contiene los archivos utilizados en la practica:
https://drive.google.com/open?id=123sQZz1BmjX9hsxKAjZFMk25wFF9vnzF
Facebook API Graph documentación:
https://developers.facebook.com/docs/graph-api
0 comentarios:
Publicar un comentario