ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Monaca + NCMBで日報アプリを作る【その1:仕様と画面の説明】

f:id:mbaasdevrel:20201119154758p:plain

MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回は日報アプリを作ってみます。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/daily_reportにて公開しています。

仕様について

このアプリの主な機能です。

  • 認証する
    • ID/パスワード認証を利用します
  • 日報を登録する
    • 日報は次のデータになります
      • 日付(作業日)
      • 作業内容
    • 日報は閲覧は誰でも可能、更新や削除は本人のみ可とします
  • 日報を一覧する
    • 同じアプリ内で登録されている日報を検索、表示します

主な利用想定として、同じ部署(または会社)のメンバーが日報を登録します。そして、次の日などに各メンバーの日報を一覧して、困っていることや課題がないか全員で共有します。

利用した技術

今回はjQueryとOnsen UIを利用しています。

画面

日報アプリの画面は全部で3つです。

  • ログイン/新規登録画面
  • 日報入力画面
  • 日報一覧画面

日報入力画面

最初に表示される画面です。ただし認証されていない場合はログイン/新規登録画面へ遷移します。この画面では日付を選択して、その日の作業内容を記述します。

f:id:mbaasdevrel:20201119154836p:plain

ログイン/新規登録画面

ログインと新規登録は処理が似ているので一つの画面にまとめてしまいました。ID/パスワードで認証していますが、追加で表示名も登録できます。

f:id:mbaasdevrel:20201119154850p:plain

日報一覧画面

登録されている日報を一覧表示する画面です。日付を選択し、その日付を絞り込み条件としています。

f:id:mbaasdevrel:20201119154859p:plain

まとめ

今回は日報アプリの仕様と画面について紹介しました。次回は認証機能を実装します。

「Monacaで日報アプリ」記事一覧はこちら

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。