Example

Configure the Example

The following are the steps to configure the example for the workshop.  We will do these together during the workshop:

1. Setup the front-end files by building a Github repository from a template:

  • Navigate to https://github.com/theGove/amcis_workshop_start
  • Click "Use this Template" in the upper right corner
  • Give your new repository a name, such as "amcis_workshop"
  • Click the "Create repository from Template" button near the bottom of the page
2. Make a local copy of your front-end files
  • At the end of Step 1 (above) you should be showing the Github Repository you just just created.
  • Click the green "Code" button and copy the https clone link that gets displayed.  It starts wtih "https://github.com".
  • Open a command prompt
    • Enter the following command, replacing <repo link> with the https clone link that is on the clipboard
git clone <repo link>

 This will create a local folder with all the files from the Github repository.

  • Change directories to folder just created (it has the same name as the Github repository you created in step 1) by entering the following command, replacing <repo name> with the name of the folder just created.

cd <repo name>

3. Open VS code to edit the local copy of the repository 

  • Enter the following command 

code .

This will open VS code ready to edit your project.  You will make the first edits to these files in step 10 below.

4. Copy the Airtable base to hold app data:

  • Navigate to https://airtable.com/shrGqO7hGTeIdtcPi
  • Click the "Copy Base" button near the top of the page. This will make a copy of the base, over which, you will have full control
  • Edit the single employee record to have your first name, last name, and email address.

5. Setup the back-end files by copying a Google Apps Script Project:

  • Navigate to https://script.google.com/home/projects/1Dq2...
  • Click the "Make a copy" icon in the upper right corner.  This will make a copy of the project in the top-level folder of your google drive.
  • Change the name of the project from "copy of inventory_system" to "inventory_system"

6. Enter your Airtable Credentials into the "config.gs" file of the Google Apps Script project you created in step 5 above. 

  • Navigate to https://airtable.com/account
  • Click the "Generate API Key" button and copy the newly created key into the constant named "api_key" in config.gs (line 4)

  • Navigate to https://airtable.com/api
  • Click on the name of the Airtable base you created in step 3 above.  Find the base ID near the top of the "Introduction" section after the text "The ID of this base is".  Copy the base ID (without the trailing period) into the constant named "base_id" in config.gs (line 5)

7. Set up a DynamoDB table on AWS:

  • Navigate to https://aws.amazon.com/
  • Sign in to your AWS account.
  • Set the Region (upper right) to us-west-2 (Oregon)
  • Using the AWS search bar, locate "DynamoDB"
  • Follow the directions from your instructor to create a table named "users" with a partition key named "email" of type of string
  • Be sure to remove the alerts that DynamoDB builds in CloudWatch because they will end up costing you money.

8. Create a pair of AWS Security Credentials to authorize back-end scripts to interact with AWS Services

  • While logged in to AWS. Click your account name in the upper-right corner.  Then choose "Security Credentials" from the dropdown list.
  • On the security credentials panel, choose "Access keys (access key ID and secret access key)".
  • Click "Create New Access Key", then "Show Access Key".  Copy the "Access Key ID" and the "Secret Access Key" into the "aws_key" and "aws_secret" constants the in "config.gs" file of the google apps script project you created in step 2 above. 

9. Run the "initial_setup" from "config.gs" in the Google Apps Script project.

  • With "config.gs" as the active file in the Google Apps Script Editor, click the "Run" button that appears just above the code.
  • Follow the instructor's directions to authorize the script
  • Once the script runs, you will know it succeeded if the output is similar to the following:
7:56:15 AM
Notice
Execution started
7:56:15 AM
Info
DynamoDB Response {}
7:56:15 AM
Info
Done.
7:56:16 AM
Notice
Execution completed

10. Deploy your Google Apps Script

  • From the Google Apps Script editor in the project you created in step 5 above, click "deploy" in the upper-right corner
  • Copy the Deployment ID into the const named "gas_deployment_id" in the file named "config.js" in the Github project you created in step 1 above.  The project should already be open in VS code if you completed step 3 above.

11. Test your configuration

  • Click the "Go Live" button in the VS Code status bar (near the bottom right of VS Code)

  • This should open the app in your default browser.  Click the "menu" icon in the upper left corner.

  • Login  using your email address and  the following password
Pa55w0rd

  • Click the "Menu" icon again and verify that your  name now appears in the menu, 

Next