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)

Objectiu

Arquitectura

Server

  • Base de dades amb els recursos de formació i API REST per a les operacions CRUD sobre la base de dades.
  • Preparar l'API per mostrar els resultats en diferents formats utilitzant SOLID i un disseny basat en contractes (interficies)
  • Una sola taula training_resource on estaran tots els recursos de formació. Els recursos de formació poden ser agrupacions de recursos de formació (tenen un o més recursos de formació fills) o recursos de formació fulla/finals (sense fills). La jerarquia la implementem amb un camp training_resource_parentResourceId. Com a mínim han de tenir un nom, nom curt, descripció, thumbnail, URL externa (opcional)
  • Crear la taula utilitzant migracions de Laravel i omplir la base de dades amb exemples predefinits amb un Laravel Seed
  • No cal autenticació per accés a la API en mode lectura (operacions GET) si caldrà per al backend i la resta d'operacions si s'acaben implementant.

Notes

  • Prioritari implementar els GET (Retrieve de cRud) és a dir obtenir na llista de tots els recursos i un recurs concret donat el seu ID
  • La resta d'operacions CrUD només necessàries si s'implementa el backend
  • Utilitzar controladors RESTFul de Laravel per implementar API REST
  • Implementar només la vista en format JSON però programar en SOLID per tal de poder canviar després a XML, text o el que convingui
  • Utilitzar el paradigma de disseny de repositori per accedir a la base de dades. Implementar només accés a base de dades MySQL

Backend

Mòdul ebre-escool opcional (no integrar a ebre-escool principal) que permeti la creació de recursos de formació

Glue: JSON

Definir el format JSON d'una llista de recursos de formació que permeti persistir la base de dades de recursos de formació en format JSON. NO REINVENTAR LA RODA!:

http://laravel.com/docs/4.2/eloquent#converting-to-arrays-or-json

A la part de client web cal utilitzar Javascript amb l'ajuda de Jquery. Vegeu:

Jquery_i_AJAX

Concretament el mètode getJSON és ideal pel que es vol fer que és carregar un JSON al principi d'executar l'aplicació client.

Per fet el client Ionic cal aprendre AngularJS:

http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

Vegeu AngularJS data binding/AngularJS JSON

Clients

Els dos clients tenen inicialment una Splash Screen o Landing Page amb el logo i info bàsica de l'aplicació. A l'splash ha d'haver-hi un clar Call To Action que porti al wizard. La splash screen es pur bootstrap es pot mostrar igual als dos clients.


També caldria tenir un footer (excepte splash screen que pot ser un simple copyright a la part inferior de la Landing Page) tipus:

http://ionicframework.com/docs/components/#footer

amb informació de qui ha fer la aplicació (Institut de l'Ebre i autors mínim)

Web

TODO: Si fem llistes quedarà molt buida la pàgina i caldrà centrar i deixar marges. Potser es pot fer la llista en forma de cards i que ocupin varies cartes espai horizontal i ben grans com a:
http://www.bootply.com/render/90113 les cartes grans Hacker News, Bootstrap Templates i Social Media


IMPORTANT: Utilitzar el JSON per a carregar dinàmicament amb AJAX el wizard

Aplicació LAMP amb Bootstrap i Javascript. Utilitzar Wizard Ace template. Navegació de la app:

http://localhost/~sergi/bootstrap_theme/products-WB0B30DGR/html/form-wizard.html

Cada recursos de formació es pot mostrar com una Card. Diferents ajudes per a Cards amb flat design:

http://www.bootply.com/render/90113
http://bootcards.org/

Hybrid app

IMPORTANT: utilitzar el JSON per a carregar dinàmicament amb AJAX el slider

Utilitzar Ionic i Apache Cordova. Utilitzar quelcom similar a:

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

Amb llistes amb thumbnails cada apartat:

http://ionicframework.com/docs/components/#item-thumbnails

Els recursos de formació fulla (no tenen més fills) poden ser una card tipus facebook:

http://ionicframework.com/docs/components/#card-images
http://ionicframework.com/docs/components/#card-showcase

Utilitzar Ionic Local Storage:

http://learn.ionicframework.com/formulas/localstorage/

i la comprovació de si hi ha connectivitat

https://blog.nraboy.com/2014/06/check-network-connection-with-ionicframework/

Per emmagatzemar el JSON en cas de no haver connexió a Internet. El primer que cal fer es comprovar si hi ha connexió a Internet, si hi ha obtenir un nou JSON i actualitzar el local storage. També pot ser que tot i haver connexió i hagui un error al demanar el JSON, aleshores també utilitzar el local storage si no existeix.

Angular recursive Hierarchival list

http://benfoster.io/blog/angularjs-recursive-templates

Example app with Ionic Landing Page ans simple JSON list

https://github.com/Institut-Ebre/EbreFormappLandingPage

Disseny/Presentació

Nom aplicació

forma-t, forma't

formapp?
ebre-formapp? La aplicació per a formar-te a les terres de l'Ebre..

Lema

Proposta de Ximo
La aplicació per a formar-te a les terres de l'Ebre..

Landing Page'

Pàgina inicial i principal. Per a web ha de tenir:

  • Logo i/o+ Banner de format
  • Lema
  • Petita explicació sobre l'app
  • Fons tipus difuminat relaciona't amb la temàtica (http://acacha.org/sergitur apartat ebre-escool o primer de [1])
  • Un call to action tipus botó molt destacat de color i amb icona amb el text forma't o similar
  • Available on Android Google Play i preparar el Apple Store
  • Social links facebook, tiwtter i similars
  • Un mòbil amb una captura de pantalla?

Resources:

TODO

Exemple de presentació amb slider i pager amb titol i navegació:

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

Exemple de llista amb thumbnails:

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

Accordion List:

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

Vegeu també

Enllaços externs