You are here: Wiki>Projects Web>GSoC>GSoC2020Projects>GSoC2020AngularWPSClient (30 Aug 2020, karandeepsingh)Edit Attach
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.

Weekly Reports

Community Bonding Period

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.

Week 1

  • 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.
Next tasks
  • 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.

Week 2

  • 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.
  • Currently, I am trying to study typings for Javascript Manual Libraries. I have imported the wps-js-all.js library and since it does not have the type information, hence I am planning to write a typings file. Therefore, I need to read in detail about the topic.
Next tasks
  • 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.

Week 3

  • 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:
    • setVersion
    • setUrl
    • getCapabilities_GET: uses Get restful service.
    • getCapabilities_POST: uses Post restful service.
  • Overall there is no major blocker. I am trying to understand how to create new libraries in Angular and import js library in Angular module.

Next tasks
  • 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.

Week 4

  • 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:

  • 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”.

Problems Next tasks
  • Next, I plan to start writing the Model Objects for Execute Process Module.

  • Start with the input request and output request model for the execute process

Week 5

  • 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.
Problems Next tasks
  • 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.

Week 6

  • Added split screen HTML code and css styles required. Now the screen is split in two, one side for request and the other for response.
  • Wrote the ExecuteProcess code in the WPSServiceTS file.
  • Added empty methods for GetStatus & GetResult for future development.
  • Added new bootstrap template for split screen and removed private field from angular.json as a bug fix.
  • Added a new Angular Library which is publishable to npm. The library’s new name is wps-ng.
  • I am trying to create an Angular Library for WPS on npm. Currently there is just one blocker that I am unable to reuse the js file in library..
  • However this will not be a problem for the clients to use this, since they could also clone the code from Github directly to use library.
Next tasks
  • Next week, I plan to write the Client side code for Execute process and will try to add a few basic execute process procedures.
  • Update the Typings class with ExecuteProcess.
  • Update the examples for both Version 1.0.0 and 2.0.0

Week 7

  • Updated Execute Response Service to include the DOM Document.
  • Updated the Output Classes:
    • Added B-Box Data Class
    • Updated elements of Complex Data Class
    • Added elements to Literal Data Class
    • Added Abstract Value to field to Response
  • Added new Execute Example Component containing the html examples.
  • Added the corresponding event emitter for the sub component:Execute Example.
  • Added new Examples in the Execute Example Component, below is the list:
    • Execute V2 Sync

    • Execute V1 ASync

    • Simple Buffer Algorithm

    • Execute V2 Async

    • Tiff Raw Data Response

    • Execute Shape inline

    • Many Inputs

  • In the Execute Process part, there are currently no blockers.
Next tasks
  • Next week I will add the GetStatus function in the wps-angular library.

  • I will also update the client with a text field which takes as an input a job-id and outputs the result.

  • I will also try to shift all library components developed so far to the wps-ng library folder and build the library.

  • If the library successfully builds, it could be published to npm.

Week 8

  • Fixed the issue that I was unable to import Javascript files to Angular Library. (will add details in readme)
  • Published the library wps-ng on npm.
  • Installed Jasmine and added spec files for Execute Process model objects.
  • Moved all Service and Model Files from the Application to Library wps-ng.
  • Fixed all imports according to the library ‘wps-ng’
  • Added Get Status code in the Client.
  • I am trying to come up with a good view of the UI client for the execute-process.
  • Need to re-work on some parts of the Execute Process part
Next tasks
  • I will add the model objects for Get Result Async process.
  • Will add the parser code for ExecuteProcess V1 ASync Module.
  • Add Typings of Get Status & Get Result
  • Update the client with the Get Result.
  • Added Apache License
  • Update the execute process examples.
  • Exception handling in Library

Week 9

  • Added Apache 2.0 License. (Same as wps-js)
  • Major update in, added library installation information, examples and how to use it.
  • Added section of contribute to wps-ng readme file.
  • New Function added in wps-js file:
    • Function added to get the request XML sent to the server and added its support in wps-library as well.
    • Published the updated library on NPM as well.
  • Added new Tabs and Cards to Wps-ng.
  • Added Typings for the new modules added in wps-ns Library.
  • Added exception handling for all WPS Service functions.
  • Updated the library on NPM
  • Added: ParseStoredExecuteResponse.
  • Bug Fix: Added Status location property to the Response Document.
  • Currently I am trying to work out the design of Execute Examples the client part.

Next tasks
  • I plan to continue with the UI of Execute Examples. Following are the 3 main parts:
    • Create new Component to hold the Input Objects.
    • New Component to hold the Output Objects
    • Link and Call the Execute Process Service based on the selected process.

Week 10

  • Execute Examples: Added text area for Execute Examples Request in XML.
  • Added Xml Pipe Code to beautify the XML of Execute Examples Request.
  • Bug Fix in the Capabilities Data Service impacting Process Description Tab.
  • Added more examples in the Execute Examples Tab such as Echo process.
  • Major update in, added library installation information, examples, Contribute Section, and how to use wps-ng.
  • Added Toastr for Dependency for success notification.
  • Added parseStoredExecuteResponse_WPS_1_0 Client Tab in the Client
  • User can add URL for WPS 1.0 Service Instance and get the result using this function.
  • Added Necessary Spec Test files and a few Test cases.
  • Fixed ng test command. On running ng test command, all test cases will run automatically.
  • Currently I am trying add the Dynamic Values Echo process to the client.

Next tasks
  • Till Next week, I hopefully intend to finish the Echo Process Dynamic Execution.
  • To achieve this task, I plan to create 6 Cards:
    • Complex input
    • Complex Output
    • B-Box Input
    • B-Box Output
    • Literal Input
    • Literal output
  • Cards are used by the users to add data input to execute process task.
  • Create Client HTML to show these cards for Execute Process.

Week 11

  • A major task involved updating the Execute Process Tab
    • Added Collapsible and Accordion view to the Input and Outputs for Echo process.
    • Added default values in Echo-Process execute section.
    • Added Toastr notifications to signal success.
  • Deployed the Client Application (wps-js-ng) to Github Pages:
  • Added duration in literal input model object in wps-ng library.
  • Removed cards as they were unnecessary.
  • Updated all angular and package versions and updated the wps-ng library on NPM.
  • Added Github Pages Warning Message.
  • Boiler Plate for Test code.
  • Currently, there are no blockers. :)

Next tasks
  • I plan to start with the test cases for WPS-Service. This task got pending this week because of the Execute process example for Echo Process.
  • I also plan to write the final blog this week.
  • If there is any feedback or update from Benjamin, I will also look into it with utmost priority.

Week 12

  • Adding Test Cases for all the model objects such as Capabilities, Execute Model etc.,
  • Added test cases for the methods in the WPS Service such as GetCapabilities, Execute Model Objects, etc.,
  • Did a bug fix in model objects after running test cases.
  • Updated the library to the latest version.
  • Written the Final Blog for Summer of Code.
  • Currently, there are no blockers. :)

Next tasks
  • I plan to extend the test cases if possible.
  • I am also waiting for any feedback from Benjamin if I could improve the Final Blog or Anything in the Project.

Week 12

  • This week I revised the final blog, corrected a few typos and now its published:
  • Github Action to trigger Build and Automated Test for all the Git Push and Pull Requests.
  • Bug Fix: Added the reference variable in the Execute Output. The bug was pointed out by Benjamin.
  • Updated the NPM dist to the latest version.
  • Fixed small bugs in the file.
  • Currently, the project is stable and all bugs pointed out were resolved.
In case anyone has any questions, feedback or issues, feel free to reach out to me at

Karan Singh
Topic revision: r14 - 30 Aug 2020, karandeepsingh
Legal Notice | Privacy Statement

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Wiki? Send feedback