はじめに
この記事はウェブクルー 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を利用する
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だとノンコーディングでサクッと実現できたのが 自前で実現しようとすると色々面倒ですね。
ウェブクルーでは一緒に働いていただけるエンジニアを随時募集しております。
お気軽にエントリーくださいませ。