Merge pull request #13 from FranzDiebold/feat/v-2-0-0-switch-to-google-sheets-api

Feat/v 2 0 0 switch to google sheets api

Author: FranzDiebold

.github/workflows/ci.yml

@@ -14,9 +14,9 @@ jobs:
       - uses: actions/checkout@v2
         with:
           persist-credentials: false
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "14"
           registry-url: "https://registry.npmjs.org"
       - run: make install
       - run: make test-lib-ci
@@ -31,9 +31,9 @@ jobs:
       - uses: actions/checkout@v2
         with:
           persist-credentials: false
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "14"
           registry-url: "https://registry.npmjs.org"
       - run: make install
       - run: make publish-lib
@@ -47,9 +47,9 @@ jobs:
       - uses: actions/checkout@v2
         with:
           persist-credentials: false
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "14"
           registry-url: "https://registry.npmjs.org"
       - run: make install
       - run: make build-lib

README.md

@@ -22,22 +22,26 @@ const attributesMapping = {
   name: "Name",
   email: "Email Address",
   contact: {
-    _prefix: "Contact",
+    _prefix: "Contact ",
     street: "Street",
     streetNumber: "Street Number",
     zip: "ZIP",
     city: "City",
   },
   skills: {
-    _prefix: "Skill",
+    _prefix: "Skill ",
     _listField: true,
   },
 };
 ```
 
 ```ts
 googleSheetsDbService
-  .get("1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA", 1, attributesMapping)
+  .get(
+    "1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA",
+    "Characters",
+    attributesMapping
+  )
   .subscribe((characters: object[]) => {
     // Use the characters here
   });
@@ -65,27 +69,42 @@ npm install ng-google-sheets-db
    - You may have an _active_ column, with which you can enable or disable rows/entries.
    - A Google Sheets demo spreadsheet is available [here](https://docs.google.com/spreadsheets/d/1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA).
 2. Share your sheet:
-   - [File] → [Publish to the web] → (Entire Document, Web page) [Publish]
+   - [File] → [Share] → On the bottom of the modal at "Get Link" click [Change to anyone with the link] to be "Viewer".
    - Get the _Spreadsheet ID_ (i.e. `1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA`): It is part of the Google spreadsheet URL.
-   - Get the _Worksheet ID_: The Worksheet IDs are increasing numbers, starting at 1.
+   - Get the _Sheet Name_: The name of the worksheet can be found at the bottom of your Google spreadsheet.
 3. Optional: It may be a good idea to enable [2-Step Verification](https://www.google.com/landing/2step/) for your Google account, if you have not done it yet :wink:.
 
+### Google Cloud Platform (GCP)
+
+A good overview guide is the [Get started as a Workspace developer](https://developers.google.com/workspace/guides/getstarted-overview).
+
+1. Create a new project in the [Google Cloud Console](https://console.cloud.google.com/).
+2. Enable Google Sheets API: [APIs & Services] → [Enable APIs and Services] → Search for "Google Sheets API" → [ENABLE].
+3. Create an _API key_: [APIs & Services] → [Credentials] → [+ CREATE CREDENTIALS] → [API key] → [RESTRICT KEY] → In "Application restrictions" choose "HTTP referrers (web sites)" with "Website restrictions" and in "API restrictions" choose "Restrict key" and select "Google Sheets API" → [SAVE].
+4. Get the generated API key.
+
 ### Angular
 
 Add `GoogleSheetsDbService` to your app's module as a provider and Angular's `HttpClientModule` to the imports:
 
 ```typescript
 import { HttpClientModule } from '@angular/common/http';
 
-import { GoogleSheetsDbService } from 'ng-google-sheets-db';
+import { API_KEY, GoogleSheetsDbService } from 'ng-google-sheets-db';
 
 @NgModule({
   ...
   imports: [
     HttpClientModule,
     ...
   ],
-  providers: [ GoogleSheetsDbService ],
+  providers: [
+    {
+      provide: API_KEY,
+      useValue: <YOUR_GOOGLE_SHEETS_API_KEY>,
+    },
+    GoogleSheetsDbService
+  ],
   ...
 })
 export class AppModule { }
@@ -105,7 +124,7 @@ export class YourComponent implements OnInit {
   constructor(private googleSheetsDbService: GoogleSheetsDbService) { }
 
   ngOnInit(): void {
-    this.characters$ = this.googleSheetsDbService.get<Character>('1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA', 1, characterAttributesMapping);
+    this.characters$ = this.googleSheetsDbService.get<Character>('1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA', "Characters", characterAttributesMapping);
   }
 ```
 
@@ -119,14 +138,14 @@ const attributesMapping = {
   name: "Name",
   email: "Email Address",
   contact: {
-    _prefix: "Contact",
+    _prefix: "Contact ",
     street: "Street",
     streetNumber: "Street Number",
     zip: "ZIP",
     city: "City",
   },
   skills: {
-    _prefix: "Skill",
+    _prefix: "Skill ",
     _listField: true,
   },
 };
@@ -136,34 +155,34 @@ For example, the Google spreadsheet column _Email Address_ is mapped to the outc
 
 #### Nested objects
 
-`contact` is an example of a nested object. You may define a `_prefix` as a prefix for all columns of the nested object.
+`contact` is an example of a nested object. You may define a `_prefix` as a prefix for all columns of the nested object. Please note that the `_prefix` may need a trailing whitespace.
 
 #### Lists
 
-`skills` is an example of a list. You need to set `_listField` and a `_prefix` for all columns of the list. In this example, all columns starting with _Skill_ and an increasing number are part of the list, i.e. _Skill 1_, _Skill 2_, etc.
+`skills` is an example of a list. You need to set `_listField` and a `_prefix` for all columns of the list. In this example, all columns starting with _Skill _ and an increasing number are part of the list, i.e. _Skill 1_, _Skill 2_, etc. Please note that the `_prefix` may need a trailing whitespace.
 
 ## Methods
 
-### get<T>(spreadsheetId: string, worksheetId: string | number, attributesMapping: object | string[]): Observable<T[]>
+### get<T>(spreadsheetId: string, worksheetName: string, attributesMapping: object | string[]): Observable<T[]>
 
 ```typescript
 const allCharacters$: Observable<Character> =
   googleSheetsDbService.get<Character>(
     "1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA",
-    1,
+    "Characters",
     attributesMapping
   );
 ```
 
 Get all rows from the Google spreadsheet as an `Observable` of objects or a given type as type variable `T`.
 
-### getActive<T>(spreadsheetId: string, worksheetId: string | number, attributesMapping: object | string[], isActiveColumnName: string = 'is_active', activeValues: string[] | string = null): Observable<T[]>
+### getActive<T>(spreadsheetId: string, worksheetName: string, attributesMapping: object | string[], isActiveColumnName: string = 'is_active', activeValues: string[] | string = null): Observable<T[]>
 
 ```typescript
 const activeCharacters$: Observable<Character> =
   googleSheetsDbService.getActive<Character>(
     "1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA",
-    1,
+    "Characters",
     attributesMapping,
     "Active"
   );

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-google-sheets-db-library",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Use Google Sheets as your (read-only) backend for your Angular app!",
   "author": {
     "name": "Franz Diebold"

package.json

@@ -1,5 +1,6 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { API_KEY } from 'ng-google-sheets-db';
 
 import { AppComponent } from './app.component';
 
@@ -9,6 +10,12 @@ describe('AppComponent', () => {
       TestBed.configureTestingModule({
         declarations: [AppComponent],
         imports: [HttpClientTestingModule],
+        providers: [
+          {
+            provide: API_KEY,
+            useValue: 'some-fake-test-api-key',
+          },
+        ],
       }).compileComponents();
     })
   );

projects/demo/src/app/app.component.spec.ts

@@ -20,7 +20,7 @@ export class AppComponent implements OnInit {
   ngOnInit(): void {
     this.characters$ = this.googleSheetsDbService.getActive<Character>(
       environment.characters.spreadsheetId,
-      environment.characters.worksheetId,
+      environment.characters.worksheetName,
       characterAttributesMapping,
       'Active'
     );

projects/demo/src/app/app.component.ts

@@ -2,14 +2,21 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
-import { GoogleSheetsDbService } from 'ng-google-sheets-db';
+import { API_KEY, GoogleSheetsDbService } from 'ng-google-sheets-db';
 
+import { environment } from '../environments/environment';
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, HttpClientModule],
-  providers: [GoogleSheetsDbService],
+  providers: [
+    {
+      provide: API_KEY,
+      useValue: environment.googleSheetsApiKey,
+    },
+    GoogleSheetsDbService,
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

projects/demo/src/app/app.module.ts

@@ -3,14 +3,14 @@ export const characterAttributesMapping = {
   name: 'Name',
   email: 'Email Address',
   contact: {
-    _prefix: 'Contact',
+    _prefix: 'Contact ',
     street: 'Street',
     streetNumber: 'Street Number',
     zip: 'ZIP',
     city: 'City',
   },
   skills: {
-    _prefix: 'Skill',
+    _prefix: 'Skill ',
     _listField: true,
   },
 };

projects/demo/src/app/character.model.ts

@@ -1,7 +1,8 @@
 export const environment = {
   production: true,
+  googleSheetsApiKey: 'AIzaSyD-Nkv-g1682kKdauukFPmOCNaQk0wP540',
   characters: {
     spreadsheetId: '1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA',
-    worksheetId: 1,
+    worksheetName: 'Characters',
   },
 };

projects/demo/src/environments/environment.prod.ts

@@ -4,9 +4,10 @@
 
 export const environment = {
   production: false,
+  googleSheetsApiKey: 'AIzaSyD-Nkv-g1682kKdauukFPmOCNaQk0wP540',
   characters: {
     spreadsheetId: '1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA',
-    worksheetId: 1,
+    worksheetName: 'Characters',
   },
 };