Já imaginou se, para utilizar componentes como gráficos, tabelas para visualizar grandes volumes de dados ou calendários em uma aplicação web, fosse preciso implementar do zero todos esses recursos? Felizmente, hoje existem templates administrativos, como o AdminLTE, que possibilitam o uso dessas ferramentas em uma página web de forma muito mais simples e rápida.
Fizemos este post para demonstrar o potencial dessa ferramenta, que é capaz de transformar o front-end de uma aplicação. Quer saber como? Então, confira:
- O que é o AdminLTE?
- Como instalar o AdminLTE?
- Qual a compatibilidade com os navegadores?
- Como funcionam as contribuições para o AdminLTE?
Boa leitura!
O que é o AdminLTE?
O AdminLTE é um template HTML responsivo para ser utilizado em painéis administrativos ou de controles em aplicações web. O objetivo é disponibilizar uma série de componentes para serem reutilizados no site, como o layout, menus de navegação, chat, timeline, formulários e muitos outros recursos capazes de tornar a página mais funcional e estilizada.
Ele é desenvolvido em PHP e utiliza o framework Bootstrap, bibliotecas como JQuery, Popper.js, além de diversos plugins, que são necessários para a implementação dos componentes disponíveis na ferramenta, entre eles: o ChartJS, Bootstrap Slider, Font Awesome 5, jsGrid e muitos outros.
A versão anterior do AdminLTE 2.x foi desenvolvida com base no Bootstrap 3, enquanto a atual, AdminLTE 3.x, utiliza o Bootstrap 4. Essa mudança permitiu que a ferramenta oferecesse diversos novos recursos, como o suporte a utilização de dados em tabelas, novos modelos de formulários e muito mais.
O AdminLTE é uma ferramenta gratuita, distribuído pela Colorlib, open source e usa a licença MIT, o que significa que é possível empregar uma cópia para desenvolver melhorias e vender essa nova versão. Ele pode ser utilizado em projetos pessoais e comerciais e é preciso ter o aviso de licença em cada cópia, além de incluir o aviso de direitos autorais.
Vale ressaltar que existem versões premium do template, que são pagas e oferecem funcionalidades a mais, além de utilizarem outras tecnologias, entre elas, o Angular, Vue e React. Além disso, o site oficial também disponibiliza uma documentação bem detalhada sobre como utilizar a ferramenta, inclusive com exemplos.
Como instalar o AdminLTE?
Existem diferentes formas de fazer a instalação do AdminLTE. Uma delas é por meio do download na página oficial da ferramenta. O conteúdo deve ser descompactado em um diretório no site ou em uma pasta no computador local. Para verificar o funcionamento da ferramenta, basta acessar o local correspondente e abrir o arquivo index.html no navegador.
Vale ressaltar que os frameworks e bibliotecas necessários para o funcionamento do AdminLTE já fazem parte do pacote de instalação, como o Bootstrap, bibliotecas JavaScript e os plugins necessários. Desse forma, não é preciso baixá-los separadamente.
Uma observação importante é quanto à configuração dos plugins, ao utilizar a ferramenta em uma página. Por padrão, o AdminLTE não carrega todos os plugins disponíveis em todas as páginas. Essa ação faria com que o carregamento completo levasse muito tempo, uma vez que a ferramenta disponibiliza diversas opções de plugins.
Assim, é preciso adicionar a referência, tanto do arquivo CSS quanto do JavaScript correspondente ao plugin, ao utilizá-lo em uma página. Isso contribui para tornar o código HTML mais limpo, ou seja, sem referências a arquivos desnecessários no momento.
O AdminLTE também pode ser instalado pela linha de comando, através de gerenciadores de pacotes. Existem diferentes ferramentas disponíveis no mercado, como o NPM, do Node, o Yarn ou o Composer. Além disso, também é possível fazer um clone para a máquina por meio do Git, que é uma ferramenta de controle de versões utilizada pelo GitHub.
Outra característica da ferramenta é a possibilidade de integração com diversos frameworks, como o Laravel, que é utilizado para o desenvolvimento de aplicações em PHP, Django, que usa a linguagem Phyton e outros, como o dotNet e AspNetCore.
Ao usar a ferramenta com esses frameworks é possível desenvolver aplicações muito mais robustas, capazes de executar operações em banco de dados. Portanto, o AdminLTE é uma excelente alternativa para adicionar recursos visuais e funcionais com aparência profissional ao site.
Vale ressaltar que também existem versões gratuitas para download que já implementam a integração entre a ferramenta e o framework escolhido. Também é possível fazer a configuração manual dessa integração por meio dos gerenciadores de pacotes. Entretanto, é um pouco mais trabalhoso, pois é preciso fazer algumas alterações manuais.
Qual a compatibilidade com os navegadores?
O AdminLTE pode não ser totalmente compatível com todos os navegadores e versões disponíveis, especialmente as mais antigas. Isso porque ele conta com uma série de recursos gráficos que podem não funcionar de maneira adequada. O AdminLTE 3 oferece a mesma compatibilidade de navegadores que o Bootstrap 4. Confira, a seguir, quais são eles e as versões mínimas compatíveis com a ferramenta:
- Chrome: 45;
- Firefox: 38;
- Edge: 12;
- Explorer: 10;
- iOS: 9;
- Safari: 9;
- Android: 4.4;
- Opera: 30.
Portanto, é preciso que a versão do navegador seja igual ou superior a essas relacionadas para que a ferramenta funcione de maneira adequada.
Como funcionam as contribuições para o AdminLTE?
Qualquer pessoa pode contribuir para apresentar melhorias ao AdminLTE. Isso significa que quem tiver um recurso adicional e queira compartilhar com a ferramenta, pode ajudar a torná-la ainda mais poderosa.
Para isso, é preciso fazer um “fork” do projeto no GitHub. Na prática, significa fazer uma cópia de todos os arquivos para que as alterações efetuadas não interfiram no projeto original. Atualmente, existem cerca de 14.500 forks em desenvolvimento, o que demonstra a quantidade de pessoas dispostas a contribuir. Esse número pode ser acompanhado pela página oficial da ferramenta no GitHub.
Existem alguns requisitos para a contribuição referentes à licença e ao direito de uso sobre as alterações fornecidas que o contribuinte deve ceder. Outra condição é com relação à utilização de código de terceiros, como fazer o uso de plugins nessas contribuições.
Nesse caso, ele só poderá ser utilizado se a sua licença for de código aberto. Além disso, toda a contribuição só pode ser feita por meio do GitHub e deve funcionar em todos os navegadores e versões compatíveis, conforme a relação apresentada no tópico anterior.
O AdminLTE é uma poderosa ferramenta, que conta com uma série de componentes responsivos para serem utilizados em uma aplicação web. Ele também funciona de forma integrada com outros frameworks. Todas essas características fazem com que essa seja uma excelente alternativa para oferecer recursos avançados e profissionais no front-end.
Gostou de conhecer como funciona o AdminLTE? Então, confira neste conteúdo o que são aplicações web e como elas funcionam!
1 comments
Bom dia, pesquisando sobre o AdminLTE3 encontrei esse seu post e achei interessante e muito esclarecedor, parabéns. Mais estou com uma dúvida que ainda não consegui resolver para usar o AdminLTE3. Como eu consigo saber Qual o Plugins é usado para cadas componente, para poder carregar os que necessito? Ex.: DataTables – para as tabelas, FullCalendar 4 – para o calendário porém, FastClick – para quê?, jQuery Knob – para quê? E assim segue com a maioria. Obrigado e parabéns pelo trabalho.