Title: 3. PROGRAMACIÓ DE L'APP: ANGULARJS, ONSENUI I CORDOVA
Course: CFGM. Sistemes microinformàtics - Curs 2019/20

Orientacions

A1- Nocions bàsiques de programació (8h)

En aquesta activitat d'ensenyament-aprenentatge, l'alumnat aprendrà les nocions bàsiques de programació, utilitzant el framework de programació AngularJS (javascript)

Recursos i documentació

Exemples

Exemple 1 (1h)

En aquest exemple s'inicialitza una aplicació AngularJS i s'introdueixen els conceptes de

- variable,
- vector de dades (array),
- dades complexes (JSON) i
- control de fluxe iteratiu.

Amb la creació d'un petit controlador JS molt senzill, s'aprenen les etiquetes

- ng-app,
- ng-controller,
- ng-model i
- ng-repeat (amb filtre de cerca).

Recordar: per tal que aquest exemple funcioni, cal afegir la carpeta libs, que es troba a l'apartat de "Recursos i documentació", a l'arrel del projecte.

Exemple 2 (1h)

En aquest s'introdueix el concepte de LocalStorage, com a emmagatzematge permanent de dades al navegador. A més a més, es tracta el control de fluxe condicional i la definició, implementació i crida de funcions senzilles. S'aprenen les etiquetes

- ng-hide,
- ng-show,
- ng-init i
- ng-click

Recordar: per tal que aquest exemple funcioni, cal afegir la carpeta libs, que es troba a l'apartat de "Recursos i documentació", a l'arrel del projecte.

Pràctiques avaluables

Aplicació de notes Post-it (6h)

A2 - Components d'interfície (5h)

En aquesta activitat d'ensenyament-aprenentatge, l'alumnat aprendrà a utilitzar els components d'interfície que ofereix el framework Onsen (html i css).

Recursos i documentació

Exemples

Exemple 1 (1h)

En aquest exemple s'inicialitza una aplicació AngularJS-Onsen i s'introdueixen els components de

- pàgina (ons-page) i la seva distribució en capçalera (ons-toolbar) i contingut);
- navegació (ons-navigator, ons-button i ons-back-button);
- llistes (ons-list i ons-list-item),
- camps de text i
- icones (ons-icon).

Amb el navegador s'aprenen les funcionalitats

- pushPage (amb i sense paràmetres) i
- popPage

Recordar: per tal que aquest exemple funcioni, cal afegir la carpeta libs, que es troba a l'apartat de "Recursos i documentació", a l'arrel del projecte.

Exemple 2 (1h)

En aquest exemple s'introdueixen el

- carousel d'imatges (ons-carousel i ons-carousel-item);
- les targetes (ons-card),
- la distribució en graella (ons-row i ons-col) i
- els diàlegs modals (ons-modal).

Recordar: per tal que aquest exemple funcioni, cal afegir la carpeta libs, que es troba a l'apartat de "Recursos i documentació", a l'arrel del projecte.

Exemple 3 (1h)

En aquest exemple s'introdueixen els diferents tipus de navegació

- navegació amb pestanyes (ons-tabbar)
- navegació amb menú lateral (ons-splitter) i
- navegació amb menú i botons (ons-spliter i ons-navigator).

Recordar: per tal que aquest exemple funcioni, cal afegir la carpeta libs, que es troba a l'apartat de "Recursos i documentació", a l'arrel del projecte.

Pràctiques avaluables

Aplicació de notes Post-it (2h)

Aplicació de galeria d'imatges (Opcional. 2h)

A3 - Compilació de l'APK (2h)

En aquesta activitat d'ensenyament-aprenentatge, l'alumnat aprendrà a crear les seves pròpies aplicacions per a android (APKs).

Recursos i documentació

Pràctiques avaluables

Compilació i creació d'una aplicació per a android - APK (2h)

A4 - Creació de la pròpia aplicació mòbil (25h)

En aquesta activitat d'ensenyament-aprenentatge, l'alumnat haurà d'implementar la seva aplicació mòbil (en grups).

Pràctiques avaluables

Creació de la navegació bàsica de l'aplicació

Creació de la pàgina principal (home) i la pàgina d'informació (about)

Aplicació completa i APK