そこそこ実用的な翻訳アプリを開発しましたので、その構成や作り方を記録しておきます。コード は MITライセンスですので、参考になるところがあれば部分的にでも使ってみてください。

目次

• (1) 概要編
• (2) 開発環境の準備 【このページ】
• (3) 翻訳サービスの実装
• (4) ログサービスの実装
• (5) フロントエンド側の実装
• (6) 学習用データの作成

まずはベースとなる環境を準備

NERM (Node.js + Express + React + Material-UI) ベースなWebアプリ開発用のシンプルなビルド環境 2019年3月版 でご紹介したビルド環境をそのまま利用します。

rtk-nerm GitHubリポジトリにある以下のメニューからZIP ファイルをダウンロードし、その中味を新しく作成したフォルダに全てコピーします。

今回は rtk-lt というフォルダ名にしてみました。こんな感じ。

ビルドとローカル環境での実行の確認

さてコマンドプロンプトを開き、rtk-lt フォルダ(ディレクトリ)内で以下を実行しましょう。public サブフォルダに App.js ファイルが作成されていればokです。

npm install
npm run build

ローカル環境でアプリを起動してみます。

npm start

Web ブラウザで http://localhost:3000/ を開き、表示を確認します。

IBM Cloud に上げてみる

引き続き、IBM Cloud 環境へのアップロードも試してみましょう。

cf login
cf push -m 128M rtk-lt

cf push コマンドがこんな感じで実行され、status が running になればokです。

(中略)

route に表示されたURLにブラウザでアクセスし、表示を確認しましょう。

うん、これでビルド環境、そしてIBM Cloud環境への公開まで問題なさそうです。いよいよアプリ開発にはいっていきましょう。

というわけで

さて、ざっと開発環境の準備ができたところで、実際のコード開発にはいりましょう。次回は (3) 翻訳サービスの実装 を実施します。GitHub 上の ソースコード も参照してみてください。