web

Ground Web Console in Angular

First-time setup

Before proceeding, follow instructions in ../README.md.

Add Google Maps API key

1. If you don't already have one, generate a new API key by following instructions at https://developers.google.com/maps/documentation/android-sdk/signup#quick-guide.

   Note: Alternatively, you can access an existing project's key via Google Cloud Platform under APIs > Services > Credentials.

2. Write the key to src/environments/.google-maps-config.ts as follows:

   export const googleMapsConfig = {
     apiKey: 'YOUR_API_KEY',
   };

   Where YOUR_API_KEY is your Google Maps API key.

Download Firebase API key

1. Visit https://console.firebase.google.com and click "Add project".

2. Once your project is created, on the welcome page under "Get started by adding Firebase to your app", click the Web icon (</>).

3. In Step 1, select "Also set up Firebase hosting for this app".

4. Accept defaults for remaining steps to return the main console page.

5. Click "1 app" and then click the gear icon next to your app name.

6. Scroll down to "Firebase SDK snippet" and select "Config".

7. Copy the text that appears in "const firebaseConfig..." into a new file in src/environments/.firebase-config.ts, prepending the keyword export to the file contents. The contents of the file should look roughly like this:

   export const firebaseConfig = {
     apiKey: 'soMeReallYlOngApIkeyWouLdGoHere123',
     authDomain: 'my-app.firebaseapp.com',
     databaseURL: 'https://my-app.firebaseio.com',
     projectId: 'my-app',
     storageBucket: 'my-app.appspot.com',
     messagingSenderId: '12345678',
     appId: '1:12345678:web:abc123etcetc',
   };

Add local environment config

Create a file in environments/.backend-config.json containing the following:

{
  "offlineBaseMapSources": []
}

Install dependencies

Install required npm dependencies:

$ npm install

Development server

Run npm run start to host your web app locally, then navigate to http://localhost:4200/survey/new to create a new Ground project. The app will automatically rebuild and reload if you change any of the source files.

Code scaffolding

Run npm run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run npm run build:dev to build the project. The build artifacts will be stored in the dist/ directory. Use the npm run build:prod flag for a production build.

Running unit tests

Run npm run test to execute run tests locally in Chrome using

Karma test runner.

Running end-to-end tests

Run npm run e2e to execute the end-to-end tests via Protractor.

Deploying web app to development Firebase instance

Run npm run deploy <project-id>.

Further help

To get more help on the Angular CLI use npm run ng help or go check out the Angular CLI README.