IONIC Project with Eyog Léonce

The migration of Adempiere modules to iDempiere

IONIC Project with Eyog Léonce

Postby red1 » Sun Jan 03, 2016 8:40 am

cameroon.jpg
cameroon.jpg (42.72 KiB) Viewed 4135 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 http://youtu.be/7THU4pT45G8 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 http://nodejs.org/en/download/package-manager/
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 https://bitbucket.org/TheEYL/kanbanleonce 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 http://software.dzhuvinov.com/cors-filt ... 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
<filter>
      <!-- The CORS filter with parameters -->
      <filter-name>CORS</filter-name>
      <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
      
      <!-- Note: All parameters are options, if omitted the CORS
           Filter will fall back to the respective default values.
        -->
      <init-param>
         <param-name>cors.allowGenericHttpRequests</param-name>
         <param-value>true</param-value>
      </init-param>
      
      <init-param>
         <param-name>cors.allowOrigin</param-name>
         <param-value>*</param-value>
      </init-param>
      
      <init-param>
         <param-name>cors.allowSubdomains</param-name>
         <param-value>true</param-value>
      </init-param>
      
      <init-param>
         <param-name>cors.supportedMethods</param-name>
         <param-value>GET, HEAD, POST, OPTIONS</param-value>
      </init-param>
      
      <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
      <init-param>
         <param-name>cors.supportsCredentials</param-name>
         <param-value>true</param-value>
      </init-param>
      
      <init-param>
         <param-name>cors.maxAge</param-name>
         <param-value>3600</param-value>
      </init-param>

   </filter>

   <filter-mapping>
      <!-- CORS Filter mapping -->
      <filter-name>CORS</filter-name>
      <url-pattern>/*</url-pattern>
   </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
KLIScreen.png (290.12 KiB) Viewed 4138 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
LoadedUp.png (172.15 KiB) Viewed 4138 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
KLIProducts.png (120.02 KiB) Viewed 4127 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 http://mcgivery.com/soap-web-services-angular-ionic/ for the webservices integration and http://github.com/apache/cordova-plugin-whitelist.git for the cross platform security handling.
Léonce can be contacted at his email: grandeyl@gmail.com
red1
Site Admin
 
Posts: 2760
Joined: Tue Jul 06, 2004 3:01 pm
Location: Kuala Lumpur, Malaysia

Return to iDempiere

Who is online

Users browsing this forum: No registered users and 1 guest

cron