Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Workflow enhancements #707

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions .gitpod.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,23 @@ vscode:
- [email protected]:7hF8G3VtB+HNearI5Zw+NA==
- [email protected]:YnjK47pXScU3DMFfQzkkOw==

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unnecessary extra empty line.

Suggested change

- [email protected]:t532ajsImUSrA9N8Bd7jQw==

github:
prebuilds:
# enable for the master/default branch (defaults to true)
master: true
# enable for all branches in this repo (defaults to false)
# enable for all branches in this repo (defaults to false)
branches: true
# enable for pull requests coming from this repo (defaults to true)
# enable for pull requests coming from this repo (defaults to true)
pullRequests: true
# enable for pull requests coming from forks (defaults to false)
# enable for pull requests coming from forks (defaults to false)
pullRequestsFromForks: true
# add a check to pull requests (defaults to true)
# add a check to pull requests (defaults to true)
addCheck: true
# add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
# add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
addComment: false
# add a "Review in Gitpod" button to the pull request's description (defaults to false)
# add a "Review in Gitpod" button to the pull request's description (defaults to false)
addBadge: false
# add a label once the prebuild is ready to pull requests (defaults to false)
addLabel: false
# add a label once the prebuild is ready to pull requests (defaults to false)
addLabel: false
4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules/
.public/
.cache/

1 change: 1 addition & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
11 changes: 6 additions & 5 deletions .theia/settings.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"editor.autoSave": "on",
"[markdown]": {
"editor.wordWrap": "on"
}
"typescript.tsdk": "node_modules/typescript/lib",
"editor.autoSave": "on",
"[markdown]": {
"editor.wordWrap": "on"
},
"editor.formatOnSave": true
}
6 changes: 6 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@
"test": "npm run type-check && npm run lint",
"type-check": "tsc"
},
"husky": {
"hooks": {
"pre-commit": "npm test"
}
},
"engines": {
"node": ">=8.0.0"
},
Expand Down Expand Up @@ -71,6 +76,7 @@
"@types/react-dom": "^16.9.8",
"@types/react-helmet": "^6.0.0",
"gh-pages": "^3.0.0",
"husky": "^4.2.5",
"prettier": "^2.0.5",
"rimraf": "^3.0.2",
"tslint": "^6.1.2",
Expand Down
22 changes: 13 additions & 9 deletions src/blog/bitbucket.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,21 @@ For more convenience, you can also install Gitpod's browser extension (for [Chro

Gitpod also supports other types of Bitbucket URLs, like:

- Opening file URLs
- Opening file URLs

<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/src/master/src/main/java/org/springframework/samples/petclinic/PetClinicApplication.java" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/.../petclinic/PetClinicApplication.java</a></p>
- Opening branches
<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/src/master/src/main/java/org/springframework/samples/petclinic/PetClinicApplication.java" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/.../petclinic/PetClinicApplication.java</a></p>

<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/src/my-branch/" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/src/my-branch/</a></p>
- Opening issues
- Opening branches

<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/issues/1/make-first-name-optional" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/issues/1/make-first-name-optional</a></p>
- Opening pull requests
<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/src/my-branch/" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/src/my-branch/</a></p>

<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/pull-requests/1/allow-omitting-first-name/diff" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/pull-requests/1/allow-omitting-first-name/diff</a></p>
- Opening issues

<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/issues/1/make-first-name-optional" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/issues/1/make-first-name-optional</a></p>

- Opening pull requests

<p style="font-size: 70%;">Example: <a href="https://gitpod.io/#https://bitbucket.org/gitpod/spring-petclinic/pull-requests/1/allow-omitting-first-name/diff" target="blank"><b style="font-weight:700;">https://gitpod.io/#</b>https://bitbucket.org/gitpod/spring-petclinic/pull-requests/1/allow-omitting-first-name/diff</a></p>

Depending on the context, your dev environment will be initialized differently.

Expand All @@ -60,7 +63,8 @@ There is much more you can do to make sure every team member gets a ready-to-cod
Gitpod’s [prebuilt workspaces](/docs/prebuilds/) are key to providing ephemeral, ready-to-code dev environments for your branches and projects. You can configure Gitpod to run your project's build asynchronously every time someone pushes new commits or branches to your repository. So when a developer wants to start coding, she can start immediately, because everything is already prepared.

Enabling prebuilds on your Bitbucket project is done by configuring a Webhook. This can be done automatically: Just trigger the first prebuild on your project manually, and Gitpod will take it from there. To do that, use the prefix `https://gitpod.io/#prebuild/`, as in
> __https://gitpod.io/#prebuild/__`https://bitbucket.org/<myuser>/<myrepo>`

> **https://gitpod.io/#prebuild/**`https://bitbucket.org/<myuser>/<myrepo>`

## We Need Your Feedback

Expand Down
64 changes: 36 additions & 28 deletions src/blog/build-a-webhook-for-google-assistant.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,43 +10,47 @@ image: https://res-3.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/
This post is all about how to build your webhook for your Google Assistant action and host it temporarily on Gitpod and test your code.

## Prerequisites
* Node JS
* Express JS
* Basics on how to use Github

- Node JS
- Express JS
- Basics on how to use Github

If you have these in place, Let's get started.

## What is Gitpod?

First of all I would like to start this section by saying, I ❤ Gitpod. Gitpod is an online IDE for Github. Gitpod provides you with a fully working development environment, including a VS Code-powered IDE and a cloud-based Linux container configured specifically for the project at hand. Just prefix your Github repo URL with "https://gitpod.io/#", So that the final link looks something like this "https://gitpod.io/#https://github.com/<username>/<repo-name>" or you can also use the Gitpod [browser extension](https://chrome.google.com/webstore/detail/gitpod-online-ide/dodmmooeoklaejobgleioelladacbeki?hl=en) to add the Gitpod button to Github page.

<iframe width="560" height="315" src="https://www.youtube.com/embed/bFZMKpDV3GQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Let's start building

I have created a Github repo which will help you get started without any hassle. The repo is basically a boilerplate to get started with building your webhook. The code is written in Node JS, So it would be easier for you to build on top of it if you are already familiar with Node JS. We will be using the [action-on-google](https://www.npmjs.com/package/actions-on-google) Node JS library (This client library makes it easy to create Actions for the Google Assistant and supports Dialogflow, Actions SDK, and Smart Home fulfillment.).

### Create your Action
* Head over to https://console.actions.google.com/ and click on New Project.

- Head over to https://console.actions.google.com/ and click on New Project.

![Google Actions Console](https://res-2.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/Annotation-2019-06-28-141627.png)

* Enter your project name and click on create project.
- Enter your project name and click on create project.

![Google Actions Create New Project Prompt](https://res-1.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/gitpod-action.png)

* Now select a category for your Action.
* Now under the Develop menu, give your action a name.
* Now head over to actions menu in Develop tab and click on **Add your first action**.
- Now select a category for your Action.
- Now under the Develop menu, give your action a name.
- Now head over to actions menu in Develop tab and click on **Add your first action**.

!["Add your first action" button](https://res-1.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/temp2.png)

* In the next section choose **custom intent** and click on **build**. Doing this will redirect you to the **Dialogflow console** and it should look something like this.
- In the next section choose **custom intent** and click on **build**. Doing this will redirect you to the **Dialogflow console** and it should look something like this.

![Dialogflow console](https://res-3.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/temp3.png)

* Click on create to **create** your agent on Dialogflow.
* Once your agent is ready, you will already have two default Intents (Default Fallback Intent and Default Welcome Intent) in place and these two do pretty good at their job.
* Now it's time to create a new intent and enable fulfillments for that intent so that we can serve responses from the webhook that we will be building in the next section.
* Click on create a new intent, give it a name and training phrase (training phrase will be used to invoke the intent). Now that your intent is almost ready scroll down and under fulfillments **enable webhook call** for the new Default welcome intent and the new intent you just created.
- Click on create to **create** your agent on Dialogflow.
- Once your agent is ready, you will already have two default Intents (Default Fallback Intent and Default Welcome Intent) in place and these two do pretty good at their job.
- Now it's time to create a new intent and enable fulfillments for that intent so that we can serve responses from the webhook that we will be building in the next section.
- Click on create a new intent, give it a name and training phrase (training phrase will be used to invoke the intent). Now that your intent is almost ready scroll down and under fulfillments **enable webhook call** for the new Default welcome intent and the new intent you just created.

### Understanding .gitpod.yml

Expand All @@ -69,13 +73,15 @@ When starting or restarting a workspace you typically want to run certain tasks.
Gitpod allows you to configure start tasks in the .gitpod.yml file.

For instance, the start script for this repository is defined as:

```
tasks:
- init: npm install
command: npm start
```

You can have multiple tasks, which are opened on separated terminals.

```
tasks:
- init: npm install
Expand All @@ -84,32 +90,33 @@ tasks:
```

#### `init` command

The init property can be used to specify shell commands that should only be executed after a workspace was freshly cloned and needs to be initialized somehow. Such tasks are usually builds or downloading dependencies. Anything you only want to do once but not when you restart a workspace or start a snapshot.

In our case the `init` command is

```
tasks:
- init: npm install
```


### Get the Gitpod setup running
* Fork my [repo (dialogflow-webhook-boilerplate-nodejs)](https://github.com/anudeepreddy/dialogflow-webhook-boilerplate-nodejs) **or** just click on the run in gitpod button in my repo. (If you do this you have to fork it from the workspace so that you can commit your own changes to your repo).
* Now you can just prefix your repo url with "https://gitpod.io/#". This should take you to Gitpod and start your workspace. The workspace take a little while to start.
* Once the workspace is running you should see something like this.

- Fork my [repo (dialogflow-webhook-boilerplate-nodejs)](https://github.com/anudeepreddy/dialogflow-webhook-boilerplate-nodejs) **or** just click on the run in gitpod button in my repo. (If you do this you have to fork it from the workspace so that you can commit your own changes to your repo).
- Now you can just prefix your repo url with "https://gitpod.io/#". This should take you to Gitpod and start your workspace. The workspace take a little while to start.
- Once the workspace is running you should see something like this.

![Gitpod Workspace](https://res-2.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/Annotation-2019-06-25-171555.png)

* If you notice the Node app is already running in the first terminal. This is automated by a Gitpod configuration file. And the webhook URL is printed on to the second terminal. All the dependencies that are required are also installed while creating the workspace.
- If you notice the Node app is already running in the first terminal. This is automated by a Gitpod configuration file. And the webhook URL is printed on to the second terminal. All the dependencies that are required are also installed while creating the workspace.

![Gitpod integrated Linux Terminals](https://res-5.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/Annotation-2019-06-25-171555-crop.png)

* Now that the webhook is running and i presume that you already have your agent on Dialogflow (If not create an agent), Next thing you need to do is to copy the webhook URL from the terminal and paste it in the Fulfillments section in the Dialogflow Console.
- Now that the webhook is running and i presume that you already have your agent on Dialogflow (If not create an agent), Next thing you need to do is to copy the webhook URL from the terminal and paste it in the Fulfillments section in the Dialogflow Console.

![Dialogflow console Fullfillments section](https://res-5.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/Annotation-2019-06-25-172359.png)


* Open the index.js file which contains the code for the webhook.
- Open the index.js file which contains the code for the webhook.

![File index.js which contains the source code for the webhook](https://res-1.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/carbon--1-.png)

Expand All @@ -122,25 +129,26 @@ We will be adding the following code to display a card when the new intent is in

Replace the URL's and other contents in the code and stop the previous instance of the app from running and start it again after you have made changes to the code by running `npm start` in the terminal.

* To test your action you can click on **See how it works in Google Assistant** in the Dialogflow console.
- To test your action you can click on **See how it works in Google Assistant** in the Dialogflow console.

![See how it works in Google Assistant](https://res-3.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/Annotation-2019-06-28-175558.png)

* Invoking the intent would give you response similar to this.
- Invoking the intent would give you response similar to this.

![Response on invoking the intent](https://res-5.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/Screenshot_20190628-181019.png)

Refer to the links below to add your own functionalities.

## Links to Refer
* If you would like to learn more about the actions-on-google library, you can find it here - https://www.npmjs.com/package/actions-on-google
* Go through these examples - https://developers.google.com/actions/samples/github
* Rich responses example - https://github.com/actions-on-google/dialogflow-conversation-components-nodejs

- If you would like to learn more about the actions-on-google library, you can find it here - https://www.npmjs.com/package/actions-on-google
- Go through these examples - https://developers.google.com/actions/samples/github
- Rich responses example - https://github.com/actions-on-google/dialogflow-conversation-components-nodejs

## Conclusion

Gitpod can make your life much simpler by automating your development setup just by adding a simple configuration file to your repo. You can refer to the Gitpod [Docs](https://www.gitpod.io/docs/) to learn more about the platform. Gitpod lets you work with unlimited workspace but with 100hrs/month runtime. It also provides Personal and unlimited plans as well. If you are a student then you can claim Gitpod Unlimited plan for just $9.
Gitpod can make your life much simpler by automating your development setup just by adding a simple configuration file to your repo. You can refer to the Gitpod [Docs](https://www.gitpod.io/docs/) to learn more about the platform. Gitpod lets you work with unlimited workspace but with 100hrs/month runtime. It also provides Personal and unlimited plans as well. If you are a student then you can claim Gitpod Unlimited plan for just \$9.

![Animated character waving hand with a smile](https://res-3.cloudinary.com/anudeepc/image/upload/q_auto/v1/blog-images/character.gif)
# Happy coding with Gitpod ✨

# Happy coding with Gitpod ✨
Loading