피닉스와 문자 보내기

Elixir 프로그래밍 언어는 개발자의 더 많은 채용을 안정적으로 얻고 있는데 이것은 일리가 있다.그것은 직관적인 문법과 지역 사회를 지원하는 함수식 언어이다.Elixir 생태계에서 가장 유행하는 웹 프레임워크는Phoenix이다.그것은 불로장생약과 마찬가지로 직관성을 가지고 진입 장벽이 낮다.
루비와 레일스에서 많은 일을 한 사람으로서 저는 엘리시르와 피닉스를 배우고 싶었어요.저는 Elixir 강좌를 배우기 시작했습니다. 지난 주말에 첫 번째 간단한 Phoenix 응용 프로그램을 만들었습니다. Nexmo SMS API와 상호작용하고 문자를 보낼 수 있습니다.
내가 어떻게 그것을 만들었는지 봅시다.

Phoenix 서버 시작

가장 먼저 해야 할 일은 Elixir와 Phoenix가 시스템에 설치되어 있는지 확인하는 것입니다.설명서here와 here를 사용하여 설치를 시작하고 실행할 수 있습니다.
언어와 프레임워크를 설치하면 콘솔에서 다음 명령을 실행하여 새 Phoenix 응용 프로그램을 만들 수 있습니다.

$ mix phx.new sms_app

이것은 /sms_app 디렉터리에 새 응용 프로그램을 만드는 기초가 될 것이다.간단하게 보기 위해서, 설치 프로그램이 의존항을 설치할지 여부를 알릴 때, 나는 당신이 긍정적으로 대답하는 것을 건의합니다.Phoenix는 npm을 사용하여 노드 종속성을 가져오고 설치합니다.
계속해서 cd 새 응용 프로그램 디렉터리에 들어가세요.들어간 후, 우리는 응용 프로그램을 위해 데이터베이스를 만들어야 한다.기본적으로 Phoenix는 PostgreSQL을 사용하고 postgres/postgres PostgreSQL 수퍼유저가 있다고 가정합니다.먼저 config/devs.exs 에서 Phoenix 데이터베이스 설정을 수정하고 준비가 되면 컨트롤러에서 실행mix ecto.create 응용 프로그램에 데이터베이스를 설정할 수 있습니다.
현재 브라우저에서 mix phx.server 을 실행하고 https://localhost:4000 로 이동하면 Phoenix의 시작 페이지를 볼 수 있습니다.

Phoenix 서버가 시작되고 실행되었습니다!이제 응용 프로그램을 Nexmo SMS API와 상호작용하도록 설정하고 텍스트 메시지를 보내기 시작합니다.하지만 그 전에 Nexmo 계정을 만들고 API 자격 증명을 받아야 합니다.

Nexmo 계정 만들기

API 자격 증명 가져오기

Nexmo 계정을 만드는 것은 무료입니다. 일단 만들면 무료 포인트를 받을 수 있습니다. 바로 Nexmo API를 사용합니다.계속하여 Nexmo 대시보드의 sign up 페이지로 이동하여 등록 양식을 제출합니다.
등록이 완료되면 Settings 페이지로 이동하여 API 자격 증명을 얻습니다.

가상 번호 구입

많은 국가에서 유효한 발신자 전화번호가 없는 문자를 보낼 수 있지만, 미국에서 문자를 보낼 계획이라면, 예를 들어 Nexmo 가상 번호를 제공하여 원본 전화번호로 사용해야 합니다.
Nexmo를 통해 가상 번호를 얻을 수 있는 두 가지 방법이 있습니다.Nexmo CLI를 사용하여 콘솔에서 다음 명령을 수행할 수 있습니다.

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

위에 표시된 숫자는 단지 예시적인 출력일 뿐이다.이 명령을 실행하면 구입할 수 있는 실시간 숫자를 볼 수 있습니다.첫 번째 명령에서 두 알파벳의 미국 국가 코드를 다른 두 알파벳의 국가 코드로 바꾸어 미국 이외의 특정 국가를 지정할 수도 있습니다.
또 다른 숫자를 얻는 방법은 Nexmo 계기판의 Numbers 페이지로 이동하여 웹 인터페이스로 숫자를 구매하는 것이다.

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 라우팅은 사용자가 SMS를 제출하는 곳입니다.정보는 POST /send 노선에 제출됩니다.GET/update 경로는 Nexmo API에서 정보를 수신하는 곳입니다.
우리는 지금 그 컨트롤러 방법을 만들어야 한다.

컨트롤러 방법 정의

/lib/sms_app_web/controllers 에 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 영패를 생성합니다. 우리는 피닉스의 모든 표에 이 영패를 제출하여 크로스 사이트 스크립트 공격을 방지해야 합니다.

send/2 방법은 우리 응용 프로그램의 핵심이다.HTTPoison 모듈을 사용하여 Nexmo SMS API에 대한 요청POST을 작성합니다. 여기에는 인덱스 페이지 양식에 제출된 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 로고 등을 볼 수 있습니다. 원한다면 app.html.eex 의 /lib/sms_app_web/templates 를 편집해서 내용을 변경할 수 있습니다.또한 수정하려는 경우 응용 프로그램의 CSS 스타일시트는 /assets/css 에 있습니다.
애플리케이션을 정상적으로 실행하려면 API 자격 증명을 환경 변수로 구성하는 것이 마지막입니다.

환경 변수 구성

응용 프로그램의 루트 디렉터리에 .env 파일을 만들고 여기에 다음을 추가합니다.

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

따옴표가 있는 경우 Nexmo 대시보드에서 받은 API 자격 증명과 구입한 가상 전화 번호를 추가합니다.
GitHub를 사용하여 자격 증명을 보호하려면 /.env 파일을 추가해야 합니다.
파일을 완성하고 저장한 후 명령줄에서 다음 명령을 실행하여 환경 변수를 응용 프로그램에 통합합니다.

$ source.env

그렇습니다!
이제 Nexmo SMS API를 사용하여 SMS 메시지를 보낼 수 있는 기능을 갖춘 Phoenix 응용 프로그램이 있습니다..gitignore로 이동하여 메시지를 보낼 수 있습니다.
이 연습의 전체 코드를 보려면 repository 에 접근할 수 있습니다.
나와 함께 봉황성을 배우는 여정에 오르게 해 주셔서 감사합니다.아직 배울 것이 많아서 나는 이 길을 계속 따라 갈 수 있어서 매우 흥분된다.