diff --git a/README.md b/README.md index 288f454..0acb924 100644 --- 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