You are here: Wiki>Projects Web>GSoC>GSoC2020Projects>GSoC2020AngularWPSClient (04 Jul 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.
Topic revision: r7 - 04 Jul 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