Skip to main content

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

Ensure jDrupal.config('sitePath', '[host]'); is set to the appropriate path, in our example 'http://mysite.local’.

*Important note: Android emulator will not resolve host paths on your development machine. This will mean it will try to access resources from http://mysite.local and not find it on the web and therefore fail. To access anything from your localhost, use http://10.0.2.2 instead of http://127.0.0.1

Update config.xml

Depending on your setup, whether you use a web-app, or whether you are using local resources etc, you will need to configure the permissions appropriately. The below example provides all permissions making it insecure for deployment, but easier to get working for development:

Ensure the following is included:

  <access origin="*"/>
  <allow-navigation href="*"/>
  <allow-intent href="*"/>

Before launch, you would also want to ensure the ‘Content-Security-Policy meta tag (in index.html) is set up appropriately as it’s currently quite ‘loose’ from a security perspective.

Add your required platforms

Any or all of the below can be included:

cordova platform add browser cordova platform add ios cordova platform add android

To test/run the app in your browser run:

cordova run browser

It will auto open to localhost:8000, however as we need to be on the same domain to share cookies, reload the same page via http://app.mysite.local. Because of the redirect rule from Step 3, it will load the same content.

The app ‘should’ load (styled like an ios app) and then present you with a login form which you could do with your admin account, or register a new user.

In order to see nodes listed on the ‘View content’ page of the app, either add nodes via the host site (http://mysite.local/node/add/article), or create an article node in the app itself.

For testing the android UI uncomment the line:

//ons.platform.select('android');

from www/js/app.js and refresh the page.

Bear in mind, for non-admin users you still need to ensure the correct user permissions are set to allow users to create, update nodes etc. Also, it will need user accounts setup so that they don’t require admin approval or email confirmation.

To run the app in an iOS emulator, you need to use a mac and have Xcode installed.

cordova build ios

cordova run ios

To run the app in an Android emulator, you will need to install and setup Android Studio or similar

cordova build android

cordova run android

The Android emulator does not resolve local domain names, it will fail when you run it because it's trying to access the backend at http://mysite.local which it can’t find. There are ways around this to allow you to at least use GET requests from the local backend, but because it won’t share a common domain, cookies will not be sent to the device and therefore users cannot login etc.

Template layout:

Anonymous

  • Login
    • Register

Authenticated

  • View profile
  • Edit profile
  • View content
    • View individual node
      • Edit node
  • Create node
  • Logout

Screenshots of node edit page

 
Screenshot of menus

 

 

Want to work with us?

Want to start something?

Fantastic! We'd love to hear from you, whethere it's a pitch, an idea or just saying hello!

Feel free to get in touch.

 

Drop us an email?

info@citywebconsultants.co.uk

 

Or give us a call?

+44 (0) 191 906 7746

 

Playing hard to get? We'll contact you