CinTutuDev/TutusMovies

ionic/angular

Proyecto realizado con Angular/Ionic

Hosting URL: https://tutus-movies.firebaseapp.com/

✔Comienzo el proyecto con los comandos:

   ionic start Tutu-s-movies tabs
   ? Framework: Angular
   ? Starter template: tabs

API TMDB

https://www.themoviedb.org/
1º Para coger la API ir a editar perfil
2º API
3º Solicitar API
4º https://www.themoviedb.org/documentation/api/discover
5º La petición entera seria: https://api.themoviedb.org/3/discover/movie?primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&api_key=f76b1a94f37a496866a10143a5baf98e
6º Realizamos en Postman las pruebas y vemos traducción:

• ✔Para sacar solo los generos

https://api.themoviedb.org/3/genre/movie/list?api_key=f76b1a94f37a496866a10143a5baf98e&language=es&include_image_lenguage=es

🎱Crear servicio para interactuar con API

*Crear servicio sin archivo de prueba
   ionic g s services/movies --skip-tests

*Para hacer la petición creo en app.module el modulo para peticiones
   import { HttpClientModule } from "@angular/common/http";

*En services 'apiNews' hago la importación
   import { HttpClientModule } from '@angular/common/http';
   constructor( private http: HttpClientModule )

🎓Generar interfaces

   Necesito extensión (Paste JSON as Code) ó (https://app.quicktype.io/)
   Crear archivo interfaces  y dentro un index.ts
   En el mismo fichero presionamos Ctrl + Shift + v
   Ponemos nombre + intro

📸 Para visualizar imagenes

1º Creamos carpeta/modulo pipes y creamos un pipe dentro del pipes
ionic g m pipes
ionic g pipe pipes/imagen
2º En pipes.module.ts hago un export:
exports:[
    ImagenPipe
  ]
3º Realizamos la lógica en imagen.pipe.ts
4º Lo import en donde queramos visualizarlo tab1.module.ts:
 import { PipesModule } from "../pipes/pipes.module";
5º OJO ❗❗ para poder visualizarlo en el html:
 <ion-card>
    <ion-img [src]="i. backdrop_path | imagen"></ion-img>
 </ion-card>
 

🧲 Para coger los endpoints de la API

• URL EndPoints movies

 /movie/{movie_id}
 
 Quedando así:
    getDetallePeli(id: number){
    return this.ejecutarQuery<DetallePelis>(`/movie/${id}?a=1`);
  }

• URL EndPoints actores

/movie/{movie_id}/credits

 Quedando así:
  En service:
   getDetalleActores(id: number){
    return this.ejecutarQuery<DetallePelis>(`/movie/${id}/credits?a=1`);
  }
  Llamada en ts:
  this.moviesService.getDetalleActores(this.id).subscribe((res) => {
      console.log('ID Actores', res);
    });

• URL EndPoints Buscar Pelis

/search/movie

  Quedando:
   En service:
   getBuscarPeli(texto: string){
    return this.ejecutarQuery(`/search/movie?query=${texto}`)
  }
  Llamada en ts:
   buscador(event:any){
    console.log(event);
    this.movieService.getBuscarPeli(queryValue).subscribe( result =>{
      console.log(result);
    })
  }

🖲 Para crear botón de volver a inicio necesito:

import { ModalController } from '@ionic/angular';

• Inyectarlo en el constructor

private modalCtrl: ModalController

• Y simplemente con esto vuelve a inicio:

   inicio(){
    this.modalCtrl.dismiss();
  }

@ionic/storage

*Dar funcionalidad al btn de favoritos guardando y mostrando con storage

 URL
 https://github.com/ionic-team/ionic-storage

 *Instalación
 npm install @ionic/storage

 *Instalar biblioteca Angular
 npm install @ionic/storage-angular

 *Como es un módulo va en los imports:
 import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  imports: [
    IonicStorageModule.forRoot(),
    OJO ❗❗ si sale error reiniciar code❗❗ 
  ]
})
export class AppModule { }

*Creo un servicio:

ionic g s services/storage --skip-tests

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root',
})

export class StorageService {
  private _storage: Storage | null = null;
  pelis: DetallePelis[] = [];

  constructor(private storage: Storage) {
    this.initDB();
  }

  async initDB() {
    const storage = await this.storage.create();
    this._storage = storage;
  }

  /* llamo a la interface para guardar peli */
  getGuardoPeli(peli: DetallePelis) {
    this.pelis.push(peli);
    /* guardamos en el array pelis  y grabamos/guardamos en el storage */
    this.storage.set('peliculas', this.pelis);
    console.log(this.pelis);
  }


*Inyectamos el servicio
src\app\components\detalle-peli\detalle-peli.component.ts

import { StorageService } from './../../services/storage.service';
 favoritos() {
    this.storageServide.getGuardoPeli(this.peli)
  }

LEVANTAR APP EN ANDROID

1º Capacitor
  ionic capacitor add android
2º Para actualizar android
  ionic capacitor copy android
3aº Levantar en movil
  ionic capacitor run android
            ó
3bº ionic capacitor run android -l --external

🔎 Herramientas de desarrollo

More tools --> remote deivces
*Si no lo encuentro escribo esto :
chrome://inspect/#devices
*En Port forwarding... poner el puerto (localhost:8100) y darle a done

🎨 Muestra de como queda mi app

📸 Página principal/Peliculas

📸 Página dos/Buscador

📸 Página tres/Favoritos

🎶 Generador de iconos para PWA

https://tools.crawlink.com/tools/pwa-icon-generator/

🚀 Subir proyecto

URL
https://firebase.google.com/?hl=es-419

Pg donde explica como subir en firebase
https://www.youtube.com/watch?v=P4K59gr8sw0&ab_channel=Garajedeideas

1º Crear proyecto
2º Hosting y comenzar
3º npm install -g firebase-tools
4º firebase login
5º firebase init
6º Ir a configuracion proyecto en firebase y copiar el ID del proyecto
7º Abrir terminal :
firebase use --add 'id'
firebase deploy
8º Nos sale rl url a nuestra app🎉
📢 NOTA❗❗ si se hacen cambios en el proyecto lanzar:
ionic build --prod --service-worker
firebase deploy