Blog e Artigos Tecnologia

Blog e Artigos Tecnologia

Who am I?

Sou ūüíĽ Desenvolvedor PHP | Laravel #Fullstack #Dev #DevOps #Laravel #PHP #lucena


What I write about


Recent Posts

IONIC

Ionic - Vis√£o Geral

O Ionic √© um framework HTML de front-end constru√≠do sobre o AngularJS e o Cordova . De acordo com o seu documento oficial, a defini√ß√£o deste Ionic Open Source Framework √© a seguinte -

O Ionic √© uma¬†estrutura de desenvolvimento de aplicativos m√≥veis HTML5¬†voltada para a cria√ß√£o de aplicativos m√≥veis h√≠bridos.¬†Pense no Ionic como a estrutura de interface de usu√°rio front-end que lida com todas as intera√ß√Ķes de apar√™ncia e interface do usu√°rio que seu aplicativo precisa ser atraente.¬†Tipo como "Bootstrap for Native", mas com o suporte para uma ampla gama de componentes m√≥veis nativos comuns, anima√ß√Ķes sofisticadas e um belo design.

Recursos do Ionic Framework

A seguir estão as características mais importantes do Ionic -

  • AngularJS¬†- Ionic est√° usando a arquitetura AngularJS MVC para criar aplicativos de p√°gina √ļnica otimizados para dispositivos m√≥veis.

  • Componentes CSS¬†- Com a apar√™ncia nativa, esses componentes oferecem quase todos os elementos de que um aplicativo m√≥vel precisa.¬†O estilo padr√£o dos componentes pode ser facilmente substitu√≠do para acomodar seus pr√≥prios designs.

  • Componentes JavaScript¬†- Esses componentes est√£o estendendo componentes CSS com funcionalidades JavaScript para cobrir todos os elementos m√≥veis que n√£o podem ser feitos apenas com HTML e CSS.

  • Plugins do Cordova¬†- Os¬†plugins do¬†Apache Cordova oferecem API necess√°ria para usar fun√ß√Ķes de dispositivos nativos com c√≥digo JavaScript.

  • Ionic CLI¬†- Este √© o utilit√°rio NodeJS com comandos para iniciar, construir, executar e emular aplicativos i√īnicos.

  • Ionic View¬†- Plataforma muito √ļtil para carregar, compartilhar e testar seu aplicativo em dispositivos nativos.

  • Licen√ßa¬†- Ionic √© liberado sob licen√ßa MIT.

Vantagens do Quadro I√īnico

A seguir est√£o algumas das vantagens mais conhecidas do Ionic Framework -

  • Ionic √© usado para desenvolvimento de aplicativos h√≠bridos.¬†Isso significa que voc√™ pode empacotar seus aplicativos para IOS, Android, Windows Phone e Firefox OS, o que pode economizar muito tempo de trabalho.

  • A inicializa√ß√£o do seu aplicativo √© muito f√°cil, j√° que o Ionic fornece uma configura√ß√£o √ļtil do aplicativo pr√©-gerado com layouts simples.

  • As aplica√ß√Ķes s√£o constru√≠das de uma forma muito limpa e modular, por isso √© muito f√°cil de manter e atualizar.

  • A equipe de desenvolvedores i√īnicos tem um √≥timo relacionamento com a equipe do Google Developers e eles est√£o trabalhando juntos para melhorar a estrutura.¬†As atualiza√ß√Ķes est√£o saindo regularmente e o grupo de suporte i√īnico est√° sempre disposto a ajudar quando necess√°rio.

Limita√ß√Ķes do quadro i√īnico

A seguir est√£o algumas das mais importantes Limita√ß√Ķes do Quadro I√īnico -

  • O teste pode ser complicado, pois o navegador nem sempre fornece as informa√ß√Ķes corretas sobre o ambiente do telefone.¬†Existem muitos dispositivos diferentes, bem como plataformas e voc√™ geralmente precisa cobrir a maioria deles.

  • Pode ser dif√≠cil combinar diferentes funcionalidades nativas.¬†Haver√° muitos casos em que voc√™ se depararia com problemas de compatibilidade de plug-ins, o que leva a erros de compila√ß√£o dif√≠ceis de depurar.

  • Aplicativos h√≠bridos tendem a ser mais lentos que os nativos.¬†No entanto, como as tecnologias m√≥veis est√£o melhorando rapidamente, isso n√£o ser√° um problema no futuro.

 

Ionic - Configuração do Ambiente

Este cap√≠tulo mostrar√° a voc√™ como come√ßar com o Ionic Framework. A tabela a seguir cont√©m a lista de componentes necess√°rios para iniciar o Ionic.

Sr. N√£o.

Software e Descrição

1

NodeJS

Essa é a plataforma básica necessária para criar aplicativos móveis usando o Ionic. Você pode encontrar detalhes sobre a instalação do NodeJS em nossa Configuração do Ambiente NodeJS . Certifique-se de instalar também o npm ao instalar o NodeJS.

2

SDK para Android

Se você for trabalhar em uma plataforma Windows e estiver desenvolvendo seus aplicativos para a plataforma Android, deverá ter a configuração do Android SDK em sua máquina.

3

XCode

Se você for trabalhar na plataforma Mac e estiver desenvolvendo seus aplicativos para a plataforma iOS, deverá ter a configuração do XCode em sua máquina. 

4

Cordova e Ionic

Estes são os principais SDKs necessários para começar a trabalhar com o Ionic. Este capítulo explica como configurar o Ionic em passos simples, supondo que você já tenha a configuração necessária, conforme explicado na tabela acima.

Instalando o Cordova e o Ionic

Vamos usar o prompt de comando do Windows para este tutorial. Os mesmos passos podem ser aplicados ao terminal OSX. Abra sua janela de comando para instalar o Cordova e o Ionic -

C:\Users\Username> npm install -g cordova ionic

Criando Aplicativos

Ao criar aplicativos no Ionic, voc√™ pode escolher entre as tr√™s op√ß√Ķes a seguir para come√ßar:

  • Abas App
  • Aplicativo em branco
  • Aplicativo de menu lateral

Na janela de comando, abra a pasta em que voc√™ deseja criar o aplicativo e tente uma das op√ß√Ķes mencionadas abaixo.

Abas App

Se voc√™ quiser usar o modelo de guias i√īnicas, o aplicativo ser√° criado com o menu de guias, o cabe√ßalho e algumas telas e funcionalidades √ļteis.¬†Este √© o modelo i√īnico padr√£o.¬†Abra sua janela de comando e escolha onde voc√™ deseja criar seu aplicativo.

C:\Users\Username> cd Desktop

Este comando irá alterar o diretório de trabalho. O aplicativo será criado na área de trabalho.

C:\Users\Username\Desktop> ionic start myApp tabs

O comando Ionic Start criará uma pasta chamada arquivos e pastas myApp e setup Ionic.

C:\Users\Username\Desktop> cd myApp

Agora, queremos acessar a pasta myApp que acabamos de criar. Esta é a nossa pasta raiz.

Vamos agora adicionar o projeto Cordova para a plataforma Android e instalar os plugins básicos do Cordova também. O código a seguir nos permite executar o aplicativo no emulador do Android ou em um dispositivo.

C:\Users\Username\Desktop\myApp> ionic platform add android

O próximo passo é construir o aplicativo. Se você tiver erros de construção depois de executar o comando a seguir, provavelmente não instalou o Android SDK e suas dependências.

C:\Users\Username\Desktop\myApp> ionic build android

A √ļltima etapa do processo de instala√ß√£o √© executar o aplicativo, que iniciar√° o dispositivo m√≥vel, se conectado, ou o emulador padr√£o, se n√£o houver nenhum dispositivo conectado.¬†Emulador padr√£o do Android √© lento, ent√£o eu sugiro que voc√™ instale o¬†Genymotion¬†ou algum outro popular Android Emulator.

C:\Users\Username\Desktop\myApp> ionic run android

Isso produzirá o resultado abaixo, que é um aplicativo Ionic Tabs.

Ionic Tabs App

Aplicativo em branco

Se voc√™ quiser come√ßar do zero, voc√™ pode instalar o modelo em branco i√īnico.¬†Usaremos as mesmas etapas que foram explicadas acima com a adi√ß√£o do¬†iAudio em branco start myApp em¬†vez das¬†abas start myApp i√īnicascomo a seguir.

C:\Users\Username\Desktop> ionic start myApp blank

O comando Ionic Start criará uma pasta chamada myApp e configurará os arquivos e pastas Ionic.

C:\Users\Username\Desktop> cd myApp

Vamos adicionar o projeto Cordova para a plataforma Android e instalar os plug-ins b√°sicos do Cordova, conforme explicado acima.

C:\Users\Username\Desktop\myApp>ionic platform add android

O próximo passo é construir nosso aplicativo -

C:\Users\Username\Desktop\myApp> ionic build android

Finalmente, vamos iniciar o aplicativo como com o código a seguir -

C:\Users\Username\Desktop\myApp> ionic run android

Isso produzir√° o seguinte resultado, que √© um aplicativo i√īnico em branco.

Aplicativo em branco i√ɬīnico

Aplicativo do menu lateral

O terceiro modelo que você pode usar é o modelo de menu lateral. As etapas são as mesmas dos dois modelos anteriores; Vamos apenas adicionar sidemenu ao iniciar nosso aplicativo, conforme mostrado no código abaixo.

C:\Users\Username\Desktop> ionic start myApp sidemenu

O comando Ionic Start criará uma pasta chamada myApp e configurará os arquivos e pastas Ionic.

C:\Users\Username\Desktop> cd myApp

Vamos adicionar o projeto Cordova para a plataforma Android e instalar os plugins básicos do Cordova com o código abaixo.

C:\Users\Username\Desktop\myApp> ionic platform add android

O próximo passo é construir nosso aplicativo com o seguinte código.

C:\Users\Username\Desktop\myApp> ionic build android

Por fim, iniciaremos o aplicativo com o código abaixo.

C:\Users\Username\Desktop\myApp> ionic run android

Isso produzir√° o seguinte resultado, que √© um aplicativo do menu lateral i√īnico.

Ionic Side Menu App

Testar aplicativo no navegador

Como estamos trabalhando com o JavaScript, você pode veicular seu aplicativo em qualquer navegador da web. Isso acelerará o processo de criação, mas você deve sempre testar seu aplicativo em emuladores e dispositivos nativos. Digite o código a seguir para exibir seu aplicativo no navegador da web.

C:\Users\Username\Desktop\myApp> ionic serve

O comando acima abrirá seu aplicativo no navegador da web. O Google Chrome fornece a funcionalidade do modo de dispositivo para testes de desenvolvimento para dispositivos móveis. Pressione F12 para acessar o console do desenvolvedor.

Ionic Side Menu App

No canto superior esquerdo da janela do console, clique em "Toggle Device Mode". O próximo passo será clicar no ícone "Dock to Right" no canto superior direito. Depois que a página é atualizada, você deve estar pronto para testar no navegador da web.

Estrutura de pastas do projeto

O Ionic cria a seguinte estrutura de diret√≥rio para todos os tipos de aplicativos.¬†Isso √© importante para qualquer desenvolvedor i√īnico entender o prop√≥sito de cada diret√≥rio e os arquivos mencionados abaixo -

Estrutura de pastas

Vamos ter um rápido entendimento de todas as pastas e arquivos disponíveis na estrutura de pastas do projeto mostrada na imagem acima.

  • Ganchos¬†- Ganchos s√£o scripts que podem ser acionados durante o processo de constru√ß√£o.¬†Eles geralmente s√£o usados ‚Äč‚Äčpara a customiza√ß√£o de comandos do Cordova e para a constru√ß√£o de processos automatizados.¬†N√≥s n√£o usaremos esta pasta durante este tutorial.

  • Plataformas¬†- Esta √© a pasta onde os projetos do Android e do IOS s√£o criados.¬†Voc√™ pode encontrar alguns problemas espec√≠ficos da plataforma durante o desenvolvimento que exigir√£o esses arquivos, mas voc√™ deve deix√°-los intactos na maior parte do tempo.

  • Plugins¬†- Esta pasta cont√©m plugins do Cordova.¬†Quando voc√™ cria inicialmente um aplicativo i√īnico, alguns dos plug-ins ser√£o instalados.¬†Vamos mostrar como instalar os plugins do Cordova em nossos pr√≥ximos cap√≠tulos.

  • Recursos¬†- Esta pasta √© usada para adicionar recursos como √≠cone e tela inicial ao seu projeto.

  • Scss¬†- Como o n√ļcleo i√īnico √© constru√≠do com o Sass, essa √© a pasta onde o arquivo do Sass est√° localizado.¬†Para simplificar o processo, n√£o usaremos o Sass para este tutorial.¬†Nosso estilo ser√° feito usando CSS.

  • www¬†- www √© a principal pasta de trabalho para desenvolvedores i√īnicos.¬†Eles passam a maior parte do tempo aqui.¬†O Ionic nos d√° sua estrutura de pastas padr√£o dentro de 'www', mas os desenvolvedores podem sempre alter√°-lo para acomodar suas pr√≥prias necessidades.¬†Quando esta pasta √© aberta, voc√™ encontrar√° as seguintes subpastas -

    • A¬†pasta¬†css¬†, onde voc√™ ir√° escrever seu estilo CSS.

    • A¬†pasta¬†img¬†para armazenar imagens.

    • A¬†pasta¬†js¬†que cont√©m o arquivo de configura√ß√£o principal dos aplicativos (app.js) e os componentes do AngularJS (controladores, servi√ßos, diretivas).¬†Todo o seu c√≥digo JavaScript estar√° dentro dessas pastas.

    • A¬†pasta¬†libs¬†, onde suas bibliotecas ser√£o colocadas.

    • A¬†pasta de¬†modelos¬†para seus arquivos HTML.

    • Index.html¬†como ponto de partida para o seu aplicativo.

  • Outros arquivos¬†- Como este √© um tutorial para iniciantes, vamos apenas mencionar alguns dos outros arquivos importantes e seus prop√≥sitos tamb√©m.

    • .bowerrc¬†√© o arquivo de configura√ß√£o do bower.

    • .editorconfig¬†√© o arquivo de configura√ß√£o do editor.

    • .gitignore¬†√© usado para instruir qual parte do aplicativo deve ser ignorada quando voc√™ quiser enviar seu aplicativo para o reposit√≥rio Git.

    • O bower.json¬†conter√° os componentes e depend√™ncias do bower, se voc√™ optar por usar o gerenciador de pacotes do bower.

    • O gulpfile.js¬†√© usado para criar tarefas automatizadas usando o gerenciador de tarefas gulp.

    • config.xml¬†√© o arquivo de configura√ß√£o do Cordova.

    • package.json¬†cont√©m as informa√ß√Ķes sobre os aplicativos, suas depend√™ncias e plugins que s√£o instalados usando o gerenciador de pacotes NPM.

Fonte:

IONIC Creater

https://creator.ionic.io/app/login