NgWebex - Angular Webex SDK Integration

A comprehensive Angular application demonstrating integration with the Webex JavaScript SDK for building modern web-based collaboration applications. This project showcases how to implement Webex Meetings functionality within an Angular framework using TypeScript.

This project was generated with Angular CLI version 9.0.4.

🎯 Features

Webex SDK Integration: Complete integration with the official Webex JavaScript SDK
Meeting Management: Create, register, and sync Webex meetings
User Authentication: Token-based authentication with Webex APIs
Real-time Status: Live updates on registration and sync status
Angular Best Practices: Modern Angular architecture with components and services
TypeScript Support: Full TypeScript implementation for type safety

📁 Project Structure

ngWebex/
├── src/
│   ├── app/
│   │   ├── webex/                    # Webex component
│   │   │   ├── webex.component.ts    # Main Webex functionality
│   │   │   ├── webex.component.html  # UI template
│   │   │   ├── webex.component.css   # Component styles
│   │   │   └── webex.component.spec.ts # Unit tests
│   │   ├── app.component.ts          # Root component
│   │   ├── app.component.html        # Root template
│   │   └── app.module.ts             # Main app module
│   ├── environments/                 # Environment configurations
│   ├── assets/                       # Static assets
│   └── index.html                    # Main HTML file
├── e2e/                              # End-to-end tests
├── angular.json                      # Angular CLI configuration
├── package.json                      # Node.js dependencies
├── webpack.config.ts                 # Custom webpack configuration
└── README.md                         # This file

🚀 Getting Started

Prerequisites

Node.js (v14 or higher)
npm or yarn
Angular CLI (v9 or higher)
Webex Developer Account and access token

Installation

Clone the repository:

git clone https://github.com/WebexSamples/ngWebex.git
cd ngWebex

Install dependencies:
```
npm install
```
Start the development server:
```
ng serve
```
Open in browser: Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

🔧 Configuration

Webex Access Token

To use the application, you'll need a Webex access token:

Get a Personal Access Token:
- Visit Webex Developer Portal
- Sign in with your Webex account
- Navigate to "Getting Started" → "Your Personal Access Token"
For Production: Create a Webex Integration:
- Go to "My Apps" → "Create a New App" → "Integration"
- Configure your integration settings
- Use the generated access token

Environment Configuration

You can configure environment-specific settings in:

src/environments/environment.ts (development)
src/environments/environment.prod.ts (production)

💻 Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

🔨 Code scaffolding

🏗️ Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

🧪 Running unit tests

Run ng test to execute the unit tests via Karma.

🔍 Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

📋 Application Features

Webex SDK Initialization

The application demonstrates how to initialize the Webex SDK with proper configuration:

this.webex = Webex.init({
  config: {
    meetings: {
      deviceType: 'WEB'
    }
  },
  credentials: {
    access_token: this.token
  }
});

User Authentication

Get User Information:

async onGetMe() {
  const response = await this.webex.people.get('me');
  // User information available in response
}

Meeting Registration

Register for Meetings:

async onRegister() {
  try {
    await this.webex.meetings.register();
    this.registered = true;
  } catch (error) {
    window.alert(error);
  }
}

Unregister from Meetings:

async onUnregister() {
  try {
    await this.webex.meetings.unregister();
    this.registered = false;
  } catch (error) {
    console.error(error);
  }
}

Meeting Synchronization

Sync Meetings:

async onSyncMeetings() {
  try {
    this.syncStatus = 'SYNCING';
    await this.webex.meetings.syncMeetings();
    this.syncStatus = 'SYNCED';
  } catch (error) {
    this.syncStatus = 'ERROR';
    console.error(error);
  }
}

Meeting Creation

Create New Meeting:

async onCreateMeeting(destination) {
  try {
    this.currentMeeting = await this.webex.meetings.create(destination);
  } catch (error) {
    console.error(error);
  }
}

🎨 User Interface

The application provides a clean, functional interface with:

Main Components

Token Input: Enter your Webex access token
SDK Status: Shows whether Webex instance is created
User Info: Get current user details
Meeting Controls: Register, unregister, and sync meetings
Meeting Creation: Create new meetings with destination
Status Display: Real-time status updates

UI Elements

Input Field: Token entry with two-way data binding
Action Buttons: Trigger various Webex operations
Status Indicators: Visual feedback for operations
Meeting Display: Shows current meeting information

🔧 Technical Implementation

Angular Architecture

Component Structure:

AppComponent: Root component that hosts the Webex component
WebexComponent: Main component handling all Webex functionality

Key Features:

Two-way Data Binding: Using [(ngModel)] for form inputs
Event Handling: Click handlers for all button actions
Async Operations: Proper handling of async/await patterns
Error Handling: Try-catch blocks for API calls

Webex SDK Integration

Dependencies:

{
  "webex": "^1.80.147"
}

Import Statement:

import Webex from 'webex';

Custom Webpack Configuration

The project includes custom webpack configuration for Node.js compatibility:

export default {
  node: {
    fs: 'empty'
  }
} as webpack.Configuration;

This configuration resolves Node.js filesystem issues in the browser environment.

📦 Dependencies

Core Dependencies

{
  "@angular/animations": "~9.0.3",
  "@angular/common": "~9.0.3",
  "@angular/compiler": "~9.0.3",
  "@angular/core": "~9.0.3",
  "@angular/forms": "~9.0.3",
  "@angular/platform-browser": "~9.0.3",
  "@angular/platform-browser-dynamic": "~9.0.3",
  "@angular/router": "~9.0.3",
  "rxjs": "~6.5.4",
  "tslib": "^1.10.0",
  "webex": "^1.80.147",
  "zone.js": "~0.10.2"
}

Development Dependencies

{
  "@angular-builders/custom-webpack": "^9.0.0",
  "@angular-devkit/build-angular": "~0.900.4",
  "@angular/cli": "~9.0.4",
  "@angular/compiler-cli": "~9.0.3",
  "@angular/language-service": "~9.0.3",
  "typescript": "~3.7.5"
}

🧪 Testing

Unit Testing

Run unit tests with:

ng test

Test Configuration:

Framework: Jasmine
Runner: Karma
Coverage: Istanbul

End-to-End Testing

Run e2e tests with:

ng e2e

E2E Configuration:

Framework: Protractor
Browser: Chrome (headless available)

Component Testing

The WebexComponent includes comprehensive unit tests:

Component initialization
SDK integration
Meeting operations
Error handling

🚀 Deployment

Development Build

ng build

Production Build

ng build --prod

Production Optimizations:

Minification: Code minification enabled
Tree Shaking: Dead code elimination
Ahead-of-Time Compilation: AOT compilation
Service Worker: PWA support (if configured)

Deployment Options

Static Hosting: Deploy dist/ folder to any static host
CDN: Use CDN for global distribution
Docker: Containerize with nginx
Cloud Platforms: Deploy to AWS, Azure, GCP

🔧 Scripts

Available npm scripts:

{
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

Usage Examples

# Development server
npm start

# Production build
npm run build

# Run tests
npm test

# Lint code
npm run lint

# E2E tests
npm run e2e

🔍 Debugging

Development Tools

Browser DevTools:

Network tab for API calls
Console for debugging output
Application tab for storage inspection

Angular DevTools:

Component inspection
Change detection profiling
Performance analysis

Debug Configuration

The component includes debug statements:

async onGetMe() {
  const response = await this.webex.people.get('me');
  debugger; // Debug breakpoint
}

🔐 Security Considerations

Token Management

Development:

Use personal access tokens for testing
Never commit tokens to version control
Store tokens securely in environment variables

Production:

Implement proper OAuth flow
Use refresh tokens for long-term sessions
Implement token rotation

Best Practices

Environment Variables: Store sensitive data in environment files
HTTPS: Always use HTTPS in production
CSP: Implement Content Security Policy
Token Validation: Validate tokens before use

📈 Performance Optimization

Angular Optimizations

OnPush Change Detection: Implement for better performance
Lazy Loading: Load modules on demand
Tree Shaking: Remove unused code
Service Workers: Cache resources

Webex SDK Optimizations

Selective Imports: Import only needed SDK modules
Connection Pooling: Reuse connections
Error Handling: Implement proper error boundaries
Memory Management: Clean up resources

🤝 Contributing

Development Guidelines

Code Style: Follow Angular style guide
Testing: Write unit tests for new features
Documentation: Update README for new features
TypeScript: Use strict typing

Pull Request Process

Fork the repository
Create a feature branch
Implement changes with tests
Run linting and tests
Submit pull request

📚 Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

🔗 Additional Resources

🆘 Support

Create an issue in this repository
Review Webex SDK Documentation
Contact Webex Developer Support

📄 License

This project is licensed under the terms specified in the LICENSE file.

Repository: https://github.com/WebexSamples/ngWebex

Uh oh!

FilesExpand file tree

README.md

Latest commit

History