Como desenvolver aplicativos móveis com o Ionic Framework?

Você pode desenvolver aplicativos Ionic em qualquer sistema operacional de sua preferência. O Ionic foi desenvolvido várias vezes no Mac OS X, Linux e Windows . Como desenvolver aplicativos móveis com o Ionic Framework?

Primeiro, precisamos começar com uma nota sobre os requisitos mínimos para criar seu aplicativo com a versão atual do Ionic. Aponte para dispositivos iPhone e Android (atualmente). Suporta até iOS 7+ e Android 4.1+.

No entanto, agora você precisará usar a linha de comando para seguir este guia e deverá ter o OS X para desenvolver e implantar aplicativos para iPhone, portanto , o OS X é recomendado, se possível.

Você executará os comandos neste guia nas janelas Git Bash ou Console2 . Primeiro, instalaremos a versão mais recente do Apache Cordova .

Isso levará nosso aplicativo e o agrupará em um contêiner nativo para torná-lo um aplicativo nativo tradicional.

Como desenvolver aplicativos móveis com o Ionic Framework?

Para instalar o Cordova, verifique se o Node.js está instalado

$ sudo npm install -g cordova

Instale o Ionic

O Ionic vem com um útil utilitário de linha de comando para iniciar, criar e empacotar aplicativos Ionic. Para instalá-lo, basta executar:

$ sudo npm install -g ionic

Crie o projeto

Agora, precisamos criar um novo projeto Cordova em algum lugar do computador para o código do nosso aplicativo:

$ ionic start all blank --type ionic2

Isso criará uma pasta chamada tudo no diretório em que o comando foi executado. Em seguida, entraremos nesse diretório e listaremos o conteúdo.

Aqui está a aparência da estrutura externa do seu projeto Ionic:

$ cd all && ls

B── bower.json // dependências do bower
Config── config.xml // configuração do cordova
G── gulpfile.js // tarefas gulp
├── hooks // ganchos cordova personalizados para executar em comandos específicos
Ion── ionic.project // configuração iônica
Package── package.json // dependências do nó
├── plataformas // builds específicos para iOS / Android residirão aqui
├── plugins // onde seus plugins cordova / iônicos serão instalados
Sc── código scss // scss, que será enviado para www / css /
Www── www // application - código JS e bibliotecas, CSS, imagens etc.

Configurar plataformas

Agora, precisamos dizer à ionic que queremos ativar as plataformas iOS e Android:

$ plataforma cordova iônica adicionar ios
$ plataforma cordova iônica adicionar android

Experimente

Apenas para garantir que o projeto padrão funcionou, tente compilar e executar o projeto ( substitua ios pelo android para compilar com o Android ):

$ iônica cordova build ios
$ cordova iônico emular ios

Iniciando seu aplicativo

Agora que temos tudo instalado e um novo projeto Cordova criado , vamos começar a criar um aplicativo real.

Relacionado:  Como criar uma colagem de fotos on-line grátis?

Como cada aplicativo Ionic é basicamente uma página da web, precisamos ter um arquivo index.html em nosso aplicativo que defina a primeira página carregada no aplicativo.

Vamos criar www / index.html e inicializar com isso:

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Tudo </title>
<meta name = "viewport" content = "escala inicial = 1, escala máxima = 1, escalável pelo usuário = não, largura = largura do dispositivo">

<link href = "lib / ionic / css / ionic.css" rel = "folha de estilo">

<script src = "lib / ionic / js / ionic.bundle.js"> </script>

<! - Necessário para Cordova / PhoneGap (será um 404 durante o desenvolvimento) ->
<script src = "cordova.js"> </script>
</head>
<body>
</body>
</html>


No shell anterior, estamos incluindo o CSS Ionic e o núcleo Ionic JS e o Ionic AngularJS no arquivo ionic.bundle.js.

O Ionic vem com o ngAnimate e o ngSanitize incluídos, mas para usar outros módulos Angular você deve incluí-los no diretório lib / js / angular.

Para criar menus laterais no Ionic, podemos usar os menus laterais. Sinta-se livre para ler, mas a marcação necessária é simples. Edite o arquivo index.html e altere o conteúdo de <body> para que fique assim:

<body>
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<lado do menu ion-side = "left">
</ion-side-menu>
</ion-side-menus>
</body>

No código anterior, adicionamos nosso controlador <ion-side-menus> que controlará o arrasto e a exposição do menu lateral.

Dentro do controlador, temos um <ion-side-menu-content>, que é a área de conteúdo central do aplicativo, e um <ion-side-side side = “left”> que é um menu do lado esquerdo, inicialmente oculto.

Inicializando o aplicativo

Primeiro, precisamos criar um novo módulo AngularJS e dizer ao Angular para inicializá-lo. Vamos criar um novo arquivo localizado na WWW / js / app.js . Coloque este código no arquivo:

angular.module ('todo', ['ionic'])

Essa é a maneira angular de criar um aplicativo e estamos dizendo ao Angular para incluir o módulo iônico que inclui todo o código iônico que processará os rótulos anteriores e dará vida ao nosso aplicativo.

Relacionado:  Como verificar os resultados da DGT no celular

Agora, volte ao index.html e, pouco antes da linha <script src = “cordova.js”> </script> , adicione:

<script src = "js / app.js"> </script>

Isso inclui o script que acabamos de criar.

E para executar nosso novo aplicativo, precisamos adicionar o atributo ng-app à tag body:

<body ng-app = "everything">

Testando seu aplicativo

Há quatro maneiras de testar seu aplicativo à medida que você desenvolve: em um navegador WebKit de desktop, no simulador iOS ou Android , em um navegador móvel no seu telefone ou como um aplicativo nativo no telefone.

 

Você pode estar interessado:

Deixe um comentário