Build Your Own Mobile App Using Ionic and Drupal 8

Build your own mobile app using Ionic
and Drupal 8
Ever since the release of Drupal 8, the most popular keyword search in the framework is Headless
Drupal also referred as Decoupled Drupal. Headless Drupal is something where you use Drupal
to store data that can be accessed in multiple applications (via REST APIs). The front end
frameworks like Ionic interacts with Drupal using HTTP requests.
Check out how to use this feature of Drupal and Ionic framework to build a hybrid mobile
application.
What is ionic?
In simple terms, Ionic is an open source framework that is built atop Apache Cordova to develop
hybrid mobile apps. Hybrid apps are not developed specific to a platform that means you can
manage a single codebase for different platforms. Lets build a simple movie listing page.
Prerequisites:
Installing Ionic:
To install Ionic you need to install Apache Cordova, nodejs, npm in your system. Run the
following codes.
sudo apt-get install nodejs

sudo apt-get install npm
sudo npm install -g cordova
sudo npm install -g ionic
Drupal Set up :
Enable the following modules for rest API
Enable CORS (Cross Origin Resource Sharing) for accessing the data between
applications. Change the CORS config as per the origins in services.yml file:
<script
src="https://gist.github.com/sravyachalla/b334835faea00094cbef08f85aa805c3.js"></script>
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: ['*']
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: ['*']
# Configure requests allowed from specific origins.
allowedOrigins: ['*']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: true
# Sets the Access-Control-Max-Age header.
maxAge: false
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: true
A content type for movie :
A rest export view with list of movies:
Make the serializer format to be json.
Integrating Drupal set up with Ionic
Step 1 - Create an Ionic menu based app using the below command:
ionic start <appname> sidemenu
You can choose tabs/blank instead of side menu for your app.
Step 2 - Run the app. Navigate to the app folder.
Ionic serve / ionic serve --lab (This allows you to view your app in both ios and android platforms)
This opens the app in your desktop browser.
Step 3 - Create a page:
ionic generate page movie-list
Step 4 - Navigate to app folder. Edit the movie-list.ts from App Folder > src > pages > movie-list.
This is where the view will be requested for data.
<script
src="https://gist.github.com/sravyachalla/8de29da787faab5885337bb45f1bcbf2.js"></script>
export class MovieListPage {

movies: any;
constructor(public navCtrl: NavController, public navParams: NavParams, private nav: NavController,
public http: Http, private sanitizer: DomSanitizer) {
this.http.get('http://d8ionic/movie-content').map(res => res.json()).subscribe(data => {
this.movies = data;
},
err => {
console.log(err);
}
);
}
}
Step 5 - Now display the view data in the app.
The movies variable declared in movie-list.ts can be accessed in the movie-list.html. Below
ion-header (similar to head in HTML), add ion-content (similar to body in HTML).
<script
src="https://gist.github.com/sravyachalla/0fa050098fa39b6efe74eccc74f76a17.js"></script>
<ion-content class="list-avatar-page">
<ion-list>
<ion-item *ngFor="let movie of movies">
<span>{{ movie.title }}</span>
<span>{{ movie.actors }}</span>
<span class="item item-text-wrap"
[innerHTML]="sanitizer.bypassSecurityTrustHtml(movie.field_ratings)"></span>
<ion-thumbnail item-start>
<img [src]="movie.field_poster">
</ion-thumbnail>
<ion-note item-end>{{ movie.field_genre }}</ion-note>
</ion-list>
</ion-content>
The sanitizer.bypassSecurityTrustHtml can be skipped as it is used not to strip the html tags
exposed from views.
Step 6 - To add the page in the menu, edit the app.component.ts file from App Folder > src > app.
Import your page at top and add the page in pages variable.
Step 7 - Now check your app in the browser. You will be able to see the movie list page in
menu. You may see the output similar to the below screenshot. :
You can apply the css for the ratings in app.scss file. The css applied here would be applied
globally. If you want to apply styles to specific page, you can create a .scss file in your page
folder.
You may need to import some app components like HTTP, Headers for HTTP calls if facing
any errors.
Login functionality can also be implemented as follows:

Login form in login.html would be
<script
src="https://gist.github.com/sravyachalla/ceb55c2b40e62e99a194c964dfa9478b.js"></script>
<form (ngSubmit)="login()" #registerForm="ngForm">

<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-input type="text" placeholder="Email" name="name"
[(ngModel)]="registerCredentials.name" required></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" placeholder="Password" name="password"
[(ngModel)]="registerCredentials.password" required></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" full type="submit" [disabled]="!
registerForm.form.valid">Login</button>
</ion-col>
</ion-row>
</form>
The form can be validated in login.ts.
<script
src="https://gist.github.com/sravyachalla/8bb7fb2ef5596033ebffd73b266501d8.js"></script>
public login() {
let data = JSON.stringify({
name: this.registerCredentials.name,
pass: this.registerCredentials.password,
});
let apiloginUrl = 'http://d8ionic/user/login?_format=json';
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiloginUrl, data, {headers: headers})

.subscribe(data => {
localStorage.setItem('loggedinData', data['_body']);
let apiTokenUrl = 'http://d8ionic/rest/session/token';
this.http.get(apiTokenUrl)
.subscribe(data => {
localStorage.setItem('loggedin_token', data['_body']);
}, error => {
console.log(error);// Error getting the data
});
this.nav.setRoot(HomePage);
}, error => {
this.showError("Access Denied");
});
}
The authenticated actions in Drupal like adding content can be done by passing the CSRF
token stored in the local storage into headers.
<script
src="https://gist.github.com/sravyachalla/5e96208a1af6f30ec829aa23dbf356b4.js"></script>
let addmovieUrl = 'http://d8ionic/entity/node?_format=hal_json';

let headers = new Headers();
headers.append('Authorization', 'Basic YWRtaW46YWRtaW4=');
headers.append('Accept', 'application/hal+json');
headers.append('Content-Type', 'application/hal+json');
headers.append('X-CSRF-Token', localStorage.getItem('loggedin_token'));
this.http.post(addmovieUrl, data, {headers: headers}){
You can also refer Ionic website to check out more details about deploying the app
In this way, you can use the Ionic framework to build the hybrid mobile apps and use the
decoupling feature of Drupal to store the data. Try Ionic and see how it enhance digital
experience. If you have any suggestions or queries please comment down let me try to
answer.
References
http://www.drupalden.co.uk/headless-drupal-resources
https://www.etondigital.com/how-to-develop-a-hybrid-app/
https://www.annertech.com/blog/create-news-reader-app-drupal-ionic-framework

Build Your Own Mobile App Using Ionic and Drupal 8

Uploaded by

Copyright:

Available Formats

Build Your Own Mobile App Using Ionic and Drupal 8

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Build Your Own Mobile App Using Ionic and Drupal 8

Uploaded by

Copyright:

Available Formats

How can Ionic be used to build hybrid mobile apps?

How can Ionic be used to build hybrid mobile apps?

What are the steps to integrate a Drupal backend with an Ionic app?

What are the steps to integrate a Drupal backend with an Ionic app?

Build your own mobile app using Ionic

sudo apt-get install nodejs

A rest export view with list of movies:

Make the serializer format to be json.

Integrating Drupal set up with Ionic

ionic start <appname> sidemenu

This opens the app in your desktop browser.

Step 3 - Create a page:

ionic generate page movie-list

export class MovieListPage {

Step 5 - Now display the view data in the app.

Login functionality can also be implemented as follows:

<form (ngSubmit)="login()" #registerForm="ngForm">

The form can be validated in login.ts.

this.http.post(apiloginUrl, data, {headers: headers})

let addmovieUrl = 'http://d8ionic/entity/node?_format=hal_json';

this.http.post(addmovieUrl, data, {headers: headers}){

You might also like