DrupalDay 2014: AngularJS + IonicFramework + Drupal Services

Costruire una app mobile con Ionic,
AngularJS ed ovviamente Drupal

Chi sono
Davide Michel Morelli
michel@ziobuddalabs.it

Chi sono
Programmatore PHP Senior, Drupal Senior e DBA MySQL

Chi sono
Sviluppatore Web AngularJS, MongoDB (da poco) e NodeJS

Chi sono
Sviluppatore Web AngularJS, MongoDB (da poco) e NodeJS
Sviluppatore Mobile su piattaforma HTML/CSS/JS

Cos'è Drupal
Veramente ??? No dai :D

Drupal: Services
Si installa nel solito modo

Drupal: Services
Si deve creare quello che si chiama Rest point

Drupal: Services
 Maggiore diversificazione delle risorse

Drupal: Services
 All'interno della configurazione di services si possono dare i
permessi di accesso per i singoli servizi

Drupal: Services
 All'interno della configurazione di services si possono dare i permessi
di accesso per i singoli servizi
 Attenzione: i permessi per accedere alla funzionalità del servizio
non sono i permessi di accesso di Drupal.
Vanno configurati anche questi
Altrimenti si avranno degli accessi negati senza capire il perché.

Drupal: Services
Per le applicazioni mobili ci servono le chiamate che ritornino del JSON
Perché è la soluzioni più pratica.

Drupal: Services
Drupal può rispondere in 3 modi diversi

Drupal: Services
Creiamo la nostra funzione che risponde in JSON

Drupal: Services
Utilizziamo views_datasource che risponde in JSON

Drupal: Services
Utilizziamo Services che consente i CRUD

Drupal: Services
In Drupal Services i nodi si possono creare chiamando direttamente
il servizio /node

Drupal: Services
In Drupal Services i nodi si possono creare chiamando direttamente
il servizio /node
La struttura deve essere come se lo stessi creando via PHP.
Title, Type, Body sono valori normali (nessuno nota l'errore?)
Un FIELD è invece nella struttura: { 'und' : [ { value: ILVALORE } ]}
che corrisponde a [LANGUAGE_NONE][0][value]

Drupal: Services
Attenzione nello sviluppo nella fase di debug:
Access-Control-Allow-Origin
(https://github.com/systemseed/services_accept_origin)
Plugin per Chrome:
“Allow-Control-Allow-Origin”
Questo problema c'è solo sui browser perché sugli smartphone l'accesso
avviene da file:// e non http://
Consiglio:
Testare su un device fisico è sempre meglio.
Si hanno le vere risposte delle performance e si può fare il debug
dell'html tramite chrome://inspect

AngularJS
E' un MVC
O meglio un MVVM perché c'è il doppio binding

AngularJS
E' un MVC
O meglio un MVVM perché c'è il doppio binding
Sviluppato da Google

AngularJS
E' un MVC
O meglio un MVVM perché c'è il doppio bindig
Permette di spostare la logica di funzionamento di un framework
direttamente sul frontend

AngularJS
E' un MVC
Pensato per creare SAP: Singe Application Page

AngularJS
E' un MVC
Pensato per creare SAP: Singe Application Page
Ma lo si può usare in tanti modi

IonicFramework
All'inizio c'erano le applicazioni che venivano create con il linguaggio
dello smartphone

IonicFramework
dello smartphone
Poi si è pensato di utilizzare il web per creare delle piccole pagine a
modo di applicazione ed è stato inventato jQueryMobile

IonicFramework
dello smartphone
Poi c'è stato Phonegap (diventato poi cordova, ma rimasto anche
Phonegap) che ha permesso di creare delle specie di applicazioni
native che sfruttano il browser

IonicFramework
dello smartphone
Poi c'è stato Phonegap (diventato poi cordova, ma rimasto anche
Phonegap) che ha permesso di creare delle specie di applicazioni
native che sfruttano il browser
Phonegap/Cordova fornisce solo l'accesso alla risorsa dello smartphone
all'interno del browser
Tastiera
Vibrazione
Fotocamera
Filesystem
Altro...

IonicFramework
JqueryMobile ha però il concetto di unica pagina dove tutto deve essere
visualizzato e poi nascosto

IonicFramework
JqueryMobile ha pero' il concetto di unica pagina dove tutto deve essere
Angular ha il concetto di “vista” che può essere riempita a seconda di
quello che si vuole visualizzare

IonicFramework
Angular ha il concetto di “vista” che puo' essere riempita a secondo di
Sullo smartphone (meno memoria, meno potenza di calcolo) è molto
meglio visualizzare poco alla volta

IonicFramework
Angular ha il concetto di “vista” che puo' essere riempita a secondo di
Sullo smartphone (meno memoria, meno potenza di calcolo) è molto
meglio visualizzare poco alla volta
Quindi come unire mobile, user interface e applicazioni native ?

IonicFramework
IonicFramework prende Cordova e lo unisce ad Angular ampliandoli

IonicFramework
Accesso al dispositivo (cordova)

IonicFramework
Gestione della visualizzazione, del reperimento dei dati (angularjs)

IonicFramework
Gestione della visualizzazione, del reperimento dei dati (angularjs)
Attività normali dello smartphone rese disponibili

IonicFramework
Via JS
Slide menu
Tab
Swipe
Routing per le pagine interne
Finestre modali
Finestre di loading (spinner)

IonicFramework
Via CSS
Slides
Lists
Bottoni
Header
Footer

IonicFramework
Come fare le chiamate con Ionic, o meglio via AngularJS:
3 alternative praticabili
$http
$resource
Restangular
Sono messe in ordine di “livello di programmazione”.
Dal più basso al più alto.

IonicFramework
Per questo talk ho usato Restangular, anche se ci sono cose che non mi
piacciono:
Il risultato della chiamata viene restituito come oggetto
Restangular
Ma quello che abbiamo richiesto è messo allo stesso livello delle
funzioni native.
Quindi se riceviamo un array di informazioni non possiamo
utilizzare angular.forEach() perché andremmo a prendere
anche le funzioni native.

IonicFramework
piacciono:
Il risultato della chiamata viene restituito come oggetto Restangular
funzioni native.
Per usarlo con drupal è necessario modificarne il funzionamento
(tramite apposita funzione addResponseInterceptor, nessuna modifica al
codice di Restangular) perché Services ritorna una serie di oggetti,
mentre Restangular vuole un elemento solo oppure un array.

IonicFramework
piacciono:
Il risultato della chiamata viene restituito come oggetto Restangular
funzioni native.
Per usarlo con drupal è necessario modificarne il funzionamento (tramite
apposita funzione addResponseInterceptor, nessuna modifica al codice di
Restangular) perché Services ritorna una serie di oggetti, mentre Restangular
vuole un elemento solo oppure un array.
Per un altro progetto ho usato $http. Meno funzioni evolute, ma più
usabile

IonicFramework
Vediamo come IonicFramework gestisce le varie “view”.
Prima di tutto il file principale: INDEX.HTML

IonicFramework
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>"Utrend"</title>



<link rel="stylesheet" href="lib/ionic/release/css/ionic.css" />



<link rel="stylesheet" href="styles/main.css">

</head>
<body ng-app="Utrend">
<ion-nav-view></ion-nav-view>



<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic/release/js/ionic.js"></script>
<script src="lib/ionic/release/js/ionic-angular.js"></script>

IonicFramework

<script src="cordova.js"></script>

<script src="scripts/common/angular-cookie.min.js"></script>
<script src="scripts/common/underscore-min.js"></script>
<script src="scripts/common/restangular.min.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/common/restfulServices.js"></script>
<script src="scripts/common/sharedService.js"></script>
<script src="scripts/user/loginCtrl.js"></script>
<script src="lib/sweetalert/lib/sweet-alert.min.js"></script>
<link rel="stylesheet" href="lib/sweetalert/lib/sweet-alert.css">
<script src="scripts/posts/picture.js"></script>
<script src="scripts/posts/singlePostCtrl.js"></script>
<script src="scripts/homeCtrl.js"></script>

</body>
</html>
L'unico motivo per modificare questo file è per inserire i vari SCRIPT dei
nostri controller

IonicFramework
Ed il file che gestisce le view: app.js
'use strict';
// Ionic Starter App, v0.9.20
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('Utrend', ['ionic', 'config', 'Utrend.controllers','restangular','ipCookie'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})

IonicFramework
.config(function($stateProvider, $urlRouterProvider,$compileProvider,RestangularProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent' :{
templateUrl: 'templates/home.html',
controller : 'homeCtrl'
}
}
})
.state('app.login', {
url: '/login',
controller: 'loginCtrl'
})
})

IonicFramework
.state('app.browse', {
url: '/browse',
views: {
'menuContent' :{
templateUrl: 'templates/browse.html',
controller: 'singlePostCtrl'
}
}
})
.state('app.getPicture', {
url: '/getpicture',
views: {
'menuContent' :{
templateUrl: 'templates/getPicture.html',
controller: 'pictureCtrl'
}
}
});

IonicFramework
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
$compileProvider.imgSrcSanitizationWhitelist(/^s*(https?|ftp|mailto|file|tel):/);
RestangularProvider.setBaseUrl('http://MYDOMAIN/');
RestangularProvider.setResponseExtractor(function(response) {
var newResponse = response;
newResponse.originalElement = angular.copy(response);
return newResponse;
});
});

Drupal Service + IonicFramework
Per collegarci a Drupal abbiamo detto che utilizzeremo Services

Ma dobbiamo prestare attenzione ad una cosa molto importante:
il token CSRF

Il token CSRF
E' stato aggiunto dalla versione 3.5 del modulo services

Il token CSRF
Lega a doppio mandato la sessione attuale con quella registrata sul server
Per fare qualsiasi operazione che non sia un GET è richiesto questo
TOKEN negli header della richiesta

Il token CSRF
Lega a doppio mandato la sessione attuale con quella registrata sul server
Per fare qualsiasi operazione che non sia un GET è richiesto questo
TOKEN negli header della richiesta
Per rendere il codice scritto più gestibile e leggibile è consigliabile
creare un service di angular che gestisca per noi le connessioni

Prendiamo il token
getToken : function(reset) {
if (tokenVar != '' && !reset) {
var deferred = $q.defer();
deferred.resolve(tokenVar);
return deferred.promise
}
return
Restangular.oneUrl('services/session/token','http://MIODOMINIO/services/session/token').get().then(function
(token) {
tokenVar = token;
return token;
});
},
Notate come non abbia utilizzato restfulBase ma solamente per una
questione di demo

E' facile creare una app che permetta di gestire gli utenti collegati e
quelli non collegati (anonimi)

E' facile creare una app che permetta di gestire gli utenti collegati e
quelli non collegati (anonimi)
Per farlo utilizzeremo AngularJS e il suo ng-if modificando il file di
template del menù slide

<ion-side-menus>
<ion-pane ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar-positive">

</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list ng-if="user.uid == 0">
<ion-item nav-clear menu-close ng-controller="loginCtrl" ng-click="login()">
Login
</ion-item>
</ion-list>

<ion-list ng-if="user.uid > 0">
<ion-item nav-clear menu-close >
Hi, {{user.name}}
</ion-item>
<ion-item nav-clear menu-close >
MyPage
</ion-item>
<ion-item nav-clear menu-close href="#/app/getpicture">
upload photo
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close ng-controller="loginCtrl" ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

Vediamo il controller per il login (notate cosa usa)
/**
* Created by ziobudda on 05/11/14.
*/
(function () {
angular.module('Utrend').controller('loginCtrl',
['$scope','$ionicModal','$state','sharedService','restfulService','$rootScope', loginCtrl]);
function loginCtrl($scope, $ionicModal,$state,sharedService,restfulService,$rootScope) {
$scope.error_message = '';
sharedService.getToken();
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
},

// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login22', $scope.loginData);
restfulService.login($scope.loginData)
.then(function(result) {
$rootScope.$broadcast("login",{user: result.user});
restfulService.getToken(true).then(function(result) {
$scope.closeLogin();
swal({title: "Login OK", text: "Now you are a loggedin user!", type: "success"});
$state.go('app.browse')
})
}, function (result) {
$scope.error_message = result.data[0];
});
}

$scope.logout = function () {
restfulService.logout()
sharedService.user = {};
sharedService.user.uid = 0;
swal({title: "Logout OK", text: "Now you are a logged out user!", type: "success"});
$rootScope.$broadcast("logout");
$state.go("app.home");
});
}
};
})();

In questo controller abbiamo:
Le finestre modali (per chiedere login e password)

In questo controller abbiamo:
Le finestre modali (per chiedere login e password)
La gestione automatica del menù slide fatto tramite una semplice
valorizzazione di sharedService.user

E per visualizzare dei dati presi via GET ? Nella nostra app di prova sono
delle immagini
Il controller è puro AngularJS

E per visualizzare dei dati presi via GET ? Nella nostra app di prova sono
delle immagini
Il controller è puro AngularJS
Al div principale sono state definite le funzioni per gestire
 swipe a sinistra
 swipe a destra
<div on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()" >
E' IonicFramework che rende facilmente disponibile il service
$swipe di AngularJS
https://docs.angularjs.org/api/ngTouch/service/$swipe

Il codice HTML alla base della visualizzazione delle nostre immagini:
<ion-view title="Browse">
<ion-nav-buttons side="left" class="bar-positive">
<button menu-toggle="left"class="button button-icon icon ion-android-contact"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<div on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()" >
<div class="item item-body">
<img class="full-image" ng-src="{{post.fullimage}}">
<p>
{{post.body.und[0].value}}
</p>
<p>
<a href="#" class="subdued">{{post.like_count}} Like</a>
<a href="#" class="subdued">{{post.comment_count}} Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<i class="icon ion-chatbox"></i>
Comment
</a>
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-content>
</ion-view>

E questo è il controller
(function () {
angular.module('Utrend').controller('singlePostCtrl', ['$scope','$ionicLoading', '$timeout', 'sharedService',
'restfulService', '$rootScope', singlePostCtrl]);
function singlePostCtrl($scope, $ionicLoading, $timeout, sharedService, restfulService, $rootScope) {
$scope.searchParams = {from : sharedService.fromPost, limit : 1};
if (typeof $scope.post == 'undefined') {
console.log("Azzero $scope.post");
$scope.post = {};
}
$scope.getPost = function () {
return restfulService.postSearch($scope.searchParams)
sharedService.log("postSearch",result);
return result;
})
}
//Questo prende il primo post quando viene instanziato questo controller
restfulService.getToken().then(function (result) {
$ionicLoading.show({template: '<i class="button-icon icon ion-loading-a"></i>'});
$scope.getPost().then(function (result) {
$scope.post = result.value[0];
sharedService.log("post",$scope.post);
$timeout(function() {
$scope.$apply();
$ionicLoading.hide();
});
});
});

$scope.onSwipeLeft = function() {
console.log("onSwipeLeft");
$scope.searchParams.from++;
sharedService.fromPost = $scope.searchParams.from;
console.log($scope.searchParams.from);
$ionicLoading.show({template: '<i class="button-icon icon ion-loading-a"></i>'});
console.log("getToken -> getPost");
$scope.$apply();
});
});
}

$scope.onSwipeRight = function() {
console.log("onSwipeRight");
$scope.searchParams.from = ($scope.searchParams.from == 1) ? 0 : ($scope.searchParams.from-1);
sharedService.fromPost = $scope.searchParams.from;
console.log($scope.searchParams.from);
$ionicLoading.show();
console.log("getToken -> getPost");
$scope.$apply();
});
});
}
}
})();

Riassumendo
Per creare applicazioni mobili che sfruttano l'html5:
 AngularJS
 IonicFramework (per velocizzare lo sviluppo)
 Un servizio remoto che permetta di ricevere le informazioni da
visualizzare in formato JSON

Domande ?
Solo se conosco la risposta, per favore :D

Link utili
AngularJS: https://angularjs.org/
IonicFramework: http://ionicframework.com/
IonicFramework Generator: https://github.com/diegonetto/generator-ionic
La mia rivista flipboard dedicata ad angularJS e gli altri JS
https://flipboard.com/section/angularjs%2C-nodejs-e-gli-altri-js-bTb8rt
Icone per le app: http://ionicons.com/
Usare FontAwesome (Bootstrap):
http://blog.nraboy.com/2014/10/
use-font-awesome-glyph-icons-ionicframework/

DrupalDay 2014: AngularJS + IonicFramework + Drupal Services

Recommended

More Related Content

Similar to DrupalDay 2014: AngularJS + IonicFramework + Drupal Services (20)

DrupalDay 2014: AngularJS + IonicFramework + Drupal Services

Editor's Notes