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:
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
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:
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.
- View profile
- Edit profile
- View content
- View individual node
- Edit node
- View individual node
- Create node