⚡ Ionic Angular SOAP

• Ionic-Angular app that displays data about countries from a SOAP API
• Data fetched using the SOAP web services, instead of Representational State Transfer (REST), over HTTP
• Tutorial Code from Simon Grimm - see 👏 Inspiration below
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• Ionic Angular Soap
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• SOAP uses eXtensible Markup Language (XML)
• The SOAP API data is from the DataFlex Web Service - no API key needed
• ngx-soap requires a list of dependencies, including browser buffer module, concat-stream to collect all the data from a stream into a single buffer, core-js modular standard library, crypto-js library of crypto standards, events event emitter, lodash library, sax sax-style parser for XML and HTML, stream for Node.js streams in the browser & uuid for creation of RFC4122 UUIDs. This creates a huge vendor build bundle (5.29MB) - see source-map image
• source-map-explorer installed globally and used to generate Source-map
• Postman List of SOAP APIs
• This file was copied into assets/CountryInfoServices.xml as the WSDL document
• SOAP does not have to be used with HTTP although in this app it is

📷 Screenshots

📶 Technologies

• Ionic v6
• Angular v13
• Ionic/angular v6
• rxjs v7 Reactive Extensions library
• ngx-soap v0.7.0 SOAP client for browser.
• uuid v3.3.2 for the creation of RFC4122 UUIDs. Do not update to latest version or the app will not work.
• Web Services Definition Language WSDL structured communications language used in conjuction with the SOAP protocol over HTTP

💾 Setup

• Run npm i to install dependencies
• Run ionic serve to start the server on localhost://8100
• Run npm run lint to lint entire app. No linting errors
• Run npm run build to create a build file
• Run npm run build --prod to create a build file with named chunks and a source map
• Run source-map-explorer www/main*.js to view source map

💻 Code Examples

• data.service.ts creating a SOAP client

constructor(private soap: NgxSoapService) {
  this.soap.createClient('./assets/CountryInfoService.xml').then((client) => {
    this.client = client;
    this.clientReady.next(true);
  });
}

🆒 Features

• SOAP is highly standardized, allows for automation in certain cases, and is more secure
• ACID stands for Atomicity, Consistency, Isolation, and Durability, an enterprise-grade transaction quality and one of the reasons why SOAP is still used when exchanging sensitive information in enterprise architectures.
• SOAP APIs almost always use a WSDL document.
• SOAP supports stateful and stateless operations.
• XML response messages can include an error code and its explanation.

📋 Status & To-do list

• Status: Working
• To-do: Nothing.

👏 Inspiration

• Simon Grimm: How to use a SOAP API with Ionic
• SmartBear: SOAP vs REST. What's the Difference?
• Alexsoft: What is SOAP: Formats, Protocols, Message Structure, and How SOAP is Different from REST
• 5 Tips to Improve Ionic Angular App Performance

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]