Angular / GoogleSheets / CRUD
We need to access a Google Sheet for basic CRUD operations from Angular. There are several great node modules available that will allow us to perform CRUD operations on Google Sheets but most require OAuth2 and we want to keep this fairly straight forward by using a Google Service Account and JWT (JSONWeb Token). The best fit module for this is: [google-spreadsheet](https://www.npmjs.com/package/google-spreadsheet) This handy little module takes care of the authentication as well as providing the hooks to the Google Sheet. But since this is a Node.js module we are trying to run in a browser we have to create a workaround. Here's a quick overview of what we need to do to get this up and running. First we'll enable the Google Sheets API and create a servive account. Next we'll extend Webpack in Angular to help setup our workaround. Then we'll configure our components and, for this example, write a method that writes to the Google Sheet. This is going to be a little lengthy so I won't go over creating an Angular project. All right let's get started!
<details> <summary>First enable the Google Sheets API and create the Service Account: </summary> Go to the Google Developers Console and navigate to the API section. You should see a dashboard. Click on “Enable APIs” or “Library” which should take you to the library of services that you can connect to. Search and enable the Google Sheets API. Go to Credentials and select “Create credentials”. Select “Service Account” and proceed forward by creating this service account. Name it whatever you want. I used SheetBot. Under “Role”, select Project > Owner or Editor, depending on what level of access you want to grant. Select JSON as the Key Type and click “Create”. This should automatically download a JSON file with your credentials. Rename this credentials file as credentials.json and create a sheets directory in your src/assets directory of your project. The last super important step here is to take the “client email” that is in your credentials file and grant access to that email in the sheet that you’re working in. If you do not do this, you will get an error when trying to access the sheet. </details> <details> <summary>Configure Angular:</summary> Now let's start configuring the Angular project to play nice with the Node.js packages we'll be installing. Edit the tsconfig.app.json and "node" to the "types": section and paste this right below it "typeRoots": [ "../node_modules/@types" ] The two should look like this: ``` "types": [ "node" ], "typeRoots": [ "../node_modules/@types" ] ``` ***Dont forget your commas*** Since we'll be mocking Node.js we need to add in the Node typings to the angular project. Install them by running this from the terminal: ``` npm install @types/node --save ``` Now let's extend Webpack. We'll be following some of the steps that Vojtech Masek provides in this [article](https://medium.com/angular-in-depth/google-apis-with-angular-214fadb8fbc5?) Install the Angular Custom-Webpack: