Skip to content

slbotbm/taskList-streamlit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 

Repository files navigation

テスト課題

コードが依存するライブラリ:

  1. streamlit ver. 1.29.0
  2. pandas ver. 2.0.3
  3. Faker 20.1.0 (ダミーデータのため)

- 注意:streamlit 1.29.0は2023/12/5に公開されました。このプロジェクトは streamlit 1.29.0に新しく定義された関数を使っています。

項目チェック:

  • ユーザーがタスクを入力する
  • ユーザーがタスクの編集、削除をすることができる
  • タスクリストを表示する
  • 入力を受け取りや画面に表示する Widget などは、Streamlit のライブラリに予め用意されている API を用いること。
  • ユーザーのタスクに、期限や優先順位、または、カテゴリなどのメタデータを追加することができる
  • アプリはメタデータを元に、タスクをソートして表示する(複数のメタデータを使っている)
  • ページネーション

アプリの概要

このアプリでユーザが既存のタスクを見たり、編集したり、削除したりすることができます。タスクも作れます。されにみやすさのためにページネーションもしています。一つの画面に表示されているタスクの数も変えられます。様々なソートの方法もあります。ユーザが複数のソートカテゴリをしたければ、それもできます。
データは基本的にtasks_data.csvというファイルに保存されています。PythonのFakerライブラリを使ってダミーデータが作られます。data_faker.py はこの役割を果たしています。data_faker.pyの中の number_of_itemsという変数で作られるタスクの数を変えられます。

csvの構造:

  • name:タスクの名前
  • details:タスクの詳細
  • time_limit:タスクの期限
  • importance:タスクの優先順位:フェーカーを利用するとタスクの数によって各タスクに別々の順位が与えられます。新しいタスクの作成、既存のタスクの編集で既存の優先順位を与えてもいいです。
  • cost:タスクの費用
  • category:タスクのカテゴリ:4つのカテゴリに分かれています:「仕事」、「運動」、「友達」、「家族」
  • complete:タスクが加療されているかどうか(1=タスクが完了されました。0=タスクがまあだ完了されていません)
  • created_at:タスクの作成日(ユーザはソートの一つの項目としてのみ利用できます。新しいデートを作ったり、既存のデートを編集したり、削除したりすることができません。)
  • updated_at:タスクの編集日(ユーザはソートの一つの項目としてのみ利用できます。新しいデートを作ったり、既存のデートを編集したり、削除したりすることができません。)

multi-page appについて:

このようなアプリにはmulti-page appが便利だと思っています。streamlitはmulti-page appをサポートしても、一つのページから別のページに移動するにはサイドバーにあるページ名を選ばないといけません。これはユーザーにとって直感的なことではないから実装しませんでした。一応、st.write(<code>, unsafe_allow_html=True)を利用するとリンクを貼って移動することができるのですがセキュリティの面からあまり望ましくないです。さらにst.button(label, on_click=func())func()の中にJavascriptのコードを書いて移動させる方法も見つけたのですが、それもあまり望ましくないです。

main_app.pyの説明:

以下のすべてのトピックはコード内にコメントを利用して示されています。

セッションステートの最初の変数(関数の下にあります):

batch_sizeは画面に表示するタスクの数を示しています。最初の値は10にしました。start_posはどのタスクから表示するかを示しています。task_createdは新しいタスクが作られたかどうかを示しています。data-dfは最初のpandas Dataframeです。削除、編集、とタスク追加はこの Dataframeの中に行われています。show_dfdata_dfのコピーで、タスクの表示のために使われています。タスクのソート、ページネーションなどはこのdataframeを使って行われています。

関数の定義:

  1. load_data(csv_file): csvファイルからPandasを使ってデータの読み込みのための関数です。データの整理が行われて、キャッシュ二保存されています。
  2. edit_data(): もしユーザがあるタスクを編集したら、この関数が呼び出されます。編集したタスクの情報がアプリのセッションステートに保存されています。それらの情報を使って、セッションステートに保存されたdata_dfが編集されています。そのあと編集したタスクのセッションステートにある情報が削除されて、tasks_data.csvが書き直されています。。
  3. create_data():もしユーザが新しいタスクを作ったら、その情報はセッションステートに保存されます。その情報はこの関数によって使われて、data_dfに情報を追加されています。そのあと新しいタスクのセッションステートにある変数が削除されて、tasks_data.csvが書き直されいます。
  4. show_tasks(df):この関数はタスクの表示の他、セッションステート二保存された変数の状況によってedit_data()create_data()も呼び出しています。この2つの関数をここに入れるのは何があってもshow_tasks(df)が毎回呼び出されているからです。これによってユーザーに最新の情報を表示できます。
    上の2つの関数の後、もし与えたdataframeが空きでなければ、タスクが表示されています。空きであれば、「 条件に一致しているタスクが見つからなかった」がひょうじされています。各タスクのコンテナーの中に独自の削除ボタンと編集ボタンも表示されます。削除ボタンがクリックされたら、タスクが削除されます。編集のボタンがクリックされたらタスクの下にフォームが表示されます。そのフォームのフィールドにはタスクの現在の情報がもう入力されています。編集の後データがセッションステートに保存されています。

    一つのタスクimage

    そのタスクの編集フォームimage

ヘッダの定義:

ヘッダの中にアプリのタイトルとタスクの作成ボタンが定義されています。タスクを作って、提出すると作成したタスクの情報はセッションステートに保存されています。その後show_tasks(df)の中からcreate_tasksが呼び出されています。

ソートメニューの定義:

最初にソートメニューが表示されていません。「データの順番を変える?」の中にハイを選択したらメニューが表示されます。次のとおりです:

image

このイメージの中に「表示順位の変更項目」と「カテゴリ」という複数選択バーには複数のものを選択できます。「表示順位の変更項目には「期限」、「優先順位」、「コスト」、「作成日」と「編集日」という選択肢があります。「カテゴリ」の中に「仕事」、「運動」、「家族」と「友達」という選択肢があります。そのほか、タスクが表示される順序を変えたければ、「順序」の中から 「上昇⬇️」や「降順⬆️」選択できます。タスクが完了かどうによっても順位を変えられます。例えば、次の画面を見てください。

image 

これらの選択したことによって次の処理が実装されます:まずはタスクが費用、優先順位、と作成日の順番に従って順序が変わります。そのあと、「家族」と「仕事」のカテゴリのタスクがが選択されてから完了されたタスクが選択されます。それらのタスクが降順に表示されます。

show_tasks():

ここに表示すべきタスクのインデックスが計算されて、show_tasks()という関数が呼び出されています。インデックスの計算は次のとおりです:
開始インデックス:セッションステートに保存された "start_pos"
終了インデックス:セッションステートに保存された "start_pos""batch_size"が加算されます。

フッター:

フッターの中に3つのカラムがあります。1番目のカラムに現在のページ数と総ページ数が表示されています。総ページ数はソートメニューの状況によって変わります。入力したページ数によって表示すべきインデックスの値も変わられます。総ページ数の計算のためにまずshow_df内の値の数をセッションステートにあるbatch_sizeでわります。その後、この計算の計算の値と整数値を比較します。一致しない場合は一つのページが追加されます。そのあと、もし計算した値の整数値が0であれば総ページ数が0になります。2番目のカラムにページ数を入力することができます。入力してEnterキーを押したら、その頁が表示されます。3番目のカラムには表示させたいタスクの数を選択することができます。この値はセッションステートのbatch_sizeの変数の値になります。ちなみに、デフォルト値は10です。選択できる値は10,25,50,と100です。

残っている問題:

  1. ユーザーが一つのタスクの編集ボタンをクリックしてから他のタスクの編集フォームを表示するためにそのタスクの編集ボタンを2回クリックする必要があります。1回目のクリックで前のタスクの編集フォームが消えてしまい、2回目のクリックで編集したいタスクのフォームが表示されます。これの解は課題の提出の時点にも不明です。
  2. ソートメニューでは「上昇⬇️」や「降順⬆️」のみ選択できません。それをしても順序が変わりません。「優先順位」、「コスト」、「作成日」と「編集日」の中から一つの項目を選んでから「上昇⬇️」や「降順⬆️」を選ぶと順序が変わります。これはpandasのDataframe.sort_values()という関数を使っているからです。この関数には順序を変えるコマンドのみ与えられません。なん楽のソート項目が必要です。前、これを使って項目でソートしたあとに順序を変えよとしたのですが、うまくいきませんした。そのため、このまま書いておいています。

data_faker.pyの説明

data_faker.pyは、ランダムなタスクデータを生成し、それをpandasのDataFrameに格納してtasks_data.CSVファイルに保存しています。

  1. important_task_maker関数: 1から指定された数までのランダムな重要度を持つタスクを生成する関数です。生成したタスクは重要度が重複しないようにリストに格納されています。
  2. dates_creator関数: タスクの作成日、更新日、期限日を生成する関数です。作成日は現在の日時から過去の日付までのランダムな日数分前の日時を生成しています。更新日は作成日から未来の日付までのランダムな日数分後の日時を生成しています。期限日は編集日から更に未来の日付までのランダムな日数分後の日時を生成。
  3. number_of_itemsはタスクの数を定義しています。
  4. フェーカーの地域を日本に設定して、上記の関数やランダムな要素を使用して、タスクに関するダミーデータを生成しています。
  5. 作られたデータがpandasのDataframeにかえられて、tasks_data.csvに保存されています。

About

A repository for testing out streamlit

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published