headless drupal

13
Drupal 8 Mobile Applications with Headless Drupal

Upload: unimitysolution

Post on 14-Jan-2017

194 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Headless Drupal

Drupal 8

Mobile Applications with Headless Drupal

Page 2: Headless Drupal

Agenda

● Headless Drupal● Web Services in Drupal 8● Mobile Applications● PhoneGap● PhoneGap Build● Demo

Page 3: Headless Drupal

Headless Drupal..?How is Headless Drupal different from ordinary Drupal?

● Pages created with Javascript frameworks such as jQuery, angular.js, backbone.js etc

● No traditional Drupal theme.● Drupal Logic is absent.Static Website : Static HTML → BrowserCMS Website : DataBase of Content → PHP Logic into HTML → Browser

Headless Website: DataBase of Content → PHP Logic controls data → JS Fetches → Browser

Page 4: Headless Drupal

Web services in D8Drupal 8→ Made easy to work with web services→ REST Service - best of making Web Services work→ Other formats such as SOAP or XML-RPC→ REST service - because it is the Drupal standard→ REST utilizes HTTP methods, such as GET, POST, and DELETE.→ Uses PATCH

Page 5: Headless Drupal

Web services in D8 CoreImplemented in Drupal 8 CoreModules:→ RESTful Web Services (rest)→ Serialization (serialization)→ Hypertext Application Language (hal)→ HTTP Basic Authentication (basic_auth) → User Authentication

Page 6: Headless Drupal

Get Started with Web services in D8Enable the following modules: → REST, Serialization, HAL, and HTTP Basic Authentication.→ Bye default node entity resource for all GET, POST, PATCH, and DELETE operations will be enabled

→ REST UI - user interface for enabling and disabling resources→ Set up your permissions under - admin/people/permissions→ New authenticated user for testing purpose

Page 7: Headless Drupal

Testing Services with DHC REST Client

DHC REST Client - https://chrome.google.com/webstore/detail/dhc-rest-client/aejoelaoggembcahagimdiliamlcdmfm/related

Headers:Content-Type : application/jsonPHP_AUTH_USER: <username>PHP_AUTH_PW: <user-password>

Page 8: Headless Drupal

Mobile ApplicationOnly native mobile application is possible..? Then.,→ Mobile application with web technologies using HTML, CSS, jQuery [JS Frameworks]

→ PhoneGap - deploy it to a wide range of mobile devices without losing the features of a native app.

→ PhoneGap - Builds on top of cordova→ PhoneGap Build - They Compiles App for us.

Page 9: Headless Drupal

PhoneGap Installation→ Install Node.js, gitInstall the following via command-line:

→ Install phonegap and plugman using npm.→ Creating phonegap application.→ Adding Platform into it.→ Add libraries if needed.→ Import the application into Eclipse.

Page 10: Headless Drupal

PhoneGap Structure

Page 11: Headless Drupal

Adobe PhoneGap build compiles [https://build.phonegap.com]For Free version→ Create an adobe Id and login. → Create a responsive website.→ Upload the project in github.→ Pull it into your phoneGap build account→ Compile it for iOS, Android and Windows. Scan QR Code to download your app.

PhoneGap Build

Page 12: Headless Drupal

DemoDrupal 8 instance→ Enable Modules.→ Configure resources.→ Create a service using views.→ Get Data from the site using JS.→ Build a page using the data returned by the service.

Page 13: Headless Drupal

Thank You

Contact:E-Mail: [email protected]