Ionic Framework
Mais um dentre a quantidade enorme de ferramentas para criação de aplicativos móveis. Mas o Ionic não é apenas mais um, ele se destaca entre os demais, pois tem como base o Cordova e oferece uma grande quantidade de componentes prontos e recursos em seu site.
https://ionicframework.com/
http://creator.ionic - uma ferramenta online com interface drag-&-drop para você criar protótipos de aplicativos
https://apps.ionic.io/apps/
https://ionic.io/products/creator
https://docs.ionic.io/services/package/.io
http://view.ionic.io
http://ngcordova.com
http://play.ionic.io
https://apps.ionic.io/
http://ionicframework.com/docs/v1/guide/
http://showcase.ionicframework.com/apps/top
https://market.ionic.io/ - um lugar onde você pode encontrar plugins, templates e exemplo de aplicativos.
http://lab.ionic.io/ - uma IDE para você desenvolver seu aplicativo. (Não é obrigatório, você pode utilzar qualquer IDE de sua preferência)
https://github.com/IonicBrazil
Slack - http://ionicworldwide.herokuapp.com/
https://github.com/ionic-team/ionic
Criar app Ionic e build
ionic start ola tabs
ionic serve
ionic login email senha
ionic link (indicar a app da nuvem ou criar uma nova e depois linkar)
ionic package build android --prod (release)
ionic cordova build android
ionic cordova resources android - cria os ícones e splashscreens
Requer ícone em resources/icon.png com pelo menos 1024x1024px e resources/splash.png com 2732x2732px. Se usamos ionic start já existem reources default. Este comando atualizará a apsta resources e o config.xml
ionic upload
Mais comandos com detalhes
ionic start appname template - cria um app do ionic
ionic start agenda sidemenu
cd agenda
ionic serve - - inicia servidor logal. Mostrará IP:porta
ionic login - login com https://apps.ionic.io. Ou: ionic login email password
ionic link
ionic upload - compacta o app local e envia para a nuvem
ionic cordova build android - prepara e compila uma app para uma certa plataforma
ionic cordova compile android
ionic cordova emulate android
ionic cordova plugin <acoes><plugin>
ionic cordova plugin ls
ionic cordova resources android - cria os ícones e splashscreens
Requer ícone em resources/icon.png com pelo menos 1024x1024px e resources/splash.png com 2732x2732px. Se usamos ionic start já existem reources default. Este comando atualizará a apsta resources e o config.xml
ionic cordova run - executa app em dispositivos reais
ionic info - mostra informações do ambiente
ionic link <app> - conecta app com ionic build - caso tenha um app em https://apps.ionic.io este poderá ser linkado para a app local
ionic package lisk - lista apps das nuvens
Configurar ambiente no Windows
http://matheuslao.github.io/2015/06/09/ambiente-desenvolvimento-ionic-framework-ubuntu-vagrant
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g cordova ionic
node -v - 6.11
npm -v - 3.10.10
Criar app myApp tendo tabs como template
ionic start {appname} {template}
Criar app usando template
ionic start nomeApp tempalte
ionic start myApp tabs
Com template blank
ionic start myApp blank
Com sidemenu
ionic start myApp sidemenu
Geradores: blank, tabs (default), sidemenu, super e tutorial
Aplicativo simples
https://www.sitepoint.com/building-simple-app-using-ionic-advanced-html5-mobile-app-framework/
https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic
https://ionicframework.com/docs/intro/deploying/
https://tableless.com.br/tutorial-ionic-meu-primeiro-app/
https://developer.android.com/studio/index.html
Extrair para a pasta "android-studio"
Acessar o terminal
cd android-studio/bin
./studio.sh
Instalar Gradle
sudo apt-get install gradle
Habilitar a licensa do Android
sdkmanager --licenses
Concordar sempre com y
Listar versões do Cordova Android instalados
cordova platform ls
Rodando a app em emulador de android
git config --global user.email "Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo."
git config --global user.name "Your Name"
sudo npm install -g ionic@latest
ionic start myApp2 tutorial
npm link cordova
npm link ionic
ionic cordova run android --device
ionic cordova build android
https://ionicframework.com/docs/cli/cordova/build/
adb kill-server
adb start-server
Upload
cd app
ionic upload (envia para view.ionic.io)
adb devices
Após tudo instalado e configurado
cordova run --emulator
avdmanager list avd
touch ~/.android/repositories.cfg
../android update sdk -u --filter platform-tools,android-26 --use-sdk-wrapper
../android list target
Criar imagem
sdkmanager "system-images;android-25;google_apis;x86"
Criar AVD
avdmanager create avd -n test -k "system-images;android-25;google_apis;x86" -b x86 -c 100M -d 7 -f
Criar Exemplos do Ionic partindo da documentsção Componentes
https://ionicframework.com/docs/components/
Criar um app e aplicar o código nela
ionic start componentes tabs
cd componentes
ionic serve
cordova build android
ionic cordova --run emulate android
cordova run --emulator (erro: falta imagem AVD)
No celular
cordova run android -- --gradleArg=-PcdvMinSdkVersion=20
Assinando uma app
cordova run android --release -- --keystore=../AgendaChave.keystore --storePassword=password --alias=agenda_chave --password=password
Outra Lista de comandos do ionic:
docs Open the Ionic documentation website
generate Generate pipes, components, pages, directives, providers, and tabs (ionic-angular >= 3.0.0)
info Print system/environment info
link Connect your local app to Ionic
login Login with your Ionic ID
serve Start a local dev server for app dev/testing
signup Create an Ionic account
start Create a new project
telemetry Opt in and out of telemetry
upload Upload a new snapshot of your app
cordova build Build (prepare + compile) an Ionic project for a given platform
cordova compile Compile native platform code
cordova emulate Emulate an Ionic project on a simulator or emulator
cordova platform Manage Cordova platform targets
cordova plugin Manage Cordova plugins
cordova prepare Transform metadata to platform manifests and copies assets to Cordova platforms
cordova resources Automatically create icon and splash screen resources
cordova run Run an Ionic project on a connected device
package build Start a package build
package download Download your packaged app
package info Get info about a build
package list List your cloud builds
Exemplo completo de criação de app
Criar app
ionic start exemplos tabs (ionic start CalculoIMC blank --appname "Cálculo de IMC")
Executar app no navegador
ionic serve
Executar app
ionic platform android
Build - gerar executável
Instalando plugin
npm install --save-dev --save-exact @ionic/clip-plugin-cordova@latest
cordova platform add --save android
ionic cordova build android
Cria em /home/ribafs/exemplos/platforms/android/build/outputs/apk/android-debug.apk
https://ionicframework.com/docs/cli/cordova/build/
ionic cordova emulate android
https://ionicframework.com/docs/cli/cordova/emulate/
Rodar no celular
ionic run android
Ícone e Splash Screen
Ícone
Inclua um arquivo icon.png, icon.psd ou icon.ai na pasta resources do projeto. Certifique que o tamanho mínimo da imagem seja 192px x 192px e que não tenha cantos arredondados. Com isso basta rodar o comando abaixo que o Ionic gera todos os tamanhos possíveis para cada plataforma.
ionic resources --icon
Splash Screen
Inclua um arquivo splash.png, splash.psd ou splash.ai na pasta resources do projeto. Certifique que o tamanho mínimo da imagem seja 2208px x 2208px. Com isso basta rodar o comando abaixo que o Ionic gera todos os tamanhos possíveis para cada plataforma.
ionic resources --splash
Criar Aplicativos com Ionic
https://www.youtube.com/watch?v=yoCvd-ksu6w
Tutorial Abrangente
https://hollyschinsky.github.io/ConferenceTracker/install-ionic.html
Outro
Ionic Framework tutorial
http://ccoenraets.github.io/ionic-tutorial/install-ionic.html
Comments fornecido por CComment