Antes de empezar recordar que este tutorial forma parte de una cadena de tutoriales en las que pretendo simplemente probar tecnologías actuales. Aquí abajo podrás encontrarlos :
- Primero pasos con TypeScript con Microsoft Visual Studio Code
- Integración de GitHub / Git / GibHub Desktop y MS Visual Studio Code
- Instalación de Jest con TypeScript y MS Visual Studio Code
- Instalación de Prettier en MS Visual Studio Code
- Introducción a Parcel
- Verificación de formato de código con Eslint
- Configurando Github Actions junto con TypeScript, Jest, Parcel, Eslint y Prettier
- Desplegando nuestra aplicación TypeScript con GitHub Pages
- Iniciando un juego en TypeScript
- Conexión HTTP cliente-servidor con TypeScript
-
Cursores múltiples y otras opciones y extensiones sencillas y útiles en Visual Studio Code
- El juego de la Vida en TypeScript con TDD y medida de cobertura en Jest
- Configuración de Cucumber.js y Jest-Cucumber en Visual Studio Code con TypeScript
También me gustaría que vieras este video de 2 minutos para entender dónde estamos y a dónde vamos
https://twitter.com/i/status/1214946355023634432
Mi equipo es Mac
macOS Catalina
Versión 10.15.2
MacBook Pro (15-inch, 2018)
Procesador 2,9 GHz Intel Core i9 de 6 núcleos
Memoria 32 GB 2400 MHz DDR4
Gráficos Intel UHD Graphics 630 1536 MB
Siguiendo nuestra colección de tutoriales sobre el desarrollo de TypeScript nos quedaba un punto interesante, el almacenamiento y recuperación de datos del servidor.
Cesar Alberca proponía la utilización de Firebase y la verdad es que es una solución muy sencilla y transparente.
Antes de seguir os invito ver este video que me ha ayudado mucho: Firebase – Ultimate Beginner’s Guide en
https://www.youtube.com/watch?v=9kRgVxULbag
Lo primero que vamos a hacer es abrirnos una cuenta en Firebase.
Una vez creada, podemos darle a “Añadir Proyecto”.
Le he llamado “juegoroberto”.
Te dice que si quieres añadir Analytics. Yo en este caso le he dicho que no.
Se nos crea nuestro nuevo proyecto.
Uso el plan gratuito.
Cuando usemos una aplicación Web o movil debemos decidir el tipo de autenticación.
Podemos utilizar anónima o usuario y contraseña para registrar a priori algunos.
Ahora vamos a crear una base de datos. Voy a elegir Firestore.
Defino el modo de prueba para la base de datos, en 30 días se desactivará sin hacer nada.
Elegimos la ubicación, es este caso eur3 (europe-west). Estos detalles habría que mirarlos con cariño por temas de LOPD y RGPD.
Vamos a crear una colección.
La llamo coleccionjuego.
La bases de datos son estilo MongoDB, noSQL donde cada entrada es un documento JSON.
Vamos a insertar un nuevo documento (con id automático) y dos campos: usuario y Puntuación (no creo que sea una buena idea crear campos con mayusculas ni acentos) pero he probado y funciona todo correctamente.
Ahora vamos a conseguir las credenciales para poder acceder desde una aplicación. Para ello damos a registrar aplicación Web.
Nos genera una entrada que tenemos que simplemente copiar y pegar en nuestro documento TypeScript.
Ahora nos vamos a MS Visual Studio Code.
Si no tenemos el proyecto configurado para node escribiremos npm init para conseguir un fichero package.json.
Como nosotros partimos de nuestro proyecto solamente tendremos que ejecutar npm install -save firefase.
Os recomiendo actualizar las dependencias.
En mi caso he creado un nuevo script en package.json para ejecutarlo de vez en cuando.
«updatempm»: «npm update –save/–save-dev -f»
Nuestro proyecto tendrá un fichero indexfirebase.html y otro llamado indexfirebase.ts con el código que ejecutaremos.
Modifico el Script de Parcel para arrancar automáticamente ese nuevo html. (indexfirebase.html).
Ahora vamos a instalar las herramientas de Firebase. Usamos el comando:
npm install -g firebase-tools
Una vez instalados los paquetes vamos a hacer login en local para tener acceso a la información del servidor desde nuestro entorno de desarrollo.
Firebase login
Nos pide que nos loguemos con nuestra cuenta y le damos permisos.
Nos dice que todo ha ido bien,
Ahora desde la línea de comando podemos usar el comando: firebase init database
Nos aparecen unas pantallas a modo de menú.
Automáticamente nos crea los ficheros que necesitamos para trabajar: firebase.json
Y database.rules.json
También un fichero .firebaserc
Con esto ya tenemos todo lo que necesitamos para la infraestructura,
Solamente necesitamos escribir el código para acceder a nuestra colección y recuperar un documento.
Y podemos comprobar en la consola cómo lo recuperamos.
Podemos irnos a la Web de firebase e insertar otros documentos.
Por suerte, tenemos también extensiones de MS Visual Studio Code que nos permiten manipular nuestra base de datos sin salir del entorno. Instalamos Firebase Explorer.
Ahora aparece una nueva opción en la que podemos ver la base de datos, colección, y documentos.
Es más, con el botón derecho podemos generar el código para acceder al documento seleccionado.
Vamos ahora a aprender como insertan un documento,
Este es el código (función add).
let nuevosdatos = {
usuario: "Pepitop",
Puntuación: "88"
};
console.log("Añadimos documento");
// Add a new document in collection "cities" with ID 'LA'
let setDoc = bd
.collection("coleccionjuego")
.add(nuevosdatos);
let addDoc = bd.collection('coleccionjuego').add({
usuario: 'Ana',
Puntuación: 20
}).then(ref => {
console.log('Añadido documento con referencia: ', ref.id);
});
Ahora vamos a ver cómo recuperamos documentos (5) ordenados por puntuación (descendente).
let colleccionResultados = bd.collection("coleccionjuego");
let consulta = colleccionResultados
.orderBy("Puntuación", "desc")
.limit(5)
.get()
.then(snapshot => {
if (snapshot.empty) {
console.log("No se encontraron documentos.");
return;
}
snapshot.forEach(doc => {
console.log(doc.id, "=>", doc.data());
});
})
.catch(err => {
console.log("Error recuperando documentos", err);
});
Podemos ver el resultado en el navegador.
Aquí tenéis el fichero fuente completo con varias operaciones funcionando.
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
let firebase = require("firebase/app");
// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");
var firebaseConfig = {
apiKey: "AIzaSyB-dhySzacXWXrD3bv-PwGC7UB-Ww",
authDomain: "juegoroberto-ac9a2.firebaseapp.com",
databaseURL: "https://juegoroberto-ac9a2.firebaseio.com",
projectId: "juegoroberto-ac9a2",
storageBucket: "juegoroberto-ac9a2.appspot.com",
messagingSenderId: "9676380639",
appId: "1:967619380639:web09fec166a9aa"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
let bd: any = firebase.firestore();
let coleccionDoc: any = bd
.collection("coleccionjuego")
.doc("qUlVB9JrQbDjyraailYq");
coleccionDoc.get().then(doc => {
let datos = doc.data();
// console.log("Mostramos los datos " + datos.usuario);
});
/*
let nuevosdatos = {
usuario: "Pepitop",
Puntuación: "88"
};
console.log("Añadimos documento");
// Add a new document in collection "cities" with ID 'LA'
let setDoc = bd
.collection("coleccionjuego")
.add(nuevosdatos);
let addDoc = bd.collection('coleccionjuego').add({
usuario: 'Ana',
Puntuación: 20
}).then(ref => {
console.log('Añadido documento con referencia: ', ref.id);
});
*/
let colleccionResultados = bd.collection("coleccionjuego");
let consulta = colleccionResultados
.orderBy("Puntuación", "desc")
.limit(5)
.get()
.then(snapshot => {
if (snapshot.empty) {
console.log("No se encontraron documentos.");
return;
}
snapshot.forEach(doc => {
console.log(doc.id, "=>", doc.data());
});
})
.catch(err => {
console.log("Error recuperando documentos", err);
});
Bueno, supongo que habréis visto lo fácil que es tener una base de datos en el servidor donde guardar de un modo transparente nuestra información y su recuperación.
Con todos los componentes resueltos ya solo nos queda hacer nuestro programa, nuestro juego de Arkanoid.
