markdown 2018年EMEA峰会实验室备忘单

Posted 2021-05-06

# TL8 - Programming Adobe Launch Extensions

## Brief Introduction

* Lab intro and house keeping items
* Key concepts
* User interface review & highlights

## Part 1: Scaffold setup (HTML pattern)

### Sandbox

* From `master` branch type `npm run sandbox`
* Review view & lib sandbox with tag firing

### Scaffold tool & configuration view

#### Prep

* `cd extension-html-pattern`
* `git checkout lab`
* `git checkout html-start`

#### Scaffold tool

* `npm run scaffold`
* **First Checkpoint**: `git checkout -f after-scaffold`

#### configuration.html

* A simple form and three functions

Form:  

    ```
    <form>
      <label>
        <span>Hotjar ID</span>
      <input id="hjid">
      </label>
    </form>
    ```

`init` method:  

    ```
    document.getElementById('hjid').value = (info.settings.hjid) || '';
    ```

`getSettings` method:  

    ```
    return {
      hjid: Number(document.getElementById('hjid').value)
    };
    ```

`validate` method:  

    ```
    var hjidField = document.getElementById('hjid');
    var hjid = Number(hjidField.value);
    hjidField.invalid = isNaN(hjid) || hjid < 1;
    return !hjidField.invalid;
    ```

**Second Checkpoint**: `git checkout -f after-config`  

#### Library Module

* loadHotjarCode.js  

`getExtensionSettings()`:  

    ```
    var extensionSettings = turbine.getExtensionSettings();
    ```

**`// hotjar code`**:

    ```
    (function (h, o, t, j, a, r) {
      h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
      h._hjSettings = { hjid: extensionSettings.hjid, hjsv: 6 };
      a = o.getElementsByTagName('head')[0];
      r = o.createElement('script'); r.async = 1;
      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
      a.appendChild(r);
    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
    ```

**Third Checkpoint**: `git checkout -f after-lib`  

#### Sandbox (Take 2)

* `npm run sandbox` (check action)
* `control c`
* Fixes
* Fourth Checkpoint: `git checkout -f fixed-sandbox`  

## Part 2: JS Template setup (JS pattern)

* What's the same?
* What's different?

## Part 3: Q&A & Resources

* Thank you!