⚡ Angular Data Charts

• Fully working native desktop app produced using Angular front-end framework and Electron. Uses Youtube API data to show subscribers to a Youtube channel, based on a Youtube channel id.

*** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

• ⚡ Angular Data Charts
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
    • With Maxime GRIS boilerplate code used in this app used it is possible to
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • ✉️ Contact

📚 General info

• Maxime GRIS boilerplate code used in this app used to save time creating this desktop app that uses Angular 10 and Electron 9 (Typescript + SASS + Hot Reload).
• The application code is managed by main.ts.
• You can disable "Developer Tools" by commenting win.webContents.openDevTools(); in main.ts.
• rxjs switchMap used to subscribe to http observable. On each emission the previous inner observable is cancelled and the new observable is subscribed: 'switch to a new observable'.

📷 Screenshots

📶 Technologies

• Angular v10
• Electron v9 cross-platform desktop apps with JavaScript, HTML, and CSS
• Electron Builder v22 to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.
• Node v12 required by Angular 10.x CLI

💾 Setup

• Install dependencies by running npm i
• Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files
• 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
• Runnpm run ng:serve to Execute the app in the browser
• Run npm run build to Build the app. Your built files are in the /dist folder.
• Run npm run build:prod to Build the app with Angular aot. Your built files are in the /dist folder.
• Run npm run electron:localto build your application and start electron.
• Run npm run electron:build to build your application and create an app consumable based on your operating system.
• Run npm run e2e to execute end to end tests

💻 Code Examples

• extract from data.service to get Youtube data based on Youtube client ID (publically available).

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  getStats(name: string) {
    return interval(5000).pipe(
      startWith(0),
      switchMap(() =>
        this.http.get(
          "https://www.googleapis.com/youtube/v3/channels?part=statistics,snippet&id=" +
            name +
            "&key=API_KEY"
        )
      ),
      map((res) => res)
    );
  }

🆒 Features

With Maxime GRIS boilerplate code used in this app used it is possible to

• Run your app in a local development environment with Electron & Hot reload (rendering process only, not electron process)
• Run your app in a production environment
• Package your app into an executable file for Linux, Windows & Mac

📋 Status & To-Do List

• Status: in work
• To-Do: create build file and complete.

👏 Inspiration

• Gary Simon tutorial DesignCourse Youtube video
• Maxime GRIS boilerplate code used in this app
• Youtube Data API Reference
• Last-Call: How To Get a YouTube API Key (in 7 Simple Steps)

✉️ Contact

• Repo created by ABateman - you are welcome to send me a message