Ionic Drupal 7 Services Example/Demo
This demo covers Authentication, CRUD operations on Nodes and Image upload from device camera.
Following scenarios are covered:
- Detecting first visit ever and skip tour on second fisit
- Registration and redirect if already registered
- form client and server side validation with ngMessages
- Reauthentication on app start
- CRUD operations
- restrictions by user role
- Image upload with camera plugin usage (or cordova plugin on chrome)
- Handle route access over access levels
- Directives for:
- UI-Interaction over user data
##Setup For general information visit the official ionic guide.
nodeJs It's required to have node installed. If you don't have you will find it here. Download and install the version for your OS.
ionic To use the ionic-CLI and run cordova commands install ionic and cordova globaly over nmp. You also need to install bower to load the required libs. Paste following command to you console to install all three with a single line.
$ npm install -g ionic cordova bower
###Setup project for desktop development
- Check out the project
$ git clone https://github.com/BioPhoton/Ionic-Angular-Headless-Drupal-Demo.git [project name]
Check that the current user have write permissions to the newly created folder. Then cd into the folder and check out the dev branch
$ cd [project_name] $ git checkout master
- Setup node_modules
In the ckecked out branch there is a package.json file
which contains all required node modules required for the gulp tasks as well as the platforms and plugins of cordova
$ npm install
- Load bower lib's
As all the thrid party libs are not in the repository we have to load them over bower
$ bower update
Now you are ready to test it on desktop. Run following command:
$ ionic serve
###Setup project for mobile development
To build your project for platforms or debugging over console setup codrova platforms and plugins. These are defined in the package.json file
$ ionic state restore $ ionic resources
This will create the platforms folder and loads codrova android and ios platform. It also creates the plugins folder and loads the plugins defined in package.json
To run the project on your mobile phone do following
$ ionic run android --device
$ ionic run ios --device
To easily share project progress we use ionic view view to accomplish this.
You can view it over the ionic app_id located in ionic.project in the root folder.
app ID: ccd889ce
Following extra cordova libraries are installed:
$ cordova plugin add org.apache.cordova.camera --save
- Setup drupal with services as described in Angular Drupal7 Services - Setup Drupal
- Import the article-feed view settings
- Import the permissions settings with the Export Roles & Permissions module
In your Configuration -> People -> Permissions section enable following for authenticated users:
- Node Article: create
- Node Article: edit
- Node Article: delete
- Services: Save file information
- Services: Perform unlimited index queries
- For a direct login after a user registers over the register form we need to
enable this in under Configuration -> People -> Account settings section. Go there and leaf the "Require e-mail validation checkbox" unchecked.
- To enable User Profile Pictures go to Configuration > People > Account settings and enable user pictures in the personalization settings. see also [here](- https://www.drupal.org/node/22271)
- To receive the images of your node install the imageinfo_cache module. This will create your imagestyles immediately after uploading an image to drupal.