Criando novos elementos: Enviar Vídeos. Não consigo enviar novos vídeos | JavaScript: criando requisições

3
respostas

Referente ao curso JavaScript: criando requisições, no capítulo Criando novos elementos e atividade Enviar vídeos

por Ana Paula Aquino Dos Santos

| 47.7k xp | 34 posts

Ao tentar enviar novos vídeos, não aparece a tela de envio com sucesso e nem tão pouco aparece um novo vídeo na página

criarVideos.js

import {conectaApi} from "./conectaApi.js";
const formulario = document.querySelector("[data-formulario]");

async function criaVideos(evento){
    evento.preventDefault();

    const imagem = document.querySelector("[data-imagem]").value;
    const url = document.querySelector("[data-url]").value;
    const titulo = document.querySelector("[data-titulo]").value;
    const descricao = Math.floor(Math.random() * 10).toString(); 

    console.log(titulo, descricao, url, imagem);

    await conectaApi.criaVideos(titulo, descricao, url, imagem);

    window.location.href = "../pages/envio-concluido.html"

    }

formulario.addEventListener("submit", evento => criarVideos(evento));

conecataApi.js

async function listaVideos() {
    const conexao = await fetch("http://localhost:3000/videos");
    const conexaoConvertida = await conexao.json();
     
    return conexaoConvertida;
}

async function criaVideos(titulo, descricao, url, imagem){
    const conexao = await fetch("http://localhost:3000/videos", {
        method: "POST",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            descricao: `${descricao} mil visualilzações`,
            url: url,
            imagem: imagem
        })
    });

    const conexaoConvertida = await conexao.json();
    
    return conexaoConvertida;
}

export const conectaApi = {
    listaVideos,
    criaVideos
}

enviarVideos.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/estilos-form.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>

    <!-- Cabecalho -->
    <header>

        <nav class="cabecalho">
            <a class="logo" href="../index.html"></a>

            <div class="cabecalho__icones">
                <a href="./enviar-video.html" class="cabecalho__videos"></a>
            </div>
        </nav>

    </header>

    <main class="container">

        <form class="container__formulario" data-formulario>
            <h2 class="formulario__titulo">Envie um vídeo!</h3>
                <div class="formulario__campo">
                    <label class="campo__etiqueta" for="url">Link embed</label>
                    <input name="url" class="campo__escrita" required
                        placeholder="Por exemplo: https://www.youtube.com/embed/FAY1K2aUg5g" id='url' data-url/>
                </div>


                <div class="formulario__campo">
                    <label class="campo__etiqueta" for="titulo">Titulo do vídeo</label>
                    <input name="titulo" class="campo__escrita" required placeholder="Neste campo, dê o nome do vídeo"
                        id='titulo' data-titulo/>
                </div>

                <div class="formulario__campo">
                    <label class="campo__etiqueta" for="imagem">Imagem de perfil</label>
                    <input name="imagem" class="campo__escrita" required placeholder="Insira a url da imagem"
                        id='imagem' data-imagem/>
                </div>

                <input class="formulario__botao" type="submit" />
        </form>

    </main>
    <script src="../js/criarVideos.js" type="module"></script>

</body>

</html>

3 respostas

por Luis Dias

| 3187.4k xp | 3467 posts

Developer PHP (⌐■_■)

3 semanas atrás

Oi Ana,

Analisando seu código, identifiquei um problema na função criaVideos do arquivo conectaApi.js.

A string que você está enviando no body do fetch está com um erro de sintaxe.

A descrição deve ser uma string, mas você está usando template literals de forma incorreta. 😜

O correto seria:

async function criaVideos(titulo, descricao, url, imagem){
    const conexao = await fetch("http://localhost:3000/videos", {
        method: "POST",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            descricao: `${descricao} mil visualizações`,
            url: url,
            imagem: imagem
        })
    });

    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

Além disso, verifique se o seu servidor está rodando corretamente na porta 3000 e se a rota /videos está configurada para receber requisições POST. 🤔

Outro ponto importante é se o nome está do no seu arquivo conecataApi.js deveria ser conectaApi.js. Pode ser que em algum lugar do seu código ele não esteja sendo chamado corretamente. 🧐

Para saber mais: Documentação sobre a API Fetch - Explore a documentação oficial da API Fetch para entender melhor como fazer requisições HTTP.

Continue praticando e explorando novas possibilidades!

Caso este post o tenha ajudado, marque-o como solucionado ☑️. Bons Estudos! 🤓

por Ana Paula Aquino Dos Santos

| 47.7k xp | 34 posts

3 semanas atrás

Obrigada por toda explicação eu revi o código:

retifiquei a linha - body: JSON.stringify({ conecataApi.js, escrevi aqui errado, mas o nome do arquivo esta conectaApi.js

O servidor está rodando corretamente na porta 3000/videos, conforme abaixo: http://localhost:3000/

Static files: Serving ./public directory if it exists

Endpoints: http://localhost:3000/videos

History restored

Não sei o que fiz de errado... Não consigo solucionar!!!

Mas de qualquer forma agradeço muito sua ajuda!

por Mike de Sousa

| 894.2k xp | 1478 posts

Alura Scuba Team Suporte Educacional

3 semanas atrás

Oi, Ana. Tudo bem?

Dei uma olhada no código e precisa de alguns ajustes.

1 - No enviar-video.html, na linha 35, você abre uma tag <h2>, mas a fecha como <h3>.

2 - No arquivo criarVideo.js, você nomeia a função criaVideos, mas ao usar no addEventListener, você a chama como criarVideos:

async function criaVideos(evento){ // Ajuste o nome para criarVideos ou a chamada para criaVideos
    evento.preventDefault();

    const imagem = document.querySelector("[data-imagem]").value;
    const url = document.querySelector("[data-url]").value;
    const titulo = document.querySelector("[data-titulo]").value;
    const descricao = Math.floor(Math.random() * 10).toString(); 

    console.log(titulo, descricao, url, imagem);

    await conectaApi.criaVideos(titulo, descricao, url, imagem);

    window.location.href = "../pages/envio-concluido.html"

    }

formulario.addEventListener("submit", evento => criarVideos(evento));

Essas modificações devem ser suficientes para o projeto funcionar, mas se ainda precisar de ajuda, não hesite em me chamar!

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado