You are here: Wiki>Projects Web>GSoC>GSoC2020Projects>GSoC2020AngularWPSClient (30 Aug 2020, KaranDeepSingh)Edit Attach
GSoC2020 Project: Angular WPS Client

Introduction

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

Status
  • 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.
Problems
  • 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

Status
  • 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.
Problems
  • 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

Status
  • 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.
Problems
  • 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

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

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

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

Status
  • 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.
Problems
  • 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

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

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

Status
  • 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. https://www.npmjs.com/package/wps-ng
  • 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.
Problems
  • 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

Status
  • Added Apache 2.0 License. (Same as wps-js)
  • Major update in readme.md, 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.
Problems
  • 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

Status
  • 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 readme.md, 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.
Problems
  • 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

Status
  • 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.
Problems
  • 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

Status
  • 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.
Problems
  • 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

Status
  • This week I revised the final blog, corrected a few typos and now its published: https://blog.52north.org/2020/08/27/52norths-angular-wps-client-library-the-wps-ng/.
  • 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 readme.md 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 singkara@yorku.ca

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