{"id":13497520,"url":"https://github.com/FranzDiebold/ng-google-sheets-db-library","last_synced_at":"2025-03-28T22:31:46.516Z","repository":{"id":42062305,"uuid":"262535591","full_name":"FranzDiebold/ng-google-sheets-db-library","owner":"FranzDiebold","description":"Use Google Sheets as your (read-only) backend for your Angular app!","archived":false,"fork":false,"pushed_at":"2023-12-11T15:50:02.000Z","size":3735,"stargazers_count":46,"open_issues_count":0,"forks_count":11,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-21T14:23:11.392Z","etag":null,"topics":["angular","angular-library","angular-schematics","database","github-actions","google-sheets","google-spreadsheet","ng-add"],"latest_commit_sha":null,"homepage":"https://franzdiebold.github.io/ng-google-sheets-db-library/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FranzDiebold.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"FranzDiebold"}},"created_at":"2020-05-09T09:27:49.000Z","updated_at":"2024-07-28T13:28:46.000Z","dependencies_parsed_at":"2024-06-21T14:17:12.858Z","dependency_job_id":"5a6e22f3-18c4-47fd-8a10-7cb0dedb307c","html_url":"https://github.com/FranzDiebold/ng-google-sheets-db-library","commit_stats":{"total_commits":61,"total_committers":1,"mean_commits":61.0,"dds":0.0,"last_synced_commit":"ad13763629ee4babe564c74a0eeb0378ec8b3540"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranzDiebold%2Fng-google-sheets-db-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranzDiebold%2Fng-google-sheets-db-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranzDiebold%2Fng-google-sheets-db-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranzDiebold%2Fng-google-sheets-db-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FranzDiebold","download_url":"https://codeload.github.com/FranzDiebold/ng-google-sheets-db-library/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246110222,"owners_count":20725013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-library","angular-schematics","database","github-actions","google-sheets","google-spreadsheet","ng-add"],"created_at":"2024-07-31T20:00:32.483Z","updated_at":"2025-03-28T22:31:46.097Z","avatar_url":"https://github.com/FranzDiebold.png","language":"TypeScript","funding_links":["https://github.com/sponsors/FranzDiebold"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"75\" src=\"./design/ng-google-sheets-db-logo.png\" alt=\"ng-google-sheets-db logo\"\u003e\n\u003c/p\u003e\n\n# ng-google-sheets-db - Angular Google Sheets DB\n\n[![Test, lint, build and deploy](https://github.com/FranzDiebold/ng-google-sheets-db-library/workflows/Test,%20lint,%20build%20and%20deploy/badge.svg)](https://github.com/FranzDiebold/ng-google-sheets-db-library/actions)\n[![demo: app](https://img.shields.io/badge/demo-app-2ca467.svg)](https://franzdiebold.github.io/ng-google-sheets-db-library/)\n[![demo: StackBlitz](https://img.shields.io/badge/demo-StackBlitz-1389fd.svg)](https://stackblitz.com/edit/ng-google-sheets-db-demo)\n[![Angular: v10](https://img.shields.io/badge/Angular-v10-DD0031.svg)](./projects/ng-google-sheets-db/package.json)\n[![npm](https://img.shields.io/npm/v/ng-google-sheets-db.svg)](https://www.npmjs.com/package/ng-google-sheets-db)\n[![npm](https://img.shields.io/npm/dm/ng-google-sheets-db.svg)](https://www.npmjs.com/package/ng-google-sheets-db)\n[![license: MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg)](./LICENSE)\n\nUse [Google Sheets](https://en.wikipedia.org/wiki/Google_Sheets) as your (read-only) backend for your Angular app!\n\n[![Google Sheets Table](./images/google-sheets-table.png)](https://docs.google.com/spreadsheets/d/1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA)\n\n```typescript\nconst attributesMapping = {\n  id: \"ID\",\n  name: \"Name\",\n  email: \"Email Address\",\n  contact: {\n    _prefix: \"Contact \",\n    street: \"Street\",\n    streetNumber: \"Street Number\",\n    zip: \"ZIP\",\n    city: \"City\",\n  },\n  skills: {\n    _prefix: \"Skill \",\n    _listField: true,\n  },\n};\n```\n\n```ts\ngoogleSheetsDbService\n  .get(\n    \"1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA\",\n    \"Characters\",\n    attributesMapping\n  )\n  .subscribe((characters: object[]) =\u003e {\n    // Use the characters here\n  });\n```\n\n## Installation\n\n```bash\nng add ng-google-sheets-db\n```\n\nor\n\n```bash\nnpm install ng-google-sheets-db\n```\n\n## Usage\n\n### Google Sheets\n\n1. Create a [Google Sheet](https://docs.google.com/spreadsheets):\n   - The first row **must** be the header.\n   - The following rows are your entries, one entry per row.\n   - You may have an _active_ column, with which you can enable or disable rows/entries.\n   - A Google Sheets demo spreadsheet is available [here](https://docs.google.com/spreadsheets/d/1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA).\n2. Share your sheet:\n   - [File] \u0026rightarrow; [Share] \u0026rightarrow; On the bottom of the modal at \"Get Link\" click [Change to anyone with the link] to be \"Viewer\".\n   - Get the _Spreadsheet ID_ (i.e. `1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA`): It is part of the Google spreadsheet URL.\n   - Get the _Sheet Name_: The name of the worksheet can be found at the bottom of your Google spreadsheet.\n3. 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:.\n\n### Google Cloud Platform (GCP)\n\nA good overview guide is the [Get started as a Workspace developer](https://developers.google.com/workspace/guides/getstarted-overview).\n\n1. Create a new project in the [Google Cloud Console](https://console.cloud.google.com/).\n2. Enable Google Sheets API: [APIs \u0026 Services] \u0026rightarrow; [Enable APIs and Services] \u0026rightarrow; Search for \"Google Sheets API\" \u0026rightarrow; [ENABLE].\n3. Create an _API key_: [APIs \u0026 Services] \u0026rightarrow; [Credentials] \u0026rightarrow; [+ CREATE CREDENTIALS] \u0026rightarrow; [API key] \u0026rightarrow; [RESTRICT KEY] \u0026rightarrow; In \"Application restrictions\" choose \"HTTP referrers (web sites)\" with \"Website restrictions\" and in \"API restrictions\" choose \"Restrict key\" and select \"Google Sheets API\" \u0026rightarrow; [SAVE].\n4. Get the generated API key.\n\n### Angular\n\nAdd `GoogleSheetsDbService` to your app's module as a provider and Angular's `HttpClientModule` to the imports:\n\n```typescript\nimport { HttpClientModule } from '@angular/common/http';\n\nimport { API_KEY, GoogleSheetsDbService } from 'ng-google-sheets-db';\n\n@NgModule({\n  ...\n  imports: [\n    HttpClientModule,\n    ...\n  ],\n  providers: [\n    {\n      provide: API_KEY,\n      useValue: \u003cYOUR_GOOGLE_SHEETS_API_KEY\u003e,\n    },\n    GoogleSheetsDbService\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\nImport and inject into your component's constructor:\n\n```typescript\nimport { GoogleSheetsDbService } from 'ng-google-sheets-db';\n\n@Component({\n  ...\n})\nexport class YourComponent implements OnInit {\n  characters$: Observable\u003cCharacter[]\u003e;\n\n  constructor(private googleSheetsDbService: GoogleSheetsDbService) { }\n\n  ngOnInit(): void {\n    this.characters$ = this.googleSheetsDbService.get\u003cCharacter\u003e('1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA', \"Characters\", characterAttributesMapping);\n  }\n```\n\n### Attributes Mapping\n\nThe `attributesMapping` maps the Google spreadsheet columns to to your outcome object.\n\n```typescript\nconst attributesMapping = {\n  id: \"ID\",\n  name: \"Name\",\n  email: \"Email Address\",\n  contact: {\n    _prefix: \"Contact \",\n    street: \"Street\",\n    streetNumber: \"Street Number\",\n    zip: \"ZIP\",\n    city: \"City\",\n  },\n  skills: {\n    _prefix: \"Skill \",\n    _listField: true,\n  },\n};\n```\n\nFor example, the Google spreadsheet column _Email Address_ is mapped to the outcome object attribute `email`.\n\n#### Nested objects\n\n`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.\n\n#### Lists\n\n`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.\n\n## Methods\n\n### get\u003cT\u003e(spreadsheetId: string, worksheetName: string, attributesMapping: object | string[]): Observable\u003cT[]\u003e\n\n```typescript\nconst allCharacters$: Observable\u003cCharacter\u003e =\n  googleSheetsDbService.get\u003cCharacter\u003e(\n    \"1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA\",\n    \"Characters\",\n    attributesMapping\n  );\n```\n\nGet all rows from the Google spreadsheet as an `Observable` of objects or a given type as type variable `T`.\n\n### getActive\u003cT\u003e(spreadsheetId: string, worksheetName: string, attributesMapping: object | string[], isActiveColumnName: string = 'is_active', activeValues: string[] | string = null): Observable\u003cT[]\u003e\n\n```typescript\nconst activeCharacters$: Observable\u003cCharacter\u003e =\n  googleSheetsDbService.getActive\u003cCharacter\u003e(\n    \"1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA\",\n    \"Characters\",\n    attributesMapping,\n    \"Active\"\n  );\n```\n\nGet \"active\" rows from the Google spreadsheet as an `Observable` of objects or a given type as type variable `T`. You may have an _active_ column with name `isActiveColumnName`, with which you can enable or disable rows/entries.\n\"Active\" rows have the value `true`, `1` or `yes`. You may also define your own `activeValues`.\n\n## Demo Application\n\nWant to see an example of how to use `ng-google-sheets-db`? Check out the demo application in [projects/demo](./projects/demo) or on [StackBlitz](https://stackblitz.com/edit/ng-google-sheets-db-demo).\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranzDiebold%2Fng-google-sheets-db-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFranzDiebold%2Fng-google-sheets-db-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranzDiebold%2Fng-google-sheets-db-library/lists"}