add basic service & component

- add firebase config to environment*.ts
- add a simple function

frontend/src/app/app.module.ts

@@ -1,18 +1,26 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { AngularFireModule } from '@angular/fire/compat';
+import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/compat/functions';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { FunctionViewComponent } from './function-view/function-view.component';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    FunctionViewComponent
   ],
   imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireFunctionsModule,
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [
+    { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined },
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

frontend/src/app/domain/hello.ts

@@ -0,0 +1,3 @@
+export interface Hello {
+    title: string
+}

frontend/src/app/function-view/function-view.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="message$ | async as message">
+    <p>{{ message.title }}</p>
+</div>

frontend/src/app/function-view/function-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FunctionViewComponent } from './function-view.component';
+
+describe('FunctionViewComponent', () => {
+  let component: FunctionViewComponent;
+  let fixture: ComponentFixture<FunctionViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FunctionViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FunctionViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/function-view/function-view.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { FunctionService } from '../services/function.service';
+import { catchError, retry } from 'rxjs/operators'
+import { Hello } from '../domain/hello';
+
+@Component({
+  selector: 'app-function-view',
+  templateUrl: './function-view.component.html',
+  styleUrls: ['./function-view.component.scss']
+})
+export class FunctionViewComponent implements OnInit {
+
+  message$!: Observable<Hello>
+
+  constructor(private service: FunctionService) { }
+
+  ngOnInit(): void {
+    this.message$ = this.service.get("John").pipe(
+      retry(1),
+      catchError(e => of({ title: "Fallback in case of error" }))
+    )
+  }
+
+}

frontend/src/app/services/function.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FunctionService } from './function.service';
+
+describe('FunctionService', () => {
+  let service: FunctionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FunctionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/services/function.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { AngularFireFunctions } from '@angular/fire/compat/functions';
+import { Observable } from 'rxjs';
+import { Hello } from '../domain/hello';
+
+const endpoint = 'sayHello'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FunctionService {
+
+  constructor(public readonly functions: AngularFireFunctions) { }
+
+  get(name: string): Observable<Hello> {
+    return this.functions.httpsCallable(endpoint, { timeout: 5_000 })({ name: name })
+  }
+}

frontend/src/environments/environment.prod.ts

@@ -1,3 +1,13 @@
 export const environment = {
-  production: true
-};
+  production: true,
+  useEmulators: false,
+  firebase: {
+    apiKey: "AIzaSyBx1HNN0HzvKZhoYjOHQbGZ1Djm4xk6jS4",
+    authDomain: "scaffolding-4c7fc.firebaseapp.com",
+    projectId: "scaffolding-4c7fc",
+    storageBucket: "scaffolding-4c7fc.appspot.com",
+    messagingSenderId: "430139192949",
+    appId: "1:430139192949:web:7f9f1d90c85cc5d2246a3c",
+    measurementId: "G-24G3PBH5D0"
+  }
+}

frontend/src/environments/environment.ts

@@ -3,8 +3,18 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
-};
+  production: false,
+  useEmulators: true,
+  firebase: {
+    apiKey: "AIzaSyBx1HNN0HzvKZhoYjOHQbGZ1Djm4xk6jS4",
+    authDomain: "scaffolding-4c7fc.firebaseapp.com",
+    projectId: "scaffolding-4c7fc",
+    storageBucket: "scaffolding-4c7fc.appspot.com",
+    messagingSenderId: "430139192949",
+    appId: "1:430139192949:web:7f9f1d90c85cc5d2246a3c",
+    measurementId: "G-24G3PBH5D0"
+  }
+}
 
 /*
  * For easier debugging in development mode, you can import the following file

functions/.eslintrc.js

@@ -27,5 +27,7 @@ module.exports = {
   rules: {
     "quotes": ["error", "double"],
     "import/no-unresolved": 0,
+    "semi": ["error", "never"],
+    "object-curly-spacing": ["error", "always"],
   },
-};
+}

functions/src/index.ts

@@ -1,9 +1,33 @@
-import * as functions from "firebase-functions";
+import * as functions from "firebase-functions"
+import c = require("cors")
 
-// // Start writing Firebase Functions
-// // https://firebase.google.com/docs/functions/typescript
-//
-// export const helloWorld = functions.https.onRequest((request, response) => {
-//   functions.logger.info("Hello logs!", {structuredData: true});
-//   response.send("Hello from Firebase!");
-// });
+const cors = c({ origin: true })
+
+export const sayHello = functions.https.onRequest((request, response) => {
+  cors(request, response, () => {
+    let receivedValue = "John Doe"
+    if (request.body && request.body.data) {
+      receivedValue = request.body.data.name
+    }
+
+    if (process.env.IS_FIREBASE_CLI &&
+      process.env.FIREBASE_DEBUG_MODE) {
+      const delay = Number(process.env.DEBUG_RESPONSE_DELAY) || 1000
+      setTimeout((() => {
+        response.status(200).send({
+          "status": "success",
+          "data": {
+            "title": `Hi ${receivedValue}, (running in emulator/debug mode)!`,
+          },
+        })
+      }), delay)
+    } else {
+      response.status(200).send({
+        "status": "success",
+        "data": {
+          "title": `Hi ${receivedValue}, (running in prod mode)!`,
+        },
+      })
+    }
+  })
+})