Tot Formació

L'aplicació híbrida per a formar-te a les Terres de l'Ebre!

Creat per Țurcan Nicolae / nikolaeturcan@gmail.com

Objectius

  • Analitzar la situació actual dels sistemes operatius mòbils per tal de crear una aplicació multiplataforma.
  • Escollir les millors eines de codi obert per crear l'aplicació de forma gratuïta.
  • Desenvolupar l'aplicació de forma que sigui disponible tant per als mòbils com per als equips mitjançant un navegador web.
  • Publicar l'aplicació per tal de que sigui accessible per tots els dispositius.

Requeriments

  • S'ha de realitzar una aplicació que estableixi connexions a qualsevol de les bases de dades utilitzades a classe.
  • La connexió es podrà fer utilitzant dues tecnologies: JDBC (utilitzant el driver) o per ORM (Hibernate).
  • S'ha d'utilitzar la programació orientada a objectes i presentar el diagrama de classes, etc…, en format UML.
  • L’aplicació s’ha de desenvolupar implementant el paradigma MVC.
  • L'aplicació ha d'estar adaptada al tipus de públic al qual va dirigit, disseny centrat en l'usuari.
  • Un manual tècnic, ha d’estar realitzat amb el Javadoc, Docbook o eines similars.
  • S'ha de realitzar una guia de referència i guia ràpida de l’aplicació.
  • La documentació s'ha d'entregar en format Wiki

Requeriments

  • Qualsevol implementació web de l’aplicació ha d’estar adaptada a mòbils (responsive) utilitzant llibreries, com per exemple Bootstrap o Jquery Mobile, per tal de facilitar la implementació.
  • Si l’aplicació té una part mòbil o es completament mòbil cal utilitzar les plataformes explicades durant el curs, no es poden utilitzar d’altres per tal de facilitar el suport del professor i la correcció.
  • En cas d'aplicació mòbil Android sempre haureu d'utilitzar una arquitectura client­servidor on el les dades estiguin al servidor i l'aplicació Android accedeixi a les dades mitjançant un API tipus REST.
  • S’ha de seguir una política acurada de seguretat (paraules de pas robustes i xifrades, configuració de permisos de fitxers). No es donarà per vàlid cap projecte amb una implementació de seguretat clarament deficient o on es mostri deixadesa per la qüestió de seguretat.

Què és aplicació Nativa?

  • Són aplicacions que s'executen només en una plataforma específica.
  • Requereixen de llenguatges i eines de desenvolupament respectives.
  • Disposen del millor rendiment.
  • Requereixen d'un nivell de programació avançat.

"More Platforms, More Problems."

Què és una aplicació Web Mòbil?

  • Són pàgines web que són optimitzades per a ser visualitzades en les pantalles de dispositius mòbils i per ser utilitzades en pantalles tàctils.
  • L'usuari accedeix a l'aplicacions mitjançant el navegador web del seu dispositiu, encara que en funció del dispositiu pot crear un enllaç directe en el seu escriptori i accedir-hi com si es tractés de qualsevol altra applicació.
  • L'aplicació es visualitzarà de forma gairebé idèntica en tots els dispositius, depenent de la resolució de la pantalla.
  • Les tecnologies utilitzades són les mateixes que per a un lloc web. És a dir, HTML, CSS i JavaScript.
  • No es distribueixen mitjançant llocs oficials d'Apple Store o Google Play el que permet desfer-se de les taxes i limitacions imposades per aquestes.
  • Funcionen princpalmente online però poden comptar amb memòria cau local i emmagatzematge de dades local per al funcionament offline.

Característiques Bàsiques

Què és una aplicació híbrida?

  • Són les aplicacions que s'executen en dispositius i sistemes operatius mòbils (Android, iOS, Windows Phone etc.).
  • Són creades amb tecnologies Web: HTML5, JavaScript i CSS
  • S'executen sobre un contenidor natiu utilitzant el motor d'un navegador mòbil per processar el HTML, JS i CSS de manera local (WebView)
  • Tenen una capa intermèdia que habilita l'accés a capacitats natives del sistema operatiu en el que s'executen, com ara l'emmagatzematge, acceleròmetre, càmera, etc.


=

Comparació d'aplicacions Natives, Web i Híbrides

Quin tipus d'aplicació ens interessa més, Nativa o Híbrida?

Vistes totes les característiques anteriors, s'ha decidit programar una aplicació híbrida ja que és un tipus de programació complet i senzill d'utilitzar. A més el fet de programar un codi i que ens funcioni per a totes les plataformes ens ha seduït molt.

Quines eines son necessàries per al desenvolupament híbrid?

AngularJS

  • És un framework JavaScript de desenvolupament d'aplicacions web.
  • Va ser creat al 2009 per Miško Hevery i Adam Abrons, treballadors de Google.
  • Es podria dir que utilitza el patró MVC (Model-View-Controller), encara que ells mateixos creadors el defineixen com un MVW (Model-View-Whatever (whatever works for you)).
  • Actualment és el segon projecte Open Source més popular.

Cordova

  • És un altre framework creat al 2009 per Nitobi que actualment pertany a Apache.
  • Està format per un conjunt d'APIs que et donen accés a funcions del dispositiu als quals en teoria no tens accés nativament, coses com la càmera, l'acceleròmetre, etc.
  • Ens permet crear aplicacions per a un munt de plataformes utilitzant un mateix llenguatge, fins i tot el mateix codi.
  • Actualment, combinat amb AngularJS, disposa de més de 63 extensions.

Ionic

  • També és un framework.
  • És Open Source i s'utilitza per al desenvolupament de aplicacions mòbils.
  • Utilitza tecnologies web i s'integra completament amb AngularJS.
  • Va ser desenvolupat per l'empresa Driftyco al 2013 i actualment està en la versió 1.5.0.
  • Al 2014 se van crear més de 320 mil aplicacions amb Ionic (Més de 50 mil aplicacions per mes).

Problemes

  • Com construim una aplicació Adroid/iOS amb dades propies?
  • És possible accedir a aquestes dades d'alguna forma des de la nostra aplicació android?
  • I si volem reconstruir el fron-end en uns quants anys?
  • Com deixem treballar a altres empreses treballar amb les nostres dades?

Solució

Molt simple, hem de fer una API!

(Application Programming Interface)

Què és una API?

  • Bàsicament és l'interfície que fa possible la cominicació entre la base de dades i les aplicacions.
    • Maneja els registres per tal de poder-los crear, editar o esborrar.
    • Només se preocupa per les dades - no per la forma en la que es poden veure.
    • Data in, data out:
      • Json és el format de sortida de dades més utilitzada.
        • Manté intactes els tipus de dades dels camps.
      • També pots utilitzar el format XML si t'agrada escriure molt.
        • Torna totes les dades com a strings.

Arquitectura d'una API

L'API s'implementa mitjançant l'arquitectura REST (Representational State Transfer) que és molt útil per a construir una aplicació client/servidor.
Implementar una API és molt més senzill comparat amb altres alternatives com ara SOAP, CORBA, WSDL, ... aprofitant totes les avantatges del protócolo HTTP.

Quines eines utilitzar per a fer una API?

Laravel

És un nou i poderós Framework PHP desenvolupat per Taylor Otwell, que promet portar al llenguatge PHP a un nou nivell.

En actualitat, Laravel és el framework php amb major acceptació per construir tant aplicacions web com APIs de forma expressiva i elegant per la seva simplicitat en la sintaxi, la seva elegància en l'escriptura, el seu motor de plantilles incorporat, la potència de composer i de artisan pel seu maneig i els complements amb què compta.

Filosofia de Laravel

  • La programació no ha de ser avorrida i repetitiva.
  • Busca reduir sintaxi de codi.
  • Es pot gaudir el que es fa sense eliminar funcionalitats en les nostres aplicacions o sacrificar altres coses.
  • Enfocat enormement a reutilitzar coneixement.
  • Pren el millor d'altres Frameworks com Ruby on Rails, Sinatra, ASP .NET MVC i en una gran part de Symfony.
  • Adequat per a aplicacions de qualsevol mida.
  • Enfocat en patrons de desenvolupament per a influenciar bones pràctiques (SOLID).

Per què Laravel?

  • Disposa d'una comunitat activa que va creixent.
  • El seu desenvolupament està actiu i garanteix correcció de problemes de seguretat, millores, etc.
  • Disposa d'una bona documentació i ben explicada.

Artisan

És un Client de consola que ens permet executar comandes propis del framework.

Composer

Composer és un nou gestor de paquets i de dependències de PHP. Això vol dir que amb Composer podem descarregar del seus repositoris qualsevol de les llibreries o dependències amb les versions que volguéssim en el nostre projecte i manejar-les en un sol lloc de manera ordenada.

Eloquent ORM (Object-Relational Mapping)

Laravel posseeix un sistema de mapeig de dades relacional anomenat Eloquent ORM, que ens permet interactuar amb la nostra base de dades com si cada taula fos un Model, respectant més fidelment la divisió MVC.

Base de dades

  • Disposem d'una sola taula a on l'ID de cada formació té un doble proposit ja que a més de servir com a identificador únic també ens serveix per a identificar el fills que té gràcies al camp parentResourceId.
  • Com ja ens podem imaginar, la taula disposa d'una relació Self-Referencing One-to-Many a on el fill pot tindre només un sol pare però el pare pot tindre més d'un fill.

Passos per a crear l'API amb Laravel

  • Primer pas, creem una migració: 
                            
                            $ php artisan make:migration create_training_resource_table --table=training_resource
  • Segon pas, creem la taula: 
                            $ php artisan migrate
  • Tercer pas, creem el model: 
                            $ php artisan make:model training_resource

Passos per a crear l'API amb Laravel

  • Quart pas, definim la ruta: 
                                Route::resource('api/training_resource',Training_Resource_Controller');
  • Cinquè pas, creem el controlador: 
                             $ php artisan make:controller Training_Resource_Controller
  • Per a estar segur de que tot està implementat de la forma correcta, podem llistar totes les rutes habilitades per a la nostra aplicació. 
                             $ php artisan route:list

Rutes de l'API

Connexió a l'API des de l'aplicació Ionic

  • Amb el següent codi realitzem una peticions GET d'HTTP a la nostra API creada anteriorment.
  • En aquest cas estem consultem tots els registres que tinguin com a pare (parentResourceId) l'identificador que ens interessa. 

                    
                        var Base_URL = 'http://178.62.75.243/api/training_resource/?training_resource_parentResourceId=';
                    

                    
$http.get(Base_URL + id).success(function (data, status, headers, config) {
    $scope.loading = false;
    if (data.length == 0) {
        return;
    } else {
        $scope.last_item = last_item;
        $scope.actual_item = id;
        $scope.items = data;
    }
})

Esquema General de la connexió a l'API

Desenvolupament

Totes les proves de desenvolupament s'han realitzat en local, cosa que ens ho ha fàcilitat l'Homestead.

Homestead

  • És una forma de desenvolupar els sites laravel en local que en forma de màquina virtual Vagrant i ens proporciona un entorn coherent i una sèrie d'eines de desenvolupament aprovades pel mateix Taylor Otwell, creador del laravel.
  • Actualment, les eines que utilitza el homestead son:
    • Nginx
    • MySQL/PostgreSQL
    • Beanstalk
    • Redis
    • Memcached
    • i PHP 5.5.
  • Per a tindre una idea més general, podríem resumir Homestead com un Vagrant preconfigurat que coincideix amb les eines i requeriments proporcionats per Forge.

Implementació

Després d'acabar la fase de desenvolupament, l'aplicació s'ha implementat/publicat a les següents plataformes.

Forge

És una forma d'allotjar els sites laravel en un entorn consistent, predictible i flexible.

És un PAAS que gestiona i simplifica el desplegament del seu codi en fase d'implementació a DigitalOcean, Linode, Amazon EC2 o Rackspace.

DigitalOcean

És un servei senzill i ràpid de cloud hosting, construït per a desenvolupadors. Els clients poden crear un servidor del núvol en 55 segons i començar a fer plans a partir dels 5$ al mes disposant d'un sistema operatiu amb 512 MB de RAM, 20GB SSD, 1 CPU, i la transferència d'1 TB. Amb un SLA (Service-level agreement) del 99,99%.

La interfície del tauler de control del DigitalOcean és senzill i intuïtiu, que disposa d'una API per als usuaris més avançats. DigitalOcean utilitza la virtualització KVM i, a més, allotja una biblioteca de tutorials molt útils que cobreixen la configuració del servidor i la seua optimització.

Google Play Store

És una plataforma de distribució digital d'aplicacions mòbils per als dispositius amb sistema operatiu Android, així com una botiga en línia desenvolupada i operada per Google.

Aquesta plataforma permet als usuaris navegar i descarregar aplicacions (desenvolupades mitjançant Android SDK), jocs, música, llibres, revistes i pel·lícules.

També es poden adquirir dispositius mòbils com ordinadors Chromebook, telèfons intel·ligents Nexus, Google Chromecast, entre d'altres.

Com podem accedir a l'Aplicació?

  • Part web de l'aplicació: De moment no disposem d'un domini, per tant per a accedir-hi ens cal una configuració mínima del fitxer /etc/hosts (LINUX). 
    •                 
178.62.75.243 api.ebre-format.com
178.62.75.243 ebre-format.com

Com podem accedir a l'Aplicació?

Requeriments Complerts

  • S'ha de realitzar una aplicació que estableixi connexions a qualsevol de les bases de dades utilitzades a classe.
    • Fet. La nostra API amb Laravel estableix connexions amb el Mysql.
      •
  • La connexió es podrà fer utilitzant dues tecnologies: JDBC (utilitzant el driver) o per ORM (Hibernate).
    • Fet. Laravel implementa l'Eloquent ORM.
      •
  • S'ha d'utilitzar la programació orientada a objectes i presentar el diagrama de classes, etc…, en format UML.
    • Fet. Laravel és un framework que treballa amb php que esta orientat a objectes.
      •
  • L'aplicació s'ha de desenvolupar implementant el paradigma MVC.
    • Fet. El paradigma MVC és una de les característiques més importants de Laravel.
      •

Requeriments Complerts

  • L'aplicació ha d'estar adaptada al tipus de públic al qual va dirigit, disseny centrat en l'usuari.
    • Fet. L'aplicació està adaptada per a tot public que l'interesi fer una formació professional.
      •
  • Un manual tècnic, ha d’estar realitzat amb el Javadoc, Docbook o eines similars.
    • No. Dona error al generar la documentació.
      •
  • S'ha de realitzar una guia de referència i guia ràpida de l’aplicació.
    • Fet. La guia ràpida i de refèrencia estàn realitzades a la wiki.
      •
  • La documentació s'ha d'entregar en format Wiki
    • Fet.
      •
  • Qualsevol implementació web de l’aplicació ha d’estar adaptada a mòbils (responsive) utilitzant llibreries, com per exemple Bootstrap o Jquery Mobile, per tal de facilitar la implementació.
    • Fet. S'ha implementat una plantilla Bootstrap i s'ha treballat amb Apache Cordova.
      •

Requeriments

  • Si l’aplicació té una part mòbil o es completament mòbil cal utilitzar les plataformes explicades durant el curs, no es poden utilitzar d’altres per tal de facilitar el suport del professor i la correcció.
    • Fet. S'ha treballat amb eines com Laravel, Ionic, Apache Cordova, etc. explicades durant el curs.
      •
  • En cas d'aplicació mòbil Android sempre haureu d'utilitzar una arquitectura client­servidor on el les dades estiguin al servidor i l'aplicació Android accedeixi a les dades mitjançant un API tipus REST.
    • Fet. S'ha implementat una API REST mitjançant Laravel.
      •
  • S’ha de seguir una política acurada de seguretat. No es donarà per vàlid cap projecte amb una implementació de seguretat clarament deficient o on es mostri deixadesa per la qüestió de seguretat.
    • Fet. Tots els accessos configurats amb contrasenyes segures, i APK generada amb certificats encriptats.
      •

Conclusió

La conclusió final és que les aplicacións híbrides son una alternativa molt bona a les natives ja que poden combinar la tecnologia web que es més fàcil d'implementar per a totes les plataformes i també poden utilitzar la tecnologia nativa mitjançant Apache Cordova per a accedir a càmera, contactes, acceleròmetre, etc. Per tant, encara que no tinguin el rendiment d'una aplicació nativa, no deixen de ser menys competents.

També hem pogut veure que fer una API amb Laravel pot arribar a ser una mica difícil al principi per falta d'experiència, però una vegada acostumbrat, resulta molt ràpida i efectiva.

Per tant, a expectatives generals el projecte ha resultat ser positiu, ja que s'han adquirit coneixements d'un munt de frameworks i s'ha pogut completar la majoria d'objectius i requeriments inicials. Obtenint com a resultat final una aplicació híbrida fàcil de mantenir gràcies a les peticions a l'API REST implementada amb Laravel 5 ja que una vegada acabada, només s'ha de gestionar des de la base de dades afegint o esborrant registres.

Enllaços d'interès.

Fi