Introdução ao Ionic

Recentemente, comecei a usar o Ionic para desenvolver aplicativos móveis e é <i> incrível … </i>

Você tem Node e npm em sua máquina certo …

npm install -g cordova ionic

Ok, agora crie a pasta do seu aplicativo, faça cd nela e inicie seu aplicativo a partir de um modelo

ionic start myApp tabs
cd myApp

ionic platform
add ios
ionic build ios

ionic emulate ios

<b> observação: </b> você precisa de um mac para construir e publicar um aplicativo IOS, mas pode desenvolver no Windows ou Linux e, quando estiver pronto, vá para um mac para o processo de construção

Outra maneira de rapidamente começar a testar em seu servidor web local é fazer um fork ou baixar um aplicativo seed existente para brincar. Aqui está um exemplo de pia de cozinha . O livro Ionic também é um ótimo guia para construir seu primeiro aplicativo com o Ionic.

Estou usando o PhoneGap ou o Cordova?

PhoneGap foi originalmente desenvolvido pela Nitobi com o seguinte objetivo: <i> “Construir a maior parte de uma experiência de aplicativo móvel com tecnologias puras da web como HTML5, CSS e Javascript, mas ainda ser capaz de chamar o código nativo quando necessário.” < / i>

Em 2011, a Adobe comprou a Nitobi e os direitos da marca PhoneGap. O código foi doado para a Apache Software Foundation sob o nome Cordova.

Framework Ionic IU

Ionic é uma ótima estrutura com muitos dos elementos de interface do usuário que precisamos para nossos aplicativos móveis. É realmente mais um concorrente do Twitter Bootstrap. Ionic e Bootstrap são os elementos de interface do usuário, layouts, botões etc … que são usados ​​no aplicativo móvel HTML5.

Vamos ver alguns elementos da IU então

Basta verificar a documentação para adoráveis ​​elementos Ionic CSS, JavaScript e HTML5. Eles realmente são fáceis de usar para qualquer desenvolvedor web e são extremamente bonitos.

API PhoneGap / Cordova

PhoneGap ou Cordova são a “ponte” nativa que nosso aplicativo HTML5 usará para dar acesso a todos os recursos de um aplicativo nativo para as lojas Apple e Google Play.

Processo de construção

O sistema Build é o processo de compilar esses aplicativos em um arquivo .ipa para IOS e um arquivo .apk para Android. Podemos usar a versão do PhoneGap para isso ou a versão do Cordova. O PhoneGap custa $ 9,99 por mês para repositórios privados, o Cordova é gratuito e tão simples quanto os comandos abaixo. Os comandos cordova e ionic build são o mesmo em termos de funcionalidade, portanto, escolha apenas um deles.

cordova build --release android
cordova build
--release ios

ionic build ios

ionic build ios

Publique seu aplicativo na Google Play Store

Primeiro remova todos os plug-ins de desenvolvimento que você tem em seu aplicativo.

cordova plugin rm org.apache.cordova.console

Certifique-se de que seu arquivo de manifesto tenha a depuração definida como falsa

<application android:debuggable="false" android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">    

Crie o aplicativo usando o comando de construção ionic ou cordova

cordova build --release android

Agora podemos encontrar nosso arquivo APK não assinado em plataformas / android / bin. Vamos gerar nossa chave privada usando o comando keytool que vem com o JDK

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Agora que seu arquivo .keystore foi criado no diretório atual, assine o APK não assinado com a chave. Execute a ferramenta jarsigner que também está incluída no JDK

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

Temos um apk assinado e, finalmente, precisamos executar a ferramenta zip align para otimizar o APK:

zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

Agora que temos nosso APK de lançamento pronto para a Google Play Store, podemos criar uma lista da Play Store e fazer upload de nosso APK. Pague seus $ 25 para se inscrever como um desenvolvedor de aplicativos da Google Play Store, então você estará pronto para fazer upload de seu aplicativo simplesmente clicando em “Publicar um aplicativo Android no Google Play”.

Publique seu aplicativo na Apple Store

Você está em um Mac para esta parte, espero 🙂

Primeiro remova todos os plug-ins de desenvolvimento que você tem em seu aplicativo.

cordova plugin rm org.apache.cordova.console

Junte-se ao programa de desenvolvedor iOS

Além de usar o PhoneGap para desenvolver ipas para você, a única maneira de construir IPAs para teste em seus dispositivos é ingressando no programa de desenvolvedor iOS da Apple

Acesse o iOS Developer Center e registre-se gratuitamente. Ser um desenvolvedor Apple registrado dá acesso a muitas informações, mas para poder enviar aplicativos para a App Store ou gerar IPAs a partir do XCode, você precisará se inscrever no programa de desenvolvedor iOS da Apple. Essa é a parte que custa US $ 99 por ano.

No seu Developer Member Center, clique no link Inscreva-se hoje. Você será solicitado a se inscrever como empresa ou pessoa física, a maioria se inscrevendo como pessoa física, mas se precisar se inscrever como empresa, você precisará de alguns documentos do seu empregador.

Depois de prosseguir, você será solicitado a fazer login com seu ID Apple para faturamento. Você será solicitado a selecionar seu Programa, provavelmente o programa Desenvolvedor IOS. Adicione ao carrinho e efetue o seu pagamento.

Crie seu aplicativo iOS e abra no XCode

Depois de enviar e pagar pelo registro de desenvolvedor iOS, você precisará esperar cerca de um dia para que a Apple processe seu pedido. Para mim, ele foi ativado durante a noite em cerca de 6 horas.

Se você ainda não o possui, baixe o XCode. Você precisa disso para implantar seu aplicativo. Faça também login no seu Apple Developer Center

Voltando ao seu aplicativo Ionic, você sem dúvida desenvolveu. Assim que seu aplicativo estiver pronto, execute o comando build ios.

ionic platform add ios
ionic build ios

Isso irá gerar um projeto Xcode dentro de plataformas / ios que você pode abrir com Xcode e assinar seu aplicativo para publicação.

Implantar o aplicativo em seu iPad ou iPhone para teste

O aplicativo está construído e pronto para ser lançado como um IPA.

Você deve encontrar o aplicativo IOS e iniciá-lo no XCode. Ele foi gerado para você em <i> / platform / ios </i>, então se seu aplicativo era IonicTest, o projeto XCode será <i> IonicTest.xcodeproj </i> em <i> IonicTest / platform / ios / </i>

Abra o arquivo no XCode para que você possa implantar seu IPA.

Criar Perfil de Provisionamento

Agora, para implantar seu IPA em um dispositivo, você precisará
criar um perfil de provisionamento. Em sua conta de desenvolvedor, clique em Provisioning Profile e configure um.

Verifique se a seção Assinatura de código em seu aplicativo no XCode está definida para o nome do seu perfil de provisionamento. Na seção Identidade da guia Geral, ele deve ter seu nome no campo Equipe.

Defina o seu dispositivo

No menu Arquivo XCode, selecione Produto> Destino e selecione “Dispositivo IOS”. Agora você precisará selecionar um ID de dispositivo para o qual está implantando,

Vá para Dispositivos no Apple Developer Center e adicione o UDID do seu dispositivo.

A maneira fácil de encontrar o UDID de seus dispositivos é seguir este guia, mas é bastante simples. Agora adicione seu dispositivo ou, se quiser implantar em vários dispositivos, pode adicionar alguns adicionais.

Exportando para um IPA

A maneira mais fácil de gerar um IPA é arquivar seus aplicativos e compartilhá-los no Xcode Organizer.

Crie seu aplicativo, clique em Produto> Construir e depois em Produto> Arquivo para abrir o Organizador XCode. Clique em Distribuir. É aqui que você seleciona publicar seu aplicativo na Apple App Store ou apenas exportar o IPA a ser instalado em seu dispositivo. Selecione “Salvar para implantação corporativa ou ad hoc”. Clique em Avançar e selecione seu perfil de provisionamento.

Finalmente, clique em Exportar para obter o arquivo IPA.

Você finalmente exportou o IPA para seu sistema de arquivos.
Selecione uma pasta onde você manterá todas as suas versões de arquivos IPA e clique em Salvar

Instale o seu IPA em um dispositivo

Agora que você tem seu arquivo IPA, precisa enviar esse IPA para o seu dispositivo. Uma maneira fácil de fazer isso é conectar seu dispositivo ao MacBook e abrir o iTunes. Selecione a guia Aplicativos e, no menu de arquivo, selecione Arquivo> Adicionar à Biblioteca para adicionar seu arquivo IPA. Ele solicitará que você instale o aplicativo, que agora será executado como um aplicativo no seu iPhone ou iPad.

Use o voo de teste para testar em vários dispositivos

Se agora você deseja enviar novas versões do seu aplicativo para o seu ou para vários dispositivos rapidamente, você deve se inscrever no TestFlight . Provavelmente estarei criando um tutorial no TestFlight, mas é bom e fácil de usar. Contanto que os dispositivos tenham o aplicativo TestFlight instalado e você adicione o ID do dispositivo aos seus dispositivos, você deve ser capaz de enviar para vários dispositivos com uma simples etapa.

Alguns links se você tiver problemas para implantar seu IPA:

Edifício Cordova para IOS

Implementando um aplicativo na loja de aplicativos da Apple

Implante um IPA do XCode 5