App formació TE

 Compartiu 

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.

• http://startbootstrap.com/template-categories/landing-pages/
• Idees imatge

• Exemple de background image apartat ebre-escool a: http://acacha.org/sergitur/. Buscar una imatge background similar relacionada amb formació
• https://www.google.es/search?q=Train+yourself&espv=2&biw=1375&bih=813&source=lnms&tbm=isch&sa=X&ei=RA02Vfu0G8ae7gav0IGIAg&ved=0CAYQ_AUoAQ#tbm=isch&q=classroom+background&spell=1

• https://www.google.es/search?q=Train+yourself&espv=2&biw=1375&bih=813&source=lnms&tbm=isch&sa=X&ei=RA02Vfu0G8ae7gav0IGIAg&ved=0CAYQ_AUoAQ#tbm=isch&q=education+background
• https://www.google.es/search?q=Train+yourself&espv=2&biw=1375&bih=813&source=lnms&tbm=isch&sa=X&ei=RA02Vfu0G8ae7gav0IGIAg&ved=0CAYQ_AUoAQ#tbm=isch&q=higher+education+background&revid=2006399325

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:

• http://www.hongkiat.com/blog/mobile-app-landing-pages/
• http://startbootstrap.com/template-categories/landing-pages/

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é

• Ionic
• Apache Cordova
• Laravel
• Jquery_i_AJAX

Enllaços externs

• http://fp.gencat.cat/cat_prof/AppJava/views/index.xhtml?set-locale=ca_ES