Transcription
Isto é extremamente impressionante e está a chegar muito perto do que descrevi no passado, quando se trata de colocar um *prompt* e obter uma aplicação completa. Isto é assustador, isto é fixe, com muitas implicações à volta disto. Neste vídeo, vamos aprender tudo o que precisamos de saber sobre os agentes Replit. O objetivo deste vídeo é que, quer tenhas pouca ou nenhuma experiência em programação, ou se programas muito, possamos aprender tudo o que precisamos de saber sobre esta nova tecnologia no que diz respeito aos agentes Replit e à criação de *software*. Parece bom? Vamos mergulhar.
Aqui está a situação e aqui está o caso de uso dos agentes Replit e porque provavelmente os verás no teu *feed*. A ideia é esta: quando programas *software* ou *websites*, tipicamente há muito mais envolvido do que apenas o código em si. Há uma dor envolvida no sentido de construir um ambiente de desenvolvimento, implementá-lo, ter um armazenamento e uma base de dados. Tipo, tudo o que envolve construir *software* é muito mais do que apenas, sabes, teres um ficheiro, colocares o teu código e algo acontecer. E é por isso que o agente Replit existe agora, para que possamos usar ditado simples para programar o nosso *software* e *websites*. Vamos mergulhar.
Logo de cara, cria uma conta Replit. Quando chegares a esta página, que agora está na página inicial, vais notar uma pequena e agradável nova funcionalidade chamada Replit Agent. E a ideia aqui é que podemos simplesmente falar com ele e ele vai gerar algum código. Então, temos algumas opções aqui, como marcos locais, mapa, análise de ações, lista de espera, *website* e ver mais. Isto é bastante sólido, pois ao clicar em "ver mais", podemos ter algumas ideias do que podemos fazer com o agente Replit e o seu caso de uso aqui.
Por exemplo, temos o "leitor de livros", que é realmente aleatório, mas ok. Vamos tentar este *prompt* aqui, que é bastante fixe, que é "Link na BIO". Isto lembra-me um pouco o Linktree. Tenta o *prompt*: clica em "criar uma aplicação de link na bio que apresenta todas as contas de redes sociais numa interface estética fácil e intuitiva. Usa uma imagem aleatória para um espaço reservado de foto de perfil por enquanto. Começar a construir agora."
Claro, vais dar um pequeno aviso aqui, pois esta é uma tecnologia totalmente nova e, tipo, se as pessoas comprassem este plano e ficassem tipo "que raio acabou de acontecer? Isto não funciona!", é experimental. Isto é uma coisa grande em *software*, eles ficam tipo "ah, sim, é uma beta" ou "é uma alfa", então se há erros, há erros.
Continuar. Estamos a desenvolver um novo *website* com Replit AI e tudo o que fiz foi adicionar uma frase. Então, comparado com o que vimos no passado, quando se trata deste tipo de tecnologia, isto é muito parecido com "está a fazê-lo passo a passo", em vez de "gerar uma tonelada de código e dizer 'diverte-te'". É muito passo a passo aqui, o que é fixe.
Então, a primeira coisa importante que me está a perguntar aqui é: "Gostarias de alguma funcionalidade adicional? Também podemos fazer alterações mais tarde." Muito fixe. Vou em frente e tentar este aqui. Em teoria, eu poderia selecionar todos estes se quisesse, mas por agora, vamos apenas ver o caso de uso aqui. Vamos dizer "plano de prova e iniciar". Como a interface de usuário vai parecer aqui é que ela começará a criar os ficheiros subjacentes. Tipo, isto mostra loucura! Ele vai largá-los aqui à nossa esquerda e depois teremos uma conversa até à direita. Também nos dá um pequeno e agradável esboço do que está a acontecer aqui: "criado main.py", "criado static/CSS/styles.css". Tipo, está apenas a dar-nos a estrutura geral do que está a acontecer aqui e aqui.
Isto é extremamente impressionante e está a chegar muito perto do que descrevi no passado, quando se trata de colocar um *prompt* e obter uma aplicação completa. Isto é assustador, isto é fixe, com muitas implicações à volta disto. Então, dentro desta interface de usuário, estes são os nossos ficheiros subjacentes associados a ela. Isto, como um repositório, aqui vai ser, ou isto é como o real, tipo, como é que se parece. E depois, todo o caminho para a direita, aqui está o nosso *chat*.
Então, a primeira coisa que ele realmente nos pede para confirmar ou não é se isto parece bom. Então, tudo parece bom aqui, exceto a foto de perfil, certo? Então, o Twitter, Instagram, LinkedIn, GitHub, sabes, todos os espaços reservados estão muito bons aqui. Então, o que vou fazer aqui é dizer-lhe para irmos e tentarmos este *prompt* aqui: "Tudo parece bom, exceto a foto de perfil aleatória. Podemos carregar uma imagem aqui e torná-la um círculo? Também, para o teu nome, coloca Corbin Brown e para a breve biografia, 'subscreve', talvez." Vamos ver como ele interage. Enviar. Está a pensar.
Vou dizer que o que estamos a ver aqui hoje é impressionante. Não estou a dizer que isto não é impressionante de todo, mas da perspetiva de um engenheiro *full-stack* aqui, há algumas desvantagens. Certifica-te de subscrever aqui, pois vou fazer um vídeo ainda esta semana a comparar Cursor AI vs. VS Code e Replit, todas estas IDEs, e a mostrar-te qual deves realmente escolher se planeias construir uma aplicação de *software* completa que realmente te dará dinheiro. Parece bom? Vamos continuar.
Aqui, como nota lateral, eu pago pelo Linktree e toda esta experiência está a fazer-me sentir que devia apenas fazer o meu próprio Linktree para o meu próprio caso de uso pessoal. Chega de 6 dólares por mês, chega, chega.
Ok, então parece que isto pode entrar num ciclo aqui. Vou parar o pensamento aqui. Isto já demorou demasiado tempo apenas para fornecer uma imagem para um perfil. Então, vou em frente e fornecê-la eu mesmo. Vou em frente e fornecer o *prompt*: "usa isto como imagem de perfil". Usei aquela pequena funcionalidade de anexar aqui. Carregar em enviar. Ok, conseguimos. Não está realmente centrado, mas conseguimos. Vou deixar isto continuar a pensar aqui.
Deixa-me apenas guiar-te um pouco por esta interface de usuário. Então, logo de cara, qualquer coisa que façamos aqui, oh, está a ir, está a ir. Qualquer coisa que façamos aqui, podemos essencialmente vir para a nossa esquerda aqui, na nossa esquerda aqui, é meio que onde estamos a armazenar todo o nosso repositório, certo? Então, é aqui que o main.py entra em jogo. Este é o código subjacente que vemos nesta visualização web aqui. Esta é a imagem que carreguei anteriormente. E o que é fixe nisto é que, basicamente, dentro da própria configuração de conversação aqui, podemos realmente, sabes, colocar código aqui também, se quisermos. Mas tem em mente que, enquanto o agente está a trabalhar, podes realmente editar os ficheiros de código. Então, deixa-o continuar a pensar.
Além disso, podemos realmente adicionar ficheiros aqui. Também podemos adicionar pastas aqui. E esse é o propósito de estruturar uma aplicação para escala e *software* pronto para nível de produção. Se quiseres ver um vídeo inteiro dedicado a esse tópico, vê aquele vídeo ali. Dou-te a minha perspetiva do *software* que estou a desenvolver atualmente, que é apoiado pela Google, sobre como fazê-lo.
Assim que estiver pronto, ele vai nos pedir uma pergunta de acompanhamento aqui. Em teoria, eu posso ir para o main.py agora. Posso adicionar código se eu quiser. Além disso, posso ver toda a sua linha do tempo que levou para chegar a esse ponto final que vemos com esta visualização web aqui, certo? Então, por exemplo, "editado main.py", "editado templates/index.html", etc. Além disso, no topo desta pequena linha do tempo aqui, podes ver o que mudou com base na saída anterior, com o pequeno amarelo. Quando um ficheiro está amarelo no código, isso significa que algo mudou, algo é diferente do que era originalmente.
Agora, obviamente, a imagem de perfil não está centrada, mas isto é tudo muito inicial, é por isso que temos aquele pequeno aviso a dizer que isto não é perfeito. Mas agora podemos mudar a cor do tema, certo? Podemos ir para o tema escuro ou, ou não podemos. Isto apenas mostra-vos que, sabes, isto ainda está nos primeiros dias. Voltamos, vamos para o tema claro. Ok, acho que estamos tecnicamente a usar o tema claro ou o tema padrão. Então, não é perfeito, obviamente, mas mostra-te para onde isto está a ir.
Agora, a partir daqui, podemos, claro, implementar a aplicação. Então, tudo o que temos de fazer é simplesmente clicar em "implementar a tua aplicação". Posso fazer um vídeo inteiro sobre isto, então, avisa-me nos comentários se quiseres ver isso. Mas no vídeo de hoje, eu só queria mostrar-te o caso de uso deste agente Replit. Também, para contexto, "implementar" significa tipo "colocar na internet", tens um link, outra pessoa pode aceder. Não está em "Localhost 3000", onde só tu podes aceder.
Isso é tudo sobre este vídeo, então não cliques para sair ainda. Quero deixar-te duas coisas importantes. A primeira coisa importante é que, quando implementas neste tipo de situação, estás a pagar um prémio pela implementação da tua aplicação subjacente. Portanto, se quiseres ver como realmente implementar uma aplicação no contexto de programação bruta e chegar a um ponto final onde um *website* está ativo e estás a pagar a taxa mais económica absoluta no mercado agora, vê aquele vídeo de 30 minutos. Ele vem com Google Docs, mostro-te um *chat* GPT, como tudo funciona. Isto vai mostrar-te como implementar uma aplicação da forma mais económica.
A segunda coisa que te deixarei é que vou fazer um vídeo inteiro a mostrar-te por que usarias o Replit, por que não usarias o Replit, pois há razões para o quereres. Então, certifica-te de ficar atento aqui, certifica-te de subscrever e vejo-te no próximo vídeo. O que acham do agente Replit? Vão usá-lo? Não vão usá-lo? Vê aqueles vídeos aleatórios escolhidos pelo YouTube, essa é a minha cara e vejo-te no próximo vídeo.