Bom dia os vídeos dá minha página não estão carregando.
LInk do meu projeto no Github: https://github.com/Carloshbfreire/aluraplay-requisicoes-main
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Bom dia os vídeos dá minha página não estão carregando.
LInk do meu projeto no Github: https://github.com/Carloshbfreire/aluraplay-requisicoes-main
Oi, Carlos, tudo bem?
No seu código, no arquivo "conectaApi.js", você está utilizando a porta 3001. No entanto, o json-server, por padrão, abre na porta 3000. Para corrigir, uma opção é ao executar o json-server, especificar a porta 3001, exemplo:
json-server --watch .\db.json --port 3001
Outra opção, é alterar o código de "conectaApi.js" para rodar na porta padrão, que é a 3000, ex:
const conexao = await fetch("http://localhost:3000/videos")
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Troquei as portas e continua com erro, os vídeos não aparecem.
)
vou te passar os meus códigos.
Index.HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/estilos.css">
<link rel="stylesheet" href="./css/flexbox.css">
<title>AluraPlay</title>
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="cabecalho">
<a class="logo" href="./index.html"></a>
<div class="cabecalho__pesquisar">
<input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input">
<button class="pesquisar__botao">
</div>
<div class="cabecalho__icones">
<a href="./pages/enviar-video.html" class="cabecalho__videos"></a>
</div>
</nav>
</header>
<ul class="videos__container" alt="videos alura" data-lista>
</ul>
<script src="./jp/mostrarVideos.js" type="module"></script>
</body>
</html>
mostrarVideos.js
import { conectaApi } from "./conectaApi.js"
const lista = document.querySelector("[data-lista]")
function constroiCard(titulo, descricao, url, imagem){
const video = document.createElement("li")
video.className = "videos__item"
video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
title="${titulo}" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="descricao-video">
<img src="${imagem}" alt="logo canal alura">
<h3>${titulo}</h3>
<p>${descricao}</p>
</div>`
return video
}
async function listaVideos(){
const listaApi = await conectaApi.listaVideos()
listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
}
listaVideos()
conectaApi.js
async function listaVideos() {
const conexao = await fetch("http://localhost:3002/videos")
const conexaoConvertida = await conexao.json()
return conexaoConvertida
}
export const conectaApi = {
listaVideos
}
Oi, Carlos,
Desculpa a demora em te responder!
No código que chama a API, que está no arquivo "conectaAPI", você está utilizando a porta 3002 do localhost. Então para que você consiga fazer com que os vídeos sejam disponibilizados na tela, precisamos rodar a API com o json-serverpor meio do comando:
json-server --watch db.json --port 3002
Lembre-se que a porta de saída que você colocar na requisição assíncrona, precisa ser a mesma que está rodando no seu terminal com o json-server. Outro ponto importante é manter o json-serverrodando durante o desenvolvimento e sempre que você quiser utilizar o site, caso contrário os vídeos não irão aparecer e você terá um erro de requisição 404, onde os vídeos não são encontrados.
Além disso, sempre que você fizer sair fechar o json-servere abrir denovo é necessário clicar no botão de recarregar a página no seu navegador ou usar o atalho "CTRL R".
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!