cd ejemplo1
npm install angularfire2 firebase
crear un archivo credentials.ts y agregarle el codigo que aparece en la consola de firebase:
(en la ruedita de configuracion, al lado del texto "Descripcion general..." luego en el icono </>)
export var firebaseConfig = {
apiKey: "AIzaSyA1LFnrg7kJ7bevnFIVcNDIxxxxxxxxxxxxxx",
authDomain: "prueba2-b3344.xxxxxxxxxxxxxxxx.com",
databaseURL: "https://prxxxxxxxxxxx44.fxxxxxxxxxxxxxxxxeio.com",
projectId: "pruexxxxxxxxxxxxxxxxx",
storageBucket: "pxxxxxxxxxxxxxxxxx.com",
messagingSenderId: "398794336943"
};
app.module.ts:
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { firebaseConfig } from './credentials';
imports: [
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule,
AngularFireStorageModule
],
Crear una interfaz competidor.ts:
export class Competidor {
id: string;
numero: number;
nombre: string;
apellido: string;
}
Crear un servicio:
ng generate service firestore-service
firestore-service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Competidor } from '../_modelos/competidor';
@Injectable({
providedIn: 'root'
})
export class FirestoreServiceService {
constructor(public firestore: AngularFirestore) {}
buscarCompetidor(id: string): AngularFirestoreDocument<Competidor> {
return this.firestore.collection(`competidores`).doc(id);
}
actualizarCompetidor(comp: Competidor): Promise<void> {
return this.firestore.doc(`competidores/${comp.id}`).update({
numero: comp.numero,
nombre: comp.nombre,
apellido: comp.apellido
});
}
guardarCompetidor(comp: Competidor): Promise<void> {
const id = this.firestore.createId();
return this.firestore.doc(`competidores/${id}`).set({
id: id,
numero: comp.numero,
nombre1: comp.nombre,
apellido1: comp.apellido
});
}
listaCompetidores(): AngularFirestoreCollection<Competidor> {
return this.firestore.collection(`competidores`);
}
}
Guardar y recuperar imagenes
<div>
<img src="./assets/noimage.png" id="previewFoto" name="previewFoto" style="width: 150px; height: 150px;cursor: pointer" onClick="document.getElementById('foto').click();" />
</div>
<input class="form-control form-control-sm" id="foto" type="file" accept=".png,.jpg,.jpeg" (change)="upload($event)"
#fileInput style="display: none">
competidor.component.ts
import { FirestoreServiceService } from '../../../_servicios/firestore-service.service';
import { AngularFireStorage } from 'angularfire2/storage';
constructor(private http: Http, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router, private data : CompetidoresService, private fbservice: FirestoreServiceService,
private storage: AngularFireStorage) {
let id = null;
this.createForm();
this.route.params.subscribe(params => {
id = params["id"];
});
this.form.patchValue({id: id});
if (id != 0)
{
this.fbservice.buscarCompetidor(id).valueChanges().subscribe((datos) => {
let competidor = datos;
this.form.patchValue({
id: competidor.id,
numero: competidor.numero,
nombre: competidor.nombre,
apellido: competidor.apellido
foto: competidor.foto
});
document["previewFoto"].src = competidor.foto;
});
}
}
upload(event) {
this.fotoAux = event.target.files[0];
if (event.target.files.length > 0) {
let file = event.target.files[0];
var preview = document.querySelector('img');
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result.toString();
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
}
onSubmit() {
let idImagen = this.form.get("nombre1").value + "_" + this.form.get("apellido1").value;
this.storage.upload(`/mko/imagenes/${idImagen}`, this.fotoAux);
let downloadURL =
this.storage.ref(`/mko/imagenes/${idImagen}`).getDownloadURL().subscribe(d => {
this.form.patchValue({foto: d});
comp.foto = this.form.get("foto").value;
this.fbservice.buscarCompetidor(comp.id).valueChanges().subscribe(d => {
if (!d) {
this.fbservice.guardarCompetidor(comp).then(() => {
this.router.navigate(['/competidores/lista']);
});
} else
{
this.fbservice.actualizarCompetidor(comp).then(() => {
this.router.navigate(['/competidores/lista']);
});
}
});
});
}
