Consume datos de la API de last.fm para listar los artistas

Clase 16 de 36 • Curso de React Native 2016

Resumen

Llegó la hora de utilizar datos reales, para eso crearemos un API Client: un módulo que se encargará de la comunicación con la API de last.fm y traer los datos de los artistas más escuchados.

Primero debemos crear un usuario para usar la API y luego debemos implementar algunos métodos como componentDidMount y componentWillReceiveProps en nuestros Components para que todo funcione correctamente.

Simón Ottoniel González Acosta

student•

Hola brothers comparto el codigo que realice haciendo uso del componente FlatList en reemplazo de ListView

App.js

import React, { Component } from 'react';
import {
  View,
  StyleSheet
} from 'react-native';
import ArtistList from './ArtistList';

import getArtists from './api';

export default class App extends Component<{}> {
  constructor(props) {
    super(props);

    this.state = {
      artists: []
    }
  }

  componentDidMount() {
    getArtists()
      .then(data => this.setState({
        artists: data
      }));
  }

  render() {
    const artists = this.state.artists;

    return (
      <View style={styles.container}> 
        <ArtistList artists={artists} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray'
  }
});

ArtistList.js

import React, { Component } from 'react';
import {
  FlatList
} from 'react-native';
import ArtistBox from './ArtistBox';

export default class ArtistList extends Component<{}> {
  render() {
    return (
      <FlatList
        data={this.props.artists}
        renderItem={({item}) => <ArtistBox artist={item} />}
      />
    );
  }
}

Espero que ayude y mil gracias @gonzaloaguirre excelente curso 😃

Usuario anónimo

user•

todo excelente solo te falto colocarle las {} a getArtist recuerda que nosotros lo estamos exportando de api-clients.js como export { getArtist }

import { getArtist } from './src/components/api-clients'

Esnor Noel Enrique Vaca Moreno

student•

Otra opción:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList, 
} from 'react-native';
import ArtistBox from './ArtistBox';

export default class ArtistList extends Component {
  state = {
    dataSource: this.props.artists
  }

  componentWillReceiveProps(newProps) {
    if (newProps.artists !== this.props.artists) {
      this.setState({
        dataSource: newProps.artists
      })
    }
  }

  renderItem({ item, index }) {
    return <ArtistBox artist={item} />;
  }

  render() {   
    return (
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
  image: {
    width: 150,
    height: 150,
  },
});

Asiel Posada

student•

Personalmente me hago bolas al ver muchas variables de nombre artist/artists , no se al final termino sin saber cual es cual :C

Nose Borrarmicuenta

student•

confunde un poco

Oscar Barba Seara

student•

La verdad que confunde mucho.

Víctor Julio Molano Bolívar

student•

Una pregunta: por qué usar estado en el componente padre y tambien en el hijo?

En el caso del componente de listado de artistas y el principal… no seria mas sencillo en ves de usar el ComponentWillReceiveProps y ComponentDidMount… recibir directamente el array por las props y usarlo en el render?

Es decir, no seria mejor manejar el estado solo en el componente padre y dejar la lista “stateless” de tal forma que simplemente hace un map de dicho array recibido por props y lo renderiza?. Si en el componente padre cambia el estado llega el nuevo array en las props, este se renderiza y ya.

Creo que como lo plantea el profe es mas ‘engorroso’ de manejar y (según mi criterio) innecesario. Corrijanme si me equivoco o si hay algún motivo por el cual hacerlo de esa forma?.

Saludos!

Alejandro Sanabria

student•

Lo que dices es correcto, el tema aquí es que hay muchas maneras de lograr lo mismo y en este caso para el profe en ese momento pensó que era lo mejor. Lo Nice de la programación es llegar a sacar uno las propias conclusiones y mejorar todo lo que hacemos día a día cuando descubrimos mejores formas. Gracias por tu aporte.

Emmanuel Montenegro

student•

Usando FlatList en lugar de ListView (deprecated), es más sencillo y funciona de la manera que comentas. Se obtienen los datos en el padre en componentDidMount, se setea el estado y se lo pasa como prop al hijo.

David Aparicio

student•

Hola, una pregunta que package utilizas en sublime para activar las ayudas y colores de react native ?

Bryant Tello

student•

Hola hay alguna forma de consumir datos de una API con solo el URL??
Saludos

Diego Forero

Team Platzi•

Eso depende del API si recibe parámetros via get por ejemplo

miapi.com/?param1=param1&param2=param2

Es la forma de pasar esos parámetros, pero si el API no lo soporta no es posible.

Gustavo Hans Bueno Valdez

student•

Me gustaría saber qué hacer si nuestra API no soporta https. Qué hay que hacer en react native para que permita request no seguras? gracias.

CESAR AUGUSTO BUSTOS GONZALEZ

student•

si se quisiera que cada vez que la data de la api rest se actualizara la vista de la app tambien actualizara ya habia que usar websocket o cosas asi?

Diego Forero

Team Platzi•

Si, tienes que tener una conexión permanente usando sockets para que si hay cambios estos sean distribuidos a todos los clientes.

Enova Desarrollo

student•

Al final a mi me muestra el siguiente warning:

warning: ‘In next release empty section headers will be rendered’

eso se arregla de poniendo la siguiente línea en el componente:

**enableEmptySections={true}
**
<ListView enableEmptySections={true} dataSource={this.state.dataSource} renderRow={(artist) => <ArtistBox artist={artist} /> } />

José Mauricio Eddui Abzum Méndez

student•

Para una aplicación móvil siempre es necesario conectarse a través de API para obtener información de una bd o se puede conectar a una base de datos directamente? Es una buena practica? o por qué se utiliza la conexión vía API?

Diego Forero

Team Platzi•

Las aplicaciones móviles como tal solo pueden llegar a leer datos de archivos que se encuentran en el celular e incluso sqllite, siempre es necesario algo que conecte a la base de datos con tu aplicación ya sea móvil o un sitio web, esto es conocido como backend y se encarga precisamente de recibir la petición, procesarla (solicitar los datos a la db pasando parámetros para filtrar información) y retornar lo que devuelve la base de datos de una manera estándar, esto es lo que hace un API, si tu pides un dato a un endpoint este te devuelve la información que esperas, por ejemplo si pides información a un endpoint de usuarios no te va a llegar información de canciones.

José Mauricio Eddui Abzum Méndez

student•

OK entiendo tu punto, es decir, yo tengo una bd en AWS RDS, es mejor hacer un API para que te devuelva info o conectarse directamente a la bd desde la aplicación movil?

Por ejemplo yo soy full Web Developer, trabajo con Laravel y entre otros frameworks, vengo desde el conocimiento que desde Laravel podemos definir los accesos de la bd en .env y hace una conexión a MySQL… En desarrollo móvil es igual o si es necesario tener un Web Service para hacer dichas peticiones a la BD?

Usuario anónimo

user•

Para el que le pueda ser de utilidad usando FlatList

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
} from 'react-native';
import ArtistList from './src/components/ArtistList'
import { getArtist } from './src/components/api-clients'

export default class App extends Component {
  state = {
    artists: []
  }

  componentDidMount(){
    getArtist()
      .then(data => this.setState({ artists: data}));
  }
    

  render() {
    const artists = this.state.artists

    return (
      <View style={styles.container}>
        <ArtistList artists={artists}/>
      </View>
    );  
  }
} 
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
});

ArtistList.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList,
} from 'react-native';
import  ArtistBox from './ArtistBox'

export default class ArtistList extends Component {

  renderItem({ item, index }) {
        return <Text style={style.row}>{item}</Text>;
    }

render(){
    return (
      <FlatList
        data={this.props.artists}
        renderItem={({item}) => <ArtistBox artist={item} />}
        keyExtractor={item => item.artists}
      />
    );   
  }
}

Usuario anónimo

user•

Me gustaria poder ver como enviar parametros usando el metodo get y post y como funciona todo esto en React Native

Juan Castro

teacher•

Que plugin o extensión usa el profesor para visualizar la api de ese modo?

Josué Mora González

student•

Gracias chaval.

Martín Varela

student•

Excelente Gonzalo, muy claro todo. Recomiendas usar Redux con react-native? En su empresa lo usan?

Gracias

Gonzalo Aguirre

teacher•

Si, usamos Redux. Para aplicaciones grandes es recomendable usarlo.

Daniela Andrea Martínez Gómez

student•

buenas tardes gonzalo necesito ayuda urgente , tengo un app el cual quiero conectar con un api para traer los datos y no se como, podrías darme una manita?

Alejandro Sanabria

student•

Tienes que usar una librería o la función que trae por defecto en react native que se llama fetch para poder traer la información. Más allá de eso todo depende de la api que vayas a usar. Cuéntanos más para poder ayudarte.

Daniela Andrea Martínez Gómez

student•

si el api me trae algo asi:

searchSchool_parseData({"101":{"school_id":"101","school_name":"I.E. T\u00e9cnico Industrial Simona Duque","city":"Marinilla","state":"Antioquia","country":"Colombia"},"214":{"school_id":"214","school_name":"I.E T\u00e9cnico Industrial Zipaquir\u00e1","city":"Zipaquir\u00e1","state":"Cundinamarca","country":"Colombia"},"319":{"school_id":"319","school_name":"I.E.D Agroindustrial de Minca Santa Marta","city":"Santa Marta","state":"Magdalena","country":"Colombia"},"357":{"school_id":"357","school_name":"I.E San Pablo Industrial","city":"Istmina","state":"Choc\u00f3","country":"Colombia"},"484":{"school_id":"484","school_name":"Instituci\u00f3n Educativa Departamental T\u00e9cnico Industrial de Tocancip\u00e1","city":"Tocancip\u00e1","state":"Cundinamarca","country":"Colombia"}});

¿como pudo darle la forma que se necesita para mostrar la informacion en la app?

Enrique López

student•

Me pasa lo mismo. Alguien ayuda?

Alejandro Sanabria

student•

Lo que tienen que hacer es normalizar la api para que se acomode a la necesidad que tengan a la hora de consumirla, si me cuentan que quieren lograr con esa api, quizás les podamos ayudar más.

Geordan Sanchez

student•

En el minuto 14.22 aprox, el api-client iba a devolver un objeto, pero luego devolvio una promesa. ¿Porque razon?

function getArtists() {
  return fetch(URL)
    .then(response => response.json())
    .then(data => data.topartists.artist)
    .then(artists => artists.map(artist => {
      return {
        name: artist.name,
        image: artist.image[3]['#text']
      }
    }))

Gonzalo Aguirre

teacher•

Como el fetch es asincronico necesitamos devolver una promise, que luego se va a resolver con el objeto que devolvemos en el ultimo .then

La llamada a ese metodo va a ser algo parecido a

getArtists().then(artists => console.log('Estos son los artistas: ', artists)

No se si responde la pregunta…

Geordan Sanchez

student•

Si quedo claro , Gracias profe!

Edgar Felipe Uribe Rayas

student•

¿y si el API tiene paginación?

Gonzalo Aguirre

teacher•

Podrías modificar api-client.js para que soporte paginación (los parámetros van a depender de la API, pero suelen ser skip, offset, etc) y luego en el componente guardar esos parámetros para saber cuál es la próxima página a pedir.

Augusto Gonzalez

student•

Exactamente como es la paginación de una API? De antemano agradezco sus respuestas. 😃

Jonathan Huertas

student•

No sé si esta obviando los " ; " porque es su estilo, porque no es necesario en reactNative, lo que no tiene sentido ya que sigue siendo javascript, o simplemente se le pasa… A cada rato. El algún momento el profesor lo comentó?

Diego Forero

Team Platzi•

En JavaScript el ; no es obligatorio, puedes o no usarlo, eso lo defines tu y tu equipo de trabajo, si trabajas solo entonces como más te guste.

Jonathan Huertas

student•

Emmm eso no es cierto, el " ; " en javascript hace parte de la sintasix del mismo, es muy diferente que al ser un lenguaje interpretado y no compilado y por lo mismo no se rompa al no ser estrictos con cosas como el " ; " no quiere decir que no es obligatorio, justo por eso existen librerias como esLint que corrije pensamientos como ese. Incluso en procesos de producción estos errores no se pasan. Por eso preguntaba si es estilo del profesor o algo que simplemente se le pasa muy a menudo.

Santiago Maya

student•

como le puedo setear el key a un Flatlist? osea para este ejemplo en particular como lo coloco?

Alejandro Sanabria

student•

Con un prop que tiene el componente que se llama keyExtractor que recibe una funciona la cual pasa como parámetro cada item y de ese item debes devolver el ID o algo único del item

Emmanuel Montenegro

student•

De esta forma:

keyExtractor={(item, index) => index}

Luis Alexander lara Serna

student•

getArtist().then(data =>this.setState({‘artists’:data}));
esa parte no entiendo muy bien this.setState hay almacena los datos???😄 Una ayuda porfisss…

import React, { Component } from 'react';
import {
  View,
  StyleSheet
} from 'react-native';
import ArtistList from './ArtistList';

import getArtists from './api';

export default class App extends Component<{}> {
  constructor(props) {
    super(props);

    this.state = {
      artists: []
    }
  }

  componentDidMount() {
    getArtists()
      .then(data => this.setState({
        artists: data
      }));
  }

  render() {
    const artists = this.state.artists;

    return (
      <View style={styles.container}> 
        <ArtistList artists={artists} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray'
  }
});

import React, { Component } from 'react';
import {
  FlatList
} from 'react-native';
import ArtistBox from './ArtistBox';

export default class ArtistList extends Component<{}> {
  render() {
    return (
      <FlatList
        data={this.props.artists}
        renderItem={({item}) => <ArtistBox artist={item} />}
      />
    );
  }
}

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList, 
} from 'react-native';
import ArtistBox from './ArtistBox';

export default class ArtistList extends Component {
  state = {
    dataSource: this.props.artists
  }

  componentWillReceiveProps(newProps) {
    if (newProps.artists !== this.props.artists) {
      this.setState({
        dataSource: newProps.artists
      })
    }
  }

  renderItem({ item, index }) {
    return <ArtistBox artist={item} />;
  }

  render() {   
    return (
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
  image: {
    width: 150,
    height: 150,
  },
});

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
} from 'react-native';
import ArtistList from './src/components/ArtistList'
import { getArtist } from './src/components/api-clients'

export default class App extends Component {
  state = {
    artists: []
  }

  componentDidMount(){
    getArtist()
      .then(data => this.setState({ artists: data}));
  }
    

  render() {
    const artists = this.state.artists

    return (
      <View style={styles.container}>
        <ArtistList artists={artists}/>
      </View>
    );  
  }
} 
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
});

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList,
} from 'react-native';
import  ArtistBox from './ArtistBox'

export default class ArtistList extends Component {

  renderItem({ item, index }) {
        return <Text style={style.row}>{item}</Text>;
    }

render(){
    return (
      <FlatList
        data={this.props.artists}
        renderItem={({item}) => <ArtistBox artist={item} />}
        keyExtractor={item => item.artists}
      />
    );   
  }
}

searchSchool_parseData({"101":{"school_id":"101","school_name":"I.E. T\u00e9cnico Industrial Simona Duque","city":"Marinilla","state":"Antioquia","country":"Colombia"},"214":{"school_id":"214","school_name":"I.E T\u00e9cnico Industrial Zipaquir\u00e1","city":"Zipaquir\u00e1","state":"Cundinamarca","country":"Colombia"},"319":{"school_id":"319","school_name":"I.E.D Agroindustrial de Minca Santa Marta","city":"Santa Marta","state":"Magdalena","country":"Colombia"},"357":{"school_id":"357","school_name":"I.E San Pablo Industrial","city":"Istmina","state":"Choc\u00f3","country":"Colombia"},"484":{"school_id":"484","school_name":"Instituci\u00f3n Educativa Departamental T\u00e9cnico Industrial de Tocancip\u00e1","city":"Tocancip\u00e1","state":"Cundinamarca","country":"Colombia"}});

function getArtists() {
  return fetch(URL)
    .then(response => response.json())
    .then(data => data.topartists.artist)
    .then(artists => artists.map(artist => {
      return {
        name: artist.name,
        image: artist.image[3]['#text']
      }
    }))

Consume datos de la API de last.fm para listar los artistas

Lanzamiento del Curso

Intro a React Native y a Platzimusic, el proyecto del curso

Requerimientos técnicos del curso

Guía de instalación de React Native

Guía de instalación para desarrollar para Android

Introducción al Desarrollo Mobile

¿De qué se trata este Curso de React Native?

Tres enfoques para desarrollo de aplicaciones móviles

Qué es React Native y sus componentes básicos

Primera App con React Native

Instalación y configuración de entorno

Creando tu primera aplicación

Developer Experience (DX)

Componentes y APIs

Estilos y Layout con Flexbox

PlatziMusic

Armando la ArtistBox

Componentes reutilizables

Contenedores con Scroll

Armando nuestro listado de artistas

Consume datos de la API de last.fm para listar los artistas

Routing y Navegación

Agregando una vista de detalle

Autenticación de usuarios

Agregando login con Facebook para iOS

Agregando botón de login con Facebook para iOS

Agregando botón de login con Facebook para Android

Configurando autenticación con Firebase

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refactor y referencias de Firebase

Agrega la funcionalidad para hacer Like a un artista

Envia comentarios de un artista y almacénalos en Firebase

Lista los comentarios de un artista trayendo los datos desde Firebase

Agrega un avatar de usuario para mostrar en los comentarios

Refinando detalles de la app

Mejorando la UI/UX de PlatziMusic para Android y iOS en cada caso

Agrega recursos de imágenes en la aplicación para la pantalla de login

Agrega un ícono bonito para PlatziMusic

Llevando la app a los Stores

Cómo subir tu aplicación de React Native al Play Store

Cómo subir tu aplicación de React Native al App Store

Conclusiones

Cierre del curso

Desafíos

Desafío 1 - Lista los artistas top de tu país

Desafío 2 - Lista la cantidad precisa de comentarios

Desafío 3 - Comparte un artista en Facebook o Whatsapp