app-noticias

Hosting URL: https://cinta-s-news.web.app

Proyecto realizado con Angular/Ionic

✔Comienzo el proyecto con los comandos:

   ionic start
   ? Framework: Angular
   ? Starter template: tabs

🧵URL/IMP/API

*API Noticias:
   https://newsapi.org/ 

🎱Crear servicio para interactuar con back para petición API

*Crear servicio sin archivo de prueba
   ionic g s services/apiNews --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 modulos, componentes, servicios...

*Crear módulo dentro de componentes
   ionic g m components

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

*Crear componente dentro de otro componente
   ionic g c components/articles

🎓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

🔧 Pluggins ↪️ In App Browser

https://ionicframework.com/docs/v5/native/in-app-browser

$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install @awesome-cordova-plugins/in-app-browser

import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';
 providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    InAppBrowser,
  ],

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

@ionic/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()
  ]
})
export class AppModule { }

*Creo un servicio:
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  private _storage: Storage | null = null;

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

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

*Inyectamos el servicio
src\app\components\article\article.component.ts
import { StorageService } from '../../services/storage.service';
{...}

🌐 PWA

URl
https://ionicframework.com/docs/angular/pwa
ng add @angular/pwa
ionic build --prod --service-worker

📸 Generador ico

URL(los tienes que tener para generar a 512px)
https://seochecker.it/web-app-manifest-generator

🚀 Subir proyecto

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

Página donde explica como subir
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

Free Software, Hell Yeah!🤘