Using Node.js and Angular to create an application to interact with Workspace ONE API

## Overview

This Angular application interacts with the Workspace One API to fetch tags and apply them to devices based on their serial numbers. I created this mainly as an experiment, and it was a helpful learning experience on leveraging Node.js and Angular to create a simple application.

Core Technologies

- Angular

- Node.js

- HttpClientModule

- RxJS (Observable)

- Postman (to test and validate API calls before embedding in angular)

- Workspace ONE UEM

Setup and Installation

1. Run `npm install` to install all dependencies.

2. Execute `ng serve` to run the application.

##

## Project Structure and Files

`app.module.ts`

This is the main module file where all the Angular components, services, and modules are declared and imported.

#### File Content:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ApiService } from './services/api.service';
import { FormsModule } from '@angular/forms';  // Added import for FormsModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule  
  ],
  providers: [ApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

### `api.service.ts`

This service file contains methods that perform HTTP requests to interact with the Workspace One API.

#### File Content:

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  
  constructor(private http: HttpClient) { }

  fetchTags(ogId: number): Observable<any> {
    // code here...
  }

  getDeviceIdBySerialNumber(deviceSerialNumber: string): Observable<any> {
    // code here...
  }

  applyTagToDevice(deviceId: number, tagId: number): Observable<any> {
    // code here...
  }
}

### `app.component.ts`

This is the main component file where most of the application logic is implemented.

#### File Content:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './services/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'WorkspaceOneTAGapp';
  tags: any[] = [];
  selectedTag: number = 0;
  deviceSerialNumber: string = '';

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.fetchTags();
  }

  fetchTags() {
    // code here...
  }

  applyTagToDevice() {
    // code here...
  }
}

## Application Flow

1. When the application loads, `ngOnInit()` calls `fetchTags()` to get all available tags.

2. The user inputs a device serial number.

3. The user selects a tag from the list of available tags.

4. The user initiates an action to apply the tag to the device.

5. `applyTagToDevice()` is executed, which applies the selected tag to the specified device.