hack-teamC-2021-summer -再翻訳チャットツール-
システム工学研究会2021夏のハッカソンで制作
メンバー
- wind111-lang:Websocket,Translate API(Go)
- Minmin:Websocket,JSONの値受け渡し,Webページ作成(Vue)
- Bayashin:構造体実装,Websocket,Database(Go)
- SuperTikuwa:チームメンター(全体サポート)
セットアップ
1. Dockerのセットアップ
-
まず, mariadbのイメージを持ってくる必要があるので,
docker pull mariadbと
入力して,イメージを取得してください. -
dockerフォルダ内にdocker-compose.ymlがあるので,
ターミナルでディレクトリをdockerにいる状態でdocker-compose buildと入力します. -
次に, コンテナを作成して起動するために,
docker-compose up -dと入力します.
うまくいかない場合は,docker-compose upと入力してください. -
コンテナに接続する前に,
docker psと入力し, 作成されたコンテナを確認します. 確認できたら,
docker exec -it <作成された CONTAINER ID> bashと入力し,接続します. -
接続できたら,
mysql -u root -pと入力します. すると,パスワードを求められるので,
adminと入力して,MySQLにログインしてください. -
ログインが完了したら,
show databases;と入力して,データベース内にchat_logsがあるかを確認します.
確認できたら,use chat_logs;と入力し,chat_logsを選択します.そして,show tables;と入力し,
chat_logsがあることを確認します. 最後に,show columns from chat_logs;と入力して,mysql/dbのディレクトリにある,
chat_logs.sqlと内容が一致していれば, セットアップは完了です.
2. yarnのセットアップ
- ターミナルで,
frontend/Chatディレクトリにいる状態で,yarn installと入力して, パッケージを導入します.
次に,yarn buildと入力して,プロジェクトをビルドしてください.
3. 翻訳APIを呼び出すための設定
-
まず, Azureのポータルサイトにアクセスにアクセスしてください. もしAzureのアカウントを作成していない場合は先にアカウントを作成してください.
https://qiita.com/suzukin/items/e50703dd63edbc028dff (学生の場合は,学生プランに申し込みができます.)
https://azure.microsoft.com/ja-jp/free/ (学生に該当しない場合はこちら.) -
アカウントが作成できたら,https://docs.microsoft.com/ja-jp/azure/cognitive-services/translator/quickstart-translator?tabs=go の前提条件のタブにある, Translatorリソースの作成をクリックします. すると, Translatorの作成画面が開かれます.
-
リソースグループのタブに, 新規作成というのがあるので, それをクリックして, 名前を自由に入力してください.
-
入力できたら,下にリソースグループのリージョンが現れますが, 基本的に東日本を選択してください. その下にあるリージョンも同様です. 次に, 名前を自由に入力して, 価格レベルは, Free F0を選択してください.
-
左下の,確認及び作成をクリックすると検証が行われるので,検証が終わったら左下の作成をクリックしてください. しばらくするとデプロイが完了するので,完了したらリソースに移動をクリックしてください.
-
移動できたら, 左のリソース管理のタブの,キーとエンドポイントをクリックしてください. そして, キーの表示をクリックします.
-
すると, キーが表示されるので, キー1の部分を
backend/.envの,subscriptionKeyに貼り付けてください.locationは,東日本をリージョンとして指定しているので,japaneastと入力してください.
使い方
4. main.goの実行とWebサイト表示
backendディレクトリ内に,main.goがあるので,go run main.goと入力します. しばらくすると,Chat server openedとターミナルに表示されるので, Webブラウザを開いて, URLにlocalhost:8081と入力してください. そうすると,チャット画面が表示されます.
他のマシンでチャットアプリに接続する場合は, URLをmain.goを実行しているマシンのIPアドレス:8081と入力してください.
注意:
- ChromeやFirefoxなどの拡張機能に対応しているブラウザで,セキュリティソフト(特にNortonやウイルスバスター辺り)の拡張機能が入っている場合,動作しない可能性があります. その場合には,拡張機能をオフにしてページをリロードしてください.
- 現状， 同一LANでないと動作しません.
その他
- コントリビュートを歓迎しています. 何かありましたらIssuesやPull Requestを投げてくれると幸いです.