#Introduction

In this lab, you'll generate a starter app.

#Steps

<details>
<summary>Create the application</summary>

Use a terminal window to navigate to the root of your Neo workspace, 
and run the following command. **Important:** Rather than taking all defaults, you _must_ choose the GoogleMaps option.

    npm run create-app-training

Name the app `Yelp`.

If you run the app you'll get a runtime error telling you the api key is missing.
You add the API key in the next step.

    Google Maps JavaScript API warning: NoApiKeys

??Add the Google Maps API key

Edit `apps/yelp/neo-config.json` and add an entry for _googleMapsApiKey_.

<pre style="color:lightgray;">
{
    "appPath": "../../apps/yelp/app.mjs",
    "basePath": "../../",
    "environment": "development",
    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
    "mainThreadAddons": [
        "DragDrop",
        "GoogleMaps",
        "Stylesheet"
    ],
    <span style="font-weight:bold;color:limegreen">"googleMapsApiKey": "AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA",</span>
    "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
}
</pre>

Refresh your browser window and you should see the starter app without any warnings.
</details>

<details>
<summary>Change `MainView` to be a panel</summary>

Replace the entire contents of `MainView` with this code. 

<pre class="runnable readonly text">
import Base from '../../../node_modules/neo.mjs/src/container/Panel.mjs';
import Controller from './MainViewController.mjs';
import ViewModel from './MainViewModel.mjs';

class MainView extends Base {
    static config = {
        className: 'Junk.view.MainView',

        controller: {module: Controller},
        model: {module: ViewModel},

        headers: [{
            dock: 'top',
            html: 'banner'
        }, {
            dock: 'top',
            html: 'filter'
        }, {
            dock: 'right',
            html: 'details',
            width: 300
        }],
        items: [{
            html: 'tab container'
        }]
    }
}

Neo.setupClass(MainView);

export default MainView;
</pre>

We'll learn about panels later, but in a nutshell, a panel is a container
that has a special `headers:[]` config that lets you add components to the
top, right, bottom, or left edges of the container.

What does the code do?

- Changes the view to be a panel
- Adds three docked headers which are placeholders for classes you'll create
    - The banner at the top
    - The filter container at the top
    - The business details container at the right

Verify that the app runs.

</details>