This document discusses creating mobile applications using Ionic, Angular, and Drupal 8. It provides an overview of using Drupal 8's web services API to retrieve and manage content, implementing Angular services to make HTTP requests to the API, and using the Ionic framework to build hybrid mobile apps. An example is shown of retrieving article data from Drupal 8 using Angular services, and displaying it in an Ionic app with clickable items linking to detail pages.

1. Création d’application
Ionic & Angular & Drupal 8
Marouan Hammami
https://www.drupal.org/u/mhmarouan

2. Plan
● Web Services API Drupal 8
● Angular
● Angular Services
● Ionic
● Exemple : Apps Ionic + Angular + Drupal 8

3. Web Services API Drupal 8
● Les méthodes HTTP dont GET,POST,PUT, PATCH
● Interaction avec les entités dépend de module serialization
● Service de sérialisation des données vers et à partir des formats(json, xml)

4. Web Services API Drupal 8

5. Web Services API Drupal 8

6. Web Services API Drupal 8
User
Login
POST: https://domain.com/user/login?_format=json
Content-type: application/json
{
"name": "admin",
"pass": "password"
}
Node
Retrieve
GET: http://domain.com/node/1?_format=json
Content-type: *
Accept: application/json

7. Web Services API Drupal 8

8. Angular
● Framework de création d'applications web et mobile
● TypeScript : compilation vers javascript
● Angular Universal : l’exécution côté serveur
● Angular CLI : outil de commande en ligne(composants, test, déploiement)
● Composants : Router, HTTP, Forms, platform-browser….

9. Angular

10. Angular Services
● HttpClient : API pour des fonctions de HTTP (@angular/common/http)
● export class MyComponent implements OnInit {
● results: string[];
● // Inject HttpClient into your component or service.
● constructor(private http: HttpClient) {}
● ngOnInit(): void {
● // Make the HTTP request:
● this.http.get('/api/items').subscribe(data => {
● // Read the result field from the JSON response.
● this.results = data['results'];
● });}
● }

11. IONIC
● Framework pour des applications mobile hybrides

12. Exemple :
import { Injectable, Inject } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import {HeadersService} from '../headers';
import { APP_CONFIG, IAppConfig } from '../../app/app.config';
@Injectable()
export class ViewserviceProvider {
apiUrl : any;
constructor(public http: Http, private _header:HeadersService, @Inject(APP_CONFIG) private config: IAppConfig) {}
get(url) {
return new Promise((resolve, reject) => {
this.apiUrl = this.config.urlApi + url;
this.http.get(this.apiUrl, this._header.getJsonHeaders())
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
import { OpaqueToken } from '@angular/core';
export let APP_CONFIG = new
OpaqueToken('app.config');
export interface IAppConfig {
urlApi: string;
}
export const AppConfig: IAppConfig = {
urlApi: "http://appmobile.dev",
};

13. Exemple :
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ViewserviceProvider } from '../../providers/view/view.services';
@Component({
selector: 'page-list',
templateUrl: 'list.html',
providers: [ ViewserviceProvider, { provide: APP_NODE, useValue: NodeConfig } ]
})
export class ListPage {
responseData: any;
url: string;
constructor(public navCtrl: NavController, public navParams: NavParams, public viewService:ViewserviceProvider) {
}
ngOnInit(): void {
this.url = '/articles';
this.viewService.get(this.url).then((result) => {
this.responseData = result;
}, (err) => {
console.log('failed list');
});
}
}

14. Exemple :
<ion-content>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of responseData">
<ion-thumbnail item-start>
<img src="{{item.field_image[0].url}}"/>
</ion-thumbnail>
<h2>{{item.title[0].value}}</h2>
<div [innerHtml]="item.body[0].value"></div>
<button ion-button clear item-end (click)="gotoDetail(item.nid[0].value)">Détail</button>
</ion-item>
</ion-list>
</ion-content>

15. Merci !
Marouan Hammami
https://www.drupal.org/u/mhmarouan