Wettomato Wapi JS

Wettomato Wapi JS (also known as wapi "Web Application Programming Interface" the suffix "JS" indicates that it is a project in JavaScript and has nothing to do with "WLAN Authentication and Privacy Infrastructure") is an open source library for web applications written in Angular Cli. The most common use of wapi is to support SOAP and REST web services.

Installation

@wettomato/wapi-js is available as an npm package.

Installation with npm.

npm install @wettomato/wapi-js

Installation with yarn.

yarn add @wettomato/wapi-js

Usage

Here is a quick example to get you started, it's all you need:

You must import the WapiJsModule module from @wettomato/wapi-js, in the module of your choice.

import { WapiJsModule } from '@wettomato/wapi-js';

Example proposed with the LearningModule module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LearningRoutingModule } from './learning-routing.module';
import { WapiHttpRestComponent } from './wapi-http-rest/wapi-http-rest.component';
import { WapiJsModule } from '@wettomato/wapi-js';

@NgModule({
  declarations: [WapiHttpRestComponent],
  imports: [
    CommonModule,
    LearningRoutingModule,
    WapiJsModule
  ],
  exports: [WapiHttpRestComponent]
})
export class LearningModule { }

You must import the MethodService service from @wettomato/wapi-js, in the component of your choice.

import { MethodService } from '@wettomato/wapi-js';

Example proposed with the WapiHttpRestComponent component.

import { Component, OnInit } from '@angular/core';
import { MethodService } from '@wettomato/wapi-js';
import { HttpParams, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-wapi-http-rest',
  templateUrl: './wapi-http-rest.component.html',
  styleUrls: ['./wapi-http-rest.component.scss'],
  providers: [MethodService]
})
export class WapiHttpRestComponent implements OnInit {

  constructor(private method: MethodService) { }

  ngOnInit(): void {
  }

  public requestDelete(): void {
    const inUrl: string = '';
    const options: Object = {
      headers: { 'Content-Type':'application/json', 'Accept':'application/json' }
    };
    const timeOut: number = 20000;
    this.method.setUrl('https://httpbin.org/delete');
    this.method.request('DELETE', inUrl, options, timeOut).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public requestGet(): void {
    const inUrl: string = '';
    const headers: Object = { 'Content-Type': 'text/plain' };
    const observe: string = 'body';
    const params: Object = {
      'Shelf': 'estante',
      'Bookshop': 'libreria'
    };
    const responseType: string = 'text';    
    const options: Object = {
      headers: headers,
      observe: observe,
      params: params,
      responseType: responseType
    };
    const timeOut: number = 20000;
    this.method.setUrl('https://httpbin.org/get');
    this.method.request('GET', inUrl, options, timeOut).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public requestPost(): void {
    const inUrl: string = '';
    const query: string = '';
    const headers: HttpHeaders = new HttpHeaders()
      .append('Content-Type', 'application/json')
      .append('Accept', 'application/json, text/plain, */*');
    const observe: string = 'response';
    const params: HttpParams = new HttpParams();    
    const responseType: string = 'json';    
    const options: Object = {
      body: query,
      headers: headers,
      observe: observe,
      params: params,
      responseType: responseType
    };
    const timeOut: number = 10000;
    this.method.setUrl('https://httpbin.org/post');
    this.method.request('POST', inUrl, options, timeOut).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public methodDelete(): void {
    const inUrl: string = '';
    const headers = { 'Content-Type':'application/json', 'Accept':'application/json' };
    const params = new HttpParams();
    const timeOut: number = 20000;
    this.method.setUrl('https://httpbin.org/delete');
    this.method.delete(inUrl, headers, params, timeOut).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public methodGet(): void {
    const inUrl: string = '';
    const headers = { 'Content-Type': 'text/plain' };
    const params = {
      'Shelf': 'estante',
      'Bookshop': 'libreria'
    };
    const timeOut: number = 20000;
    const responseType = 'text';
    const observe = 'body';    
    this.method.setUrl('https://httpbin.org/get');
    this.method.get(inUrl, headers, params, timeOut, responseType, observe).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public methodHead(): void {
    const inUrl: string = '';
    const headers = new HttpHeaders({ 'Content-Type':'text/plain' });
    const params = new HttpParams();
    const timeOut: number = 20000;
    const responseType = 'text';
    const observe = 'body';
    this.method.setUrl('https://httpbin.org/headers');
    this.method.head(inUrl, headers, params, timeOut, responseType, observe).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public methodOptions(): void {
    const inUrl: string = '';
    const headers = new HttpHeaders({ 'Content-Type':'text/plain' });
    const params = new HttpParams();
    const timeOut: number = 20000;
    const responseType = 'text';
    const observe = 'body';
    this.method.setUrl('https://httpbin.org/status/200');
    this.method.options(inUrl, headers, params, timeOut, responseType, observe).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public methodPatch(): void {
    const inUrl: string = '';
    const query: string = '';
    const headers = new HttpHeaders({ 'Content-Type':'application/json', 'Accept':'application/json' });
    this.method.setUrl('https://httpbin.org/patch');
    this.method.patch(inUrl, query, headers).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public methodPost(): void {
    const inUrl: string = '';
    const query: string = '';
    this.method.setUrl('https://httpbin.org/post');
    this.method.post(inUrl, query).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public methodPut(): void {
    const inUrl: string = '';
    const query: string = '';
    const headers = new HttpHeaders({ 'Content-Type':'text/plain' });
    const params = new HttpParams();
    const timeOut: number = 10000;
    const responseType = 'text';
    const observe = 'body';
    this.method.setUrl('https://httpbin.org/put');
    this.method.put(inUrl, query, headers, params, timeOut, responseType, observe).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public responseHeaders(): void {
    const inUrl: string = '';
    const query: string = '';
    const headers = new HttpHeaders({ 'Content-Type':'text/plain' });
    const params = new HttpParams()
      .append('freeform', 'group');
    const timeOut: number = 10000;
    const responseType = 'text';
    const observe = 'body';
    this.method.setUrl('https://httpbin.org/response-headers');
    this.method.post(inUrl, query, headers, params, timeOut, responseType, observe).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public basicAuth(): void {
    const inUrl: string = '/herromer/1234abcd';
    const headers = new HttpHeaders({ 'Content-Type':'application/json',
      'Accept':'application/json',
      'Authorization':'Basic aGVycm9tZXI6MTIzNGFiY2Q=' });
    this.method.setUrl('https://httpbin.org/basic-auth');
    this.method.get(inUrl, headers).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }

  public bearerAuth(): void {
    const inUrl: string = '';
    const headers = new HttpHeaders({ 'Content-Type':'application/json',
      'Accept':'application/json',
      'Authorization':'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1ODg0ODkyNzMsImV4cCI6MTU4ODUxMDg3MywiYXVkIjoiOjoxUG9zdG1hblJ1bnRpbWVcLzcuMjQuMUNPTFNZQ1A5RzJHIiwiZGF0YSI6eyJpZCI6InN5bmVyZ2lhNGoiLCJuYW1lIjoiVVNVQVJJTyBTT1BPUlRFIFNZTkFQU0lTIn19.AMxEfHpN22kl2biFh7bAUzLeOwzLDKza-7i7x4z266Q' });
    this.method.setUrl('https://httpbin.org/bearer');
    this.method.get(inUrl, headers).then(
      success => {
        console.log('[Response]', success);
      }, fail => {
        console.log(fail);
      });
  }  

}

Build Wettomato Wapi JS

This library was generated with Angular CLI version 11.2.0.

Code scaffolding

Run ng generate component component-name --project wapi-js to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project wapi-js.

Note: Don't forget to add --project wapi-js or else it will be added to the default project in your angular.json file.

Build

Run ng build wapi-js to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build wapi-js, go to the dist folder cd dist/wapi-js and run npm publish.

Running unit tests

Run ng test wapi-js to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.