integration guide: Update Hello World walkthrough.

This commit is contained in:
Christie Koehler 2016-08-04 14:42:08 -07:00 committed by Tim Abbott
parent dcb92d41b8
commit 4cd28e5e1f
1 changed files with 24 additions and 22 deletions

View File

@ -137,9 +137,8 @@ for a webhook named 'MyWebHook'.
### Files that need to be updated
* `templates/zerver/integrations.html`: Edit to add end-user documentation and
integration icon. See [Documenting your
integration](#documenting-your-integration) for details.
* `templates/zerver/integrations.html`: Edit to add end-user documentation. See
[Documenting your integration](#documenting-your-integration) for details.
* `zerver/test_hooks.py`: Edit to include tests for your webbook. See [Testing
and writing tests](testing.html) for details.
* `zerver/lib/integrations.py`: Add your integration to
@ -281,24 +280,28 @@ Finally, we return a 200 http status with a JSON format success message via
### Step 2: Create an api endpoint for the webhook
In order for a webhook to be externally available, it must be mapped to a url.
This is done in `zproject/urls.py`. Look for the lines:
This is done in `zerver/lib/integrations.py`.
Look for the lines beginning with:
```
# Incoming webhook URLs
urls += [
# Sorted integration-specific webhook callbacks.
WEBHOOK_INTEGRATIONS = [
```
And you'll find the entry for Hello World:
```
url(r'^api/v1/external/helloworld$', 'zerver.views.webhooks.helloworld.api_helloworld_webhook'),
WebhookIntegration('helloworld', display_name='Hello World'),
```
This tells the Zulip api to call the `api_helloworld_webhook` function in
`zerver/views/webhooks/helloworld.py` when it receives a request at
`/api/v1/external/helloworld`.
This line also tells Zulip to generate an entry for Hello World on the Zulip
integrations page using `static/images/integrations/logos/helloworld.png` as its
icon.
At this point, if you're following along and/or writing your own Hello World
webhook, you have written enough code to test your integration.
@ -415,19 +418,16 @@ DONE!
Next, we add end-user documentation for our webhook integration to
`templates/zerver/integrations.html`.
First, add a `div` that displays the logo of your integration and a link to its
documentation:
There are two parts to the end-user documentation on this page.
```
<div class="integration-lozenge integration-helloworld">
<a class="integration-link integration-helloworld" href="#helloworld">
<img class="integration-logo" src="/static/images/integrations/logos/helloworld.png" alt="Hello World logo" />
<span class="integration-label">Hello World</span>
</a>
</div>
```
The first is a `div` with class `integration-lozenge` for each integration.
This div shows the logo of your webhook, its name, and a link to its
installation and usage instructions.
And second, a div with the usage instructions:
Because there is an entry for the Hello World webhook in WEBHOOK_INTEGRATIONS
in `zerver/lib/integratins.py`, this div will be generated automatically.
The second part is a `div` with the webhook's usage instructions:
```
<div id="helloworld" class="integration-instructions">
@ -463,8 +463,10 @@ And second, a div with the usage instructions:
</div>
```
Both blocks should fall alphabetically so we add these two divs between the
blocks for Github and Hubot, respectively.
These documentation blocks should fall alphabetically. For the
`integration-lozenge` div this happens automatically when the html is
generated. For the `integration-instructions` div, we have added the div
between the blocks for Github and Hubot, respectively.
See [Documenting your integration](#documenting-your-integration) for further
details, including how to easily create the message screenshot.