Olá a todos, depois de um longo período sem publicar nenhum artigo, estou voltando a escrever aqui no blog. E para voltar a ativa, resolvi falar sobre como criar um aplicativo Android utilizando a IA, para ser mais preciso o Chat GPT. Pretendo criar um aplicativo utilizando o código gerado por IA, fazendo o mínimo de ajustes.
Com a ampla popularização da IA, em vários setores inclusive no de desenvolvimento de software, é cada vez mais necessário sua utilização para aumento da produtividade. Já existem soluções de IA integradas diretamente com o editor de códigos, como o Copilot e o Cursor. Para este artigo eu resolvi utilizar a interface Web gratuita do Chat GPT, a fim de simplificar o processo como um todo.
Então vamos começar, primeiramente precisamos instalar e configurar o ambiente de desenvolvimento. Para criar o aplicativo, vamos utilizar o React Native e a plataforma Expo. Estas tecnologias permitem a rápida criação de um aplicativo Android, caso não conheça o React Native, fique a vontade para visitar a categoria do blog que fala sobre ele: https://irias.com.br/blog/category/react-native/.
Criando o projeto com o Expo
O primeiro passo é criar o projeto Expo, é possível utilizá-lo no MacOS, Windows (Powershell and WSL 2) e Linux, no meu caso estou utilizando o Linux Ubuntu 22.04. Também é necessário possuir o Node.js, o ideal é utilizar a última versão estável, para este artigo estou utilizando a versão: 22.14.0.
Agora utilize o comando abaixo para criar o projeto Expo. Substitua o Notes pelo nome a sua escolha. No comando abaixo executamos o comando de criação de projetos do expo e informamos que o template a ser utilizado será o em branco, apenas com o TypeScript configurado. O Expo fornece diversos templates para serem utilizados, que facilitam o desenvolvimento.
npx create-expo-app@latest --template blank-typescript Notes
Depois de criar o projeto, entre no diretório do mesmo e o execute em modo de desenvolvimento. Para utilizar o modo de desenvolvimento, recomendo a utilização do Aplicativo do Expo que permite executar o App com atualização em tempo real, diretamente em seu smartphone: https://play.google.com/store/apps/details?id=host.exp.exponent.
cd Notes/ npx expo start
Abra o aplicativo do Expo em seu smartphone e escaneie o QR Code.
Iniciando a criação do aplicativo com React Native
Agora que criamos o projeto e configuramos o ambiente de desenvolvimento, abra o código fonte do aplicativo no editor de códigos da sua preferência. O arquivo principal onde está o código fonte é o App.tsx.
Ao modificar a frase: “Open up App.tsx to start working on your app!” para: “Seu APP está começando!” no arquivo App.tsx, note que a atualização no aplicativo em seu smartphone ocorre em tempo real.
O aplicativo que vamos criar é um bloco de notas simples, nele teremos a função de adicionar, listar, pesquisar e excluir notas. Com isso vamos começar perguntando ao Chat GPT, as tecnologias que vamos precisar para criar essas funcionalidades. Vamos fazer isso tendo base a premissa de que não temos ideia do que é necessário em questão de código.
Para isso, abra o Chat GPT no endereço: https://chatgpt.com/ e utilize o seguinte prompt:
“I will create an Android app using React Native with Expo. This App is a notepad similar to Google Keep. It will have the add, list, search and delete functions notes. I would like to know how notes can be stored on a smartphone and what libraries will be necessary for app development.”
Eu escrevi o prompt em inglês, pois creio que funciona melhor em questões de desenvolvimento de software. Primeiro comecei falando o que vamos criar e citei o exemplo de uma aplicação similar. Depois eu perguntei o que eu vou precisar para armazenar os dados das notas no smartphone.
Iniciei com esta pergunta pois é o “núcleo” do nosso App de bloco de notas, armazenar as informações e fazer atualizações nelas. Com base na resposta do Chat GPT, vou utilizar o SQLite para o armazenamento.
Criando o aplicativo com o Chat GPT
Por fim, vamos criar o aplicativo com o Chat GPT, a criação será feita com uma sequência de prompts, assim o ideal é executar um atrás do outro na mesma sessão.
Vamos começar com um prompt para gerar a funcionalidade principal do aplicativo. Agora que sabemos que o armazenamento será no SQLite, podemos nos basear nisso para criar as funções do aplicativo. Nosso aplicativo de notas terá a função de adicionar, listar, pesquisar, visualizar, editar e deletar notas. Tudo será criado em apenas uma tela, onde o campo de pesquisa estará no topo, logo abaixo uma lista com as notas. Na parte inferior existirá um botão flutuante de adição, quando o usuário clicar nesse botão será aberto um modal com o campo para adicionar nota. Também ao clicar em uma nota será possível visualizar ela completa e também editar seu conteúdo.
No prompt vamos começar explicando o contexto, depois vamos dar exemplos de aplicações similares. Então vamos tentar detalhar ao máximo como queremos a aplicação. Caso seja necessário, podemos fazer perguntas ao Chat GPT para saber detalhes necessários para criar um bom prompt. Caso precise, também é interessante perguntar ao próprio Chat GPT, sobre tecnologias e configurações necessárias para criar o aplicativo como deseja.
Prompt IA:
“I will create an Android app using React Native with Expo. This App is a notepad similar to Google Keep and Evernote. It will have the add, list, search, edit and delete functions notes. The app will use SQLite to store the notes.
I made the first React Native app configuration with the Expo using TypeScript. All app code will stay on the App.tsx file.
Now make a code for the app. Use the SQLite library to store the notes. The SQLite will contain one table named: notes. This table will contain two columns: id and note. The id is an int field to auto increment the notes id and field note is a text field to save the note content.
To the app styles, use the Bootstrap 5 css styles. Use the colors palette for the app:
Background color: #FFFBE6
Text color: #356859
Icons color: #FD5523
This is a requirements list the App:
On screen top add a field to find notes on SQLite, use the text inserted in this field to search on note column in notes table. This field will use the style with rounded corners.
Below this find field will be a notes list. This listing shows the notes that exist on SQLite notes table. The listing is ordered by notes id, and the list will show the note content limit on 30 caracter. Each item on the list will be show in a card with rounded corners. At the end of each item will displayed item will exist a trash icon to delete action. The list pagination has 50 items and loads automatically when scrolling the screen.
When a card on the list is pressed, a modal with a note content must have an X button to close the modal. This content will stay in a field to edit. below there will be a button to save.
When a trash icon on card is pressed must be opened a modal with a message alert to remove, in this modal will exist the options yes or no. When yes is pressed the note is deleted and when no is pressed the modal is closed.
On screen footer add a floating button to add notes on SQLite. This button will stay fixed on the lower right corner style of the Google mobile applications buttons. When this button is pressed must be opened a modal with a field to add content for new note, below there will be a button to save. Must have an X button to close the modal. This modal is same modal that edit modal”
Cole o prompt acima no Chat GPT e aguarde ele gerar o código do aplicativo.
Note que o Chat GPT lista os requisitos solicitados que ele conseguiu identificar. Outro detalhe: instale a biblioteca do SQLite em seu projeto. Creio que devido termos passado essa biblioteca como requisito de uso, o Chat GPT deduziu que já temos ela instalada, por isso provavelmente não vai passar nenhum alerta sobre ela na resposta.
npx expo install expo-sqlite
Depois do código gerado, copie e cole o mesmo no arquivo App.tsx no seu editor de códigos. Salve o arquivo, depois recarregue o aplicativo no seu smartphone.
Caso ocorra algum erro, como no meu caso ocorreu este abaixo, que informa que a função: SQLite.openDatabase is not a function.
Descreva o erro para o Chat GPT e peça que ele faça a correção do mesmo. Abra o arquivo package.json e informe ao Chat GPT informações de versões das bibliotecas e componentes. Isto pode auxiliar a ele a gerar uma correção melhor. Meu prompt solicitando a correção ficou assim:
“When using the code generated occurred this error: "TypeError: SQLite.openDatabase is not a function (it is undefined)" I'm use the node js in version: 22.14.0, expo in version: 52.0.38, react in version: 18.3.1, react native in version: 0.76.7, type script in version: 5.3.3 and expo-sqlite in version 15.1.2. Make a correction for this error.”
Depois que ele gerar a resposta, repita o processo de colar o código no seu editor. Agora, aqui o aplicativo funcionou corretamente, mas precisa de algumas correções e ajustes na sua interface.
Vou criar um novo prompt listando as modificações no design que gostaria que fossem feitas. Vou colocar em uma lista para facilitar a compreensão da IA.
Prompt IA:
“Now make some updates on interface styles.
On the note search field, add an internal padding on top and bottom. Add,
an external margin on top and bottom. Update the input placeholder text to: Pesquisar notas...
On each note card, add an internal padding on top and bottom, add external margin on top and bottom, use the color: #B9E4C9 in card background
On the add button, make the button round and decrease the thickness on the plus icon. Add a shadow in the button.
On add and edit modal, create a background in the color: #ffffff. Place the X close button at the top right of the modal and place the save button at the bottom right. Use the same styling as a Bootstrap 5 modal. Update the Save button text to: Salvar
On delete message confirm modal, use the same style that add and edit modal. use a background in the color: #ffffff and add margins between the buttons. Update the Yes button text to: Sim and No button text to: Não and Message to: Você deseja deletar esta Nota?”
Depois das correções solicitadas, a interface do aplicativo ficou da seguinte forma:
Conclusão
Concluindo este artigo que exemplifica como criar um aplicativo Android com IA, conseguimos ver que com apenas 4 prompts conseguimos gerar um aplicativo funcional. Isso mostra quão grande é o potencial da IA, para nos auxiliar em nossos trabalhos. Criando prompts mais precisos e detalhados, é possível obter bons resultados.
Neste exemplo, algumas coisas eu já possuía conhecimento prévio, por exemplo: A nomenclatura dos componentes e configurações no CSS. Também eu já tinha em mente como queria o aplicativo, e a forma de distribuir isso na tela do smartphone. Para o design e cores do aplicativo, eu utilizei como referência o caso de estudo Basil: https://m2.material.io/design/material-studies/basil.html.
Caso você não tenha esses conhecimentos, experimente sempre perguntar para a própria IA, o que você precisa e o que é usado. Isso é importante para escrever prompts mais diretos, o que vai melhorar significativamente os resultados entregues pela IA.
Em breve vou criar um artigo detalhado de como colocar em produção um aplicativo Android criado com o Expo. O código fonte do aplicativo criado neste artigo está disponível no meu Github https://github.com/andersonirias/notas-ia.