Menu

Creando un Feed Reader en Ionic 4

ionic - March 25, 2019 por Carlos Rojas | Edita este Post.
ionic4.0.0ionic-cli4.10.3
Ver código

En esta ocasión vamos a aprender a hacer un pequeño feedReader y aprender un poco sobre como se hacen las cosas en ionic 4.

Lo primero que tenemos que hacer es actualizar nuestro CLI si no lo has hecho aun tendras que ejecutar:

$npm install -g ionic

Crear un nuevo proyecto con Ionic 4.

Ahora que tienes la última versión del CLI debes crear una App nueva con el template blank.

$ionic start myApp blank

Creando un Servicio.

Ya que tenemos nuestra App funcionando debemos crear un servicio para compartir los datos que tenemos en nuestra Feed con todas nuestras vistas.

$ionic generate service feed

y vamos a usar el servicio rss2json para obtener la data como un json.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Feed } from './model/feed';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FeedService {
  private rssToJsonServiceBaseUrl: String = 'https://rss2json.com/api.json?rss_url=';

  constructor(
    private http: HttpClient
  ) { }

  getFeedContent(): Observable<any> {
    const fixedRSS = 'https://rss2json.com/api.json?rss_url=https://feeds.feedburner.com/Ion-book';
    return this.http.get(fixedRSS, { responseType: 'json' });
  }
}

ya que tenemos la data a través de nuestro metodo getFeedContent() vamos a dibujarla en nuestro componente por defecto.

Adaptando el home

en el home.page.html.


<ion-header>
  <ion-toolbar>
    <ion-title>
      Feed App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-card *ngFor="let item of (results)">
    <ion-card-header>
      <ion-card-title>{{item.title}}</ion-card-title>
      <a href="{{item.link}}">Ver más...</a>
    </ion-card-header>
  
    <ion-card-content>
      <div [innerHTML]='item.description | slice:0:250'></div>
    </ion-card-content>
  </ion-card>

</ion-content>

y en el home.page.ts

import { Component } from '@angular/core';
import { FeedService } from '../feed.service';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  private results: any;
  constructor(
    private feedService: FeedService
  ) {
    this.feedService.getFeedContent().subscribe(
      (response) => {
        this.results = response.items;
        console.log('data>>>', response.items);
      }
    );
  }
}

Si quieres ver el streaming de este ejercicio puedes verlo.

Bueno espero que sea de utilidad y sigán programando :)

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!

Artículos relacionados: