chore(readme): update readme.md

ALiangLiang · Apr 14, 2019 · 6d4d805 · 6d4d805
1 parent 7ec3b1a
commit 6d4d805
Showing 1 changed file with 25 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -13,9 +13,25 @@ Component kit of Messenger platform. Friendly for developers and help you valida
 structure of bot message. This project is write by TypeScript, so you can use it
 with [**Snippets**](https://code.visualstudio.com/docs/languages/typescript#_snippets).
 
-## Example
+## Table of Contents
+
+- [Usage](#Usage)
+- [Features](#Features)
+- [Notes](#Notes)
+- [Contributing](#Contributing)
+- [TODO](#TODO)
+
+## Usage
+
+```sh
+# Install this dependency first
+npm install messenger-bot-components --save
+```
 
 ```js
+// index.js
+import { TemplateGeneric, ButtonUrl, ButtonPostback } from 'messenger-bot-components'
+
 const body = {
   recipient: {
     id: 'USER_ID'
@@ -40,106 +56,18 @@ const body = {
   ])
 }
 
+console.dir(JSON.stringify(JSON.parse(body)))
+// Output the schema that you can send to Messenger
+
 // Directly send to Messenger and client.
 SendToMessenger(body)
 ```
 
-## Feature
-
-### Friendly codes
-
-Sometimes you are tired of complicated codes looks like
-
-#### original codes
-
-```js
-const body = {
-  recipient: {
-    id: 'USER_ID'
-  },
-  message: {
-    attachment: {
-      type: 'template',
-      payload: {
-        template_type: 'generic',
-        elements: [
-          {
-            title: 'Welcome to Peter\'s Hats',
-            image_url: 'https://petersfancybrownhats.com/company_image.png',
-            subtitle: 'We\'ve got the right hat for everyone.',
-            default_action: {
-              type: 'web_url',
-              url: 'https://peterssendreceiveapp.ngrok.io/view?item=103',
-              messenger_extensions: true,
-              webview_height_ratio: 'tall',
-              fallback_url: 'https://peterssendreceiveapp.ngrok.io/'
-            },
-            buttons: [
-              {
-                type: 'web_url',
-                url: 'https://petersfancybrownhats.com',
-                title: 'View Website'
-              }, {
-                type: 'postback',
-                title: 'Start Chatting',
-                payload: 'DEVELOPER_DEFINED_PAYLOAD'
-              }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
-```
-
-OMG!! It's sooooooo ugly. But now, you can write it in another way.
+## Features
 
-#### use this module
-
-```js
-import { TemplateGeneric, ButtonUrl, ButtonPostback } from 'messenger-bot-components'
-
-const body = {
-  recipient: {
-    id: 'USER_ID'
-  },
-  message: new TemplateGeneric([
-    TemplateGeneric.Element('Welcome to Peter\'s Hats', {
-      imageUrl: 'https://petersfancybrownhats.com/company_image.png',
-      subtitle: 'We\'ve got the right hat for everyone.',
-      defaultAction: new TemplateGeneric.Element.DefaultAction(
-        'https://webview',
-        {
-          webviewHeightRatio: TemplateGeneric.Element.DefaultAction.WebviewHeightRatio.COMPACT,
-          messengerExtensions: true,
-          fallbackUrl: 'https://website-not-support-messenger-extensions'
-        }
-      ),
-      buttons: [
-        new ButtonUrl('View Website', 'https://petersfancybrownhats.com'),
-        new ButtonPostback('Start Chatting', 'DEVELOPER_DEFINED_PAYLOAD')
-      ]
-    })
-  ]).toJSON()
-}
-```
-
-## Usage
-
-`npm install messenger-bot-components --save`
-
-```js
-import { Text } from 'messenger-bot-components'
-
-const body = {
-  recipient: {
-    id: 'USER_ID'
-  },
-  message: new Text('some words')
-};
-// And then you can pass this body to user.
-```
+- Friendly code
+- Snippets (If your IDE support it. e.g. [VS Code](https://code.visualstudio.com/docs/languages/typescript#_snippets))
+- Type and parameter checking and restrictions (If you write with TypeScript)
 
 ## Notes
 
@@ -148,7 +76,7 @@ arguments. Other optional parameters setting in last argument.
 For example:
 
 ```js
-// The first two arguments are required.
+// In url button, the first two arguments are required.
 // Last argument with object is used to setting optional parameters.
 new ButtonUrl(
   'View Website', /* required */
@@ -173,7 +101,6 @@ If you like this package, welcome to help me maintain the tool. :)
 - [ ] update more components
 - [ ] a cute logo
 - [ ] perfect english README
-- [ ] schedule ci
 
 ## License