使用 Phoenix 发送短信

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

Elixir编程语言正稳步获得开发者的青睐，这并非偶然。它是一种函数式语言，语法直观，并且拥有活跃的社区支持。Elixir 生态系统中最流行的 Web 框架是Phoenix 。与 Elixir 一样，Phoenix 的设计理念是直观易用，且入门门槛低。

作为一名经常使用 Ruby 和 Rails 进行开发的人，我一直很想学习 Elixir 和 Phoenix。我终于下定决心，开始学习 Elixir 的教程，并在上周末创建了我的第一个简单的 Phoenix 应用，它可以与Nexmo短信 API 交互并发送短信。

让我们一起来看看我是如何搭建它的。

启动 Phoenix 服务器

首先，你需要确保 Elixir 和 Phoenix 都已安装在你的系统上。你可以参考这里的指南和这里的指南来完成安装。

安装好语言和框架后，您可以通过在控制台中运行以下命令来创建一个新的 Phoenix 应用程序：

$ mix phx.new sms_app

这将在目录中创建新应用程序的基本框架/sms_app。为了简单起见，我建议您在设置提示询问是否要安装依赖项时选择“是”。Phoenix 使用 npm 来获取和安装其 Node 依赖项。

请cd进入您的新应用目录。进入目录后，我们需要为应用程序创建数据库。默认情况下，Phoenix 使用 PostgreSQL，并假定存在postgres/postgresPostgreSQL 超级用户。您可以先修改 Phoenix 数据库设置config/devs.exs，准备就绪后，mix ecto.create从控制台运行命令来设置应用程序的数据库。

现在运行程序mix phx.server并在浏览器中访问，https://localhost:4000您将看到来自 Phoenix 的欢迎页面。

您的 Phoenix 服务器已启动并运行！现在，让我们设置应用程序以与 Nexmo 短信 API 交互并开始发送短信。不过，在此之前，我们需要创建一个 Nexmo 帐户并获取 API 凭据。

创建 Nexmo 帐户

获取 API 凭证

创建 Nexmo 账户是免费的，创建完成后，您还会获得免费额度，可以立即开始使用 Nexmo API。请前往Nexmo 控制面板上的注册页面并提交注册表单。

注册完成后，请导航至“设置”页面并获取您的 API 凭据。

购买虚拟号码

在许多国家，您可以发送短信而无需有效的发件人电话号码，但如果您计划在美国发送短信，例如，则需要配置一个 Nexmo 虚拟号码并将其用作您的原始电话号码。

使用 Nexmo 获取虚拟号码有两种方法。您可以使用Nexmo CLI，并在控制台中执行以下命令：

$ nexmo number:search US --sms
14155550100
14155550101
14155550102
$ nexmo number:buy 14155550102 --confirm
Number purchased: 14155550102

以上显示的数字仅为示例输出。运行该命令后，您将实时看到可供购买的数量。您还可以通过在第一个命令中将美国国家/地区代码替换为其他国家/地区的代码来指定美国以外的特定国家/地区。

获取号码的另一种方法是导航到Nexmo 控制面板中的“号码”页面，然后使用网页界面购买号码。

配置您的 Phoenix 应用程序

定义路线

打开应用程序的路由配置/lib/sms_app_web/router.ex，并在代码块中添加以下内容scope "/", SmsAppWeb do：

get "/sms", SmsController, :index

post "/send", SmsController, :send

get "/update", SmsController, :update

GET这告诉我们的应用程序应该将两个请求和一个请求分别定向到哪里POST。第一个GET /sms路由是用户提交短信的地方。第二个POST /send路由是信息提交的地方。第三个GET /update路由是我们接收来自 Nexmo API 返回信息的地方。

现在我们需要创建这些控制器方法。

定义控制器方法

让我们创建一个/lib/sms_app_web/controllers名为 ` Controller` 的新控制器sms_controller.ex，并添加以下方法：

defmodule SmsAppWeb.SmsController do
    use SmsAppWeb, :controller

    def index(conn, _params) do
        render(conn, "index.html", token: get_csrf_token())
    end

    def send(conn, %{"number" => number, "message" => message}) do
        url = "https://rest.nexmo.com/sms/json"
        req_body = "" 

        response = HTTPoison.post(url, req_body, [], params: %{api_key: "#{System.get_env("NEXMO_API_KEY")}", api_secret: "#{System.get_env("NEXMO_API_SECRET")}", from: "#{System.get_env("NEXMO_NUMBER")}", text: "#{message}", to: "#{number}"})
        if {:ok} do
            conn
            redirect(_conn, to: Routes.update_path(conn, :update))
        else {:error}
            Flash.put(:error, "Something went wrong.")
        end
    end

    def update(conn, _params) do
        render(conn, "update.html")
    end
end

如您所见，我们为路由器中创建的每个路由都定义了一个方法：

• 该index/2方法会渲染我们的索引页面，并生成 CSRF 令牌，我们必须将该令牌与 Phoenix 中的每个表单一起提交，以防止跨站脚本攻击。
• 该send/2方法是我们应用程序的核心。我们使用 HTTPoison 模块，POST通过 API 凭据和用户在首页表单中提交的信息，向 Nexmo SMS API 发送请求。然后，我们检查消息是否发送成功。如果成功，则重定向到该update/2方法；如果失败，则向用户显示错误消息。
• 该update/2方法会渲染更新页面。

添加 HTTPoison 依赖项

打开mix.exs应用程序根目录下的文件，并在defp deps do代码块中另起一行添加以下内容：

[{:httpoison, "~> 1.4"}]

然后，从命令行运行以下命令来安装新的依赖项：

$ mix deps.get

现在我们需要设置视图，让我们开始吧。

设置视图

此外，/lib/sms_app_web/views请sms_view.ex添加以下内容：

defmodule SmsAppWeb.SmsView do
    use SmsAppWeb, :view
end

现在导航到/lib/sms_app_web/templates并添加一个sms文件夹，我们将在该文件夹中创建index模板update。

# index.html.eex

<h2>Send an SMS with the Nexmo SMS API</h2>

<form action="/send" method="post">
  <input type="hidden" value="<%= @token %>" name="_csrf_token"/>
  <div class="field">
    <label for="number">
      Recipient Phone Number:
    </label>
    <br />
    <input type="text" name="number">
  </div>

  </div class="field">
    <label for="message">
      Message:
    </label>
    <br />
    <textarea name="message" placeholder="Enter message here"></textarea>
  </div>

  <div class="actions">
    <input type="submit" value="Send">
  </div>
</form>

# update.html.eex

<div class="phx-hero">
  <h2>Your message was sent successfully.</h2>
</div>

在本教程中，我们不会修改应用程序的默认布局，因此您仍然会看到 Phoenix 的徽标等元素。如果您愿意，可以编辑 `<application.h>` 文件app.html.eex来/lib/sms_app_web/templates更改其中的一些内容。此外，应用程序的 CSS 样式表位于 `< application.h /assets/css>`，如果您也想修改它，可以进行编辑。

为了使我们的应用程序正常运行，我们需要做的最后一步是将我们的 API 凭据配置为环境变量。

配置环境变量

在应用程序的根目录下创建一个.env文件，并在其中添加以下内容：

export NEXMO_API_KEY=""
export NEXMO_API_SECRET=""
export NEXMO_NUMBER=""

在空白引号处添加您从 Nexmo 控制面板收到的 API 凭据和您购买的虚拟电话号码。

/.env如果您要提交到 GitHub，请务必在文件中添加相应内容.gitignore以保护您的凭据。

完成后，保存文件，然后从命令行运行以下命令，将环境变量合并到应用程序中：

$ source.env

GIF

就是这样！

您现在拥有一个功能齐全的 Phoenix 应用程序，它可以通过 Nexmo SMS API 发送短信。您可以导航至 [此处插入链接]https://localhost:4000/sms开始发送消息。

如果您有兴趣查看本教程的完整代码，可以访问存储库。

感谢您与我一同踏上学习 Phoenix 的旅程。还有很多东西需要学习，我很兴奋能继续探索下去！