No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Next.js 2018

Curso de Next.js 2018

Roberto González

Roberto González

Vista de Podcasts

10/23
Recursos

Este reto pone a prueba todo lo que venimos aprendiendo hasta el momento en el curso y va a requerir testear todo; desde crear páginas nuevas, hasta tomar atributos y hacer request a una API.

Aportes 26

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

**Reto Cumplido y un poco mas **

Listo 😄 Lo bueno de haber tomado cursos anteriores como React, Redux, Fundamentos de JavaScript, etc. es que entiendo perfectamente qué hace el código, no siento que solo copio y pego.

Comparto como me quedo la pagina Podcast!

Asi quedo mi página de Podcast! Trate de basarme un poco en PocketCasts 😄

para los que les suceda como a mi que cuando accedían a la api de audioboom se les veía lineas ilegibles de JSON, el profesor utiliza la extensión de chrome JSONView, aquí les dejo en link para agregarla:

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related

Hice un pequeño cambio solo para traer los podcast en español jeje:

'https://api.audioboom.com/channels/recommended?category_ids[]=179'

dato adicional uso este color en el header y en background de la clase clip #4a148c

![](

Buen día compañeros, comparto el link donde estoy subiendo los cambios vistos a lo largo del curso.

Repo NextJS 2018

Saludos.

Home

Channels

Podcast

<h3>Utilizando un componente funcional:</h3>

Ya que, las clases son más pesadas, más lentas y todas esas chuchas, funciona bien en función para solo mostrar la información

const Podcast = (props) => {
    const { audioClip } = props;
    return(
        <div className="flex column">
            <Head>
                <title>Heart Radio - Podcast</title>
            </Head>
            <Header />
            <div className="podcast justify-center">
                {
                    <h2>
                        { audioClip.title }
                    </h2>
                }
            </div>
        </div>
    );
}
Podcast.getInitialProps = async ({ query }) => {
    const idAudio = query.id;
    const response = await request.get(`/audio_clips/${idAudio}.mp3`, '');    
	return { audioClip: response.body.audio_clip };
}

PD: Utilizen el fetch, aquí utilizo otro cliente HTTP

les comparto mi resultado que buen comienzo con Next

Genail!!
Usando variables dinamicos en css (background-image:url($image-portada))

Vamooos!!

💪 💪

Reto cumplido! No se veía la imagen y tuve modificar picture.

picture 
  background: inherit
  height: 250px
  padding: 10px

💚😎**Reto Completado!**💚😎

Hasta ahora todo se me ha hecho algo fácil, menos lo de css, creo que tendré que seguir el curso de CSS. 😄

Hola, tengo un problema, en algunos podcast todo funciona correctamente, mientras que en otros, me da este error, alguno tienen un solución a esto ?

**

Reto completado 🤘

Todo el reto lo monte en CodeSanBox, les comparto la URL correspondiente a la practica

Codigo
https://codesandbox.io/s/taller-de-next-cf1dj

Montado en un server
https://cf1dj.sse.codesandbox.io/

Reto Logrado

Hola, alguien sabe porque este error:

Así quedo mi podcast page:

Les comparto como me quedo y para hacer el link de volver hice lo siguiente

<header>
	<Link href={`/channel?id=${podcast.channel.id}`}>
		<a>← Volver</a>
	</Link>
</header>

Roberto usó una API muy enredada para este proyecto, me a llevado tiempo entender el JSON. Para la próxima una más sencilla, como una de pokemón, jajaja.

Mi Plataforma:


Mi codigo