Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • Primero necesitaremos un nuevo modal que permita grabar y revisar el audio a adjuntar en el mensaje. Lo llamaremos RecordModalComponent.
  • Ahora debemos ajustar acción uploadMessageFile para dar cabida al audio.
async uploadMessageFile({ rootGetters }, { roomID, file, type }) {
...
	const ext = type === "photo" ? "jpg" : "wav";
	const uploadPhoto = () => {
	  let fileName = `rooms/${roomID}/messages/${userUID}-${timestamp}.${ext}`;
	  return storage.ref(fileName).put(file);
	};
...
}
  • Acto seguido debemos añador botón, método y propiedad audio en el modelo de ViewRoom.
async recordAudio() {
	try {
	  this.audio = await this.$store.dispatch("utils/requestConfirmation", {
	    props: {
	      message: "Record your voice 🎤"
	    },
	    component: "RecordModal"
	  });
	} catch (error) {
	  this.$toast.error(error.message);
	}
},
  • Por último podemos completar el método createMessage con el nuevo posible audio.
if (this.audio) {
  this.audioURL = await this.$store.dispatch("messages/uploadMessageFile", {
    roomID: this.id,
    file: this.audio,
    type: "audio",
  });
}
Código inicial
Aprende Firebase en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?

Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬