ReactNativeで電車遅延のメールを送信する

はじめに

この記事はウェブクルー Advent Calendar 2018の13日目の記事です。
昨日は@wc_tanaka_rinさんのPythonでBigQueryの差分更新をする方法でした。

概要

Microsoft Flowのアプリからワンクリックで定型文のメールを送信する をReact Nativeで実装してみようと思います。

なぜReact Nativeなのか

• React Native勉強会を社内で開催したという軽い気持ちです

React Nativeの開発環境構築

• React Nativeのドキュメントを参照してください
• Macの場合は以下でOKです

brew install node
brew install watchman
npm install -g expo-cli

React Nativeでやる事

• メール送信ボタンを用意する、ボタン押下時にメール送信APIにリクエストする

ボタンにReact Native Elementsを利用する

• React Native Elements

npm install react-native-elements

ボタンの実装

App.js

import {Button} from 'react-native-elements';

~~ 中略

_handleButtonPress = () => {
  クリック時の処理
};

<Button
  title = '遅延のメールを送信する'
  buttonStyle = {styles.buttonStyle}
  onPress = {this._handleButtonPress}
/>

const style = StyleSheet.create({
  buttonStyle: {
    backgroundColor: "rgba(92, 99, 216, 1)",
    width: 300,
    height: 45,
    borderColor: "transparent",
    borderWidth: 0,
    borderRadius: 5
  },
})

APIのリクエスト実装

App.js

_handleButtonPress = () => {
  this.sendEmail()
};

sendEmail() {
  return fetch('Send Mail API URL')
   .then((response) => {
     if (response.ok) Alert.alert('処理OK')
     else Alert.alert('処理NG')
    })
   .catch((error) => Alert.alert('処理NG'));
}

メール送信のAPIを用意する

• 今回はHerokuとSendGridを用いて、APIにリクエストを投げると定型文を送信する処理を実現しています
• 詳しくはドキュメントを参照してください

Herokuの環境準備

• 詳しくはドキュメントを参照してください

Herokuに書いたコード

index.php

<?php
require 'vendor/autoload.php';

$from = new SendGrid\Email(null, "[e-mail]");
$subject = "Test Mail";
$to = new SendGrid\Email(null, "[e-mail]");
$content = new SendGrid\Content("text/plain", "Test Mail");
$mail = new SendGrid\Mail($from, $subject, $to, $content);
$apiKey = getenv('SENDGRID_API_KEY');
$sg = new \SendGrid($apiKey);
$response = $sg->client->mail()->send()->post($mail);
echo $response->statusCode();
echo $response->headers();
echo $response->body();

• 今回のReact Nativeコード
• 今回のPHPコード

まとめ

• Microsoft Flowだとノンコーディングでサクッと実現できたのが 自前で実現しようとすると色々面倒ですね。

ウェブクルーでは一緒に働いていただけるエンジニアを随時募集しております。
お気軽にエントリーくださいませ。