Fix a lot

.gitignore

@@ -13,3 +13,6 @@ jspm_packages
 .DS_Store
 
 .vscode
+.build
+lib/
+

.slugignore

@@ -0,0 +1,2 @@
+cloud-functions-for-firebase/
+serverless-aws/

README.md

@@ -1,26 +1,55 @@
-# Slack Rain Clouds Rader (雨雲レーダー) App on Heroku
+# Japan Weather Radar Map (雨雲レーダー) on Slack
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/seratch/slack-rain-clouds-rader/tree/master)
+This is a working example app which displays Japan weather radar maps on Slack. This application is built with [Bolt⚡️](https://github.com/SlackAPI/bolt) and [Yahoo! JAPAN Static Map API (雨雲レーダー表示)](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html#exp_weather).
 
-## Slack ⚡️ Bolt
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/seratch/slack-weather-radar-map/tree/master)
 
-A framework to build Slack apps, fast.
+## `/amesh {prefecture name}`
 
-* https://slack.dev/bolt
-* https://github.com/SlackAPI/bolt
+This command posts an animated GIF showing the forecasting weather map.
 
-## Yahoo! JAPAN 雨雲レーダー表示 API
+<img src="https://raw.githubusercontent.com/seratch/slack-weather-radar-map/master/images/demo_amesh_hiroshima.gif" height=400/>
 
-* https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html#exp_weather
+## `/amesh {prefecture name} now`
 
-## How to build
+This command instantly posts the present moment image.
+
+<img src="https://raw.githubusercontent.com/seratch/slack-weather-radar-map/master/images/demo_amesh_tokyo_now.gif" height=400/>
+
+## `/amesh {prefecture name} today`
+
+This command posts the transition of weather map in the last 24 hours.
+
+<img src="https://raw.githubusercontent.com/seratch/slack-weather-radar-map/master/images/demo_amesh_okinawa_today.gif" height=400/>
+
+## Map Mode
+
+https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html#request-param
+
+The defualt map mode is `map`. If you'd like to customize the appearance, set `YAHOO_JAPAN_API_MAP_MODE` env variable with either of the following values.
+
+* map - 通常の地図
+* photo - 航空写真
+* map-b1 - 地下街
+* hd - ハイビジョン地図
+* hybrid - ハイブリッド地図
+* blankmap - 白地図
+* osm - Open Street Map
+
+Here is the output with `hybrid` mode.
+
+<img src="https://raw.githubusercontent.com/seratch/slack-weather-radar-map/master/images/demo_amesh_fukuoka_hybrid_mode.gif" height=300/>
+
+## How to run this app
 
 ### Create a Slack App
 
 https://api.slack.com/apps
 
 * Features > OAuth & Permissions:
   * Scopes:
+    * "bot"
+    * "commands"
     * "files:write:user"
   * Click "Save Changes"
 * Features > Slash Commands:
@@ -38,13 +67,40 @@ https://api.slack.com/apps
 * Settings > Install App:
   * Complete "Install App"
 
+### Run the app on your laptop
+
+```bash
+# prep
+nvm use 10.13.0 # Bolt runs on Node 10.13+
+cp -p _env .env
+vi .env
+source .env
+npm i
+
+# run the app
+npm run local
+
+# on another terminal window
+ngrok http 3000
+```
+
 ### Deploy to Heroku
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/seratch/slack-rain-clouds-rader/tree/master)
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/seratch/slack-weather-radar-map/tree/master)
 
 * Set env variables on Heroku
+  * (Slack) Slash command name: `amesh` or your favorite one
   * (Slack) Settings > Basic Information > App Credentials > Siginging Secret
   * (Slack) Settings > Install App > Bot User OAuth Access Token
   * (Yahoo! JAPAN) Application ID (https://e.developer.yahoo.co.jp/dashboard/)
+  * (Yahoo! JAPAN) Static Map Mode (https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html#request-param)
+
+<img src="https://raw.githubusercontent.com/seratch/slack-weather-radar-map/master/images/screenshot_heroku_deployment.png" width=500/>
+
+### Run `/amesh` commands on Slack
 
-[![Heroku deployment page](https://raw.githubusercontent.com/seratch/slack-rain-clouds-rader/master/deploy_to_heroku.png)](https://heroku.com/deploy?template=https://github.com/seratch/slack-rain-clouds-rader/tree/master)
+```bash
+/amesh # displays weather map for Tokyo area
+/amesh osaka now # displays a single image for Osaka area
+/amesh hokkaido today # displays the transition of weather map in the last 24 hours for Hokkaido area
+```

_env

@@ -1,3 +1,5 @@
 export SLACK_SIGNING_SECRET=cda6e9cbf46a********************
 export SLACK_BOT_TOKEN=xoxb-************-************-************************
-export YAHOO_JAPAN_API_CLIENT_ID=dj00aiZpP****************************************
+export YAHOO_JAPAN_API_CLIENT_ID=dj00aiZpP****************************************
+export YAHOO_JAPAN_API_MAP_MODE=map # https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html
+export SLASH_COMMAND_NAME=amesh

app.json

@@ -1,13 +1,25 @@
 {
-    "name": "Slack Amesh Backend",
-    "description": "Slack Amesh",
-    "repository": "https://github.com/seratch/slack-rain-clouds-rader",
+    "name": "Slack Weather Radar Map",
+    "description": "Slack App backend which returns weather radar informaton in Japan.",
+    "repository": "https://github.com/seratch/slack-weather-radar-map",
     "keywords": [
         "Slack",
         "Slack API",
-        "Heroku"
+        "Bolt",
+        "TypeScript",
+        "Heroku",
+        "Yahoo! JAPAN APIs",
+        "Weather Radar Map"
     ],
     "env": {
+        "SLASH_COMMAND_NAME": {
+            "description": "Name the command and set the same one in Slack App configuration",
+            "value": "amesh"
+        },
+        "TZ": {
+            "description": "This app is supposed to be usd in Japan Standard Time",
+            "value": "Asia/Tokyo"
+        },
         "SLACK_SIGNING_SECRET": {
             "description": "Slack Signing Secret - https://api.slack.com/apps",
             "value": "cda6e9cbf46a********************"
@@ -19,6 +31,10 @@
         "YAHOO_JAPAN_API_CLIENT_ID": {
             "description": "Yahoo! JAPAN Application ID - https://e.developer.yahoo.co.jp/dashboard/",
             "value": "cda6e9cbf46a********************"
+        },
+        "YAHOO_JAPAN_API_MAP_MODE": {
+            "description": "Yahoo! JAPAN Static Map API (map,photo,map-b1,hd,hybrid) - https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html#request-param",
+            "value": "map"
         }
     },
     "image": "heroku/nodejs"

cloud-functions-for-firebase/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "test": "{your own project}"
+  }
+}

cloud-functions-for-firebase/.gitignore

@@ -0,0 +1,67 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+config.js

cloud-functions-for-firebase/README.md

@@ -0,0 +1,37 @@
+# Japan Weather Radar Map (雨雲レーダー) on Slack
+
+This is a working example app which displays Japan weather radar maps on Slack. This application is built with [Bolt⚡️](https://github.com/SlackAPI/bolt) and [Yahoo! JAPAN Static Map API (雨雲レーダー表示)](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html#exp_weather).
+
+## Setup
+
+Use node 10.13+ and its corresponding npm.
+
+```
+vi .firebaserc # set your own project
+
+npm install -g firebase-tools
+cd functions
+npm i
+cp -p _config.js src/config.js # and modify src/config.js
+cd -
+```
+
+## How to deploy
+
+```bash
+firebase deploy --only functions
+```
+
+## How to configure Slack apps/GCP
+
+### Slack App
+
+Set `https://{your domain}.cloudfunctions.net/slack/events` as the Request URL for event subscriptions.
+
+### Cloud Functions for Firebase
+
+You have nothing to configure. Don't forget enabling billing info if it's your first time to use it.
+
+## LICENSE
+
+The MIT License

cloud-functions-for-firebase/firebase.json

@@ -0,0 +1,8 @@
+{
+  "functions": {
+    "predeploy": [
+      "npm --prefix \"$RESOURCE_DIR\" run lint",
+      "npm --prefix \"$RESOURCE_DIR\" run build"
+    ]
+  }
+}

cloud-functions-for-firebase/functions/.gitignore

@@ -0,0 +1,8 @@
+## Compiled JavaScript files
+**/*.js
+**/*.js.map
+
+# Typescript v1 declaration files
+typings/
+
+node_modules/