Connecting a hybrid/web client application to established remote web services outlined through a set of WSDL specifications

Summarizing the Problem

I am faced with the task of integrating a mobile hybrid application, likely built on Ionic, that will need to indirectly consume several SOAP web services. My goal is for the TypeScript client in the mobile app to have knowledge of the beans outlined in the XSD and WSDL files that describe these web services.

Further Details

In this scenario, I will be referring to the following components:

  • the TypeScript client of the mobile app [A]
  • the Java application tailored for the mobile server-side operations [B]
  • the remote SOAP web services exposing business functions [C]

The following restrictions are at play:

  • the mobile app client [A] will interact via REST calls with a distinct server-side application [B]
  • the server-side application [B] will be developed using Java and will handle the consumption of existing web services [C], acting as a mediator between the TypeScript app client [A] and SOAP web services [C]
  • the SOAP web services [C] are detailed in multiple WSDL files, supported by corresponding XSD files; the backend team is adamant about retaining their documentation in WSDL and XSD

For example, certain requests and responses within the web services [C] involve the Java object below:

public class MyElement {
    private ElementColor color;
}

where ElementColor represents a Java enum similar to:

public enum ElementColor {
    RED,
    GREEN,
    BLUE,
}

These Java objects are defined in the WSDL and XSD files, enabling us to generate a JAR file, import it into the server-side application [B], and ensure our server-side app [B] recognizes the possible values for the "color" property in the MyElement class. All is well up to this point.

However, my concern arises when the TypeScript mobile client [A] does not have access to the imported JAR file. Consequently, when a developer works on code related to the MyElement object, they either:

  • treat the "color" field as a String (risking input of invalid values, not limited to "RED", "GREEN", or "BLUE")
  • create a TypeScript enum resembling the ElementColor Java enum.

The latter option is cleaner but still lacks a strong connection to the actual models specified in the WSDL and XSD files; there is a chance a developer could introduce an additional "YELLOW" value to the TypeScript enum and send it to the backend.

My objective is to effortlessly incorporate/inherit the models from the WSDL and XSD files, or TypeScript mappings of the Java classes derived from those same WSDL and XSD files, into my TypeScript codebase. It should be noted that merely retrieving these objects at runtime (e.g., through a service) is insufficient since the developer working on the client side would still not have visibility during development.

Thank you for any assistance that can be provided.

Answer №1

After much experimentation, I have discovered a powerful solution to address this problem by utilizing a typescript generator plugin. This plugin efficiently converts Java classes into Typescript classes, providing a seamless integration.

Previously, I had set up a Maven pom with the cxf codegen plugin to convert WSDL and XSD files into Java code. By simply incorporating the typescript generator plugin into the process, I am now able to effortlessly generate Typescript files from my existing Java files. These Typescript definition files can then be easily imported into my hybrid app project for enhanced functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is it so difficult for the TypeScript compiler to recognize that my variables are not undefined?

Here is the code snippet in question: function test(a: number | undefined, b: number | undefined) { if (!a && !b) { console.log('Neither are present'); return; } if (!b && !!a) { console.log('b is not present, we ...

Dynamic routing with ngIf in Angular 2's router system

Is there a way to use *ngIf with dynamic router in Angular? Let's say I have a top navigation component with a back button, and I only want the back button to be visible on the route 'item/:id'. I tried using *ngIf="router.url == '/ite ...

Breaking down large reducer into smaller reducers

I am currently working on a feature reducer (slice reducer) called animals. My goal is to separate these reducers into categories such as mammals, birds, fishes, and more. Initially, I thought this would be a smooth process using the ActionReducerMap. How ...

"Navigate with ease using Material-UI's BottomNavigationItem and link

What is the best way to implement UI navigation using a React component? I am currently working with a <BottomNavigationItem /> component that renders as a <button>. How can I modify it to navigate to a specific URL? class FooterNavigation e ...

What could be causing Angular to replace the original variable?

As a newcomer to Angular, I've been working on this code for hours now. Hopefully, it will all come together for someone out there who can make sense of it. export class QuizComponent implements OnInit { originalArray: IArray[] = []; tempArray: I ...

Issue with ng2-charts not rendering properly on the client side when utilized in Angular version 2.0.0-beta-17

Struggling with using ng2-charts in my Angular 2 app and encountering some challenges. app.ts import {Component} from 'angular2/core'; import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts'; @Component({ selector: & ...

Looking to retrieve the request body in a route handler in Next.js version 13.2?

I encountered an issue while attempting to send a post request to my API. The problem arises when I try to access the request body within the route handler, resulting in the following error: Code: export async function POST(request: Request) { const ...

Most effective methods for validating API data

Currently, I am working on developing an api using nestjs. However, I am facing some confusion when it comes to data validation due to the plethora of options available. For instance, should I validate data at the route level using schema validation (like ...

What is the best way to reference typescript files without using absolute paths?

As typescript does not seem to have built-in support for absolute path references (according to this GitHub issue), it becomes difficult to organize and maintain my file references. With TypeScript files scattered across various locations in my folder stru ...

Experiencing issues with DateFomat leading to errors in parsing the date?

Suppose I have a string representing a date: 2013-11-14T00:00:00.000 Which date format should I use to include the timezone offset? DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS Z"); dateFormat.setTimeZone(TimeZone.ge ...

`Inconsistencies in console.log output with Angular Firestore``

I'm currently working on retrieving the id of selected data, but when I test it using console.log, it keeps outputting twice. The image below illustrates the console.log output. https://i.stack.imgur.com/IARng.png My goal is to fetch the id once and ...

Use Typescript in combination with React/Redux to showcase a dynamic table on the

Looking to create a React TypeScript Redux application that showcases a table using an API endpoint provided at https://example.com/users The goal is to construct a table with 4 columns: Name, Email, City, and Company, utilizing the API response to popula ...

Learn the steps to assign a Base64 URL to an image source

I am currently facing an issue with an image that is being used with angular-cli: <img src="" style="width: 120px; padding-top: 10px" alt="" id="dishPhoto"> The image has a Base64 url named imgUrl. My intention is to set the image source using the ...

Transfer an Array of Objects containing images to a POST API using Angular

Looking to send an array of objects (including images) to a POST API using Angular and Express on the backend. Here's the array of objects I have: [{uid: "", image: File, description: "store", price: "800"} {uid: "f ...

Retrieve data from a web api at regular intervals using Angular observables and subscription

My Launch method is designed to start an engine by taking parameters and returning the instance name once started. After that, I need to periodically query another service every 2 seconds to check if the status has changed to either "Succeeded" or "Faile ...

Utilizing Angular signals to facilitate data sharing among child components

I have a main component X with two sub-components Y and Z. I am experimenting with signals in Angular 17. My query is how can I pass the value of a signal from sub-component Y to sub-component Z? I have attempted the following approach which works initial ...

Issue encountered with Hibernate: Unable to instantiate the required service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]

Below is the code snippet where I create a Session: public class HibernateSessionFactoryUtil { private static SessionFactory sessionFactory; public HibernateSessionFactoryUtil() { } public static SessionFactory getSessionFactory() { ...

Retrieve unique values based on two or more criteria from an array in TypeScript

Presented here is an array. https://i.stack.imgur.com/zHXim.png The desired pattern is: https://i.stack.imgur.com/EGUiM.png I am interested in retrieving unique "CityRef" and "City". Subsequently, locating all items associated with them. ...

Typescript: Utilizing a generic array with varying arguments

Imagine a scenario where a function is called in the following manner: func([ {object: object1, key: someKeyOfObject1}, {object: object2, key: someKeyOfObject2} ]) This function works with an array. The requirement is to ensure that the key field co ...

"Enhance your Vue 3 project with TypeScript and take advantage of smart template suggestions

Is it feasible to enable autocompletion/suggestions in the template section of a Single File Component (SFC) when using VS Code with Vue 3 and Typescript, particularly for component props? For instance, consider a basic component named UserComponent: < ...