IA Está Eliminando a Necessidade de Programadores Web?

E aí tudo bem seja muito bem-vinda ao canal ciência dos dados uma honra est aqui com você mais uma vez PR a gente trabalhar tutoriais de Inteligência Artificial tudo com muita prática tudo com resolução de cases que vão te ajudar a evoluir profissionalmente com essa Skill essa habilidade que é a habilidade mais desejada há muitos anos né Nós estamos falando da Inteligência Artificial o expert inteligência artificial tem se tornado cada vez mais desejado ao longo desses últimos anos né então é uma profissão é uma necessidade é uma Skill né que muitos desenvolvedores muitos profissionais da área de de Business Analytics profissionais da área de bi desenvolvedores como um todo TM procurado se desenvolver cada vez mais para ah possuir essa habilidade no seu portfólio bem para quem não me conhece meu nome é Eduardo Rocha eu sou criador do ciência dos dados aqui no YouTube se você ainda não segue tem canal tem vídeos todas as semanas aí para que você possa evoluir profissionalmente também no Instagram @c doos dados muitos vídeos mais de 1000 vídeos aqui se você olhar aqui no YouTube ó vou até ligar o pincel aqui se você olhar mais de 1000 vídeos muitos tutoriais completos aqui muita uma aplicação prática muito boa desde o básico da ciência de dados ali do machina learning até a evolução né do que a gente vê hoje do trabalho com llms E por aí vai tá bom estamos junto então vendido meu Jabá nessa aula nós vamos trabalhar com uma ferramenta de ia né uma ferramenta de ia desenvolvida com a o poder dos llms e nós vamos aqui fazer um mão na massa para que você possa eh ser introduzido a conceitos e também que você possa não só ser introduzido a conceitos mais entendê-los na prática é isso que a gente vai fazer aqui nesse tutorial tamo junto Beleza então hoje eu quero trazer para você uma ferramenta uma ferramenta um site conhecido como GPT engineer né o GPT engineer é o engenheiro de GPT né é um site Ah ele é desenvolvido com aquilo que há de mais avançado aqui no desenvolvimento web né então nós temos aqui um frontend que é essa carinha que a gente vê do site aqui desenvolvido com react twind e vite Então são tecnologias aqui né em Sima do JavaScript né são frameworks que são utilizados aqui no mundo do desenvolvimento web E é claro nós temos aqui ah embutido naquilo que a gente chama de backend Ah no motor no coração desse site uma aplicação de Inteligência Artificial muito tora e a gente vai conversar um pouco sobre ela tudo bem então o site já tá aí para você GPT engineer app um site muito muito direto ao ponto ainda não é aqueles sites que estão explodindo né como os sites da das próprias grandes empresas desenvolvedoras dos llms né como o cloud eu vou trazer um vídeo aqui sobre o cloud mas hoje você vai ver que o esse site ele não só utiliza o cloud mas ele utiliza é em outros modelos incorporados aqui né como Api para que ele possa desenvolver como a promessa dele mesmo fala né construído eh para a web para uma web 10 vezes mais rápida né então ele traz aqui uma aplicação é sincronizado com o Git Hub você faz o Deploy com um clique esse site ele é realmente surreal assim como todos os sites desenvolvidos ah com aquela característica de chatbot de interação e de nós humanos com a ia ele traz aqui alguns exemplos né uns exemplos bem interessantes né de prompt que você pode utilizar para para você fazer uma interação aqui com a com a inteligência artificial desse site abaixo né então ele tem aqui alguns exemplos né Eh construa uma uma landin Page para minha Startup Ah me ajude a fazer um traqueamento aqui eh do meu portfólio de criptomoedas e faça para mim aqui um dashboard de gestão da minha da das operações da operação da minha Startup então ele já traz aqui coisas que realmente vão ajudar muito ali ah na parte inicial do desenvolvimento de qualquer aplicação tá bom ah se você rolar um pouco para baixo você vê aqui alguns projetos né eu tenho a a aba Onde eu posso eh visualizar os projetos que eu estou ah eh fazendo aqui ao longo do tempo né então você vê que eu tenho uma aba de meus projetos alguns testes que eu fiz aqui para trocar essa ideia aqui contigo nós temos aqui aqueles aqueles que são os mais curtidos né E nós temos aqui aqueles últimos que foram ah desenvolvido e compartilhados né você vê que tem Ah desenvolvimento sendo compartilhado a todo instante né 14 segundos 29 segundos 41 segundos tem pessoas utilizando essa aplicação aí ah no mundo inteiro você vê que eu já fiz um login um profile uma coisa bem simples tem um about aqui né que remete a página dos desenvolvedores né Desse software ele traz aqui uma promessa que é um software que constrói outros softwar né então é bem interessante né uma ia que desenvolve software né um software construindo outro software é a pegada dessa galera aqui do lovable né que desenvolveu essa ferramenta aqui ah muito interessante vamos lá bora trabalhar um pouco com ela eu vou trazer aqui alguns exemplos só para que você possa já se iterar das das funcionalidades né porque essas funcionalidades Realmente são muito dinâmicas e elas trazem um um contexto que o chat GPT ainda não tem por exemplo né que é a criação dos artefatos então ah os artefatos vou mostrar para você e vou tentar já explicar com ele na prática né eu vou fazer essa interação aqui ó ah eh desenvolva um protótipo né então eu só cliquei vou utilizar essa essa essa esse prompt aqui né ele falou assim ó ah O protótipo de uma de um dashboard né com uma interface de usuário aqui para traquear as operações da minha Startup né Eu quero que tenha um um sidebar mais uma barra de navegação um layout entre as sessões ah utiliza o tema Dark né que é uma pegada muito bacana principalmente pra gente aqui da área de TI e algumas visualizações Então esse foi o prompt né eu vou eu vou até eh eh depois a gente vai fazer algumas interações eu vou simplesmente a gente dar o play aqui e vou dar o enter né para que ele possa ah começar a desenvolver essa parada então hoje ele tá usando aqui em inglês ele ele ele mas enfim você sabe que ele utiliza sua linguagem Nativa Então o que ele tá fazendo agora é explicando aqui né O que que ele vai fazer né interagindo com a gente e agora ele tá criando a a interface e além de criar a interface ele cria o que a gente chama de artefato então ó isso que você tá vendo aqui agora né essa esse esse preview aqui do seu do nosso dashboard que a gente pediu que fosse criado é o que é conhecido como artefato né então você no a nos primórdios ali do chat GPT ao fazer as suas interações para fazer um desenvolvimento de alguma aplicação certamente você precisou pegar os códigos e ah colocar Esses códigos aí na seu no seu ah ou no guit Hub ou no seu notebook ou na na VPS Onde você trabalha e depois você precisou fazer a execução você precisou ter ali Ah uma estrutura de backend um node instalado ou um Python instalado alguma coisa do tipo para que você visualizasse se o código tinha eh produzido aquilo que você esperava né e o que a gente tá vendo aqui agora é que essa necessidade ela tá sendo suprida com essa característica que a gente tá visualizando aqui agora que são os famosos artefatos então se você olhar ele já trouxe aqui pra gente uma uma um um preview bem interessante onde ele mostra o dashboard algumas funcionalidades laterais aqui como Analytics usuários eh os settings né as configurações e ele criou dois gráficos aqui Ah é claro que são são gráficos que eh por enquanto estão utilizando dados aleatórios né obviamente mas que você que a gente vai começar a trabalhar essa parada aqui de uma forma um pouco mais profissional né Então a partir de agora a gente pode começar a fazer algumas interações para tornar essa aplicação um pouco mais um pouco mais robusta tá bom esse é o nosso primeiro testezinho ele tem aqui né o login as configurações é claro que por enquanto não tem nada né então n o que a gente tá visualizando aqui é realmente a estrutura do do a estrutura visual do nosso do nosso software né Ah se você visualizar a gente tem uma navegabilidade aqui entre os arquivos bem interessante né ele mostra pra gente o que que ele criou aqui e você pode fazer um uma parte de renomear o projeto e por aí vai logo aqui em cima você pode pedir para abrir numa nova aba né eu cliquei para ele abrir numa nova aba tem aqui o uma visualização e de mobile né você vê que não foi desenvolvido para ser eh uma para ter uma interação de mobile por enquanto mas tudo isso você pode começar a interagir aqui para que o software ele tenha a sua cara bem interessante né para quem não é desenvolvedor isso aqui é um verdadeiro mão na roda se você visualizar Ele criou a ele criou aqui à esquerda eu vou habilitar aqui só para você visualizar a o fruto do trabalho dele né então você vê que ele ele fez a explicação aqui eu vou até pedir para ele aqui ó poderia eh traduzir para português Brasil Então vamos ver que que ele vai fazer aqui e aí ele vai ele vai fazer a tradução e ele vai modificar não só né O a sua interação né o prompt que ele coloca mas pelo que eu tô vendo ele tá alterando Inclusive a codificação né se você olhar a estrutura de um software ele tem a vários vários arquivos né então eu vou dar um exemplo aqui para você se eu abrir o o github e procurar aqui uma vou procurar aqui né um um site eu tô entrando aqui no no login da no Ah vou vou procurar aqui um alguns repositórios aqui que eu acredito que eu tenho ó um nextjs chat então ó se você abrir uma aplicação né na web ele ela geralmente contém vários diretórios né vários diretórios como pastinhas no Windows aí Tá bom então ó geralmente esses diretórios eles têm ali algumas algumas similaridades no desenvolvimento de projetos né então por exemplo o diretório we a o diretório src o diretório que é o Source né que é o fonte Ah e por aí vai components né que são diretórios onde a gente armazena ali os componentes aqui está no typescript Então fique tranquilo isso isso pode ser um pouco mais poroso para você que nunca viu desenvolvimento web Mas o que eu quero te dizer nessa explicação é que quando a gente tá num processo de desenvolvimento é muito comum a gente ver as pastas e as pastas com os diretórios para armazenar a cada característica né cada pedacinho de código ah cada pedacinho de código tem a sua funcionalidade e o que é bem interessante aqui no no nesse GPT engineer nesse Engenheiro GPT é que ele traz aqui pra gente a a os arquivos né então é bem interessante essa organização né ele mostra aqui pra gente o código O preview do código e e esse código todo de forma eh organizada digamos assim a gente eu vou trazer um outro conteúdo aqui para você para que você possa ah visualizar coisas que inclusive são mais avançadas do que do que essa estrutura né né Existem algumas Outras aplicações onde a gente já pega ali o visual code já faz a interação e nessa interação ele já cria os diretórios para você para facilitar a vida de quem tá desenvolvendo né aplicações de I com frontend backend E por aí vai ah como cursor é uma ferramenta que eu vou trazer aqui para você vai ser um vídeo separado só para esse cara de tão fera que ele é e agora nós vamos trabalhar aqui eu vou trazer para você a a explicação de alguns pedaços do código né como por exemplo aqui tá a estrutura né do índice né do índice eh jsx a o a o sidebar a barra de navegação o dashboard então você vê que ele tem uma série de codificação que você não precisa se preocupar agora para cada uma das funcionalidades que ele desenvolveu aqui nessa nessa parte Inicial né então ele trouxe aqui cada um dos cinco arquivos e os cinco arquivos estão aqui prontos para que você possa estruturar essa parada né eu vou clicar aqui para visualizar no github E aí você vai ver que ele vai pedir para eu me conectar com o meu github e o que ele vai fazer é exatamente isso aqui é essa estrutura de diretórios ah onde ele vai colocar ali A Hierarquia de conteúdos aqui dentro tá bom você vê que tem vários arquivos né JS né JavaScript typescript eh O readme que é a explicação do projeto em si né esse aqui é um é um um nextjs ai chatbot né foi construído ali com um ia um llm que nesse caso aqui foi o chat PT Mas ele tem um visual mais profissional mais bonito do que aplicações como stream Lead por exemplo que são um pouco mais limitadas quando a gente olha pro ambiente web em si e agora com essas ferramentas o expert Ema Ele tem muito mais recursos em suas mãos para que ele possa construir projetos mais profissionais ainda né e aqui tem toda documentação de como que você deve fazer aí a a instalação daquilo que é necessário E por aí vai vai é aqui é isso que a gente coloca aqui no readme tá bom ah uma coisa bem interessante é que aqui eu não vou fazer o login nesse exato momento tá bom eu poderia simplesmente fazer a conexão para que a gente já visualizasse deixa eu fazer aqui deixa eu colocar o github do do cência dos dados né eu vou colocar aqui ó somente nesse repositório E aí eu deixa eu ver se eu coloco outros aqui seleciono repositório deixa eu colocar aqui tem que criar algum repositório eu eu acredito que eu tenho que criar Deixa eu ver se eu consigo já criar por aqui se eu tiver que criar Ah se eu tiver que criar um novo eu não vou deixar ele fazer então eu Eu precisaria criar um novo ou colocar ali acesso em todos os repositórios eu vou colocar aqui eu não tenho nada tem tem privados é claro mas ele não ele não acessa esse privado Beleza eu vou pegar aqui no meu celular ele vai colocar aqui o pedir clicar né no no botão deixa eu simplesmente Abrir col o número 83 que apareceu aqui show de bola o pedido de login foi aprovado e agora ele vai fazer ali o login por que que eu tô fazendo isso para que eu eu já mostre para você essa funcionalidade de ver os diretórios já dentro do github né então ele abriu aqui ó Create repositório ah ciência dos dados e por aí vai É isso mesmo esse aqui ciência dos dados Eu Tô clicando aqui para ver se ele vai pedir para que eu crie algum algum código Beleza então vou clicar aqui em View em github E aí ele já vai mostrar aqui pra gente né a codificação que ele fez então o que que ele levou né pra estrutura aqui do github o nome né o Startup Tracker Nexus que ele deu o nome dessa aplicação né Ele trouxe aqui a a pasta source né que é o o fonte trouxe o index e uma série de configurações onde a gente onde a gente deixa eu ver se is esse Deploy aqui ele ele fica no né ele vai ele ele joga exatamente a iteração que a gente tá tendo aqui né então ótimo bem interessante essa parte aqui deixa eu clicar e visualizar no github novamente para terminar de visualizar todos os as informações aqui para você então ó dentro do source tem o components dentro do components tem as informações do dashboard da barra de navegação dos itens Ou seja todos aqueles códigos que estão aqui por trás Eles já foram colocados lá no github Isso facilita demais aqui o seu processo de criação né porque a sua estrutura ela já vai ficando guardada onde você vai provavelmente fazer o Deploy que é a partir do G Hub então isso aqui ajuda demais tá bom bora fazer bora fazer um um um teste onde a gente faça uma uma uma criação né eu vou voltar aqui pro dashboard e vou tentar construir algo novo tá bom Bora tentar fazer algo novo então eu vou pedir para ele fazer algo do tipo assim ah Desenvolva a Ah um site com é um site de um size né um soft acfs nós vamos vender ali o acesso a esse a esse site para que os usuários eles possam utilizar a nossa ia utilizar aquilo que a gente tá construindo dentro desse site tá bom e a pessoa vai lá e paga com assinatura então vou colocar aqui uma coisa que é mais ou menos trivial para que você eh entenda né o poder que tá na tua mão aí de desenvolver negócios inclusive nessa nessa nessa pegada de Saas ou ou até mesmo pegar essa Skill para ajudar a empresa onde você trabalha tá bom ah e e tudo com essa facilidade aqui que a gente tem hoje então ó desenvolva um site de um Saas pegada e pegada Dark e use o que há de mais novo ah em react twind te o escrev errado mas ele vai entender shad CN Ui que mais e e coloque como produto acesso ao nosso chatbot o nosso chat ai que é o qu Bora pensar num cas massa aí onde a gente coloa aqui uma interação bem interessante né Tem vários vários tipos de chatbots né hoje em dia a gente tem a gente pode até colocar um um Vou colocar aqui um psicólogo Vai um um terapeuta chatbot ai terapeuta terapeuta beleza Ah vamos usar no modelo né que aí é o é o motor né motor aí há o Daí vamos pensar né a gente a gente quer usar a gente quer usar o cloud 3. 5 que foi o que trouxe essa pegada de artefatos pra gente né então vamos lá que que ele vai fazer entendido vou desenvolver um sais com o tema escuro para um chatbot ai terapeuta usando react twind component shat CN ui Ah vamos usar o cloud 3. 5 como modelo pro chatbot né e aqui está o plano eu vou atualizar o arquivo index.

js para criar a página inicial né então o home tá aqui no index index ele vai criar um componente pro chatbot vai adicionar a página de preço vai atualizar o arquivo de navegação e aí a gente vai começar aí a fazer a brincadeira as alterações tá bom terapia do Futuro hoje né então ele trouxe aqui uma pegada Ah uma pegada interessante né eu vou só pedir para ele a agora a gente vai começar a fazer as iterações né ó ó gostaria gostaria que usasse uma pegada mais e com botões de neon E aí essa parada do terapeuta vai ser o terapeuta que vai atender a galera do desenvolvimento a galera ansiosa aí do desenvolvimento né porque que gosta de neon essas coisas são Geralmente a galera da ti né então vamos lá uma pegada de botões neum e cores Ah que não fiquem é que não fiquem difícil visualização Ah beleza visualização que mais que eu posso colocar eh deixa eu ver se ele já colocou aqui o a ah quero que coloque eh mais sessões eh nesta página inicial tais como ah depoimentos a empresas que que financiam o terapeuta EA que mais ah login login e alguma algum tipo de gamificação né paraa pessoa ter vontade de voltar fazer a iteração isso tudo é é uma coisa muito importante de se pensar quando você tá desenvolvendo ferramenta né e alguma gamificação pedi coisa para caramba deem o enter e bora ver o que que ele vai fazer aqui pra gente são muitas modificações Mas enfim vamos lá então a entendi sua solicitação vou atual o design para incluir elementos nenhum melhorar a visualização além de adicionar novas sessões Como Eu mencionei né então ele vai fazer as alterações no index na home né E vai atualizar alguns estilos globais o que ele tá fazendo aqui é exatamente cuidar do CSS o CSS é tipo a musculatura ali né do a musculatura os o design ali do corpo né da da página né ele deu algum problema e ele vai dar muito problema beleza ó eu vou pedir para ele mostrar o log ah do do erro para ver se ele visualiza ele não conseguiu Ah ele não conseguiu visualizar alguma coisa aqui o log não ficou claro eu vou fechar e vou voltar aqui pera aí ah V vou vou falar que deu um erro Ah beleza consegui pegar o o log aqui ó e deu pau deu pau corrige E aí vamos ver se ele vai trazer pra gente aqui a a estrutura ele tá dando problema exatamente numa Deixa eu ver se eu consigo ver aqui enquanto ele escreve n tem o ind deu um pau no te ind deu um erro no CSS na renderização Qualquer coisa a gente pede para ele dar uma ajustada aí ó então desculpa beleza aí ele já conseguiu já arrumou Olha só como a gente tem o poder de ir customizando essa parada né então ele trouxe aqui né o ai terapeuta terapia do Futuro hoje converse com a nossa I terapeuta alimentado por Cloud 3. 5 e descubra uma nova forma de cuidar da sua saúde mental comece sua jornada inteligência avançada oferecendo respostas inteligentes empática suporte disponível 24% privacidade uma parada muito massa depoimento né então depoimento Zinho aqui empresas parceiras Ele trouxe aqui alguns cards pra gente colocar empresas que eh porventura façam Acesso aqui dos seus saais E aí é claro né simplesmente fazer essa parada e colocar né você tem que mostrar que essa ia E aí você vai ter que desenvolver fazer o fine turning né de conhecimento mesmo se você colocar simplesmente um modelo desse e não fizer um ajuste fino ele vai ser mais do mesmo né e os grandes modelos né esses grandes chatbots que realmente fazem diferença e que por isso é claro são utilizados aí no no Business São aqueles que são né retreinar anterior que foi exatamente um tutorial sobre o fine tuny né dos modelos llms a gente tava utilizando o chat o chat nós estávamos utilizando a o GPT 4 e o GPT quatro ele quando eu fazia ali uma pedia para ele fazer uma explicação sobre um tema específico ele tinha lá o seu treinamento e fez ali a sua a sua criatividade só que quando a gente rodou novamente com o ajuste fino onde eu peguei a Bíblia né na se você não viu ainda Fique tranquilo A aula anterior de segunda-feira tem lá llm fine turning eu vou mostrar o vídeo aqui para você já para você já assistir esse cara a gente pegou né uma o nosso banco de dados é esse cara aqui ó esse vídeo aqui ó nós pegamos um banco de dados que tá na web que porventura era a Bíblia eh King James E aí eu pedi para ele trazer a resposta pra gente de acordo com aquilo que a gente estava utilizando para alimentar o modelo que no caso era o capítulo um de provérbios E aí você vê que a resposta dele já foi muito diferente já foi bem em cima do que tava escrito ah ou seja em cima daquilo que Ele foi treinado para fazer então Sim há uma um trabalho ainda muito grande de ajuste Fino que a gente faz para desenvolver essas aplicações aqui tá bom Ah eu vou visualizar aqui na web para ver como é que ele tá ficando aqui né a gente tem essa essa opção de já estar aqui na web e fazer os ajustes né a gente pode melhorar bastante tem muitas coisas aqui mas você vê que já é uma uma uma característica Inicial onde a gente vai começar a fazer aqui a nossa navegabilidade tá bom cada um dos botões a gente pode criar páginas novas aqui né então vamos lá bora fazer um pouco mais de interação né ó como poder podíamos dar e um gostinho para o usuário antes da assinatura antes da assinatura é outra coisa eh poderia e criar criar criar Eduardo criar a estrutura de preços a do Saas com eh assinatura free Premium e etc Beleza bora ver o que que ele vai fazer aqui agora então ele vai atualizar os seus códigos novamente né então ele vai ele tá atualizando a home né vou abrir aqui do lado para você ver ele tá escrevendo agora né então ele tá atualizando a a home e toda essa estrutura há muito pouco tempo atrás era uma estrutura que dava muito trabalho para o desenvolvedor né então ele tinha que ter ah muitos conhecimentos acumulados ali um portfólio muito grande de JavaScript de eh CSS HTML para que ele soubesse como que ele pode como como que ele poderia estruturar né cada pedacinho da página e agora esse trabalho praticamente ele vem sendo desenvolvido praticamente por ia né então ele adicionou aqui pra gente né vamos olhar a atualização ó iniciar sessão gratuita a clicou no botão ele já cai aqui né oi ah você pode me ajudar E aí bora ver se ele já colocou um modelo aqui por trás né Eu não sei n Mas essa é uma resposta simulada do eii terapeuta né em uma implementação real ela estaria sendo gerada pelo Cloud 3.