そこそこ実用的な翻訳アプリを開発しましたので、その構成や作り方を記録しておきます。コード は 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 上の ソースコード も参照してみてください。