Documentação Técnica Magic Tree & Kids Rock Baltimore Education

1 - 01. Introdução

Esse documento tem como o objetivo demonstrar como foi desenvolvido e como se estrutura as plataformas MagicTree e Kids Rock da Baltimore Education. Que apesar de serem plataformas diferentes, são plataformas irmãs e foram desenvolvidas usando a mesma tecnologia e abordagem.

O objetivo aqui não é servir de base para uma integração com outros sistemas ou plataformas, e sim apenas dar um norte sobre as estratégias adotadas e como tudo funciona. Por causa disso, não vou entrar aqui no detalhe de cada função ou end-point, vou apenas demonstrar como a estrutura geral funciona, e também, me precavendo para não expor estratégias ou regras de negócio senciveis do cliente proprietário da plataforma.

Qualquer dúvida deve ser enviada diretamente para contato@mangu.com.br ou para falecom@diojr.me.

2 - 02. Conhecendo a plataforma

A plataforma Kids Rock é um sistema para aprendizagem do idioma de inglês para crianças e adolescentes que são alunos da Baltimore Education. Podemos dividir a plataforma em três frentes:

• A Área do Aluno/Área do professor via navegador e PWA;
• A API de comunicação;
• A Área administrativa Baltimore.

Cada usuário tem acesso a plataforma através de um serial que é gerado quando o usuário compra o livro físico da Baltimore Education, ou se por qualquer motivo, a Baltimore Education fornecer o acesso a ele (também através de um serial).

O serial tem validade de um ano, e após esse período o usuário precisa cadastrar um novo serial para continuar usando a plataforma. Todo o processo de cobrança ou pagamento para recebimento desses seriais, são todos feitos de maneira externa a plataforma, pela própria Baltimore.

3 - 03. Tecnologia e necessidade de atualização

A plataforma foi desenvolvida em 2019/2020 e por tanto, tem padrões de linguagem que a depender do momento em que estiver vendo esse documento, pode estar defasada ou desuatalizada em relação ao que temos de mais moderno para esse tipo de aplicação. Mas temos que ter em mente, as circunstâncias da época e a realidade do cliente no momento do desenvolvimento.

API e Área administrativa:

Desenvolvida em PHP 5.6 puro, com compatibilidade com PHP até a versão 7.4

Área do Aluno/Professor:

HTML5, JavaScript ECMA6 (padrão 2019) e JQuery

4 - 04. Comunicação entre API REST e Área do Aluno/Professor

Toda a comunicação entre a Área do Aluno/Professor e o backend é feita através da API REST da plataforma. O core da aplicação pode ser encontrado em js/scripts.js e todos os endpoints podem ser consultados dentro do diretório da API.

No exemplo abaixo uma demonstração da tela de "Suporte e Ajuda" onde após a captura dos dados, a mensagem é disparada para os setores responsáveis. Todas as chamadas dentro da plataforma ocorrem de forma semelhante:

Os dados são recebidos pela API que processa as informações e realiza os procedimentos necessários:

5 - 05. Obtenção de conteúdo e reaproveitamento de memória

Como o conteúdo é relativamente extenso, incluindo diversas imagens, textos, arquivos de aúdios etc. Realizamos o download de todo o material uma única vez, o salvamos na memória, e ai reaproveitamos o mesmo sempre que for necessário para economizar recursos e permitir inclusive que a plataforma continue funcionando mesmo sem conexão com a internet (uma vez que os arquivos já tenham sido baixados):

Na API o processo é semelhante, já realizando todas as querys de uma única vez na autenticação do usuário:

Um exemplo desse reaproveitamento de conteúdo, quando o aluno acesso um livro, apenas acessamos o mesmo da memória:

6 - 06. Games

Cada um dos games tem sua própria mecânica e regras, porém existe uma semelhança entre todos eles: sempre uma função que as monta, as processa (resultado) e as finalizada (contabilizando pontos, avançando níveis etc):

Por exemplo, se analisarmos o Memory Game (jogo da memória):

View:

Funções JS:

7 - 07. PWA

Como vimos anteriormente, reaproveitamos bastante a memória já salva, o que facilita para a execução do PWA, que está presente no diretório "/instalador". Criamos o service worker e pronto:

8 - 08. Área administrativa (Backend)

Não há muito o que se descrever sobre essa área, a não ser que, todo o acesso ao banco de dados é feito de forma independente, ou seja, a API é usada apenas para a comunicação entre a Área do Aluno/Professor e o banco. A Área administrativa à acessa de forma direta, e todo o fluxo pode ser percebido pela própria organização do diretório.

O mesmo vale para os arquivos de mídia, que são carregados dentro do diretório "/cdn", universalizando o acesso seja pela Área administrativa, seja pela Área do Aluno/Professor.

9 - 09. Implementações futuras

Alguns itens seriam interessante serem implementados futuramente em eventuais novas versões da plataforma:

• Atualização para a versão do PHP 8.0+;
• Atualização do padrão JavaScript para ECMA6 (2021), removendo e substituíndo todas as chamadas JQuery;
• Criação da versão 2 da API, para um padrão MVC, assim como a Área administrativa e a API V2 ser o único canal para acesso ao banco de dados.
• Implementação de tokenização JWT para OAuth dos usuários;

10 - 10. Conclusão

Alguns links de apoio sobre o desenvolvimento da plataforma:

• Magic Tree;
• Kids Rock;

Qualquer dúvida deve ser enviada diretamente para contato@mangu.com.br ou para falecom@diojr.me.