Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Aplicación de ejemplo de Ionic 5: cree un lector RSS / Atom con Ionic 5 / Angular e InAppBrowser

 En este tutorial, cubriremos cómo analizar fuentes RSS y Atom en aplicaciones Ionic 5 / Angular y lo demostraremos creando una aplicación Ionic para analizar fuentes RSS de un blog.

Usaremos el complemento Cordova InAppBrowser a través de su envoltorio Ionic Native para abrir URL en el navegador del sistema.

He revisado muchos tutoriales en la web que muestran cómo leer feeds RSS / Atom, pero todos utilizan la API de Google Feeds obsoleta o la API de Yahoo Query. En este tutorial, tomaremos otro enfoque que es el uso de un navegador JavaScript biblioteca para analizar las fuentes RSS y mostrarlas mediante el componente Lista de Ionic 5.

Entonces empecemos.

Comencemos por crear un nuevo proyecto Ionic 5 basado en Angular. Abra una nueva terminal y ejecute los siguientes comandos:

$ cd ~
$ ionic start ionic-rss-reader blank --type=angular

A continuación, navegue dentro de la carpeta raíz de su proyecto:

$ cd ionic-rss-reader

A continuación, inicie el servidor de desarrollo con el siguiente comando:

$ ionic serve 

Su servidor se ejecutará desde la http://localhost:8100dirección.

Abra el src/app/home/home.page.htmlarchivo y agregue el siguiente código:

<ion-header>

<ion-navbar>
    <ion-title>Ionic 5 RSS/ATOM Reader</ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
<ion-input [(ngModel)]="targetUrl" placeholder="Please enter an RSS/Atom Feed URL"></ion-input>
<button ion-button  (click)="parseUrl()">Fetch Feed </button>

    <ion-list>

        <ion-item-sliding *ngFor="let entry of entries">

            <ion-item>
                <a (click)="openUrl(entry)"></a>
            </ion-item>


        </ion-item-sliding>

    </ion-list>
</ion-content>

Entonces, como puede ver, hemos agregado un componente de entrada de iones para obtener la URL de la fuente RSS / ATOM y luego vincularlo a targetUrl usando [(ngModel)] .

A continuación, agregamos un botón y vinculamos su controlador de clic al método parseUrl () .

Adición de una biblioteca de navegador JavaScript para analizar fuentes RSS

Primero, tome la biblioteca del analizador RSS de este enlace y luego cópiela en la carpeta de activos en una carpeta js .

Luego inclúyalo en el archivo src / index.html del proyecto antes de los archivos Ionic

<ion-app></ion-app>
<script src="assets/js/rss-parser.min.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>

<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>

Dado que este es un archivo JavaScript, para poder usarlo desde un proyecto de TypeScript, debe incluir las mecanografías si existen; de lo contrario, simplemente agregue la siguiente línea a su archivo de TypeScript antes de llamar a la API de la biblioteca:

declare var RSSParser;

Análisis de feeds RSS / ATOM

Para analizar un feed RSS / ATOM, llamamos al método parseURL () con la URL del feed de destino:

  RSSParser.parseURL(this.targetUrl, function(err, parsed) {
    console.log(parsed.feed.title);
    console.log(parsed.feed.entries);
  }); 

Dado que el método usa una devolución de llamada, conviértalo en una Promesa para jugar bien con Angular.

Convertir la devolución de llamada en una promesa

Continúe agregando este método a su componente:

parseUrlWrapper(){

    return new Promise((resolve,reject)=>{
    RSSParser.parseURL(this.targetUrl, function(err, parsed) {
        console.log(parsed.feed.title);
        console.log(parsed.feed.entries);
        if(err){
        reject(err);
        }
        resolve(parsed.feed.entries);
    });
    });

}

Esto envuelve el parseURL()método API en una promesa de JavaScript.

Si la función de devolución de llamada devuelve un error, la promesa se rechaza con el error.

Si la función de devolución de llamada devuelve un objeto analizado, la promesa se resuelve con las entradas del objeto analizado.

Además, no olvide agregar una variable de TypeScript de tipo cadena a su componente:

@IonicPage()
@Component({
selector: 'page-rss-page',
templateUrl: 'rss-page.html',
})
export class Home {
targetUrl : string ;
entries : Array<any> = [];

A continuación, agregue el método parseUrl ()

parseUrl () {this.parseUrlWrapper (). luego ((entradas: Array) => {this.entries = entradas; })

Este método simplemente llama al método parseUrlWrapper y coloca el resultado en nuestra matriz de entradas .

Si coloca una URL de fuente RSS en la entrada de texto y hace clic en el botón FETCH FEED , verá una lista de entradas RSS.

Dependiendo de la configuración del servidor de destino, es decir, si los encabezados CORS están habilitados, no podrá recuperar los feeds con un error:

Fetch API cannot load http://192.168.1.6/feed/. No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8100' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

Resolviendo los problemas de CORS

Para resolver este problema de CORS, tiene muchas opciones:

  • Puede probar su aplicación en un dispositivo móvil real donde no existe una Política de mismo origen como en el caso del navegador.
  • O configura un proxy iónico. Es solo cuestión de agregar algunos valores conf. Puedes seguir este tutorial
  • O si tiene acceso al servidor del sitio web de destino, habilite los encabezados CORS.

Tenga en cuenta que debe hacer esto solo en la fase de prueba, ya que en producción usará un dispositivo real donde no hay problemas de CORS, ya que el navegador integrado de Cordova no tiene una Política de mismo origen.

Abrir URL externas usando InAppBrowser

Al probar su aplicación en el navegador, puede abrir los enlaces RSS como de costumbre, pero en un dispositivo real debe usar el complemento InAppBrowser Cordova para poder abrir URL externas ya sea usando un navegador en la aplicación o el navegador del sistema, que es lo que nosotros vamos a utilizar en el tutorial.

Antes de poder utilizar el navegador InAppBrowser, debe seguir estos pasos:

  • Agregue el complemento Cordova cordova-plugin-inappbrowser .
  • Instale el contenedor Ionic Native para InAppBrowser @ ionic-native / in-app-browser .
  • Importe y agregue el proveedor InAppBrowser a la lista de suministros en src / app / app.module.ts .
  • Inyecte InAppBrowser a través del constructor de componentes para que una instancia funcione con él.

También puede seguir este tutorial para obtener detalles completos

Entonces, después de seguir los pasos para instalar InAppBrowser, inyéctelo y luego agregue el método para abrir las URL en el navegador del sistema:

/* ... */
import { InAppBrowser } from '@ionic-native/in-app-browser';
/* ... */

@IonicPage()
@Component({
selector: 'home-page',
templateUrl: 'home.page.html',
})
export class Home {
targetUrl : string ;
entries : Array<any> = [];
constructor(public navCtrl: NavController, public navParams: NavParams , private iab: InAppBrowser) {

}
openUrl(entry){

    this.iab.create(entry.link,"_system");

}
/* ... */

¡Eso es! Puede crear una aplicación más útil sobre esto, tal vez un lector RSS completo con soporte fuera de línea y otras características.

Aquí está el código completo del componente home.page.ts :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

declare var RSSParser;
@IonicPage()
@Component({
selector: 'home-page',
templateUrl: 'home.page.html',
})
export class Home {
targetUrl : string ;
entries : Array<any> = [];
constructor(public navCtrl: NavController, public navParams: NavParams , private iab: InAppBrowser) {

}

ionViewDidLoad() {
    console.log('ionViewDidLoad RSSPage');

}
openUrl(entry){

    this.iab.create(entry.link,"_system");

}
parseUrlWrapper(){

    return new Promise((resolve,reject)=>{
    RSSParser.parseURL(this.targetUrl, function(err, parsed) {
        console.log(parsed.feed.title);
        console.log(parsed.feed.entries);
        if(err){
        reject(err);
        }
        resolve(parsed.feed.entries);
    });
    });

}
parseUrl(){
    this.parseUrlWrapper().then((entries : Array<any>)=>{
        this.entries = entries;
    })
}

}

Conclusión

En este tutorial, usamos Ionic 5 y Angular para construir una aplicación de lector RSS de ejemplo simple. Hemos demostrado cómo abrir fuentes RSS en aplicaciones móviles Ionic y cómo usar el complemento nativo Cordova InAppBrowser para abrir URL externas en el navegador del sistema de dispositivos móviles.

También hemos visto cómo convertir una devolución de llamada de JavaScript en una promesa de JavaScript para una mejor integración de cualquier API con Ionic y Angular.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas