No próximo artigo, daremos uma olhada no Ionic Framework e como ele pode ser instalado no Ubuntu 20.04. Esta estrutura permitirá que os usuários implementem projetos com outras estruturas, como Angular. Ionic é um SDK de código aberto completo para desenvolvimento de aplicativo móvel híbrido criado por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co. em 2013. A versão original foi lançada em 2013 e construída sobre AngularJS e Apache Cordova. No entanto, a versão mais recente foi reconstruída como um conjunto de componentes da web, que permite ao usuário escolher fazer projetos Angular, React ou Vue.js. Ele também permite o uso de componentes Ionic sem qualquer estrutura de interface do usuário.
Iônico fornece ferramentas e serviços para desenvolver aplicativos híbridos de desktop, móveis e web progressivos com base em práticas e tecnologias de desenvolvimento web modernas. Para isso, podem ser utilizadas tecnologias web como CSS, HTML5 e Sass. Com este framework podemos desenvolver aplicativos com tecnologias web compatíveis com iOS, Android ou a própria web. Também oferece uma poderosa ferramenta CLI com a qual seremos capazes de gerenciar e criar projetos.
Características gerais do Ionic
- Este framework é gratuito e de código aberto. Ele oferece uma biblioteca de ferramentas e componentes de interface do usuário otimizados para dispositivos móveis, com os quais é possível criar aplicativos rápidos e altamente interativos.
- Ionic usa Cordova, e, mais recentemente, plug-ins para obter acesso às funções do sistema operacional host, como GPS, câmera, lanterna, etc.
- Os usuários podem criar seus aplicativos e personalizá-los para Android, iOS, Windows, desktop (com Electron) ou navegadores modernos.
- Iônico inclui componentes móveis, tipografia ou um tema de base extensível.
- Ao usar Componentes da Web, O Ionic fornece componentes e métodos personalizados para interagir com eles. Um desses componentes, a rolagem virtual, permite que os usuários percorram uma lista de milhares de itens sem nenhum impacto no desempenho. Outro componente, Tabs, cria uma interface com guias que suporta navegação de estilo nativo e gerenciamento de estado de histórico.
- Além do SDK, o Ionic também fornece os desenvolvedores de serviços podem usar para habilitar recursos, como implementações de código ou compilações automatizadas.
- também fornece seu próprio IDE conhecido como Ionic Studio.
- Ele também oferece uma interface de Linha de comando (CLI) para criar projetos. A CLI também permite que os desenvolvedores adicionem plug-ins e pacotes Cordova adicionais, habilitem notificações push, gerem ícones de aplicativos, telas iniciais e criem binários nativos.
Instale o Ionic no Ubuntu 20.04
A instalação deste framework é bastante simples. Para começar, só precisamos abrir um terminal (Ctrl + Alt + T) e atualize nossos pacotes de sistema:
sudo apt update; sudo apt upgrade
Então nós vamos instale alguns pacotes necessários. No mesmo terminal teremos que usar o comando:
sudo apt install curl gnupg2 wget git
A próxima etapa será instale o NodeJS. Este exemplo eu testei com a versão 14.x. Para instalar esta versão, vamos começar adicionando o repositório necessário:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Então nós podemos instalar NodeJS executando este outro comando:
sudo apt install nodejs
Ionic requer Apache Cordova. Cabe esclarecer que se trata de um conjunto de APIs de dispositivo que permite ao desenvolvedor de aplicativos móveis, em JavaScript, acessar funções nativas do dispositivo, como a câmera ou o acelerômetro.
Depois de instalar o NodeJS, podemos instalar cordova corrida:
sudo npm install -g cordova
Neste ponto, podemos prosseguir para instalar o Ionic usando npm:
sudo npm i -g @ionic/cli
Após a instalação, podemos verifique a versão instalada com o comando:
ionic -v
Um exemplo de aplicação
Para saber se a instalação foi feita corretamente, podemos começar criando um pequeno aplicativo de exemplo. Para fazer isso, só teremos que execute o seguinte comando, crie o exemplo:
ionic start
Ao executar este comando você terá que definir que tipo de projeto deseja criar. Para este exemplo, escolhi Angular. Além disso, você terá que dar um nome ao seu projeto e escolher o modelo. Tudo isso você terá que selecionar em uma tela semelhante à seguinte:
Após a configuração, uma pasta será gerada com o nome que demos ao projeto. Acesse esta pasta para ver a estrutura do projeto.
Para veja o projeto, no mesmo terminal vamos executar este outro comando:
ionic serve --host 0.0.0.0 --port 8000
Com este comando vamos permitir que qualquer host acesse a porta 8000.
Quando tudo que você precisa estiver carregado, abra seu navegador da web e vá para http://localhost:8000 o http://IP-de-tu-servidor:8000 e você verá a página de exemplo que acabou de ser criada.
Ionic é um framework moderno que nos permite desenvolver aplicações multiplataforma de forma simples e elegante. Pode ser obtido mais informações e documentação sobre sua instalação e operação no site do projeto.