{"id":23701180,"url":"https://github.com/gitfrandu4/ftv-birds-info","last_synced_at":"2026-04-28T12:01:54.932Z","repository":{"id":211625163,"uuid":"369873731","full_name":"gitfrandu4/ftv-birds-info","owner":"gitfrandu4","description":"Práctica de DAW2 - Aves endémicas de la isla de Fuerteventura (Angular)","archived":false,"fork":false,"pushed_at":"2025-06-29T14:14:02.000Z","size":1841,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T15:26:40.107Z","etag":null,"topics":["angular","aves","fuerteventura","spa"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitfrandu4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-05-22T17:56:30.000Z","updated_at":"2025-06-29T14:14:15.000Z","dependencies_parsed_at":"2023-12-09T19:52:45.320Z","dependency_job_id":null,"html_url":"https://github.com/gitfrandu4/ftv-birds-info","commit_stats":null,"previous_names":["gitfrandu4/ftv-birds-info"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gitfrandu4/ftv-birds-info","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fftv-birds-info","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fftv-birds-info/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fftv-birds-info/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fftv-birds-info/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitfrandu4","download_url":"https://codeload.github.com/gitfrandu4/ftv-birds-info/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fftv-birds-info/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32379629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T11:25:28.583Z","status":"ssl_error","status_checked_at":"2026-04-28T11:25:05.435Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","aves","fuerteventura","spa"],"created_at":"2024-12-30T09:32:30.776Z","updated_at":"2026-04-28T12:01:54.921Z","avatar_url":"https://github.com/gitfrandu4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fuerteventura Birds-Info 🦅\n\nTrabajo de la asignatura DAW II (Desarrollo de Aplicaciones Web II) consistente en una aplicación de página única (SPA - _Single Page Application_) desarrollada en Angular que, a través del uso de servicios y rutas, establezca una comunicación entre componentes lejanos. \n\nLa aplicación implementa un índice de aves endémicas de la isla de Fuerteventura. Para añadir/eliminar aves del índice es necesario que el usuario haya iniciado sesión en el aplicativo web. \n\n## Construido con ⚙️\n\n* Angular Framework: v11.2.13\n\n    * Angular CLI: v11.2.12\n    * Node.js. v14.15.4\n    * npm package manager: v7.10.0\n    * TypeScript: v4.1.5\n\n## Funcionalidades 📋\n\n### Funciones CRUD\n\nLa aplicación implementa funcionalidades básicas para Crear, Leer y Borrar aves del índice. \n\nPara poder borrar o agregar un nuevo ave es necesario haber iniciado sesión en el aplicativo. \n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/image-20210608095145489.png\"\u003e\n\u003c/p\u003e\n\n### Servicios\n\nLos servicios en Angular son una parte esencial dentro de la arquitectura de las aplicaciones construidas con este framework. Su principal función es la de proveer datos a los componentes que los consumen y que delegan en ellos la responsabilidad de acceder a la información y la realización de operaciones con dichos datos. \n\nSe han implementado varios servicios en Angular con el objetivo de:\n\n* comunicar componentes lejanos entre sí  \n* capturar la lógica de comunicación con la base de datos\n\n#### Comunicación entre componentes no cercanos\n\nPara la comunicación entre componentes no cercanos se han implementado servicios que se encargan de la comunicación entre estos. \n\nPor ejemplo:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/image-20210608104247942.png\"\u003e\n\u003c/p\u003e\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { Bird } from 'src/app/models/bird.model';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ShowBirdService {\n\n  // Esta variable almacenará el id del ave que se mostrará en detalle en la home\n  public bird!: Bird;\n  public birdDeleted: boolean =false;\n\n  // Esta variable nos permite enviar mensajes a múltiples observadores\n  // Permitirá a varios componentes subscribirse al Subject\n  // Cada vez que se seleccione mostrar un ave diferente los componentes (BirdInfoComponent) recibirá \n  // el nuevo Id que debe mostrar\n  private changeBirdSubject = new Subject\u003cBird\u003e();\n\n  // Esta variable auxiliar nos facililitar la sintaxis para que nustros componentes se puedan\n  // subscribir al Subject\n  changeBirdObservable = this.changeBirdSubject.asObservable();\n\n  constructor() {\n  }\n  \n   // Esta función incluye la lógica para enviar el nuevo id a todos los componentes subscritos al Subject \n   sendIdBird(bird: Bird){\n    // alert(\"sendIdBird: \" + bird.id);\n    this.bird = bird;\n    this.changeBirdSubject.next(this.bird);\n   }\n\n// ...\n}\n```\n\n\n\n#### Comunicación con Firebase\n\nPara la comunicación con la base de datos se han empleado servicios que capturan la lógica que comunica la aplicación con la base de datos mediante peticiones HTTP. \n\nPor ejemplo:\n\n* Autenticación: \n    * `auth.service.ts`: realiza la autenticación del usuario con el servidor de la BD. Implementa métodos como `login()`, `autologin()`, `signup()` , `logout()`, `autologout()`, manejo de errores, ...\n    * `auth-interceptor.service.ts`: captura las peticiones HTTP que realiza la aplicación y añade un token que identifica al usuario cuando este está autenticado. \n    * `auth-guard.service.ts`: protege las rutas que solo pueden ser accedidas si el usuario está autenticado. \n* Acceso al índice de aves almacenado en Firebase:\n    * `post-bird.service.ts`: realiza peticiones HTTP a la BD para leer del índice o agregar nuevos elementos al mismo. \n\n### Rutas\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\n\nimport { CreateComponent } from './components/create/create.component';\nimport { HomeComponent } from './components/home/home.component';\nimport { ErrorComponent } from './components/error/error.component';\nimport { LogUpComponent } from './components/log-up/log-up.component';\nimport { LogInComponent } from './components/log-in/log-in.component';\nimport { AuthGuardService } from '../app/services/auth/auth-guard.service';\n\nconst routes: Routes = [\n  { path: 'create', component: CreateComponent, canActivate: [AuthGuardService]},\n  { path: 'home', component: HomeComponent },\n  { path: '', component: HomeComponent },\n  { path: 'login', component: LogInComponent },\n  { path: 'logup', component: LogUpComponent, canActivate: [AuthGuardService] },\n  { path: '**', component: ErrorComponent },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\n\nexport class AppRoutingModule { }\n```\n\n\n\n\n### Empleando Angular Material\n\nPara este trabajo se han empleado varios componentes de la librería de Angular Material. Esta librería ofrece componentes web con un diseño Material design, una guía creada por Google. \n\nAlgunos de los componentes utilizados han sido:\n\n* `\u003cmat-action-list\u003e` each item in an action list is a \u003cbutton\u003e element.\n* `\u003cmat-card\u003e` is a content container for text, photos, and actions in the context of a single subject.\n* `\u003cmat-toolbar\u003e` is a container for headers, titles, or actions.\n\n### Almacenamiento 💾\n\nPara el almacenamiento del índice hemos empleado **`Firebase Realtime Database`**. Este almacenamiento nos permite almacenar y sincronizar datos en una base de datos NoSQL en la nube en formato JSON. Los datos se mantienen sincronizados en tiempo real con todos los cliente conectados. \n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://www.gstatic.com/devrel-devsite/prod/vacc2a2a4a4394c7c42dc62dba69eb022d7680ce4a368d4b28c3e984cc9155a81/firebase/images/lockup.png?dcb_=0.8896867411947109\" alt=\"Firebase\"\u003e\n\u003c/p\u003e\n\n## Deployment 🚀\n\n### Deploy to GitHub Pages 📚\n\nSeguimos los pasos\n\n1. Creamos el repositorio de GitHub para nuestro proyecto\n\n2. Configuramos `Git` en nuestro repositorio local para conectarlo con el repositorio remoto. Los comandos son similares a los siguientes:\n\n```\ngit remote add origin https://github.com/gitfrandu4/ftv-birds-info\ngit branch -M main\ngit push -u origin main\n```\n\n3. Create and check out a git branch named gh-pages.\n\n```\ngit checkout -b gh-pages\n```\n\n4. Hacemos build del prouecto utilizando el comando de Angular CLI `ng build`.\n\n```\nng build --output-path docs --base-href /your_project_name/\n\nNota: /your_project_name/ es el nombre del proyecto especificado en el paso 1. \nDebemos incluir los slashes. \n\nng build --output-path docs --base-href=\"\"\n```\n\n5. Cuando se completa el build copiamos `docs/index.html` en un nuevo archivo y lo renombramos como `docs/404.html`.\n\n6. Commit + push\n\n7. En el proyecto de Github \u003e Settings \u003e GitHub Pages \u003e Configuramos el sitio para publicar desde la carpeta `docs`.\n\n8. Save\n\n9. Accedemos al enlace donde se ha desplegado el proyecto: https://gitfrandu4.github.io/ftv-birds-info/\n\nAyuda: https://angular.io/guide/deployment\n\nNota:\n\n* Para eliminar una rama (por ejemplo gh-pages):\n\n```bash\ngit branch -d gh-pages    // 1) from local\ngit push origin :gh-pages // 2) from remote repository\n```\n\n## Créditos\n\nCréditos de las imágenes empleadas para la demo:\n\n* Proyecto TSP de la Consejería de Educación y Universidades del Gobierno de Canarias.\n    * https://www3.gobiernodecanarias.org/medusa/wiki/index.php?title=P%C3%A1gina_principal \n* Enciclopedia de las Aves de España, editada por SEO/BirdLife y la Fundación BBVA en 2008\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitfrandu4%2Fftv-birds-info","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitfrandu4%2Fftv-birds-info","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitfrandu4%2Fftv-birds-info/lists"}