MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回は日報アプリを作ってみます。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/daily_reportにて公開しています。
仕様について
このアプリの主な機能です。
- 認証する
- ID/パスワード認証を利用します
- 日報を登録する
- 日報は次のデータになります
- 日付(作業日)
- 作業内容
- 日報は閲覧は誰でも可能、更新や削除は本人のみ可とします
- 日報は次のデータになります
- 日報を一覧する
- 同じアプリ内で登録されている日報を検索、表示します
主な利用想定として、同じ部署(または会社)のメンバーが日報を登録します。そして、次の日などに各メンバーの日報を一覧して、困っていることや課題がないか全員で共有します。
利用した技術
今回はjQueryとOnsen UIを利用しています。
画面
日報アプリの画面は全部で3つです。
- ログイン/新規登録画面
- 日報入力画面
- 日報一覧画面
日報入力画面
最初に表示される画面です。ただし認証されていない場合はログイン/新規登録画面へ遷移します。この画面では日付を選択して、その日の作業内容を記述します。
ログイン/新規登録画面
ログインと新規登録は処理が似ているので一つの画面にまとめてしまいました。ID/パスワードで認証していますが、追加で表示名も登録できます。
日報一覧画面
登録されている日報を一覧表示する画面です。日付を選択し、その日付を絞り込み条件としています。
まとめ
今回は日報アプリの仕様と画面について紹介しました。次回は認証機能を実装します。