Skip to main content

Bespoke web development & support

Blog

Keep up-to-date with the world of web-tech with our news, tutorials and general business updates.

Drupal 8 mobile app - Part 4 - Setup the Cordova app

In this series of tutorials, we will go through the process of creating a cross-platform mobile app using a headless Drupal 8 backend with a REST API. The app will have native UI and navigation, ie, on iOS it will look and feel like a native iOS app, same for android. Various steps use *nix or OSX command-line instructions.


Now we get to the fun part!

The below assumes node.js is already installed on your development machine:

sudo npm install -g cordova

Go to where you want to install the app.

git clone https://github.com/CityWebConsultants/Drupal8-cordova-app.git myapp

cd myapp

Install Cordova plugins:

cordova plugin add cordova-plugin-whitelist

Update the sitePath variable to point to the Drupal backend site:

nano www/js/app.js

Drupal 8 mobile app - Part 2 - Configure Drupal

In this series of tutorials, we will go through the process of creating a cross-platform mobile app using a headless Drupal 8 backend with a REST API. The app will have native UI and navigation, ie, on iOS it will look and feel like a native iOS app, same for android. Various steps use *nix or OSX command-line instructions.


Enable the necessary modules: views, views_ui, jdrupal, restui, restful webservices, serialization.

drush en jdrupal -y; drush en restui -y;

The dependencies will be installed along with the above.

To configure REST, go to /admin/config/services/rest and ensure the appropriate endpoints are configured as such:

Drupal 8 mobile app - Part 3 - Where to host your app code

In this series of tutorials, we will go through the process of creating a cross-platform mobile app using a headless Drupal 8 backend REST API. The app will have native UI and navigation, ie, on iOS it will look and feel like a native iOS app, same for android. Various steps use *nix or OSX command-line instructions.


Potential architectures

For testing/deploying in browsers there are considerations to bear in mind, most notably the dreaded CORS! Because our app will be authenticating with the Drupal backend to login, create content etc, we need an effective way to do so. There are a couple of different options D8 gives you out-of-the-box, Basic Authentication (basically passing the username & password with each request) or session cookies. As I feel it would be bad UX or insecure to either expect the user to enter their login credentials for each request or store their credentials locally, i've opted for cookie based authentication.

Drupal 8 mobile app - Part 1 - Install Drupal

In this tutorial series, we well go through the process of creating a cross-platform mobile app using a headless Drupal 8 backend with a REST API. The app will have native UI and navigation, ie, on iOS it will look and feel like a native iOS app, same for android. Various steps use *nix or OSX command-line instructions.


First we will setup the backend Drupal 8 site.

Go to a directory where you want to install your new Drupal site, we will call it 'mysite'.

git clone --branch 8.3.x https://git.drupal.org/project/drupal.git mysite

cd mysite

composer install

Introducing Ethereum Development - Part 1 - MetaMask and Web3

In this series, we will introduce building simple Ethereum projects by following the fate of Alice the author.

Alice is a writer who wants to go freelance and escape the drudgery of her day job. She’s fed up with middlemen taking a cut of her earnings and wants to explore new technology. She has experience in web and is super happy to discover she can use a basic web stack to create interactive contracts on Ethereum Platform and get paid directly.

After a quick recce of dev tools and software, she decides to use MetaMask to enable creation of an embeddable donation button to use on her upcoming blog posts. She’s hoping Bob the benefactor and people like him will help support her work.