家事記録アプリを作りました。アプリケーションサーバーはラズベリーパイ3B+を使用します。

## デモ
### スマホ画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/e62e993d-ca7e-6ef1-383e-7115537bd4a2.png)

### PC画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/432a5f81-150e-2d72-d03e-1dae3db80f61.png)

### サイドメニュー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/bcd7cb78-e602-053e-4ef4-354b4f736bd5.png)

### 管理者画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/15cf9a74-1709-fc30-4abd-a42713abf155.png)


## 軽くアプリ説明
一日おきにやった家事を記録する。
一ヶ月おきに家賃食費など(生活費と呼ぶ)を記録する。

生活費の支払は折半ですが、やった家事に応じて支払額を免除する仕組み。
(目的)
家事に対するモチベーションアップを図る！



## 【作成した経緯】
■条件
・2人暮らし
・家賃生活費などの生活に関わる支出は全て合計して折半して支払う。

■問題点
・お金は折半できるけど、家事はキッチリ折半できない。

■解決策
・2人でそれぞれどれだけ家事をしたか記録して、家事をした分だけ生活費の負担を減らす。
例えば、2人で家事の負担度が、50%と50%ならば、今まで通り折半すればいいし、10%と90%ならば、90%も家事をしてくれている方を優遇して生活費の支払いを軽減させます。
・得意のExcelでつくろうとしましたが、家事実績入力のためにPCを開くのは面倒＆常時PCつけっぱなしは電気代がかかってしまうので省電力ラズベリーパイを使ってwebアプリを作ります。webアプリにすることでスマホからの家事実績入力が可能となります。
・スマホアプリ版のExcelよりも使用感を上げることが重要です。

## 【作成したもの】

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/d31cf67e-86b7-a23a-dc68-98b704992506.png)
ルーターには、ラズパイ、スマホ、スマホ、PCなど接続しています。
webアプリで家事記録をしていくので、OSはなんでも起動するのがwebアプリのいいところ。

ラズパイはアプリケーションサーバ兼DBサーバ
スマホは入力のみで、家事を行ったら行った家事を登録していきます。

## 【必要なもの】
ネットワークに接続できる環境
ルーター
ラズベリーパイ3B+

## 【全体の流れ 作り方】
全体の流れを確認してから詳細な作り方を紹介しましょう。

### 1.ラズベリーパイのセットアップ
OS入れ
VNCの設定

### 2.Flaskアプリの開発
HTML
JavaScript
CSS
Python
DB設計

Flaskアプリ起動コマンド　テスト

### 3.ラズベリーパイの設定
Flaskアプリのフォルダーを共有フォルダーに設定(windowsからソースコードの修正とバックアップを取れるように) sambaの設定
2で作ったFlaskアプリを入れる
nfwを入れて、Flaskアプリの接続を許可
ラズパイの電源投下時にFlaskアプリを起動させる設定

## 【詳細な作り方】
### 1.ラズベリーパイのセットアップ
■OSセットアップの参考

https://invisibletechnology.jp/raspberrypi-setup/#:~:text=OS%E3%81%AE%E9%81%B8%E6%8A%9E%E3%81%A8%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%201%20Raspberry%20Pi%20Imager%E3%81%AE%E8%B5%B7%E5%8B%95%20Raspberry%20Pi%20Imager%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%BE%E3%81%99%E3%80%82,...%204%20OS%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%20microSD%E3%82%AB%E3%83%BC%E3%83%89%E3%81%8C%E9%81%B8%E6%8A%9E%E3%81%95%E3%82%8C%E3%81%9F%E3%82%89%E3%80%81%E3%80%8C%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6OS%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%82%92%E9%96%8B%E5%A7%8B%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20...%205%20%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E5%AE%8C%E4%BA%86%20

■VNCのセットアップの参考
VNCを使うことで、windowsPCからリモート接続してラズベリーパイのセットアップを行えます。
ラズベリーパイ用にモニター、キーボード、マウスを用意しなくてよくなるので利用しましょう。
参考

https://www.indoorcorgielec.com/resources/raspberry-pi/raspberry-pi-vnc/

### 2.Flaskアプリの開発
ここからプログラミングです。webページを作っていきます。
#### PC内でwebページの動作を確認して、問題が無ければ、作成したものをラズベリーパイに移植します。PCでの作業となります。


アプリをgitからダウンロードしてください。
gti url

https://github.com/arisaEN/kajiAPP

DBに入ってるデータ、我々が使った生データになっていますので記録部分を削除して使ってください。
※暇ができたらgitには初期化されたDBをおいときます。

必要なライブラリインストール
requirements.txtからインストールすればOK。

### Flask起動コマンド
flaskrフォルダーを置いているPCで実行します。
```
cd C:\Users\sharisa\Videos
set FLASK_APP=flaskr 
set FLASK_ENV=development
flask run --host=0.0.0.0
```

flask run --host=0.0.0.0を実行すると次の画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/97fd6901-be1a-dead-11a7-0fbc355c86e6.png)

http://127.0.0.1:5000にwebページから接続します。
```
http://127.0.0.1:5000
```

webアプリが正常に動作すればOK。

dockerでも稼働できるようにdockerファイルも入れてあります。

### 3.ラズベリーパイの設定
#### sambaの設定 ラズベリーパイをwindowsから共有フォルダーに設定する。
```
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt install samba
```
$は入力しなくていい。

Samba設定ファイルのsmb.confを「nano」や「vi」などのエディタで編集します
$ sudo nano /etc/samba/smb.conf

最終行にこれ追加
```
[arisa]
   comment = arisa user file space
   path = /home/arisa
   force user = arisa
   guest ok = yes
   create mask = 0666
   directory mask = 0777
   read only = no
```
path 共有したいディレクトリ
force user どのラズパイユーザーの権限で動かすか
guest ok  noならパスワードなし

ユーザー名 admin
PW admin


samba再起動
```
$ service smbd restart
$ service nmbd restart
```
ラズパイにFWインストール
```
 sudo apt install ufw
```

ラズパイ側でファイアウォールのポート許可　sambaで使うやつのみ。
```
sudo ufw allow 137/tcp
sudo ufw allow 137/udp
sudo ufw allow 138/tcp
sudo ufw allow 138/udp
sudo ufw allow 139/tcp
sudo ufw allow 445/tcp
```
```
sudo ufw enable
```

winPC側に資格情報追加
winPC側からアクセス

\\100.64.16.〇(ラズベーパイのIPアドレス)\shared


### 2で作ったFlaskアプリを入れる
ラズパイのビデオフォルダーにflaskをコピーします。 
どこでもいいけど、Flask起動コマンドと合わせます。

### ラズパイの電源投下時にFlaskアプリを起動させる設定
参考

https://www.pc-koubou.jp/magazine/52061

------------------------
ラズパイ再起動させてスマホからラズパイのwebサーバーに接続できれば完了