GSoC2020 Project: Angular WPS Client
Develop a full-fledged Typescript based Web Processing Service (WPS) library, which will implement all features defined by OGC WPS Interface standards-- such as GetCapabilities, DescribeProcess, and Execute. Furthermore, this library will also be supported in Typescript based frameworks like Angular, as we propose to develop typescript-typings required to import our library into third-party applications. We also aim for high unit test coverage so that the users have a seamless experience using our library.
Being the first report, let me start with tasks achieved during the community bonding period.
Community Bonding Period:
- Studied the overview of wps-js project and little more about WPS in general.
- Studied about capabilities and process description modules.
- I have the IDE environment set up in my local machine.
- I have forked and have my Github repository for the new Angular WPS project of wps-js-ng.
- Added the Angular CLI skeleton code with npm and node server running. Angular.json files contain all the dependencies for it.
- I have also added ts-lint which is an expressive linter for Typescript.
- For unit testing purposes I was exploring different frameworks for Angular i.e. Karma. The Karma configuration files are also added in the project with the test files of modules ending with name: filename.spec.ts.
- Successfully deployed the angular application on the server.
- I have started to write the Capabilities Model Classes for the GetCapabilities feature.
- I am not very clear about how the Execute process works, I will try to read more about it and will follow up with the team 52 north in case I face problems.
- I plan to extract the min.js file from the wps-js project.
- Import the js file in the typescript project in order to reuse loads of existing functionality in wps-js project.
- If time persists, next week I could also look into integrating the full-fledged capabilities model class and spec class with the http service integration, such that a get request of capabilities could be feed into the model.
- Downloaded and built the project wps-js.
- Extracted the wps-js-min.js and wps-js-all.js files.
- Integrated the wps-js-all.js file in the wps-js-ng project.
- Added Jquery js library to the project and also added Jquery Typings.
- Created a WpsServiceTS Service Class which will be imported by the client finally.
- Added an example client called WpsExampleComponent.
- Next, I am planning on 2 tasks:
- First: I will add use the imported wps-js-all.js library to make a call on Demo 52North WPS-Service.
- Second: I plan to write typings files for at-least the Capabilities Part.
- Created a Typings file to hold the type information for wps-service.js in the wps-js project.
- Added one example component to render capabilities object to the UI.
- Designed and created the Model classes for the ProcessDescription Module.
- Added typings for 4 functions:
- getCapabilities_GET: uses Get restful service.
- getCapabilities_POST: uses Post restful service.
- Next, I am planning on 2 tasks:
- I will add a UI/Html Component for Process Description Module.
- Second: I will also add the corresponding typings file for process description.
One of the main things that I started out with this week was to publish wps-js on NPM. I have been successful in achieving that. Currently, the library is available online on NPM: https://www.npmjs.com/package/wps-js-52-north
I have done this to try to import this js file in our angular library project wps-js-ng.
Added bootstrap and localize libraries for UI view.
Updated UI to show the response from Capabilities and ProcessDescription.
Wrote the DescribeProcess services for both Get and Post request.
Designed and created the Model classes for the ProcessDescription Module.
Called the Get & Post ProcessDescription service and casted the response object to the Process Description Module.
Finally, in the “example component”, I showed the response object in a text-box on the UI.
These response objects are of Type “ProcessDescription”.
- Added the npm library of WPS-js dependency in the project.
- Imported the wps-js through node_modules folder after installing.
- Added the Execute model request input-output objects. Removed unnecessary objects.
- Also corrected the Execute response objects.
- Added the Typings information for Execute Process request.
- Updated Angular.json to import wps-js automatically.
- I will split the UI client into 2 screens, one to input user request and the other for the output response.
- I also plan to call the Execute function with a demo process and show the description on the UI.