From 60186fd4824dd9e06460fbe056a2724df51a6b9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Villanueva?= Date: Sat, 18 Jul 2020 20:21:39 -0300 Subject: [PATCH 1/6] docs: add README file in spanish --- README.md | 3 ++ README_es.md | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 139 insertions(+) create mode 100644 README_es.md diff --git a/README.md b/README.md index f8aa9ddfc..37996a8b7 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,9 @@ The official [Angular](https://angular.io/) library for [Firebase](https://fireb ng add @angular/fire ``` +[Spanish version](README_es.md) + + ## What is AngularFire? - **Observable based** - Use the power of RxJS, Angular, and Firebase. diff --git a/README_es.md b/README_es.md new file mode 100644 index 000000000..6add57d0b --- /dev/null +++ b/README_es.md @@ -0,0 +1,136 @@ +# AngularFire +La librería oficial de [Angular](https://angular.io/) para [Firebase](https://firebase.google.com/). + +```bash +ng add @angular/fire +``` + +## ¿Qué es AngularFire? + +- **Observable based** - Usa el poder de RxJS, Angular y Firebase. +- **Realtime bindings** - Sincroniza datos en tiempo real. +- **Authentication** - Inicia sesión con una variedad de proveedores, y monitorea el estado de la autenticación. +- **Offline Data** - Almacena datos offline automáticamente con AngularFirestore. +- **Server-side Render** - Genera HTML estático para aumentar el rendimiento o crear sitios estáticos. +- **ngrx friendly** - Integre con ngrx utilizando las APIs basadas en acciones de AngularFire. +- **Manage binary data** - Carga, descarga y elimina archivos binarios como imágenes, videos y otros blobs. +- **Call server code** - LLama directamente Cloud Functions, sin servidores de por medio y pasasndo el contexto usuario automáticamente. +- **Push notifications** - Registra y escucha notifiaciones push. +- **Modular** - Incluye solo que necesitas. Ningún paquete de AngularFire sobrepasa los 4kb, la mayoria por debajo de 2kb (gzipped). + +## Inicio Rápido + +Levanta y ejecuta tu primera aplicacion solo siguiendo nuestra [guía de inicio rápido](docs/install-and-setup_es.md). (en proceso de traducción) + +## Ejemplo de uso: + +```ts +import { Component } from '@angular/core'; +import { AngularFirestore } from '@angular/fire/firestore'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'app-root', + template: ` + + ` +}) +export class MyApp { + items: Observable; + constructor(firestore: AngularFirestore) { + this.items = firestore.collection('items').valueChanges(); + } +} +``` + +## Recursos + +[Contribuyedo](CONTRIBUTING.md) (en proceso de traducción). + +[Plantilla Stackblitz](https://stackblitz.com/edit/angular-fire-start) - Recuerda colocar tu configuración de Firebase en `app/app.module.ts`. + +[¿Actualizando a v6.0? Mira nuestra guia.](docs/version-6-upgrade.md). (en proceso de traducción) + +**¿Tienes problemas?** Obtén ayuda en el [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk) (apoyado oficialmente), la [Comunidad Firebase en Slack](https://firebase.community/) (busca en el canal `#angularfire2`), [Gitter](https://gitter.im/angular/angularfire2), o [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2). + +## Guía de Desarrolladores + +### **NUEVO:** Monitorea el uso de tu aplicación en producción + +> `AngularFireAnalytics` provee un método conviente para interactuar con Google Analytics en tu aplicación Angular. `ScreenTrackingService` y `UserTrackingService` registran eventos automáticamente cuando estás usando el Router de Angular o Firebase Authentication respectivamente. [Conoce más sonre Google Analytics](https://firebase.google.com/docs/analytics). + +- [Comenzando con Google Analytics](docs/analytics/getting-started.md). (en proceso de traducción) + +### Interactúa con tu(s) base(s) de datos + +Firebase ofrece 2 soluciones de base de datos, accesibles al cliente basadas en la nube para sincronización de datos en tiempo real. [Conoce las diferencias entre ellas en la documentación de Firebase](https://firebase.google.com/docs/firestore/rtdb-vs-firestore). + +#### Cloud Firestore + +> `AngularFirestore` te permite trabajar con Cloud Firestore, la nueva base de datos insignia para el desarrollo de aplicaciones móviles. Mejorada sobre el éxito de la Realtime Database, con un nuevo y más intuitivo modelo de datos. Cloud Firestore también presenta consultas más rápidas y un mejor escalamiento en comparación a la Realtime Database. + +- [Documentos](docs/firestore/documents.md). (en proceso de traducción) +- [Colecciones](docs/firestore/collections.md). (en proceso de traducción) +- [Consultando Colecciones](docs/firestore/querying-collections.md). (en proceso de traducción) +- [Datos Offline](docs/firestore/offline-data.md). (en proceso de traducción) + +#### Realtime Database + +> `AngularFireDatabase` te permite trabajar con la Realtime Database, la base de datos original de Firebase. Es una solución eficiente y de baja latencia para aplicaciones movíles que requieren estado sicronizados entre clientes en tiempo real. + +- [Objetos](docs/rtdb/objects.md). (en proceso de traducción) +- [Listas](docs/rtdb/lists.md). (en proceso de traducción) +- [Consultando Listas](docs/rtdb/querying-lists.md). (en proceso de traducción) + +### Auténtica usuarios + +- [Comenzando con Firebase Authentication](docs/auth/getting-started.md). (en proceso de traducción) +- [Enruta usuarios con AngularFire guards](docs/auth/router-guards.md). (en proceso de traducción) + +### Carga archivos + +- [Comenzando con Cloud Storage](docs/storage/storage.md). (en proceso de traducción) + +### Recibe notificaciones push + +- [Comenzando con Firebase Messaging](docs/messaging/messaging.md). (en proceso de traducción) + +### **BETA:** Cambia el comportamiento y la apariencia de tu aplicacion sin desplegar nuevamente + +> Firebase Remote Config es un servicio en la nube que te permite cambiar el comportamiento y la apariencia de tu aplicación sin necesidad de que los usuarios descarguen una actualización de tu app. [Conoce más sobre Remote Config](https://firebase.google.com/docs/remote-config). + +- [Comenzando con Remote Config](docs/remote-config/getting-started.md). (en proceso de traducción) + +### **NEW:** Monitorea el rendimiento de tu aplicación en producción + +> Firebase Performance Monitoring es un servicio que te ayuda a comprender mejor las características de rendimiento de tus aplicaciones iOS, Android y web. [Conoce más sobre Performance Monitoring](https://firebase.google.com/docs/perf-mon). + +- [Comenzando con Performance Monitoring](docs/performance/getting-started.md). (en proceso de traducción) + +### Invoca directamente Cloud Functions + +- [Comenzando con Callable Functions](docs/functions/functions.md). (en proceso de traducción) + +### Despliega tu aplicación + +> Firebase Hosting es un hospedaje de contenido web con grado de producción para desarrolladores. Con Hosting, podrás desplegar rápida y fácilmente aplicaciones web y contenido estático en una red global de distribución de contenido (CDN) con un solo comando. + +- [Despliega tu aplicación en Firebase Hosting](docs/deploy/getting-started.md). (en proceso de traducción) + +#### Server-side rendering + +> Angular Universal es una tecnología que te permite ejecutar tu aplicación Angular en un servidor. Esto genera HTML en un proceso llamado renderizado del lado del servidor (SSR). Angularfire es compatible con renderizado del lado del servidor; permitiendole tomar ventanjas de la Optimización para Motores de Búsqueda (SEO), pre-visualización de enlaces, ganancia en rendimiento y más. [Conoce más sobre Angular Universal](https://angular.io/guide/universal). + +- [Comenzando con Angular Universal](docs/universal/getting-started.md). (en proceso de traducción) +- [Desplegando tu aplicación Universal en Cloud Functions para Firebase](docs/universal/cloud-functions.md). (en proceso de traducción) +- [Prerenderiza aplicación Universal](docs/universal/prerendering.md). (en proceso de traducción) + +### Ionic + +- [Instalación y Configuración con Ionic CLI](docs/ionic/cli.md). (en proceso de traducción) +- [Utilizando AngularFire con Ionic 2](docs/ionic/v2.md). (en proceso de traducción) +- [Utilizando AngularFire con Ionic 3](docs/ionic/v3.md). (en proceso de traducción) From 7ca985b7d4d766dcacf754807dd1dd7617c1a49e Mon Sep 17 00:00:00 2001 From: Andres Villanueva Date: Wed, 8 Jun 2022 09:33:57 -0300 Subject: [PATCH 2/6] docs: add couple of accents --- README_es.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README_es.md b/README_es.md index 6add57d0b..26325ba1d 100644 --- a/README_es.md +++ b/README_es.md @@ -20,7 +20,7 @@ ng add @angular/fire ## Inicio Rápido -Levanta y ejecuta tu primera aplicacion solo siguiendo nuestra [guía de inicio rápido](docs/install-and-setup_es.md). (en proceso de traducción) +Levanta y ejecuta tu primera aplicación solo siguiendo nuestra [guía de inicio rápido](docs/install-and-setup_es.md). (en proceso de traducción) ## Ejemplo de uso: @@ -49,11 +49,11 @@ export class MyApp { ## Recursos -[Contribuyedo](CONTRIBUTING.md) (en proceso de traducción). +[Contribuyendo](CONTRIBUTING.md) (en proceso de traducción). [Plantilla Stackblitz](https://stackblitz.com/edit/angular-fire-start) - Recuerda colocar tu configuración de Firebase en `app/app.module.ts`. -[¿Actualizando a v6.0? Mira nuestra guia.](docs/version-6-upgrade.md). (en proceso de traducción) +[¿Actualizando a v6.0? Mira nuestra guía.](docs/version-6-upgrade.md). (en proceso de traducción) **¿Tienes problemas?** Obtén ayuda en el [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk) (apoyado oficialmente), la [Comunidad Firebase en Slack](https://firebase.community/) (busca en el canal `#angularfire2`), [Gitter](https://gitter.im/angular/angularfire2), o [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2). From 778fdb0e872bfa355121f5271c5f29aa6401b1f9 Mon Sep 17 00:00:00 2001 From: Andres Villanueva Date: Fri, 10 Jun 2022 10:39:55 -0300 Subject: [PATCH 3/6] docs: fix gramatical errors --- README_es.md | 4 ++-- docs/install-and-setup_es.md | 0 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 docs/install-and-setup_es.md diff --git a/README_es.md b/README_es.md index 2b93c98b6..ff9efa8c8 100644 --- a/README_es.md +++ b/README_es.md @@ -83,7 +83,7 @@ AngularFire no sigue el control de versiones de Angular, ya que Firebase tambié ### Polyfills -Ni AngularFire ni Firebase contienen con polyfills. Para tener compatibilidad en una amplia gama de entornos, sugerimos que se agreguen los siguientes polyfills a su aplicación: +Ni AngularFire ni Firebase contienen polyfills. Para tener compatibilidad en una amplia gama de entornos, sugerimos que se agreguen los siguientes polyfills a su aplicación: | API | Entornos | Polyfill Sugerido | Licencia | |-----------------------------|--------------------|--------------------|------------| @@ -94,7 +94,7 @@ Ni AngularFire ni Firebase contienen con polyfills. Para tener compatibilidad en ## Recursos -[Inicio](docs/install-and-setup.md) - Ten tu primera aplicación levantada y corriendo siguiendo nuestra guía de inicio rápido. (en proceso de traducción). +[Inicio Rápido](docs/install-and-setup_es.md) - Ten tu primera aplicación levantada y corriendo siguiendo nuestra guía de inicio rápido. (en proceso de traducción). [Contribuyendo](CONTRIBUTING.md). diff --git a/docs/install-and-setup_es.md b/docs/install-and-setup_es.md new file mode 100644 index 000000000..e69de29bb From e12c8354e35c48fe9ebc0042bd27b3d61ee76650 Mon Sep 17 00:00:00 2001 From: Andres Villanueva Date: Fri, 10 Jun 2022 11:00:25 -0300 Subject: [PATCH 4/6] docs: translate install and setup chapter --- docs/install-and-setup_es.md | 161 +++++++++++++++++++++++++++++++++++ 1 file changed, 161 insertions(+) diff --git a/docs/install-and-setup_es.md b/docs/install-and-setup_es.md index e69de29bb..631f93492 100644 --- a/docs/install-and-setup_es.md +++ b/docs/install-and-setup_es.md @@ -0,0 +1,161 @@ +# AngularFire Inicio Rápido + +### 1. Crea un nuevo proyecto + +```bash +npm install -g @angular/cli +ng new +cd +``` + +El comando `new` del CLI de Angular configurará la última compilación de Angular en una nueva estructura de proyecto. + +### 2. Instala AngularFire y Firebase + +```bash +ng add @angular/fire +``` + +Ahora que tiene un nuevo proyecto configurado, instala AngularFire y Firebase desde npm. + +### 3. Agrega la configuración de Firebase en las variables de entorno. + +Abra `/src/environments/environment.ts` y agregua tu configuración de Firebase. Puede encontrar la configuración de tu proyecto en [Firebase Console](https://console.firebase.google.com). Haz clic en el icono de engranaje junto a Descripción general del proyecto, en la sección Sus aplicaciones, crea una nueva aplicación y elije el tipo Web. Asigna un nombre a la aplicación y copia los valores de configuración proporcionados. + +```ts +export const environment = { + production: false, + firebase: { + apiKey: '', + authDomain: '', + databaseURL: '', + projectId: '', + storageBucket: '', + messagingSenderId: '', + appId: '', + measurementId: '' + } +}; +``` + +### 4. Configura `@NgModule` para `AngularFireModule` + +Abra `/src/app/app.module.ts`, inyecta los `providers` de Firebase y especifica tu configuración de Firebase. + +```ts +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { AppComponent } from './app.component'; +import { AngularFireModule } from '@angular/fire/compat'; +import { environment } from '../environments/environment'; + +@NgModule({ + imports: [ + BrowserModule, + AngularFireModule.initializeApp(environment.firebase) + ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule {} +``` + +### 5. Configuración individual de `@NgModule`s + +Después de agregar AngularFireModule, también debes agregar módulos para los @NgModules individuales que necesita tu aplicación. + +Por ejemplo, si tu aplicación usaba tanto Google Analytics como Firestore, agregaría `AngularFireAnalyticsModule`. + +```ts +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { AppComponent } from './app.component'; +import { AngularFireModule } from '@angular/fire/compat'; +import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics'; +import { AngularFirestoreModule } from '@angular/fire/compat/firestore'; +import { environment } from '../environments/environment'; + +@NgModule({ + imports: [ + BrowserModule, + AngularFireModule.initializeApp(environment.firebase), + AngularFireAnalyticsModule, + AngularFirestoreModule + ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule {} +``` + +### 7. Inyecta `AngularFirestore` + +Abre `/src/app/app.component.ts` y asegúrate de modificar/eliminar cualquier prueba para que la muestra funcione (las pruebas siguen siendo importantes, tu lo sabes): + +```ts +import { Component } from '@angular/core'; +import { AngularFirestore } from '@angular/fire/compat/firestore'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class AppComponent { + constructor(firestore: AngularFirestore) { + + } +} +``` + +### 8. Une una colección de Firebase a tu lista + +En `/src/app/app.component.ts`: + +```ts +import { Component } from '@angular/core'; +import { AngularFirestore } from '@angular/fire/compat/firestore'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class AppComponent { + items: Observable; + constructor(firestore: AngularFirestore) { + this.items = firestore.collection('items').valueChanges(); + } +} +``` + +Abre `/src/app/app.component.html`: + +```html +
    +
  • + {{item.name}} +
    • +
+``` + +### 9. Ejecuta tu aplicación localmente + +```bash +ng serve +``` + +Tu aplicación Angular se compilará y servirá localmente, visítela, deberíamos ver una lista vacía. + +En otra pestaña [comienza a agregar datos a una colección de 'items' en Firestore] (https://firebase.google.com/docs/firestore/manage-data/add-data). *Como aún no estamos autenticando a los usuarios, asegúrate de iniciar Firestore en **modo de prueba** o permitir la lectura de la colección de `items` en Reglas de seguridad (`allow read: if true`).* + +Una vez que hayas creado una colección de `items` y estés insertando documentos, debería ver la transmisión de datos en su aplicación Angular. + +### 10. Despliega tu app + +Finalmente podemos desplegar la aplicación a Firebase hosting: + +```bash +ng deploy +``` \ No newline at end of file From 6aa203fd573c64371541c4c50da9947a3f4360dd Mon Sep 17 00:00:00 2001 From: Andres Villanueva Date: Mon, 13 Jun 2022 11:19:36 -0300 Subject: [PATCH 5/6] docs: translate version 7 upgrade file, add new link to file in README_es --- README_es.md | 4 +- docs/version-7-upgrade_es.md | 299 +++++++++++++++++++++++++++++++++++ 2 files changed, 301 insertions(+), 2 deletions(-) create mode 100644 docs/version-7-upgrade_es.md diff --git a/README_es.md b/README_es.md index ff9efa8c8..da63aaa64 100644 --- a/README_es.md +++ b/README_es.md @@ -94,13 +94,13 @@ Ni AngularFire ni Firebase contienen polyfills. Para tener compatibilidad en una ## Recursos -[Inicio Rápido](docs/install-and-setup_es.md) - Ten tu primera aplicación levantada y corriendo siguiendo nuestra guía de inicio rápido. (en proceso de traducción). +[Inicio Rápido](docs/install-and-setup_es.md) - Ten tu primera aplicación levantada y corriendo siguiendo nuestra guía de inicio rápido. [Contribuyendo](CONTRIBUTING.md). [Plantilla Stackblitz](https://stackblitz.com/edit/angular-fire-start) - Recuerda colocar tu configuración de Firebase en `app/app.module.ts`. -[¿Actualizando a v7.0? Mira nuestra guía.](docs/version-7-upgrade.md). (en proceso de traducción) +[¿Actualizando a v7.0? Mira nuestra guía.](docs/version-7-upgrade_es.md). ### Aplicaciones de muestra diff --git a/docs/version-7-upgrade_es.md b/docs/version-7-upgrade_es.md new file mode 100644 index 000000000..0354ea563 --- /dev/null +++ b/docs/version-7-upgrade_es.md @@ -0,0 +1,299 @@ +# Actualizando a AngularFire 7.0 + +Diseñado para ejecutarse con Angular 12, AngularFire 7.0 le permite aprovechar al máximo el nuevo Firebase JS SDK (v9) tree-shakable, al mismo tiempo, proporciona una experiencia compatible con la API anterior. + +`ng update @angular/fire` + +## Breaking changes + +* Angular 12 es requerido +* AngularFire ahora solo funciona en aplicaciones con Ivy. +* Firebase JS SDK v9 es requerido +* La API AngularFire v6 existente se ha movido de `@angular/fire/*` a `@angular/fire/compat/*` (ver modo de compatibilidad) +* **compat/auth:** El token `USE_EMULATOR` para DI ahora esta en el formulario de `['http://localhost:9099']` + +## Modo de compatibilidad + +AngularFire v7.0 tiene una capa de compatibilidad que admite la API de AngularFire v6.0. Simplemente cambie sus imports de `@angular/fire/*` a `@angular/fire/compat/*` y `firebase/*` a `firebase/compat/*`. + +Si bien no es tan variable como el nuevo SDK modular, esto le permite actualizar y aprovechar los beneficios del nuevo SDK lo antes posible. + +**La mayoría de los desarrolladores pueden detenerse aquí por ahora, ya que la nueva API no está completa.** + +## **NUEVO** SDK Modular + +### Inicialización + +Para admitir mejor la capacidad tree-shakability introducida en Firebase v9 y reducir el mantenimiento requerido cuando el SDK de JS agrega nuevos indicadores de configuración, los "providers" de AngularFire ahora toman una "factory" para una instancia completa del SDK que le gustaría inyectar. + +**Antes:** +```ts +@NgModule({ + imports: [ + AngularFireModule.initializeApp(config), + AngularFirestoreModule.enablePersistence(), + AngularFireStorageModule, + ], + providers: [ + { provide: USE_EMULATOR, useValue: ['localhost', 8080] }, + ], +}) +``` + +**SDK Modular:** +```ts +@NgModule({ + imports: [ + provideFirebaseApp(() => initializeApp(config)), + provideFirestore(() => { + const firestore = getFirestore(); + connectFirestoreEmulator(firestore, 'localhost', 8080); + enableIndexedDbPersistence(firestore); + return firestore; + }), + provideStorage(() => getStorage()), + ], +}) +``` + +### Inyectando servicios + +Antes, cuando inyectaba los servicios SDK de Firebase JS en AngularFire, se cargaban de forma diferida y se le devolvía un "promise-proxy. En AngularFire v7 obtienes el servicio iniciado directamente. Ya no cargamos de manera "lazy" por ti. + +```ts +import { Firestore, doc, onSnapshot, DocumentReference, docSnapshots } from '@angular/fire/firestore'; + +@Component({}) +export class Foo { + doc: DocumentReference; + constructor( + firestore: Firestore, // Injects the instantiated Firestore instance + ) { + // You can directly operate on the instance with JS SDK methods which we've + // reexported in AngularFire + this.doc = doc(firestore, 'foo/1'); + onSnapshot(doc, snap => { + // ... + }); + // or use the convenience observables + docSnapshots(doc).subscribe(...); + } + async update() { + await updateDoc(this.doc, { ... }); + ... + } +} +``` + +### Trabajando con multiple apps / instances + +En AngularFire v7, trabajar con múltiples instancias fue difícil, en el nuevo SDK tenemos nuevos tokens DI que hacen que trabajar con ellos sea mucho más sencillo. + +```ts +@NgModule({ + imports: [ + provideFirebaseApp(() => initializeApp(config)), + provideFirebaseApp(() => initializeApp(config2, 'anotherApp')), + provideStorage(() => getStorage()), + provideStorage(() => getStorage(getApp(), 'anotherBucket')), + provideStorage(() => getStorage(getApp('anotherApp'))), + ], +}) +``` + +```ts +import { FirebaseApp, FirebaseApps } from '@angular/fire/app'; +import { Storage, StorageInstances } from '@angular/fire/storage'; + +export class Foo { + constructor( + defaultApp: FirebaseApp, // Injects the default FirebaseApp + allFirebaseApps: FirebaseApps, // Injects an array of all initialized Firebase Apps + storage: Storage, // Injects the default storage instance + allStorageInstances: StorageInstances, // Injects an array of all the intialized storage instances + ) { } +} +``` + +Cómo han cambiado las funciones de los principales tokens de inyección (es decir, `FirebaseApp`, `Storage`) desde v7, pero debería proporcionar una API mucho más poderosa e intuitiva. + +### API + +Más allá de la inyección de dependencia AngularFire presenta una API completamente nueva: + +1) Ya no manejamos la carga diferida de los módulos SDK de Firebase JS por usted +1) Ya no brindamos clases más allá de la inyección de dependencia +1) No más Proxy / Promise-Proxy +1) Reexportamos y empaquetamos en zonas todas las API de Firebase y RxFire + +Por lo tanto, desarrollar con el nuevo AngularFire es fácil, puede usarlo como el SDK estándar de Firebase JS. Simplemente cambie todas sus importaciones de `firebase/app` a `@angular/fire/app`, `firebase/firestore` a `@angular/fire/firestore`, `firebase/database` a `@angular/fire/database`, etc. Entonces, si se siente cómodo con RXJS y le gustaría usar algunos de nuestros operadores de conveniencia, puede sumergirse en esa caja de herramientas. + +#### Alternatives to v6 APIs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
v6 / Compatv7 Modular
AngularFirestoredoc + +```ts +import { doc } from '@angular/fire/firestore'; +doc(firestore, 'foo/bar') // DocumentReference +``` +
collection + +```ts +import { collection } from '@angular/fire/firestore'; +collection(firestore, 'foo') // CollectionReference +``` +
collectionGroup + +```ts +import { collectionGroup } from '@angular/fire/firestore'; +collectionGroup(firestore, 'foo') // Query +``` +
AngularFirestoreDocumentset + +```ts +import { setDoc } from '@angular/fire/firestore'; +setDoc(docRef, { ... }) // Promise +``` +
update + +```ts +import { updateDoc } from '@angular/fire/firestore'; +updateDoc(docRef, { ... }) // Promise +``` +
delete + +```ts +import { deleteDoc } from '@angular/fire/firestore'; +deleteDoc(docRef) // Promise +``` +
collection + +```ts +import { collection } from '@angular/fire/firestore'; +collection(docRef, 'bar') // CollectionReference +``` +
snapshotChanges + +```ts +import { docSnapshots } from '@angular/fire/firestore'; +docSnapshots(docRef) // Observable> +``` +
valueChanges + +```ts +import { docData } from '@angular/fire/firestore'; +docData(docRef) // Observable +``` +
get + +```ts +import { getDoc } from '@angular/fire/firestore'; +getDoc(docRef) // Promise> +``` + +
+ +### "Code splitting " y "lazy-loading" + +AngularFire ya no realiza la carga diferida de los servicios. Hemos proporcionado un asistente observable para detectar cuándo se crea una nueva instancia de servicio. En este ejemplo, dividiremos el código de todo el código relacionado con Firestore y la carga diferida + +```ts +// firestore_operations.ts +import { + collectionData, + firestoreInstance$, + collection, + getFirestore +} from '@angular/fire/firestore'; +import { first } from 'rxjs/operators'; +import { IFoo } from '../interfaces'; + +export { getFirestore }; + +export const fooData = firestoreInstance$.pipe( + first(), + concatMap(firestore => collectionData(collection(firestore, 'foo'))), +); +``` + +```ts +export class AuthService { + constructor() { + getRedirectResult().then(result => { + // Initialize Firestore only after a user logs in + if (result.user) { + const { getFirestore } = await import('./firestore_operations'); + getFirestore(); + } + }); + } +} +``` + +```ts +@Component({}) +export class Foo { + data: Observable; + constructor() { + this.data = of(undefined).pipe( + concatMap(() => import('./firestore_operations')), + concatMap(it => it.fooData) + ); + } +} +``` \ No newline at end of file From d6abd1367828bbc52659a4030ae64a06dd98e802 Mon Sep 17 00:00:00 2001 From: Andres Villanueva Date: Thu, 23 Jun 2022 16:03:09 -0300 Subject: [PATCH 6/6] docs: translate getting started with Analytics --- README_es.md | 2 +- docs/analytics/getting-started_es.md | 135 +++++++++++++++++++++++++++ 2 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 docs/analytics/getting-started_es.md diff --git a/README_es.md b/README_es.md index da63aaa64..9a0b11650 100644 --- a/README_es.md +++ b/README_es.md @@ -127,7 +127,7 @@ Esta guía para desarrolladores asume que estás usando la API de compatibilidad > `AngularFireAnalytics` provee un método conviente para interactuar con Google Analytics en tu aplicación Angular. `ScreenTrackingService` y `UserTrackingService` registran eventos automáticamente cuando estás usando el Router de Angular o Firebase Authentication respectivamente. [Conoce más sonre Google Analytics](https://firebase.google.com/docs/analytics). -- [Comenzando con Google Analytics](docs/analytics/getting-started.md). (en proceso de traducción) +- [Comenzando con Google Analytics](docs/analytics/getting-started_es.md). (en proceso de traducción) ### Interactúa con tu(s) base(s) de datos diff --git a/docs/analytics/getting-started_es.md b/docs/analytics/getting-started_es.md new file mode 100644 index 000000000..09e99f016 --- /dev/null +++ b/docs/analytics/getting-started_es.md @@ -0,0 +1,135 @@ +# Comenzando con Google Analytics + +`AngularFireAnalytics` importa dinámicamente la biblioteca `firebase/analytics` y proporciona una versión basada en promesas [Firebase Analytics SDK (`firebase.analytics.Analytics`)](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html). + +### API: + +```ts +class AngularFireAnalytics { + updateConfig(options: {[key:string]: any}): Promise; + + // from firebase.analytics() proxy: + logEvent(eventName: string, eventParams?: {[key: string]: any}, options?: analytics.AnalyticsCallOptions): Promise; + setCurrentScreen(screenName: string, options?: analytics.AnalyticsCallOptions): Promise; + setUserId(id: string, options?: analytics.AnalyticsCallOptions): Promise; + setUserProperties(properties: analytics.CustomParams, options?: analytics.AnalyticsCallOptions): Promise; + setAnalyticsCollectionEnabled(enabled: boolean): Promise; + app: Promise; +} + +COLLECTION_ENABLED = InjectionToken; +APP_VERSION = InjectionToken; +APP_NAME = InjectionToken; +DEBUG_MODE = InjectionToken; +CONFIG = InjectionToken; +``` + +### Uso: + +```ts +import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics'; + +@NgModule({ + imports: [ + AngularFireModule.initializeApp(environment.firebase), + AngularFireAnalyticsModule + ] +}) +export class AppModule { } +``` + +`AngularFireAnalyticsModule` importará y configurará dinámicamente `firebase/analytics`. Se registrará automáticamente un evento `page_view` (consulte `CONFIG` a continuación si desea desactivar este comportamiento). + +En su componente, puede inyectar dependencia `AngularFireAnalytics` y hacer llamadas contra el SDK: + +```ts +import { AngularFireAnalytics } from '@angular/fire/compat/analytics'; + +constructor(analytics: AngularFireAnalytics) { + analytics.logEvent('custom_event', { ... }); +} +``` + +## Rastreando visualizaciones + +Puede registrar [eventos `screen_view`](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#parameters_10) por ti mismo, por supuesto, pero AngularFire proporciona el `ScreenTrackingService` que se integra automáticamente con Angular Router para proporcionar a Firebase un seguimiento de visualización de pantalla. Simplemente puede integrar así: + +```ts +import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics'; + +@NgModule({ + imports: [ + AngularFireModule.initializeApp(environment.firebase), + AngularFireAnalyticsModule + ], + providers: [ + ScreenTrackingService + ] +}) +export class AppModule { } +``` + +`AngularFireAnalyticsModule` inicializará `ScreenTrackingService` si se proporciona. + +## Rastreando Identidificadores de Usuario + +Para enriquecer sus datos de Analytics, puede realizar un seguimiento del usuario que ha iniciado sesión configurando [`setuserid`](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#setuserid) y [` setUserProperties`](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#set-user-properties). AngularFire proporciona un `UserTrackingService` que importará dinámicamente `firebase/auth`, monitoreará los cambios en el usuario que inició sesión y llamará a `setuserid` automáticamente. + + +```ts +import { AngularFireAnalyticsModule, UserTrackingService } from '@angular/fire/compat/analytics'; + +@NgModule({ + imports: [ + AngularFireModule.initializeApp(environment.firebase), + AngularFireAnalyticsModule + ], + providers: [ + UserTrackingService + ] +}) +export class AppModule { } +``` + +`AngularFireAnalyticsModule` inicializará `UserTrackingService` si se proporciona. + +## Configurando con Inyección de Dependencia + +### Configura Google Analtyics con `CONFIG` + +El uso del token DI `CONFIG` (*default: {}*) le permitirá configurar Google Analytics. Por ejemplo, puede omitir el envío del evento `page_view` inicial, anonimizar las direcciones IP y deshabilitar las señales de personalización de anuncios para todos los eventos de la siguiente manera: + +```ts +import { AngularFireAnalyticsModule, CONFIG } from '@angular/fire/compat/analytics'; + +@NgModule({ + imports: [ + AngularFireModule.initializeApp(environment.firebase), + AngularFireAnalyticsModule + ], + providers: [ + { provide: CONFIG, useValue: { + send_page_view: false, + allow_ad_personalization_signals: false, + anonymize_ip: true + } } + ] +}) +export class AppModule { } +``` + +Consulte la documentación de gtag.js para conocer las diferentes opciones de configuración a su disposición. + +### Usar DebugView `DEBUG_MODE` + +Para usar [DebugView en Analytics](https://console.firebase.google.com/project/_/analytics/debugview), establezca `DEBUG_MODE` en `true` (*default: false*). + +### Restree despliegues con `APP_NAME` y `APP_VERSION` + +Si proporciona `APP_NAME` y `APP_VERSION` (*default: undefined*), podrá [seguir la adopción de la versión](https://console.firebase.google.com/project/_/analytics/latestrelease) de su PWA. + +### Deshabilitar la recopilación de análisis a través de `COLLECTION_ENABLED` + +Si establece `COLLECTION_ENABLED` (*default: true*) en `false`, la recopilación de análisis se desactivará para esta aplicación en este dispositivo. Para volver a optar por la recopilación de análisis, puede llamar a `setAnalyticsCollectionEnabled(true)`. + +Poner estas API en uso con cookies le permitiría crear un esquema de recopilación de análisis flexible que respetaría el deseo de privacidad de su usuario.