Page 1 of 1

IONIC Project with Eyog Léonce

PostPosted: Sun Jan 03, 2016 8:40 am
by red1
cameroon.jpg (42.72 KiB) Viewed 5490 times
(Eyog Léonce, seated in front of the notebook in blue striped long sleeves and others in my dotcom class.) When i was in Cameroon in summer of 2014, i volunteered to teach around the academic city of Buea for more than two months, and one interesting student apprentice that came from it is Eyog Yvon Léonce. He played host to me when i, towards the end of my stay, was running out of money and had no proper place to stay. His evil landlord however found out and wanted more money for his single bed motel apartments, and imposed a limit of three days for me to be Eyog's guest. It was a tiny room and Eyog slept usually past 6am, so we could take turns working and I coached him around the iDempiere project and philosophy. He was generous also with coffee and his guitar. When i left Cameroon for South Africa and eventually moved on to other spots around the world, we continued corresponding and brainstorm for a next killer app. When he was finishing his bachelor degree he spent time tackling the sharp learning curve with our ERP, and posted this Kanban Léonce IONIC app integration (KLI). IONIC is the latest killer framework for mobile been cross platform for both IPhones and Android mobiles. He sent me a movie earlier to impress me that this is indeed a big first step as the world is going mobile on everything.

This last week over the New Year 2016 i took time to master it with Eyog's guiding me online and now I am able to show how it is setup. I will also make a movie soon. This assumes that you are a developer familiar with iDempiere source setup. Otherwise ask below.

1. Node.js - this is installed in my mac through a pkg or you can Google for some more resources such as
The following are done at the command line terminal
2. sudo npm install -g cordova
3. sudo npm install -g ionic
4. sudo npm install -g gulp
5. export PATH=${PATH}:/Applications/AndroidSDK/sdk/platform-tools/

Then put the KLI from into your local folder.
Search for soaptestCtrl.js and KLDataFactory.js in the source and check the connection string to your IP: var base_url = "http://localhost:8080/ADInterface/services/ModelADService".

6. Download two jars (cors-filter-2.4.jar java-property-utils-1.9.1.jar) from ... ation.html and put them in org.idempiere.webservices/WEB-INF/lib/src (create if not existing).
6.2 At org.idempiere.webservices > MANIFEST.MF > RUNTIME tab > add those two to the classpath.

Go to your idempiere-server source in your Eclipse IDE, at the org.idempiere.webservices plugin, open up web.xml, insert into it, after the closing </listener> tag:
Code: Select all
      <!-- The CORS filter with parameters -->
      <!-- Note: All parameters are options, if omitted the CORS
           Filter will fall back to the respective default values.
         <param-value>GET, HEAD, POST, OPTIONS</param-value>


      <!-- CORS Filter mapping -->

Startup your idempiere-server with the idempiere.webservices plugin active.
In the command line terminal, go to the subfolder /kanbanleyonce/ and issue the following command:
Code: Select all
ionic serve --lab

You browser will launch with a simulation of both iOS and Android as screenshot below:

KLIScreen.png (290.12 KiB) Viewed 5493 times
And now we can let the magic begin. But first you have to setup the WebServiceType on your server side security to allow the WS calls. I have done that and you have to pack in the 2Pack here in your GardenAdmin.
Then you can try them out. Click on the three dots vertical on the top right hand corner to get the other menu. Below is a screenshot what you should be able to get working.

LoadedUp.png (172.15 KiB) Viewed 5493 times
But that is not all. There is more. The SOAP Test can also prove creation of new BPartner and deleting it as well as updating the Name. You have to check back in your iDempiere-server to see it working and your database to get the record ID as used in the delete and update functions. Below is when you click on the globe icon for Products to show up.

KLIProducts.png (120.02 KiB) Viewed 5482 times
This is a good enough POC (proof of concept) and all code and know-how basics are made available and openly in order that more can learn from it, and share back. I have discussed online with Eyog last night to do a next step:
1. iDempiere server will have a Menu List that user can specify what tables are to be loaded to the mobile and process generate their required Web Service Security controls.
2. IONIC will access idempiere server for the list and download them to the phone.
3. IONIC user selects which table i.e. Products, BPartners, Orders, Locators, Activity, ChangeLog etc.
4. IONIC then fetches that Table's content and display it.
The IONIC will arrange data as specified by the server IONIC Menu List that has a sub-tab for it: Fields. IONIC will dynamically give the labels from the fieldnames.
IONIC will allow all CRUD activity onto it.
Such a step is very useful and secured as the server side controls what tables can be accessed. Usually we just limit to a needed few for clients to access. The data on IONIC side is not persisted as there is no SQLite db for it. It is only stored in cache and cleared when the phone is restarted or app is refreshed or a repeat access to the IONIC Menu on server side is made.
Eyog Léonce referred to for the webservices integration and for the cross platform security handling.
Léonce can be contacted at his email: