Como criar um aplicativo de idiomas tipo Duolingo (sem programar)

Aprenda a criar um aplicativo para aprender idiomas tipo o Duolingo, usando o editor visual web do Bubble.

Êtes-vous prêt à créer un clone Duolingo com “no code”? Tradução: Você está pronto para criar um aplicativo de idiomas tipo Duolingo sem código?

Se sua resposta é ‘oui’ (sim), então você está no lugar certo!

Nunca foi tão fácil começar a criar um software poderoso com o Bubble. Usando o Bubble é possível projetar e criar rapidamente um software funcional que vai além das experiências estáticas. Criadores de todo o mundo estão usando o Bubble para criar marketplaces, diretórios e até redes sociais.

Vamos entender o processo para criar um aplicativo de idiomas tipo Duolingo, Busuu ou Open English, sem custos. Se você pretende replicar o app completo ou apenas explorar alguns recursos-chave, este guia explica como começar a criar os workflows do seu app.

Os passos para criar um aplicativo de idiomas gratuito sem precisar programar incluem:

Faça seu cadastro gratuito no Bubble.

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito: aqui

Podemos começar criando o protótipo do design do site ou criar os campos necessários dentro do banco de dados.

Então, nesse caso, vamos começar usando a ferramenta de design visual do Bubble para moldar a interface de usuário da nossa plataforma. Se você está criando uma versão do Duolingo, algumas das páginas principais que precisará incluir são:

• Um portal back-end para criar novas aulas: o processo de adicionar uma nova aula incluirá páginas únicas para selecionar um idioma, uma categoria e também adicionar novas palavras.
• Uma página de seleção de idioma: onde os usuários podem selecionar o idioma que desejam aprender.
• Uma página de seleção de categoria: permitindo que os usuários selecionem em uma lista de categorias de aula em um idioma.
• Uma página de lição: exibindo uma lição principal.

Um dos principais recursos do Bubble é a capacidade de enviar dados entre páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante de seu banco de dados quando for necessário.

Portanto, no caso do seu app de idiomas tipo Duolingo, você só precisará criar uma página para hospedar cada aula individual. E então poderemos desenhar a lógica necessária para exibir apenas o conteúdo relevante em cada página quando for preciso.

Configurando seu banco de dados

Depois de mapear a exibição do seu site, você pode focar em criar os campos de dados necessários para alimentar sua aplicação. Já que vamos depender desses campos para conectar os workflows por trás da sua plataforma.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Assim, ao criar seu aplicativo de idiomas com o Duolingo como MVP, precisaremos dos seguintes tipos de dados e campos:

Tipo de dado: Usuário

Campos:

• Nome
• Idiomas de aprendizado — Lista de idiomas. Nota: A criação de um campo como uma lista, baseado em um tipo de dados separado, permite a integração perfeita de todos os campos de dados relevantes.

Tipo de dado: Idioma

Campos:

• Nome
• Bandeira nacional
• Categorias — Lista de categorias

Tipo de dado: Categoria

Campos:

• Título da categoria
• Idioma
• Imagem
• Palavras — Lista de palavras

Tipo de dado: Palavra

Campos:

• Ortografia inglesa
• Ortografia estrangeira
• ‘É correto’ — com o padrão como ‘não’
• Imagem

Workflows para criar um aplicativo de idiomas

Então, agora que você estruturou tanto o design quanto o banco de dados do seu aplicativo, é hora de começar a juntar tudo e deixar seu app de idiomas funcional.

No Bubble, a principal maneira de fazer isso é com workflows. Cada workflow acontece quando ocorre um evento (ex.: o usuário clica em um botão), e então executa uma série de “ações” como resposta (ex.: “cadastre o usuário”, “altere um item no banco de dados”, etc.)

Criando uma nova palavra da lição

Um dos primeiros recursos que criaremos é um portal back-end, onde os administradores podem enviar novas palavras como lições para a nossa plataforma.

Nota: Antes deste ponto, recomendo adicionar manualmente uma lista de idiomas e categorias ao seu aplicativo por meio do banco de dados do Bubble. Essas categorias podem incluir tópicos como noções básicas, viagens ou pessoas e serão armazenadas em cada idioma.

Para a página de upload de idioma: adicione um grupo repetidor para exibir uma lista de idiomas.

O tipo de dado deste grupo repetidor precisa ser configurado como idioma; a fonte de dados deve retornar uma lista de idiomas.

Agora basta mapear o conteúdo dinâmico para exibir o que for relevante na linha superior; o grupo repetidor preencherá as colunas com base nos dados existentes do aplicativo.

Enviando dados entre as páginas

Dentro de um grupo repetidor, é possível criar eventos com base em elementos em cada linha. Esse recurso será útil ao criar recursos de navegação pelo seu aplicativo de idiomas.

Assim que um administrador selecionar um idioma, exibir uma lista das categorias relevantes naquele idioma.

Para criar esse workflow, vamos criar um gatilho quando o título do idioma for clicado.

Logo, crie um fluxo de navegação para enviar o usuário para outra página.

Daqui, selecione o tipo de página de destino como a página de categoria de upload.

Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba quais categorias exibir. Os dados a enviar são os do idioma da célula atual.

Quando for direcionado para a página de categoria, você poderá extrair esses dados do evento e exibir o conteúdo relevante para esse idioma.

Para este funcionamento, garanta que o tipo da página de destino corresponda à propriedade de dados que está sendo enviada no workflow. Neste caso, defina a categoria de upload para uma propriedade de idioma.

Na página de categoria, configure o grupo repetidor para exibir uma lista de categorias onde o idioma equivale ao idioma da página atual.

Portanto, agora, quando uma categoria é selecionada, crie um último evento de navegação, enviando o usuário para a página de palavra da lição.

Neste workflow, também passaremos as palavras armazenadas na categoria da célula atual.

Exibindo uma aula de idioma tipo Duolingo

Após criar a lição no portal back-end, concentre-se na experiência de front-end para os usuários.

Criaremos novamente uma tela dedicada para os usuários escolherem os idiomas que desejam estudar.

Para agilizar, você pode duplicar a página de upload de idioma existente.

Nessa página, crie um novo workflow ao clicar na “bandeira” do idioma.

Este workflow enviará o usuário para a página de selecionar categoria, passando o idioma da célula atual.

Além disso, também queremos incluir um evento adicional, adicionando o próprio idioma a uma lista de idiomas que os usuários estão aprendendo.

Assim, para esta etapa, precisaremos fazer alterações em um item no banco de dados — o usuário atual. O item a ser modificado é a lista de idiomas de aprendizado, adicionando o idioma das células atuais.

Na página de seleção de categoria, configure o tipo de página como idioma, permitindo referenciar suas categorias únicas.

Dentro do grupo repetidor, procure uma lista de categorias disponíveis onde o idioma equivale ao idioma da página atual.

Portanto, agora, quando uma categoria é selecionada, crie um último evento de navegação; enviando o usuário para a página de palavra da lição.

Nesse workflow, também passaremos as palavras armazenadas na categoria da célula atual.

Agora, na nossa página de palavras da lição, comece configurando o tipo de página para ser uma categoria.

Adicionando elementos dinâmicos para exibir a palavra em destaque da lição atual

Como adicionamos a palavra em destaque da lição na página de upload, vamos exibir o primeiro item da categoria de páginas atuais.

Em seguida, adicione outro grupo repetidor à página, desta vez definindo o tipo de conteúdo como uma palavra.

Ao configurar a fonte de dados deste grupo repetidor, procure uma lista de palavras onde a categoria seja igual ao mesmo valor da categoria das páginas atuais.

Como o conteúdo dentro do grupo repetidor exibirá uma lista de respostas potenciais para a lição, também optaremos por embaralhar cada item dentro do grupo repetidor.

Na célula do grupo repetidor, vamos adicionar palavras com grafia estrangeira e uma imagem para associar à própria palavra.

Marcando uma resposta como correta ou errada

Depois que um usuário responder a uma lição, precisaremos mostrar se ele selecionou a resposta certa.

Assim, usando elementos de ícone, podemos exibir rapidamente rótulos de correto e errado que serão acionados após uma resposta específica.

Dessa forma, ao acionar o gatilho, exibiremos o ícone verde.

E então replicate esse mesmo workflow, mas desta vez ajustando a condição para identificar quando a palavra é correta = ‘não’, resultando na exibição do ícone errado.

Recursos adicionais para um Duolingo Sem Codar

Agora que você está familiarizado com a criação de campos de dados customizados e a exibição de conteúdo dinâmico, você pode ficar mais criativo com as experiências do seu aplicativo.

Adicionalmente você pode:

• Criar uma barra de experiência enquanto os usuários completam novas lições.

• Exibir uma lista de lições do usuário em uma página de perfil.

• Adicionar arquivos de som para cada palavra, permitindo aos usuários ouvir a pronúncia de cada lição.

• Modelagem de Banco de Dados: Tutorial para Iniciantes

• 📱 Como criar um Aplicativo Responsivo no Bubble

ATENÇÃO: Este é um tutorial traduzido para Português a partir do original em Inglês. O Bubble possui dezenas de tutoriais ensinando a criar aplicativos de forma 100% visual, sem precisar programar. Acesse aqui todos os tutoriais. Acesse aqui a versão original deste tutorial em inglês.