IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. Ionic is both a CSS framework and a Javascript UI library. Many components need Javascript in order to produce magic, though often components can easily be used without coding through framework extensions such as our AngularIonic extensions.

Introducció

Ionic follows the View Controller pattern popularized in such frameworks as Cocoa Touch. In the View Controller pattern, we treat different sections of the interface as child Views or even child View Controllers that contain other views. View Controllers then “power” the Views inside of them to provide interaction and UI functionality. A great example is the Tab Bar View Controller which processes taps on a Tab Bar to switch between a set of viewable panes.

Explore our API docs for detailed information on the View Controllers and Javascript utilities available in Ionic.

Requirements

Installation

Once npm is installed in your computer execute:

$ npm install -g cordova ionic gulp

To install ionic. As you can see Ionic it depends on Apache Cordova.

Getting started

To start a new project:

$ ionic start myApp

This will create myApp folder with an initial basic project using tabs template (the default one). The base code is taken from github repository:

https://github.com/driftyco/ionic-app-base

You could also execute:

$ ionic start myApp blank 

or:

$ ionic start myApp tabs 

or:

$ ionic start myApp sidemenu


Ionic start command will guid you througt nex steps:

...
Your Ionic project is ready to go! Some quick tips:

* cd into your project: $ cd myApp

* Setup this project to use Sass: ionic setup sass

* Develop in the browser with live reload: ionic serve

* Add a platform (ios or Android): ionic platform add ios [android]
  Note: iOS development requires OS X currently
  See the Android Platform Guide for full Android installation instructions:
  https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

* Build your app: ionic build <PLATFORM>

* Simulate your app: ionic emulate <PLATFORM>

* Run your app on a device: ionic run <PLATFORM>

* Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or visit the Ionic docs: http://ionicframework.com/docs

+---------------------------------------------------------+
+ New Ionic Updates for April 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Invite anyone to preview and test your app
+ ionic share EMAIL
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
+---------------------------------------------------------+
...

Then:

$ cd myApp/
$ ionic setup sass
$ ionic serve

Choose localhost (option 2)

Next URL is browsed:

http://localhost:8100/#/tab/dash

Also is interesting the option lab:

$ ionic serve --lab

Now add Android platform:

$ ionic hooks add
$ ionic platform add android

NOTA: Use ionic hooks add to avoid EACCES error

Now you are able to build app with:

$ ionic build

Now if you have already installed Android SDK you will emulate app with:

$ ionic emulate <PLATFORM>

for example:

$ ionic emulate <PLATFORM>

Or connect a real device and run:

$ ionic run android

or live:

$ ionic run --livereload

You can package (create app file in android) with:

$ ionic package debug android

Now is time to create an account at:

https://apps.ionic.io

Once you have a new account registered you could login with:

$ ionic login 

And upload project with:

$ ionic upload

See your app at:

https://apps.ionic.io/apps

Go to Play Store and install app:

Ionic View

Open application and you will find all your apps here ready to be executed. Finally you could send and invitation to anybody to see your ap with:

$ ionic email <EMAIL_HERE>

Resources:

Ionic CLI

Ionic is a command installed using node.js/npm at :

$ which ionic
/usr/local/bin/ionic

because you used global option (-g) using npm install



Docs

http://ionicframework.com/docs/

ionic.io

https://apps.ionic.io/apps

Github repo

https://github.com/driftyco/ionic

Comprovar la connectivitat

Local storage

El Local Storage és una capacitat dels navegadors HTML5 que permet emmagatzemar dades al navegador.

var post = {
  name: 'Thoughts',
  text: 'Today was a good day'
};

window.localStorage['post'] = JSON.stringify(post);

var post = JSON.parse(window.localStorage['post'] || '{}');

Resources:

Ionic material

ionic amb Material design

Troubleshooting

A partir de la versió 4.0.0 de Cordova 4.0.0 podem arribar a tindre dificultats per a connectar-nos mitjançant http a l'API. Al debuggar mitjançant chrome://inspect/#devices podrem observar el següent error:

ERROR 404 Not Found

La raó per la qual no ens funcionen les peticions és perque per defecte se permeten només les navegacions cap a les URLs file://.

La solució de l'error és afegir el següent plugin:

$ ionic plugin add https://github.com/apache/cordova-plugin-whitelist

o afegir al config.xml els protocols que ens interessen mitjançant la etiqueta <allow-navigation/> :

<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
  • Recursos:

Config files

Ionic.config.json

Example:

{
"name": "myapp",
"app_id": ""
}

Resources:

Vegeu també

Examples

Blank page with Bootstrap Landing page first

https://github.com/acacha-org/IonicLandingPage
http://startbootstrap.com/template-overviews/landing-page/

Enllaços externs