0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-09-14

デモ

スマホ画面

image.png

PC画面

image.png

サイドメニュー

image.png

管理者画面

image.png

軽くアプリ説明

一日おきにやった家事を記録する。
一ヶ月おきに家賃食費など(生活費と呼ぶ)を記録する。

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

【作成した経緯】

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

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

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

【作成したもの】

タイトルなし.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セットアップの参考

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

2.Flaskアプリの開発

ここからプログラミングです。webページを作っていきます。

PC内でwebページの動作を確認して、問題が無ければ、作成したものをラズベリーパイに移植します。PCでの作業となります。

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

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

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アプリを起動させる設定

参考


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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?