Skip to content

mugarate12/react-multi-plataform-module

Repository files navigation

React + Android + TV + Zabbix Módulo

React Android TV Compatible Zabbix Module License

app rodando no zabbix

exemplo de execução

Sobre

Esse projeto consiste em usar uma única base de código React para criar aplicativos Android que funcionam tanto em dispositivos móveis quanto em TVs. Além disso, também visa ser capaz de rodar no zabbix via módulo.

Tudo isso com uma única manutenção de código, aproveitando o poder do React e suas bibliotecas associadas e tecnologias modenas como tailwindcss para estilização e tanstack query para gerenciamento de estado e dados.

Créditos importantes

Créditos ao Thiago Santos, pela configuração base do Zabbix via Docker-Compose: Repositório. A partir dele foi possível montar o ambiente de desenvolvimento para o módulo Zabbix.

Como funciona?

Com React, nosso primeiro passo é escrever nosso sistema normalmente fazendo uso de bibliotecas modernas como tailwindcss para estilização e tanstack query para gerenciamento de estado e dados.

Em adição, usando Norigin Spatial Navigation podemos garantir que a navegação por controle remoto em TVs funcione perfeitamente.

Você vai notar que isso posto, naturalmente, a próxima missão é fazer um app Android que funcione tanto em dispositivos móveis quanto em TVs. Para isso, usamos app nativo com WebView para embutir nossa aplicação React. Aliado a navegação espacial, isso garante que o app funcione perfeitamente em ambos os tipos de dispositivos.

Dai, podemos usar o nosso site React em um módulo Zabbix. O Zabbix permite a criação de módulos personalizados que podem ser integrados ao sistema. A vantagem dessa abordagem é aproveitar todo o processo de CI/CD, testes e manutenção já estabelecidos para a aplicação React, reduzindo o esforço necessário para manter o módulo Zabbix atualizado, pois ele simplesmente carrega a aplicação React existente.

Benefícios

  • Manutenção Unificada: Com uma única base de código, as atualizações e correções são feitas uma vez, beneficiando todas as plataformas.
  • Consistência de UI/UX: A experiência do usuário permanece consistente em todas as plataformas.
  • Redução de Custos: Menos tempo e recursos gastos em desenvolvimento e manutenção.
  • Aproveitamento de Tecnologias Modernas: Uso de bibliotecas e frameworks modernos para garantir desempenho e escalabilidade.
  • Flexibilidade: Facilidade para adicionar novas funcionalidades que funcionem em todas as plataformas.
  • Integração com Zabbix: Capacidade de rodar a aplicação React como um módulo Zabbix, aproveitando a infraestrutura existente.

Conclusão sobre o Projeto

Esse projeto demonstra como é possível usar o poder do React para criar aplicações que funcionam perfeitamente em múltiplas plataformas, incluindo Android (móveis e TVs) e Zabbix, tudo isso com uma única base de código. Isso não só simplifica o desenvolvimento e a manutenção, mas também garante uma experiência de usuário consistente e de alta qualidade.

Ambiente Android

Configurando

Para preparar o ambiente Android, siga os passos abaixo:

  1. Instale o Android Studio: Baixe e instale o Android Studio em sua máquina.
  2. Configure o SDK do Android: Abra o Android Studio e configure o SDK do Android, certificando-se de incluir as versões necessárias para desenvolvimento móvel e TV.
  3. Use os comandos abaixo:
make build-android

Se você estiver usando powershell, utilize o comando abaixo:

make build-android-powershell

Isso irá construir o aplicativo Android e copiar os arquivos necessários para o diretório apropriado.

  1. Usando o Android Studio: Abra o projeto no Android Studio, conecte um dispositivo ou inicie um emulador, e execute o aplicativo diretamente do Android Studio. Você também pode gerar um APK para distribuição.

About

Esse projeto consiste em rodar um app react em Android (mobile e TV), web e zabbix (via zabbix module)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published