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 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:
Índice
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
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 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.
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.
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.
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.
Logo ao criar esse workflow, use um evento 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 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.
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.
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
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).
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.
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.
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.
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.
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.
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.
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.
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.
Dentro de nosso grupo repetidor; vamos procurar uma lista de categorias disponíveis onde o idioma equivale ao idioma da página atual.
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.
Então, agora, em nossa página de palavras da lição, começaremos 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 nossa página de upload, vamos optar por exibir o primeiro item da categoria de páginas atuais.
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.
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.
Em nossa célula de 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 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.
Em seguida, precisaremos criar um novo workflow quando o texto de uma célula de grupos repetidores for clicado.
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’.
Assim que este gatilho for ativado, escolheremos mostrar um elemento – nosso ícone verde.
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.
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.
- 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
