UI Content / Copy Management Demo

Easily edit all of the string literals in your source code project (UI Copy / Content) from a google spreadsheet.

This is an example of a script which uses the following skypager components:

• Document Helper - treat each JS and Markdown file as a database
• Google Sheet Helper - turn any google sheet into javascript objects, change the object, change the sheet.

It uses a Google Spreadsheet where each row corresponds to a source code location in your project. We're only interested in certain string literals for this example.

Once it puts all of these values in the sheet, you or somebody else can edit the sheet, and apply those edits back to the source code using these scripts.

Required Setup

You'll need

1. a Service Account JSON
2. The Google Drive and Google Sheets APIs
3. Google Sheets shared with the client_email from the service account.

Server to Server Auth

Using this module requires using interacting with Google APIs using their server to server auth method, which is powered by Service Account credentials.

A Service Account credential looks like:

{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "your-private-key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nYOUR-PRIVATE_KEY\n-----END PRIVATE KEY-----\n",
  "client_email": "[email protected]",
  "client_id": "your-client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/your-project-id.iam.gserviceaccount.com"
}

You can manage your Service Accounts by going to the Google Cloud Console and creating a project or selecting the one you want to work with.

Once you are there, under the IAM & admin section you can click on Service Accounts. (e.g. https://console.cloud.google.com/iam-admin/serviceaccounts?project=your-project-id)

Create a service account, and download the JSON to secrets/serviceAccount.json, or some other path.

You'll use this service account when activating the helper, as you'll see in USAGE.

Enable Google APIs

You'll also need to enable the Google Drive and Google Sheets APIs.

In the Google Cloud Console, under APIs and Services choose Library (e.g. https://console.cloud.google.com/apis/library?project=your-project-id)

Share Your Sheets

With the server to server auth set up, the last step is to share the sheets you want to load with the service account client email you'll be using to access them.

You can find the email address in client_id property of the service account json

Usage

You can run the following command to start the web application with hot module reloading, and open it in a browser

$ yarn dev --open

You can run the next command to open the google sheet

$ skypager sync --open 

Running the following will read all of the React Components in your project, parse their AST to find string literals, and publishes each instance to google sheets.

$ skypager sync 

Running the following will read the google sheet, and apply any changes it needs to the React Components so that they are in sync.

$ skypager sync inbound

If you get stuck

$ skypager sync help

How It Works

See The Walkthrough

You can even confirm that the walkthrough is valid! This command uses the Test Code Blocks Script

$ GCLOUD_PROJECT=skypager-4dab8 skypager test-code-blocks WALKTHROUGH.md --test-helpers @skypager/devtools/testing/mocha-test-setup

Which results in the following output:

UI Copy Manager Walkthrough

     Step Zero: We setup the project to use the google sheet helper

     Step One: Uses @skypager/helpers-document to parse your React Components

     Step Two: Find all of the StringLiteral or JSXAttribute nodes in the file

     Step Three: Get the string value, and create an entry for this node in the spreadsheet

4/4 tests PASSED