original-coast-clothing 的安装和配置教程

1. 项目基础介绍和主要编程语言

original-coast-clothing 是一个示例性的开源项目，由Facebook提供。该项目是一个虚构的服装品牌——Original Coast Clothing（OC）的Messenger机器人，旨在展示如何利用Messenger平台的关键特性，为用户带来优秀的客户体验。该项目主要使用的编程语言是JavaScript。

2. 项目使用的关键技术和框架

项目使用以下技术和框架：

• Node.js: 服务器端的JavaScript运行环境。
• Express: 基于Node.js的Web应用框架，用于快速构建单页、多页或混合Web应用。
• Heroku: 云服务平台，用于部署应用。
• ngrok: 用于本地开发的HTTP隧道服务，可以使本地服务器通过互联网被访问。
• Facebook Messenger Platform: 用于创建与Facebook Messenger集成的机器人。

3. 项目安装和配置的准备工作及详细步骤

准备工作

在开始安装之前，请确保您的系统中已安装以下工具：

• Node.js（10.x或更高版本）
• Git
• 用于部署的Heroku CLI（可选）
• 本地隧道服务ngrok（可选）

安装步骤

步骤1：克隆项目

首先，您需要在本地克隆项目仓库：

git clone [e-mail]:fbsamples/original-coast-clothing.git
cd original-coast-clothing

步骤2：安装依赖

在项目目录中，安装所需的npm依赖：

npm install

或者，如果您使用Yarn：

yarn install

步骤3：配置环境变量

复制.sample.env文件为.env，并根据您的应用程序和Facebook页面信息编辑它：

cp .sample.env .env

编辑.env文件并填写如下信息：

APP_ID=您的Facebook应用ID
APP_SECRET=您的Facebook应用密钥
PAGE_ID=您的Facebook页面ID
APP_URL=您的应用程序URL（如果是ngrok，则为ngrok提供的URL）
VERIFY_TOKEN=您为Webhook验证生成的token

步骤4：运行应用程序

在项目目录中，运行以下命令以启动应用程序：

node app.js

此时，您应该能够在浏览器中通过http://localhost:3000访问应用程序。

步骤5：配置Webhook和Messenger档案

使用.env文件中创建的VERIFY_TOKEN，通过浏览器或cURL调用以下端点以配置Webhook：

http://localhost:3000/profile?mode=all&verify_token=verify-token

步骤6：测试应用程序

通过向您的Facebook页面发送消息来测试应用程序。如果一切配置正确，您应该会在终端看到Webhook被调用的信息，并在Messenger中收到响应。

部署到Heroku（可选）

如果您希望将应用程序部署到Heroku，请按照以下步骤操作：

步骤1：安装Heroku CLI

从Heroku官网下载并安装Heroku CLI。

步骤2：创建Heroku应用

使用Heroku CLI创建一个新的Heroku应用：

heroku apps:create

步骤3：设置环境变量

在Heroku应用仪表板上设置环境变量，或使用以下命令：

heroku config:set PAGE_ID=您的Facebook页面ID
# 其他需要的环境变量

步骤4：部署代码

将代码推送到Heroku：

git push heroku main

步骤5：查看日志

查看应用程序的实时日志输出：

heroku logs --tail

步骤6：配置Webhook和Messenger档案

使用Heroku应用的URL和配置变量中设置的VERIFY_TOKEN来配置Webhook。

步骤7：测试应用程序

向您的Facebook页面发送消息以测试应用程序是否按预期运行。

按照上述步骤，您可以成功安装和配置original-coast-clothing项目，并开始在Facebook Messenger上创建机器人。