HOW TO: develop Angular Applications using Snap4City

✅ It is possible to integrate the Snap4City Smart City API into an Angular application.
⚠️ However, pay attention to authentication, CORS, WebSockets, and real-time data handling.

  1. CORS (Cross-Origin Resource Sharing) Issues
    • SCAPI allow direct requests from a web application,
    • Your Application has to be registered on Snap4City server
    • in some cases you may need a proxy server or configure CORS properly on the API side.
  2. Authentication & Security
    • Snap4City API requires OAuth tokens, API keys, or JWT authentication, you must manage token refresh.
    • Never expose API keys in Angular; use a backend proxy if needed.
  3. Asynchronous Requests & Performance
    • Please study all the SCAPI which allow you to avoid store large data on client
  4. Data Processing & Visualization
    • If you plan to display real-time dashboards, charts, or maps, you may need additional libraries like: Leaflet.js, Maps APIhighChart.js, D3.js, For analytics visualization
    • PLEASE take care that Snap4City dashboard builder has already all of them, They are well integrated and ready to be used also providing an easy wasy to interact each other such as in business intelligence tools and to recall content automatically. We suggest you to avoid reinventing the weel for front end and solve with few click an CSBL code to create it with Snap4City solutions.
    • Snap4City dashboards provide
      • you THEME for chaing the look and feel in few second, decupling development from GUI appeareance
      • a drag-and-drop interface with prebuilt widgets for visualizing Smart City data without much development effort.
      • all the required graphs, charts, and UI elements, then building a custom Angular solution adds unnecessary complexity.
      • reduced development time.
      • receive updates, maintenance, and community support.
  5. Backend vs Frontend Calls
    • All APIs require authentication, For back-end, take in mind that Snap4City provide Node-RED based on Node.js as a middleware and more than 190 MicroServices with automated autnetication and authorisation mechanisms.
    • Snap4City Node-RED 
      • allows you to drag and drop nodes, making it easy to set up logic and workflows without writing much code.
      • Ideal for teams that lack full-stack development experience.
      • Snap4City offers pre-configured nodes for Smart City APIs, IoT sensors, MQTT, HTTP, WebSockets, and AI/ML workflows.
      • Great for quick integration with smart sensors, open data sources, and real-time event processing.
      • The flow-based programming model helps with debugging and monitoring real-time data streams, sensor events, and API calls
      • is event-driven and supports real-time message-based workflows, ideal for IoT applications and sensor data processing.
      • Supports asynchronous processing using flows instead of manual async/await handling.
      • can connect directly to Snap4City dashboards, making data visualization easy.
      • Supports REST APIs, MQTT, WebSockets, and database interactions.
      • Less need for manual authentication and server-side security setups.
      • Snap4City handles platform updates, security patches, and infrastructure.
  6. AI ML MLOPs integration
    • Snap4City aully provides support for developing and accessing to Data  Analytics, ML, AI developed in Python and Rstudio, recalled them from API of front-end and from Back-end, and support MLOps full scale with HPC. 
  7. WebSocket Support (if needed)
    • If Snap4City provides real-time updates via WebSockets Secure, you can use RxJS WebSocketSubject to integrate WebSockets efficiently.