Edited at

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


はじめに

この記事はウェブクルー Advent Calendar 2018の13日目の記事です。

昨日は@wc_tanaka_rinさんのPythonでBigQueryの差分更新をする方法でした。


概要

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


なぜReact Nativeなのか


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


React Nativeの開発環境構築

brew install node

brew install watchman
npm install -g expo-cli


React Nativeでやる事


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


ボタンに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, "test@mail.com");
$subject = "Test Mail";
$to = new SendGrid\Email(null, "test@mail.com");
$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();



まとめ


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

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

お気軽にエントリーくださいませ。