Backend com Painel admin Para Site Loja Virtual com Gemini 4 e Antigravity + Hostinger MCP

Vídeo em Português, publicado pelo canal Mesaque M. Academia Web Pro-X.

Sobre este conteúdo: O resumo, os principais pontos e os temas abaixo são gerados automaticamente a partir da transcrição do vídeo. Eles refletem o conteúdo, opiniões, afirmações e previsões apresentadas no vídeo e não representam posicionamento, validação ou verificação de fatos pelo All The Gate.

Resumo do vídeo

O vídeo apresenta a criação do back-end e do painel administrativo para uma loja virtual desenvolvida em um vídeo anterior, utilizando o Antigravity, o MCP da Hostinger e inteligência artificial (Argon/Gemini). São demonstradas a implementação do banco de dados MySQL, o gerenciamento de produtos, o CRUD de administradores e categorias, o cadastro de novas mercadorias com imagens e a realização do deploy final na hospedagem.

Principais pontos

• O projeto conecta o Antigravity ao ambiente da Hostinger por meio da chave API e da extensão Hostinger MCP.
• Utiliza-se inteligência artificial para gerar e executar o código do back-end, do banco de dados MySQL e do painel administrativo com base em prompts.
• O painel administrativo permite gerenciar produtos (adicionar, editar, excluir), visualizar categorias e controlar o perfil dos administradores.
• Foram implementados ajustes como o CRUD completo do admin, proteções adicionais no login e a opção de criar e gerenciar categorias diretamente pelo sistema.
• O processo inclui o upload de imagens de produtos, conversão de arquivos e a realização do deploy automatizado da aplicação.

Temas

E-commerceBack-endPainel AdministrativoBanco de Dados MySQLInteligência ArtificialHospedagem HostingerDesenvolvimento WebDeploy

Leitura deste bloco: cerca de 4 min · Duração do vídeo: 24 min 2 s

Neste post

• Por que o painel é a parte que mais importa
• Leitura do All The Gate para lojistas do Brasil (interpretação, não fato)
• O que checamos na documentação oficial
• Ferramentas que aparecem no vídeo
• Mais sobre loja própria no All The Gate
• Conta pra gente

Resumo rápido

• Com um prompt só, o Antigravity criou o back-end, o banco MySQL e o painel admin; segundo o criador, a primeira execução levou cerca de 18 minutos.
• Na segunda rodada vieram o CRUD de administradores, proteção contra força bruta no login, categorias no menu e slug com o nome do produto.
• A compra ainda não é automática: o pedido vai para o WhatsApp e é fechado à mão, e o pagamento integrado ficou para um próximo vídeo.

Por que o painel é a parte que mais importa

Vitrine bonita não basta: é o painel que permite trocar preço, foto e categoria sem abrir o código toda vez. Neste segundo episódio, o criador pede à IA, dentro do Antigravity e conectada à hospedagem pelo MCP da Hostinger, que monte o back-end e o painel administrativo da loja feita no vídeo anterior, e mostra também os tropeços, como a senha inicial “admin 123” e um token de API que aparece na tela.

Leitura do All The Gate para lojistas do Brasil (interpretação, não fato)

Esta é a leitura do All The Gate, não um fato. Para quem vende no Brasil, fechar o pedido pelo WhatsApp é um começo realista e evita guardar dados de cliente logo de cara; quando a loja passar a coletar nome, endereço e CPF, a LGPD entra na conta e o cuidado com o banco de dados precisa crescer junto. O passo de pagamento também pesa mais aqui do que nos exemplos gringos: o vídeo cita Stripe e PayPal, mas para o comprador brasileiro o Pix costuma ser a primeira opção que ele procura. O ponto que mais merece atenção é a segurança do acesso: um token de API da Hostinger carrega as permissões da conta, então vale criar um token com validade curta, revogar o que apareceu em vídeo ou print e, quando der, preferir o login pelo navegador. Sobre custo, o Antigravity aparece no site oficial como disponível sem cobrança; os valores de hospedagem e cupom citados no vídeo vêm de link de afiliado do criador e não foram conferidos por nós. O modelo que ele chama de “Argon” (citado junto com o Gemini 4 Pro) é a nomenclatura do criador; não confirmamos esse nome em página oficial.

O que checamos na documentação oficial

• Hostinger, “Manual Configuration”, documentação atualizada em 2 de setembro de 2026 (conferido em 31/10/2026): ao conectar com token de API, a extensão grava o token em texto puro no arquivo de configuração MCP de cada editor que ela gerencia; a Hostinger pede que esse arquivo seja tratado como segredo, lembra que o token carrega as permissões da conta e pode ter validade, e diz que o login pelo navegador (OAuth) não grava token nenhum.
• Mesma página da Hostinger (conferido em 31/10/2026): além do servidor completo, com 372 ferramentas, o pacote traz servidores por área, como o hostinger-ecommerce-mcp, que cobre lojas, produtos, pedidos, frete e pagamentos.
• Site oficial do Google Antigravity (conferido em 31/10/2026): o Antigravity é apresentado como a plataforma de desenvolvimento com agentes do Google, para macOS, Windows, Linux e Googlebook, com a indicação “Available at no charge”. Informação conferida naquele momento; pode ter mudado.

Ferramentas que aparecem no vídeo

• Google Antigravity (IDE com agentes)
• Hostinger Connector e MCP da Hostinger
• Gemini, usado para reescrever o prompt
• MySQL, o banco de dados da loja
• WhatsApp, para fechar o pedido manualmente
• Stripe e PayPal, citados como opções de pagamento para um próximo vídeo

Mais sobre loja própria no All The Gate

• Como criar uma loja online na NUVEMSHOP | Episódio 1 | Layout, Identidade visual | Recomeçando
• Mercado Livre vs. Loja Online: qual dá mais lucro? (fiz a conta)
• Loja pag na entrega vs dropshipping: qual funciona melhor?
• Comecei um E-commerce do ZERO… e as Coisas Não Saíram Como Eu Esperava | Loja do Zero #01

Conta pra gente

O criador prometeu trazer o sistema de pagamento se o vídeo bater 10 comentários e 100 curtidas. Se fosse a sua loja, qual seria o primeiro meio de pagamento que você ligaria a esse painel: Pix, cartão ou continuar no WhatsApp por enquanto? Responda nos comentários e mande este post para quem está montando a primeira loja própria.

Este resumo foi gerado com apoio de IA e revisado por humanos.

Transcrição do vídeo

Texto das legendas disponíveis; pode conter erros.

Nesse vídeo, vou te ensinar a criar o back-end e o painel administrativo para você estar adicionando novos produtos aqui nessa loja virtual que eu criei no vídeo anterior. Tá um vídeo sensacional, todo o passo a passo, tudo o que eu vou utilizar vai estar no vídeo, tá? O prompt e etc. Não vou deixar você na mão, não. Inclusive, ocultar o texto aqui para ficar somente a imagem para o cliente ver, ah, as imagens por completo, tá? E variar entre elas. E aqui está o back-end. Você simplesmente loga, tem toda a segurança, tá OK? E aqui você pode, ah, editar aqui o perfil, mudar a senha e etc. Você pode ver a loja, você pode sair, você pode ver todos os produtos ou separado por categoria, você pode criar as categorias aqui, criar uma nova categoria. Vem em produtos, você pode adicionar um novo produto também com todas as informações do produto. Você adiciona quantos produtos você quiser. Vai estar linkado no MySQL, que é o banco de dados que nós vamos utilizar o IDE Antigravity mais o MCP da Hostinger utilizando a IA Argon novo modelo aqui Gemini 4 Pro, tá OK? Então vamos lá. Eu criei esse site no vídeo anterior, tá? E eu fiz várias melhorias depois disso. Supermoderno, super de boa. Qual a proposta desse vídeo de hoje? Eu quero criar um back-end com um painel e nesse painel eu vou poder mudar o nome do produto e ele vai aparecer aqui, nome, imagem, preço e tudo mais. Será que eu consigo? Será? Será? Criar mais categorias e tudo mais. Vamos lá. Eu posso fazer o quê? Aqui no Antigravity, já estou com o sistema rodando aqui. Veja no vídeo anterior onde eu mostro do zero, desde a ideia, concepção até prompt e depois executar, editar e deploy na Hostinger com o MCP. Tá tudo lá. Agora nós vamos dar continuidade. Então, essa é a segunda parte, é a parte do back-end que é um pouco mais complicada, demorada e não sei se eu vou conseguir. Para isso, eu vou utilizar aqui o Argon. Eu estou aqui com 59% ainda dele, tá? Vamos ver se eu vou dar conta. Tá OK? O que é que eu preciso? De um bom prompt. Eu preciso de um prompt excelente. Para isso, eu vou voltar aqui no Gemini com o mesmo prompt. Eh, lembrando que para vocês o prompt foi melhorado. Eu usei esse prompt aqui, ó, tá? Aí eu falei para ele, ó, ó o tanto de coisa que eu tive que pedir melhorias. Refaça esse prompt. Para você já foi o prompt perfeito. Agora eu vou fazer o seguinte, olha só. Gemini, olá, boa tarde. Olha só, ficou sensacional esse projeto. Eu fiz até algumas alterações manuais e umas outras alterações ali. Ele pergunta para mim o que é necessário e eu vou responder, tá bom? Vocês viram aí, né? O prompt falado, zoado. Na verdade não é o prompt, né? É a ideia. Agora ele vai criar o prompt. Tá tudo aqui. Bom, eu não vou nem ver. Enquanto ele carrega, olha só, se você vir aqui na Eu vim aqui, ó, em API, na Hostinger, tá? Vim aqui no Antigravity. Tanto faz, tá? Qualquer um desses aqui é tudo a mesma coisa. E eu vim aqui, ó, instalação com clique, se você quiser, instalação com clique. Vai abrir o Antigravity, vai instalar instalar a extensão e vai conectar. Configuração manual, simplesmente você tem que clicar isso aqui ou ir lá instalar. Eu vim aqui no Antigravity e instalei, tá aqui, ó, tá? Só que ela deu expirou, porque eu tinha colocado só um mês, eu acho. Aí expirou. Que que acontece? Eu vim aqui em configuração manual e dei as liberações necessárias. Você pode configurar isso lá também, tá bom? E você vem aqui, ó, agentes conectados, eu tenho dois, né? E tokens. Aí tá vendo meu token aí? Beleza, não não era para mostrar, mas você tá vendo, né? Você vem aqui em criar novo token e aí vem aqui no Antigravity, clica aqui, eh, instala essa extensão, tá? Hostinger MCP. E você simplesmente vem aqui, ó, em conectar e outro, escolhe outro e coloca a chave API. Escolhe o que você quer dar a liberação, tá? Eu quero dar liberação para essas coisas aí. E pronto. Estamos aqui. Ó, terminou. Copie e cole abaixo. Poxa, não me falou nada. Está seco hoje, hein? Este escopo modular, você prefere criar o banco de dados manualmente no HP no Não. Eu quero que ele faça tudo. Estou preguiçoso. Beleza? Vamos lá. Eu vou colar o prompt e ele vai se virar. Eu vou mudar aqui para o Argon. Eh, eu acho que eu não vou conseguir, eu vou colocar no High. Cara, não é tão difí- Eu vou deixar no High, porque o back é um back-end com painel, pode ser que nem dê conta de fazer. Ó, já fica ligado aí. Eu tenho uma semana para usar. Tá aqui em 59%, ó, 59%. ele vai resetar daqui 6 dias, eu eu comecei ontem, ou seja, a cada 7 dias ele reseta. Então, tomara que o limite aqui do 3.8 consiga me me salvar nessa aí, tá? Então vamos lá, Argon High, tá vendo aqui? Vou enviar. Bom, e para você que não tem a Hostinger, é claro, eu vou fazer o merchan aqui ó, URL aqui, Hostinger, esse é o link que eu vou deixar na descrição. Quando você clicar no link, tá, na descrição, ele tem que vir com essa que esse parâmetro aqui ó, AFF 2369 e a campanha tem que tá igual 99. Por quê? Porque isso vai me dar comissão, eu preciso de comissão, tá certo é meu trabalho e eu você recebe meu conhecimento e eu em troca peço que se você usar as ferramentas, use as que eu indico. Se você não quiser, ok, tá, é livre, mas eu te peço muito. Ele tá aqui ó, em Black Friday, 82%. Tá bom? Então aproveita essa oferta, ok? Você desce aqui ó, utiliza garoto ó, ilimitado, para esse tipo de site é tranquilo, mesmo com back-end, tá? Deploy ali através do CP. E aí você vai entrar, não é esse preço não, tá? Esse preço aqui tá alto. Tem vários planos, tá? E vou explicá-los. Olha só, esse plano aqui ó, de 12,99, você vai colocar o cupom abaixo, vai tá o link mais o cupom. E aqui vai ter um QR Code, se você tiver com o celular, basta apontar, ok? E aí você põe o cupom, tá? Ah, é o seguinte, pronto, colocou aqui o cupom, você vai ter um desconto aí ó, vai para 11,69 por mês. Você escolhe o período, só não indico um mês, porque você vai perder tanto o domínio grátis, quanto o meu cupom, tá bom? E é ruim para você e é ruim para mim, tá ok? Continua aqui ó, depois de você continuar, ele vai pedir login, se você não tiver conta, vai criar, se você já tiver, ele já vai dar um, né, passar para a próxima página, para você instalar o site, ok? Mas no caso, não precisa instalar. Finalizou? Ok, você vai lá, baixa o CP, você vai entrar aqui, básico como eu falei, vem aqui, tá, entre a PI, antigravity, pega a sua sua PI e cola aqui no antigravity, tá ok? Eu tô com Cloud, é o GPT ou Cloud? Cara, mesma coisa, você pede para ó, instala esse trem para mim e pronto. Olha só, vamos lá, faz o concluído, verificação de permi- permissões e criação. Lembra que eu falei para ele no prompt, perguntar se realmente podia ser feito isso? Ele falou que sim, ó. Analisei as capacidades, ó, database create, permissão e capa, Roger, obrigado. Cara, isso aqui é lindo demais. Vou me colocar grande aqui para vocês me ver. Mas gente, isso aqui, obrigado Roger por fazer uma coisa tão na mão, tão na roda, tá? Vamos voltar lá. Vamos voltar lá. Rapaz, é incrível, tá? Você pode criar aqui, ó, o local, no local roxo, né? Você pode colocar aqui o o roxo interno, domínio vinculado, nesse caso é esse, o servidor, ah, o nome do banco, do usuário e etc, etc, etc. Show de bola. Conforme solicitado, parei aqui para a sua gravação. É porque eu falei para ele que eu ia gravar um vídeo, tá? Posso prosseguir agora para execução completa? Sim, Argon High. Pronto. Vamos esperar, né, gente? Vamos esperar. Bom, para nossa alegria, depois de 18 minutos, terminou. Será se funcionou? Bom, ele tá dizendo aqui que foram alguns arquivos, ó. Eu não mudei nada aqui, mas ó, só tá dizendo que foi um arquivo, admin.js. Na verdade, ele criou toda essa pancada aqui, ó. Assets, ele criou todas o, ah, pasta onde coloca as imagens. Para ser sincero com você, essa assets eu tinha criado antes. Eu vou ser bem honesto, o que, vou mostrar o que eu fiz depois da última aula, tá? Olha só, vamos ver se tá aqui, né? Eu suavizei aqui, ó, glassform, tá? Aqui, ó. Glassform do fundo, tal, tal, tal. Você copia aí o prompt, tá? Se você quiser que fique igual ao meu, ok? Aí ele disse que ajustou, aí depois eu falei para ele, ó, faça deploy na rocha depois dessa mudança. Aí ele disse que não pôde fazer porque estava errado, aí eu fui e ajustei a API, né? Aí eu perguntei, todos os produtos e pesos carrega tudo uma vez? Porque ia ficar muito pesado, né? Ele disse que não, que é sob demanda, mas que podia separar. Por quê? Como que ele carregava antes? Tá vendo aqui que tem, ó, produto, ele tá aqui, ó, urbano, produto um, produto dois, produto dois, não existia isso, produto três, produto quatro, era um link só. E ele só recarregava via demanda. Aí ele disse que podia mudar isso a hora que eu quisesse. Eu falei, então muda. Ó o que eu pedi para ele, ó. Leia aí, tá? Aí ele falou, fica tranquilo, tá tudo certo, é sob demanda e blá, blá, blá. Eu falei, não, então faz os trem, ué. Faz sim, implemente isso. Não faça deploy ainda, faça deploy depois, tal. Aí eu falei para ele, faça deploy agora. Ele foi e fez, né? Aí o que acontece? Falei para ele que um tinha ficado sem imagem, inclusive nesse daqui, ó, eu falo para ele colocar, ah, cada produto ter sua URL e além disso ter uma página aonde tivesse todas, uma página não, uma pasta onde tivesse todas as imagens, por isso que ele criou aqui, ó, assets, imagens, tá? E criou todas essas imagens, pode perceber que as imagens são as imagens estão lá, ó. Aí eu posso trocar a imagem aqui mantendo o, o, o, o mesmo nome, ele vai carregar lá. É, mas sem o deploy, né? Isso aqui tudo local. E aí eu pedi para ele fazer o deploy, ok. E aí, ó, ok, faço o deploy, ele fez, deu erro, na, ó, aqui que deu erro, né? E feito, ok, ele ajustou para mim. Aí ele falou que colocou aqui as imagens e tal, ok? Aí eu fiz a aula com vocês. Eu vou fazer bem rápido porque eu não vou gastar tempo com aquilo lá, gente, é só para mostrar aqui, você faz a alteração que você quiser, tá bom? Como agora vai ter painel e vai ter banco de dados, vai não, já tem, né? Então com certeza ele vai criar essa assets, porque não pode ficar pegando imagem de outro lugar. Não é que não pode, né? Vai ficar pegando lá do pexels, por exemplo, e se o site cair? Tem que estar tudo no seu servidor. E ele criou aqui agora, ó, uploads, aí tem aqui htaccess, tem aqui outro htaccess, não sei porque que tem dois, o admin, admin html e criou essa penca toda, o sql, tal, tal, tal, tudo mcp, eu já falei para você. E ele falou que, né, nós vimos, tá, sim, faça tudo, não deixe brecha. Foi aonde eu pausei, né? 18 minutos, ele disse que a fase a dois a seis foi feita. Links oficiais, agora tem um link, ah, do site que já era, né? E o link do site com admin para fazer login e também da api, olha que legal, se a gente quiser criar qualquer coisa, tem a api agora do site. Usuário admin, ó, vamos lá, e admin 1 2 3. Eu vou pegar aqui, ó, vou, não vou copiar não que esse trem nunca abre, né? Eu vou vim aqui, ó, vou copiar assim mesmo, vou colar numa nova que eu não quero perder aquela ali e vou entrar. Olha só, primeiro vamos ver se é o admin, ó, o site está aí, olha, veloz, funcionando, tá tudo certo aqui, ó, ó, show de bola, perfeito aqui embaixo também, ok, tá tudo perfeito. Então vamos lá, vamos ver agora, ah, eu para aí, isso é para exemplo, ó, olha aqui em cima, ó, prod 10, é o produto 10, ó, o próximo, prod 11, prod 12, Cada URL que eu posso compartilhar e não vai compartilhar o site todo, vai compartilhar só aquela página. Muito bom isso, foi o que eu fiz e eu gostei bastante. Muda aqui a categoria, né? Vamos ver aqui agora o painel, que foi o que nós decidimos criar. Admin e aqui a senha é o quê? Admin 1 2 3, bem difícil, né? Vou pedir para ele fazer o CRUD lá também do do admin, ah, que vai precisar, porque eu tenho que mudar meus dados, né? Eu sei que eu posso ir no banco de dados e mudar, mas imagina minha senha, né? Você pode acessar aqui e ferrar comigo. Entrar. Ó moleque, gostei! Aqui tem o título, conectado como admin, total de produtos. A gente pode fazer o quê? Botar o menu lateral, aí vai ter total de produtos, categorias, eh, novo produto, tudo que tem aqui em cima, entendeu? Pode estar lá em cima também, mas vai ter aqui do lado. É perfil, porque para mim usar, mudar aqui os os dados, né? De senha e tudo mais. É colocar uma camada a mais também de proteção, que está muito simples, né? Tem que tomar cuidado com isso, tá bom? E aqui os produtos, ó. Você pode editar o produto, por exemplo, esse aqui. Não gostei dessa imagem, clique em editar, tem todas as informações e aqui você pode, rapaz, ficou muito bom. Não sei se está funcionando. Vamos ver, aqui você tem as categorias, ó, urbano, tá aqui, os seis produtos da categoria urbano. É bom que ele apresenta do jeito que mostra lá. Isso é muito bom, né? Do jeito que mostra aqui, gente, ó. Como é que eu vou para a loja pública aqui, ó? Tá vendo aqui, ó? Do jeito que mostra aqui os cards, que é para a gente ter ciência do que é, do que é cada um, tá? Olha que show de bola, ele mostra até miniaturas aqui, ó. Vamos adicionar um novo produto? Aqui você pode pesquisar também, por exemplo, eh, kit nome, eu vou colocar kit, só para ver se ele mostra alguma coisa, kit. Olha aí, aí você pode editar só ele, excluir. Vamos adicionar um novo. Ah, moleque! Nome do produto, categoria, ah, senti falta de adicionar nova categoria, né? Pode colocar um prompt. Eu preciso que tenha como eu adicionar categorias também. Olha só. Depois tem a questão do SEO, passar um skill de SEO ou mesmo você criar um prompt que fala para ele lá, ó, "Mude tudo o que precisa mudar para que fique com bom SEO". Eu eu um print aqui do produto, que eu não vou ficar tirando da minha cabeça. Aí eu vim aqui no Gemini, colei e falei: "Ficou muito bom". Com o prompt fez todo o back-end praticamente aceitável. E eu pedi para ele: "Crie uns produtos para mim". Então, vamos lá. Nome do produto, vamos adicionar o produto aqui, adicionar. O nome do produto, tem o preço dele, categoria viagem. Aqui ele colocou o badge destaque do topo, tá vendo aqui, ó? Hã, esse badge aqui, ó. Só que aqui no back, no painel, não tem como a gente mudar esse badge. Tem só a descrição. Vamos ver como é que vai funcionar. Vamos pegar aqui a descrição. Vídeo do YouTube eu vou deixar esse mesmo, que é só um exemplo. Ei, rapaz, ó uma coisa ruim. Eu não gosto disso, né? Vamos ver se ele vai recomeçar, tá vendo? Ele Ele recomeçou. É, é para sair só se clicar no X, tá? Só se clicar no X. Aí tem as features aqui, tá? Ó, roda 360, cadeado, anti-impacto e blá blá blá. Vamos lá. E aí os selos, né? Vou pegar qualquer um aqui, ó. Roda 360, vou pegar aqui gota, esse daqui vou pegar, sei lá, um cadeado, por que cadeado pena expansível escudo. Pronto. Hã, as imagens agora. Deixa eu ver se tá tudo certo. Tá tudo certo, vai para o próximo produto. Depois eu vou questionar ele sobre isso aqui, tá? Vamos lá para o produto. Eu não tenho as imagens aqui, mas eu posso vir aqui no Magnífico, eu sou afiliado também, vou deixar o link. Ninguém nunca cadastrou pelo meu link. Se depender disso aqui eu passo fome, pelo amor de Deus. Aqui no estoque eu posso pegar imagens, tá? Para esses produtos. Vou vir aqui no estoque, vou pesquisar. O que é que é que eu tenho que pesquisar? Produto, vou pesquisar aqui, ó, mala de bordo aero, não sei o quê. É tanto faz a imagem, tá? Eu vou pegar aqui a orientação horizontal, ó, esse aqui tem duas, ó. Eu vou pegar uma, duas. Eu queria que tivesse uma terceira imagem, né, para ficar legal. Ah, tem, tem. Vixe, aqui, ó. Ó, vou pegar daqui mesmo, vou baixar cada uma na menor tamanho possível. Essa aqui, ó, pequena, essa e essa. Pronto, só essas três. E mas é muito bom. Você tem uma vasta opções aqui. Gera vídeo, gera áudio. Ah, cambada. OK? Hã, eu fiz um plano anual, ó, 180 mil já gasto. Eu tenho 419 ainda. Vale a pena, tá? OK? Vamos lá. Agora vamos voltar aqui. Vamos pegar a imagem um, eu vou escolher as três logo e ele se vira. Vamos ver como é que funciona. Ó, as três estão aqui. Não vou botar nome, tá? Você põe nome para SEO aí. Ó, legal. Ele já colocou aqui qual qual. É caso você queira escolher, né? Eu quero que essa seja. Então você escolhe essa aqui. Eu queria que essa aqui fosse a primeira, então você vem aqui, ó, principal, tá vendo? Hero. Aqui, ângulo, ângulo. Cadastrar e converter. Vamos ver se vai dar certo. Olha! Produto cadastrado, imagens convertidas. Vamos ver todas. 19, ó. Vou tirar aqui kit. Todas, viagem, aventura, urbano. Tava em viagens, né? Bom, parece que não Ah, deu, tá aqui, gente. Vamos ver? No front. Vamos abrir a loja pública e vamos aqui em viagem. O primeiro produto qual é? Ó, tan dan dan dan. Ih, rapaz. Tá aqui. Próximo. Ah, moleque! Funcionou perfeitamente. Olha a imagem aqui. Ficou um pouco borrada porque a imagem baixei bem pequena, mas tá aqui o produto, ó, com essa imagem, a segunda imagem e a terceira imagem. Mas Zaki, mas ah, ficou o corpo dele aqui e a imagem ficou aí atrás aqui do do embaçado aqui. Esse embaçado é necessário, tá? Para que dê destaque aqui para o texto e ele não atrapalha tanto a imagem. Fica assim, mas não atrapalha tanto. Então, você tem que fazer o quê? Todas as imagens que você baixar, você tem que pensar que que a pessoa tem que tá à direita, o produto tem que tá à direita. Quer ver, ó? Vou pegar só um exemplo aqui para a gente trocar. Na qual aqui, ó. Essa aqui vai dar perfeito, ó. Vou clicar nela, tá? Vou colocar como destaque. Vou até baixar ela um um tamanho maior, esse 1.500 por alguma coisa aqui. Beleza? Aí eu vou voltar no nosso back. Cadê ele? Aqui, ó. Editar produto. Olha só, acabei de criar com vocês, hein? Eu vou escolher a foto de destaque, vou colocar esta rosa. Eu sei que nada a ver, porque todas são fundo branco, esse aqui é fundo rosa, mas é só para você entender aonde deve ficar o produto, tá bom? E salvar alterações. OK? Olha só, produto ficou aqui na direita. Agora ficou, não ficou bom, né? Aí aqui ficou um pouco ruim, aqui um pouco ruim, mas depende da imagem, OK? Mas o destaque ficou perfeito. E aqui embaixo ele não está, mas se você clicar em outra imagem, quando você descer, vai tá aqui. Olha aqui. 1.250. Vamos ver se dá para comprar ele? Vamos clicar aqui e vamos comprar. Olha só, posso comprar quantos quiser. Cartão de crédito, isso aqui também fiz, tá? Tira um print daqui e fala: "Ó, quero igual esse aqui". Tá OK? Ele vai fazer para você. Olha aí, show de bola. E outra coisa que eu não gosto é isso, ó, você clica fora, ó, ele sai. Não, ele tem que sair somente clicar aqui. Esse design dessa barra de rolagem scroll aqui, ó, tá ruim, tá? O design tem que ser mais bonito, né? Se eu quiser mais um produto, ó, vou adicionar aqui, ó, comprar. E também pode ter aqui, ó, adicionar e não comprar, né? Comprar agora ou adicionar, beleza? Ah, vamos ver aqui se o vídeo dele rolou. Eu tô vendo tudo perfeito. Olha só, vamos ver o vídeo. Aí, ó, tá rodando o vídeo. Muito bom, hein? Tem alguns detalhes para ajustar? É claro que tem, mas só isso aqui já tá muito bom. Me diz aí, vamos ver quanto eu fiquei? Um prompt, tá, gente? Vocês viram aqui comigo que foi um prompt. A aula de hoje do back-end mais o painel foi um prompt. Argon, usage, ó lá, 44%. Se eu não me engano, tava 55, né? Ou seja, usei pouquíssimo e fiz um bom trabalho. O que que eu vou pedir para ele agora? Olha só, crie o CRUD para admin, OK? Deve mudar nome, foto, senha e ID, mais segurança no login. Além disso, deve ter possibilidade de criar categorias. Elas devem aparecer no menu. Também, ao invés de comprar, poderia ser adicionar ou algo assim, tá? Vou mandar. E agora eu vou esperar e vou trazer só o resultado. Só lembrando, tá? Ah, se você quer que eu coloque aqui um sistema de pagamento onde a pessoa clique, pague e já vai para você a ordem, fatura e tudo mais. Bom, tem o Stripe, tem o PayPal e tem o Web Max, tá? Eu queria que eles me patrocinassem, tá? Mas até agora tá difícil, tá? Então, se tiver 10 comentários, eu quero e 100 likes, aí eu trago o sistema de pagamento. Vamos voltar lá para o IDE agora. Voltei, ele terminou aqui. Ele levou infinitos 20 minutos. Bom, você pensa assim, né? 18 minutos para instalar todo o back-end e 20 minutos só para adicionar duas coisas, o CRUD do admin e também a categoria? Sim, não sei porque demorou tanto não. E eu pus no máximo, tá? O que foi implementado? O CRUD, né? Completo do admin. Meu perfil. Ah, mas aqui não vai ter conta para o Não, nesse primeiro momento não. Por quê? Eu vou estar explicar o por quê. A pessoa clica aqui em comprar, olha só, vamos lá. Ela clica aqui e clica em comprar. Ele vem para cá, a pessoa preenche e manda. Esses dados vão via WhatsApp aqui. E lá a pessoa finaliza, tá, manualmente. Ah, mas eu queria automático. Aí sim precisaria de conta para o cliente, tá? Não vou mexer com dados do cliente aqui, por enquanto, porque precisa de ter uma uma vasta eh modificação aqui, até a questão de LGPD e lá vai. Tá bom? Por enquanto desse jeito aqui tá ótimo. A ideia era o quê? Mostrar um back-end e mostrar também o dashboard aqui para gerenciar esse back-end e nós fizemos. Então o que ele fala? Eh fez o CRUD, agora dá para mudar algumas coisas, tá? Múltiplos administradores, às vezes você é sócio, eh você coloca dois administradores, você e outro, né? Não tem problema. Mais segurança de login, login eh ele criou aqui agora a proteção anti brute force, blindagem de sessão, ah e lá vai. CRUD de categorias integrada, menu superior, aba categorias do menu. Vamos ver tudo isso na prática, né? Ele mandou essa mensagemzinha aqui que eu não faço ideia de acha esse aqui. Beleza, Dimes, que é para mim deixar para lá esse trem. Olha só, foram muitas linhas aqui, muitas linhas aqui e lá vai, OK? Vamos testar? Eu estou aqui no admin, olha, já estou aqui, olha. Eu vou dar o Ctrl F5, ele pediu para logar, já estava salvo, olha, produtos, categoria de do menu. Como assim categoria? Ah, tá, as categorias: viagem, aventura e urbano. Ah, mas eu é que não queria categoria, queria outra coisa aqui. Cara, esse é o meu projeto, você pode adaptar o seu. Falar: "Eu quero que tenha um menu aonde eu possa colocar o URL e o nome". Eu não quero que você designe. Pronto. Aí vem os produtos dessa categoria, aí vem para cá, olha. Administrador e perfil. Administrar o perfil, mudar nome, foto ou senha, novo administrador. Olha só, administrador principal é eu, editar meu perfil. Aqui eu posso mudar o nome, né, Mesac lindão. Senha, mudar a senha, colocar uma senha bem difícil aqui. Ah, nova senha e confirmar senha. Se quiser uma fotinha, será que esse trem funciona? Funciona, olha não, olha, tá funcionando sim, rapaz. Vou botar esse cidadão aqui. Vamos botar. Pronto. Eh a senha, não vou mexer com senha, salvo, pronto. Olha aí, o usuário agora é isso aí, olha. Que massa, hein? Eu gostei. Ver a loja, né? Sair, produtos, categorias e administrar o perfil. Muito bom mesmo. Vamos adicionar um novo produto. 789,1, tá certo. Descrição. Pronto, mudei aqui os diferenciais, três imagens. Eu vou pegar três imagens diferentes aqui. Eu vou pegar essas amarelas aqui, ó. Mesma coisa, tá? Só que não é o que tá dizendo aqui, né? Mochila. Eu não vou pesquisar imagem, tá? Isso aqui é só para você entender. Ó, vamos ver se vai salvar. Vou beber minha água Sabor Aqui. Marca aí, @saboraqui, patrocina o Mezack, por favor. Ele ganhou menos cinco inscritos esse mês. Vamos ver a loja, vamos ver a loja. Que pobreza, hein? Ah, eu nem vi, eu coloquei em viagens também? Nem sei se eu coloquei em viagens. Ah, olha isso aqui, perdeu imagem, ó. Não entendi por que perdeu as imagens, tá? Eu vou questionar ele depois. Ah, esse aqui, pronto, olha aí, coloquei a imagem do lado direito, olha que legal. Aí tem, ó, adicionar sacola, tá vendo? Mais, ó. Adicionar, legal. Vou entrar aqui na sacola, vou tirar tudo. Ah, próximo, vou voltar. Olha só, as imagens, ó. OK? Bom, tá tudo feito aí, tá tudo perfeito. Feito é melhor que perfeito. Bom, adicionar sacola, olha lá, adicionou. Aí você vem aqui para outro produto, por exemplo, agora eu quero também essa mochila. Adicionar sacola. Olha aí, porque a venda mesmo é aqui, né? A compra, na verdade, não é aqui. Olha só, em off, depois que eu terminei o vídeo, eu fiz isso aqui, ó. Criei algo para manter o layout, vocês copiem aí, tá? Por quê? Olha só, tá vendo aqui? Eu criei esse botão aqui, ó, puf, fica só a imagem. Aí a pessoa pode ver o próximo produto, só imagem, tá? E ela vê aqui as imagens, olha só. Foi isso aqui que eu criei, tá OK? Principalmente no mobile. Olha só no mobile. Com esse botão aqui, ó, é muito melhor, tá? E aí ele fez, entretanto, ele colocou dois botões, eu pedi para ele deixar só um. Ó, remova o da seta que eu criei aqui, ó, print. Remova esse botão aqui, ó, deixe só aqui. O que aconteceu? OK? Aí eu desci, desci. E aí, o que acontece? Preciso que mude algo que vai interferir no front e no banco de dados e no painel. O que é? Aí na imagem eu circulei, tá vendo aqui, ó? O valor, ele fica muito discreto. Eu queria que ele ficasse mais aparente. E esse aqui, essa parte de cima, ele copia o primeiro aqui, ó. E essa parte, tá vendo? Destaque, alta performance, que eu sublinhei, ele não tem como mudar lá, no ato de adicionar o produto. Eu falei para ele isso, tá? Você tira Tira aí, ó. E aí, é, ele fez. E eu pedi para ele que o slug também poderia ser o nome do produto ou ter um campo para mim colocar o slug, porque o slug tava prod um, prod de produto, né? Produto um, produto dois. Não, eu queria que o nome do produto fosse o slug para ficar com esse ozinho melhor. E ele fez, tá ok? Depois de tudo isso, mandei fazer o deploy e tá aqui o site como eu mostrei aqui para vocês, tá? Perfeito. Na hora de adicionar aqui agora um produto, tem os três campos, tá vendo, ó? O diferencial um, você escolhe o ícone, o texto e o textinho que vai aparecer embaixo. Não é mais automático. Ah, e aqui agora dá para você colocar o nome do produto, categoria, criar a categoria, colocar o valor e o slug, tá? Pode ser o título, você só copia e cola aqui ou você cria um slug diferente, ok? E o destaque? Qual é o destaque? Essa parte aqui de cima, ó, bagagem, bordão premium, tá vendo? Agora você pode colocar bagagem, bordão premium, tá? E aí você faz todas as outras alterações. Foi só isso que eu fiz, ó. E aqui acabei de fazer o deploy, beleza? E como sempre, gente, o link vai estar aqui, eu vou, ah, melhorar aqui, ó, melhorar, ó. Eu vou editar, beleza? E vou simplesmente colocar o outro vídeo aqui, o prompt também. Tá vendo esse prompt que eu utilizei aqui, ó? Eu vou colocar lá. Só que eu já, esse prompt aqui, ó. Só que eu vou ajustar ele, por quê? Eu já quero que venha com edição de categoria, já venha com crud de admin, tá bom? Então vocês já vão pegar um negócio melhor do que eu aqui, porque eu tive que fazer, vocês já vão pegar ele pronto, tá? Então vem aqui, copia e veja meus produtos aqui, gente, ó, loja oficial. Poxa, compra aí minhas coisas para me ajudar, tá ok? Que Deus abençoe sua vida, sua família, seus planos, que você ganhe muito, mas muito dinheiro mesmo em 2027, ajude muitas pessoas, que seu negócio prospere e que você me ajude aqui também. Tá bom? É o que eu desejo para você, para sua família. Amém? Então, feliz 2027.

Assistir ao vídeo original no YouTube

Assuntos: E-commerce, IA e tendências. Publicado no YouTube em 2026-10-30.

Seleção automática por assunto e idioma. O vídeo pertence ao canal de origem.