search
テクノロジー

【Bubble】家計簿アプリ①

ミサ🥣UGOK's icon'
  • ミサ🥣UGOK
  • 2021/02/23 07:03
Content image

 

 

お久しぶりです。UGOK-5thメンバーのミサです。

前回のツイッタークローンアプリに続き、二つ目の課題制作では家計簿アプリを作成しました。

 

制作理由

現在、家計簿アプリは数多く存在しています。その中で、どのアプリの使い勝手が一番良いのか私自身よく分かっていません。そこで、それぞれの良いところをまとめた家計簿アプリを自分で制作しようと思いました。

 

制作過程

今回は家計簿アプリ制作にあたるベースとなる部分を作成しています。内容は収入・支出内容を記録するというシンプルなものです。

ページはIncome(収入)とExpense(支出)の二つ存在します。

Content image
Content image

 

プラグインは「AddToAny Share Buttons」「Slidable Menu」をインストールしました。

Content image

「AddToAny Share Buttons」は画面右上のメールのマークで表示されています。これをクリックすると記録した収入・支出内容をメールでシェアすることができます。

「Slidable Menu」は画面左上の三本線のマークで表示されています。クリックすると以下の画像(Income、Expense)が出現します。これを選択し、それぞれのページに移動することができます。

Content image

 

 次に情報の入力画面についてです。

入力画面はPopup上に設置しています。右上の+マークをクリックするとPopupが出現するようにワークフローで設定しています。

 

Incomeの入力画面

Content image

上から順に「Date/TimePicker」「Input」「Dropdown」「Input」を設置しています。

「Input金額」ではContent formatをCurrency、Currency prefixを¥にし、数値のみを入力することができます。

前の画面に戻りたいときは左矢印(◀︎)のボタンをクリックすると戻ります。

Content image
Content image
Content image

ExpenseのInput画面

Content image

Inputページと同様、上から順に「Date/TimePicker」「Input」「Dropdown」「Input」を設置しています。

Content image
Content image

 

全ての欄を埋め、DoneをクリックするとPopupが閉じ、以下のように入力した情報が記録されます。それぞれのページでは入力した情報が表示されます。ゴミ箱マークを押すとその列の情報は削除されるようにワークフローで設定しています。

Content image
Content image

 

今回の家計簿アプリ制作はここまでです。

 

まとめ

まだ情報を記録するだけという簡単なもので他のアプリとの差別化ができていません。今回制作したものをベースにし、これからはグラフの表示や計算機能などを取り入れられるように応用しようと思っています。

現在は情報が記録した順に表示されます。これを「Date/TimePicker」の日付順に表示できるように苦戦しているところです。さらに、表示したい月だけの情報が見られるように設定しようと考えています。

これで今回の記事を終わります。最後まで読んでくださりありがとうございました。

 

 

Article tip 0人がサポートしています
獲得ALIS: Article like 16.54 ALIS Article tip 0.00 ALIS
Article registration Article registration
ミサ🥣UGOK's icon'
  • ミサ🥣UGOK
  • @misa033113

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
他カテゴリ

ALISのシステム概観

ALISブロックチェーンブログ 2018/07/03
Like token Tip token
5.00 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

CryptoChick 2020/03/07
Like token Tip token
159.32 ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Jimmy 2020/03/17
Like token Tip token
32.10 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

大田コウキ 2021/04/06
Like token Tip token
947.13 ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

nnppnpp(んぺー) 2021/09/08
Like token Tip token
46.60 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

IMAKARA 2021/09/23
Like token Tip token
7.20 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

kaya 2021/10/06
Like token Tip token
61.20 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

おはぐろ氏 2020/02/15
Like token Tip token
85.05 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

池田らいく 2021/04/04
Like token Tip token
18.92 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

nonstop-iida 2020/03/04
Like token Tip token
124.82 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

keiju togashi 2020/03/12
Like token Tip token
30.10 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

昆布森ちゃん 2021/01/19
Like token Tip token
38.31 ALIS