The Ionic Framework command line utility makes it easy to start, build, run, and emulate Ionic apps.
Learn how to use the power of Ionic CLI, you'll see the most important commands and resources to go deeper into all goodies provided by this amazing tool.
Ionic CLI is so fun to use, after this presentation you'll feel more comfortable using the terminal while develop hybrid apps with Ionic Framework.
2. 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 madewithlove
Caravana Web Founder
GDG Casts and GDG Organizer
Event host/organizer
The power of Ionic CLI by @juarezpafhttp://plus.google.com/+JuarezPAFilho/about
+JuarezPAFilho California Lover <3
4. 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).
“
5. 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?
6. 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
7. 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
8. 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
10. http://ionicframework.com/docs/cli/test.html The power of Ionic CLI by @juarezpaf
Browser Testing
Use ionic serve to start a local
development server for app dev
and testing.
“$ ionic serve [options]
$ ionic setup sass
$ ionic serve —-address [IP]
11. 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
13. 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]
14. 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
15. 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
16. 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
18. 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)
19. 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
20. 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
21. https://github.com/diegonetto/generator-ionic The power of Ionic CLI by @juarezpaf
Yeoman — Ionic Generator
Yeoman 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]
22.
23. 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