Ionic Adventures The power of Ionic CLI by @juarezpaf

An enthusiastic Front end Engineer with over 7 years of experience, after his first CSS class devoted completely to Front End and UX.

Front end Engineer at madewithloveCaravana Web Founder GDG Casts and GDG Organizer Event host/organizer

The power of Ionic CLI by @juarezpaf http://plus.google.com/+JuarezPAFilho/about

+JuarezPAFilho California Lover <3

http://ionicframework.com/ The power of Ionic CLI by @juarezpaf

http://en.wikipedia.org/wiki/Command-line_interface The power of Ionic CLI by @juarezpaf

Command-line what?A command-line interface (CLI), also known as command-line user interface is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines).

“

http://ionicframework.com/docs/cli/ The power of Ionic CLI by @juarezpaf

The Ionic Framework command line utility makes it easy to start, build, run, and emulate Ionic apps.“

What is the Ionic CLI?

http://ionicframework.com/docs/cli/install.html The power of Ionic CLI by @juarezpaf

How to install Ionic CLI?Install and update Ionic is so easy because its handled by the might npm https://www.npmjs.com/“

$ npm install -g cordova ionic

$ npm install -g install ios-sim

$ ionic lib update

http://ionicframework.com/docs/cli/start.html The power of Ionic CLI by @juarezpaf

Ionic start your idea To create your super idea you can start from a named template, a Github repo, a Codepen or a local directory.

“$ ionic start myapp [template]

https://github.com/driftyco/ionic-ion-tinder-cards

http://codepen.io/ionic/pen/odqCz

http://ionicframework.com/docs/cli/start.html The power of Ionic CLI by @juarezpaf

[—-appname|-a]_____Human readable name for the app (Use quotes around the name)[—-id|-i]__________Package name se in the <widget id> config ex: com.mycompany.myapp[—-no-cordova|-w]__Do not create an app target for Cordova

Ionic start your idea

http://codepen.io/ionic/public/ The power of Ionic CLI by @juarezpaf

Ionic start your idea using Codepen

http://ionicframework.com/docs/cli/test.html The power of Ionic CLI by @juarezpaf

Browser TestingUse ionic serve to start a local development server for app dev and testing.“

$ ionic serve [options]

$ ionic setup sass

$ ionic serve —-address [IP]

http://ionicframework.com/docs/cli/test.html The power of Ionic CLI by @juarezpaf

Command-line options[—-consolelogs|-c] Print app console logs to Ionic CLI[—-serverlogs|-s] Print dev server logs to Ionic CLI[—-port|-p] Dev server HTTP port (8100 default)[—-livereload—port|-i] Live Reload port (35729 default)[—-nobrowser|-b] Disable launching a browser[—-nolivereload|-r] Do not start live reload[—-noproxy|-x] Do not add proxies

http://ionicframework.com/blog/ionic-lab/ The power of Ionic CLI by @juarezpaf

Browser Testing - Ionic Lab $ ionic serve ——lab

http://ionicframework.com/docs/cli/run.html The power of Ionic CLI by @juarezpaf

Add a specific platform, build, emulate and run in your device is a breeze with the power of Ionic CLI

“Run & Emulate$ ionic platform [ios|android]$ ionic build [ios|android]$ ionic emulate [ios|android]$ ionic run [ios|android]

http://ionicframework.com/blog/automating-icons-and-splash-screens/ The power of Ionic CLI by @juarezpaf

Ionic Resources - Icon and Splash Screen Image Generation

Automatically generate icons and splash screens for each platform.“$ ionic resources ——icon

$ ionic resources ——splash

$ ionic resources resources/android resources/ios

https://github.com/driftyco?query=ionic-ion The power of Ionic CLI by @juarezpaf

A curated collection of useful addons, components, and ux interactions for extending ionic.“$ ionic add ionic-ion-*

Ions - ions power your app to be awesome

List: Ions, bower components, or addons installed

$ ionic list

http://blog.ionic.io/ionic-docs-from-your-cli/ The power of Ionic CLI by @juarezpaf

With a simple command, you will be directed to the Ionic framework documentation for that topic in your favorite browser

“Ionic Docs - Docs from your CLI

$ ionic docs

$ ionic docs ls

$ ionic docs repeat

http://ionicframework.com/docs/cli/sass.html The power of Ionic CLI by @juarezpaf

$ ionic setup ——sassHow to setup Sass

http://ionicframework.com/blog/view-app-is-alive/ The power of Ionic CLI by @juarezpaf

Ionic provides a platform for you to upload your apps to as well as providing other services http://apps.ionic.io/signup

“Ionic View - Uploading your App

$ ionic upload

Uploading App...App Uploaded (5858xk4)

http://ionicframework.com/blog/crosswalk-comes-to-ionic/ The power of Ionic CLI by @juarezpaf

Crosswalk provides Android developers a bundled Chrome webview for their projects, resulting in better performance and predictability!

“$ ionic browser add crosswalk

$ ionic browser list

$ ionic browser add crosswalk@[version]

Crosswalk - Integrate into your App

http://sitepoint.com/ionic-box-vagrant-configuration-hybrid-mobile-apps The power of Ionic CLI by @juarezpaf

A solution to the nightmare that is dependency installation: Ionic Box, an all-in-one project for setting up hybrid development environments more quickly and easily.

“Vagrant — Ionic Box

$ vagrant init drifty/ionic-android

$ vagrant up

$ vagrant ssh

https://github.com/diegonetto/generator-ionic The power of Ionic CLI by @juarezpaf

Yeoman — Ionic GeneratorYeoman generator for creating Ionic hybrid mobile applications using AngularJS and Cordova - lets you quickly set up a project with sensible defaults and best practices.

“$ npm install -g generator-ionic

$ yo ionic [app-name]

Ionic PUSH is coming

Imagine a world with easy push notifications inside of your mobile apps?

That’s right! Stay tuned!

https://apps.ionic.io/landing/push The power of Ionic CLI by @juarezpaf

http://ionicframework.com/blog/angular-2-ionic/ The power of Ionic CLI by @juarezpaf

$ ionic ——ionitron

Yaaaay! Let’s create amazing apps with Ionic

@ionicframework The power of Ionic CLI by @juarezpaf