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.

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

Êtes-vous prêt à créer un clone Duolingo avec “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 descobrir o processo por trás de criar um aplicativo de idiomas tipo Duolingo, Busuu ou Open English gratuito. Se você está procurando replicar o aplicativo completo, ou apenas tem interesse em utilizar alguns dos recursos principais do site, este guia vai compartilhar 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.

Podemos começar criando o protótipo para o 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
Como criar um aplicativo de idiomas - cadastro Bubble

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.
configurando banco de dados - usuário

Tipo de dado: Idioma

Campos:

  • Nome
  • Bandeira nacional
  • Categorias – Lista de categorias
configurando banco de dados - idioma

Tipo de dado: Categoria

Campos:

  • Título da categoria
  • Idioma
  • Imagem
  • Palavras – Lista de palavras
configurando banco de dados - categoria

Tipo de dado: Palavra

Campos:

  • Ortografia inglesa
  • Ortografia estrangeira
  • ‘É correto’ – com o padrão como ‘não’
  • Imagem
configurando banco de dados - palavra

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 idomas 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.

Criando uma nova palavra da lição - 1

Assim que nossa plataforma tiver alguns dados básicos para trabalhar, começaremos adicionando uma página para selecionar o idioma para o qual gostaríamos de criar uma lição.

Assim, a página de upload de idioma será usada para primeiro selecionar um idioma com o qual gostaríamos de contribuir.

Então, nesta página, adicionaremos um elemento de grupo repetidor para exibir uma lista de todos os idiomas em nosso banco de dados.

O tipo de dados deste grupo repetidor precisará ser configurado como idioma; e a fonte de dados procurará uma lista de todos os idiomas disponíveis.

Criando uma nova palavra da lição - 2

Então, agora que está pronto para começar a estruturar o conteúdo dinâmico que será exibido em cada grade. Simplesmente mapeie a linha superior com o conteúdo relevante que gostaria de mostrar; então o grupo repetidor preencherá as colunas restantes com base nos dados existentes do seu aplicativo.

Criando uma nova palavra da lição - 3

Enviando dados entre as páginas

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

Assim que um administrador selecionar um idioma, precisaremos exibir uma lista das categorias relevantes em um idioma com o qual ele pode contribuir.

Portanto para criar esse workflow, criaremos um novo gatilho quando o título do idioma é clicado.

Enviar dados entre as páginas - 1

Logo ao criar esse workflow, use um evento de navegação para enviar o usuário para outra página.

Enviar dados entre as páginas - 2

Daqui, selecione o tipo de página de destino como a página 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 que você precisa enviar são aqueles do idioma da célula atual.

Enviando dados entre as páginas - 3

Quando você é direcionado para a página da categoria, pode facilmente extrair esses dados do evento e exibir o conteúdo que é relevante para esse idioma.

Então, para criar essa função, você primeiro precisa garantir que o tipo da página de destino corresponda à propriedade de dados que você está enviando no workflow. Portanto nesse caso, você precisará definir a categoria de upload para uma propriedade de idioma.

Enviando dados entre as páginas - 4

Em seguida, vamos configurar o grupo repetidor nesta página para exibir uma lista de categorias; onde o idioma equivale ao idioma da página atual

Enviando dados entre as páginas - 5

Upload de novas lições em nosso aplicativo de idiomas tipo Duolingo

Após o usuário selecionar uma categoria para contribuir, criaremos um workflow navigacional; enviando usuários a um portal onde possam fazer o upload de novas lições (página de upload de palavra).

Enviando dados entre as páginas - 6

Na página de upload de palavra, precisaremos configurar o tipo da página como categoria, depois adicionamos uma combinação de inputs, um uploader de imagem e uma caixa de seleção.

Enviando dados entre as páginas - 7

Após adicionarmos o conteúdo de uma nova palavra no input on-page, vamos acionar um novo workflow quando o botão criar é clicado.

Nesse workflow, começaremos criando um novo item – uma nova palavra.

Enviando dados entre as páginas - 8

Comece adicionando os campos relevantes no banco de dados do nosso aplicativo de idiomas. Mapeie cada um dos elementos de input on-page com seus campos correspondentes no banco de dados.

Enviando dados entre as páginas - 9

Assim, ao criar uma nova palavra da lição, precisamos começar adicionando a versão correta da palavra primeiro. Dessa forma como a palavra está correta, vamos nos certificar de selecionar nosso elemento ‘está correto’ na caixa de seleção.

Então para registrar isso como a palavra correta em nossa lição, precisaremos fazer alterações na palavra no workflow – atualizando o status ‘está correto’.

Nota: Com este evento no workflow, é importante adicionar um gatilho condicional, permitindo que ele execute apenas se nossa caixa de seleção foi marcada.

Se a palavra foi marcada como correta, atualizaremos seu status para ‘sim’.

Após a palavra ser criada no workflow, adicionaremos o termo à categoria relevante.

Mais uma vez, vamos optar por alterar um item no banco de dados – a categoria das páginas atuais, adicionando a ela a palavra que acabamos de criar.

Os últimos passos que vamos adicionar nesse workflow é a função de resetar todos os elementos da página atual, permitindo que você adicione facilmente uma palavra alternativa que não esteja correta dentro da lição / aula.

Enviando dados entre as páginas - 12

Exibindo uma aula de idioma tipo Duolingo

Uma vez que criamos uma lição no nosso portal back-end, podemos nos concentrar em criar a experiência de front-end para nossos usuários finais.

O processo de criação dos workflows do usuário seguirá uma abordagem semelhante às nossas etapas anteriores.

Começaremos criando novamente uma tela dedicada para que os usuários selecionem de uma lista os idiomas que desejam estudar.

Para agilizar o processo de criação desta página, você pode até mesmo duplicar nossa página de upload de idioma existente.

criar aplicativo idiomas Duolingo - exibindo aula de idioma 1

Nesta página, vamos mais uma vez criar um novo workflow quando uma bandeira de idioma for clicada.

Este workflow enviará um usuário para nossa página de selecionar categoria, enviando com ele o idioma da célula atual.

criar aplicativo idiomas Duolingo - exibindo aula de idioma 2

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 que queremos mudar é a lista de idiomas de aprendizado, adicionando a ela o idioma das células atuais.

criar aplicativo idiomas Duolingo - exibindo aula de idioma 3

Em nossa página de seleção de categoria, configuraremos o tipo de página como idioma, permitindo-nos referenciar suas categorias únicas que criamos.

criar aplicativo idiomas Duolingo - exibindo aula de idioma 4

Dentro de nosso grupo repetidor; vamos procurar uma lista de categorias disponíveis onde o idioma equivale ao idioma da página atual.

criar aplicativo idiomas Duolingo - exibindo aula de idioma 5

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

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

criar aplicativo idiomas Duolingo - exibindo aula de idioma 6

Então, agora, em nossa página de palavras da lição, começaremos configurando o tipo de página para ser uma categoria.

criar aplicativo idiomas Duolingo - exibindo aula de idioma 7

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

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

criar aplicativo idiomas Duolingo - exibindo aula de idioma 8

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

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

criar aplicativo idiomas Duolingo - exibindo aula de idioma 9

Como o conteúdo dentro do grupo repetidor exibirá uma lista de respostas potenciais para nossa lição, também optaremos por embaralhar cada um dos itens dentro de nosso grupo repetidor em uma ordem aleatória.

criar aplicativo idiomas Duolingo - exibindo aula de idioma 10

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

criar aplicativo idiomas Duolingo - exibindo aula de idioma 11

Marcando uma resposta como correta ou errada

Depois que um usuário participar de uma lição, precisaremos mostrar se ele selecionou a resposta certa para a pergunta atual.

Assim, usando elementos de ícone, podemos facilmente começar a exibir um rótulo correto e incorreto que será acionado após uma resposta específica.

Dessa forma como só precisaremos exibir esses ícones quando uma resposta for selecionada, vamos garantir que esses ícones não sejam visíveis quando a página for carregada inicialmente.

Marcando uma resposta como correta ou errada - 1

Em seguida, precisaremos criar um novo workflow quando o texto de uma célula de grupos repetidores for clicado.

Marcando uma resposta como correta ou errada - 2

Então, para este workflow, definiremos uma condição para o acionamento do texto. Assim, nesse caso, nossa condição definirá se a palavra das células atuais é indicada com um campo de dados correto = ‘sim’.

Marcando uma resposta como correta ou errada - 3

Assim que este gatilho for ativado, escolheremos mostrar um elemento – nosso ícone verde.

Marcando uma resposta como correta ou errada - 4

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

Marcando uma resposta como correta ou errada - 5

Recursos adicionais para um Duolingo Sem Codar

Enfim, agora que está familiarizado com criar campos de dados customizados e exibir conteúdo dinâmico no seu aplicativo de idiomas; você pode, dessa forma começar a ficar criativo com as experiências criadas com o 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.

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

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email