ono_hackathon_saru's People
Forkers
i032ffono_hackathon_saru's Issues
地図表示コンポーネントのリファクタリング
概要
地図表示コンポーネントのリファクタリングを行います。
任意のModelを受け入れ、ヒートマップを表示するようにする
デートピッカーを作成する
概要
日付入力の簡便化のためにデートピッカーを導入してください。
メイン獣害マップに時間での絞り込みを追加する
概要
獣害マップのメイン画面に時間での絞り込みを追加します。
スケールは1週間、1ヶ月、カスタムのような形にします。
デフォルトは1週間です。
詳細ページの削除に確認ダイアログを作成する
概要
ユーザに確認を求めるための確認ダイアログを作成してください。
テーブルのプライマリキーを作成する
概要
各テーブルのプライマリキーが不足しているので、プライマリキーを追加する
一覧複数選択機能を作成する
概要
一覧複数選択機能を作成してください。
これは、今後、テーブルにある行を選択できるようにして、各種操作できるようにするためです。
位置情報の取得にブラウザのGPS機能を利用する
概要
iPhone, iPadの位置情報付きの写真が読み込めない
iOSでは、写真のフォーマットがjpegではなく、HEIFというファイルフォーマットになっている
また、inputタグを使った画像アップロード時にEXIFのGPS情報の消し込みが行われている模様
実装
獣害マップに必要なのは、日付と位置情報のみなので、写真のアップロードではなく、ボタンを押すことをトリガーにして、ブラウザから位置情報を取得するようにする。
この方法であれば、ユーザに位置情報取得の許可さえ取れば、iOSでも位置情報を取得可能。
コンソール画面にて獣害情報新規作成ができるようにする
概要
コンソール画面で、獣害情報新規作成画面を作成してくだい
目的
電話等で獣害情報を受けた時に、管理者側から獣害情報新規作成画面を作成できるようにします。
ユーザ新規作成画面を作成する
概要
ユーザ新規作成画面を作成してください。
フロントエンドのURLは以下になります。
/console/users/new
また、APIを利用して、ユーザが実際に作成できるようにしてください。
ユーザ新規作成API
#19
獣害情報編集画面を作成する
概要
獣害情報編集画面を作成してください。
フロントエンドのURLは以下になります。
/console/matters/{matter}
また、APIを利用して、ユーザが実際に更新および削除できるようにしてください。
管理者コンソール ユーザ情報画面の画面設計を行う
概要
管理者コンソールのユーザ画面についてざっくりとした画面設計を行ってください。
ユーザ画面にはおそらく、以下の画面が必要です。
・一覧画面(検索もできるようにしたい)
・詳細画面(更新や削除ができる)
・新規作成画面
コーディングに入る前に、Google Slideなどでざっくりとした画面設計を行い、皆さんの認識をすり合わせておきます。
編集できるGoogle Slideを作成しました。こちらでまずはやってみましょう👍
https://docs.google.com/presentation/d/15n-wXPODiaztN-RxQ9d8AQ1kHPBjrwUPN0cU8wD_zsE/edit?usp=sharing
ユーザ編集画面を作成する
概要
ユーザ編集画面を作成してください。
フロントエンドのURLは以下になります。
/console/users/{user}
また、APIを利用して、ユーザが実際に更新および削除できるようにしてください。
- 更新
- 削除
ユーザ作成APIを作成する
概要
ユーザ作成APIを作成してください。
URLは以下のようになります。
POST: /api/console/users
入力項目については、以下になります。
name: string
description: string
また、Controllerは、以下のリクエスト、アクションを利用してください。
リクエスト:App/Http/Requests/User/SaveRequest
アクション:App/UseCases/User/SaveAction
ユーザ作成FormRequestを改修する
概要
ユーザ作成FormRequestを改修してください。
現在、ユーザ作成FormRequestであるApp\Http\Request\User\CreateRequest
は、Laravelのデフォルトであるため、
これを獣害マップ用に改修する必要があります。
Request\User\SaveRequest
を作成してください。
入力項目については、以下のように変更します。
name: string 必須入力 255文字以内
description: string 必須入力
獣害情報一覧画面とAPIをつなぎこむ
概要
獣害情報一覧画面とAPIでつなぎこむようにします。
現在、獣害情報一覧画面は仮のデータにんりますので、それを本物のデータにつなぎこむようにします。
githubActionsでAWS ECRにコンテナイメージをプッシュできるようにする
githubActionsでAWS ECRにコンテナイメージをプッシュできるようにしてください。
タイミングはmainコンテナマージ時にテストを行い、成功した場合、コンテナイメージをプッシュするようにします。
管理者コンソール 害獣情報画面の画面設計を行う
概要
管理者コンソールの害獣情報画面についてざっくりとした画面設計を行ってください。
コーディングに入る前に、Google Slideなどでざっくりとした画面設計を行い、皆さんの認識をすり合わせておきます。
害獣情報画面にはおそらく、以下の画面が必要です。
・一覧画面(検索もできるようにしたい)
・詳細画面(更新や削除ができる)
・新規作成画面
編集できるGoogle Slideを作成しました。こちらでまずはやってみましょう👍
https://docs.google.com/presentation/d/15n-wXPODiaztN-RxQ9d8AQ1kHPBjrwUPN0cU8wD_zsE/edit?usp=sharing
フロントエンド 管理者コンソール ユーザ情報一覧画面を作成する
概要
フロントエンド 管理者コンソール ユーザ情報一覧画面を作成してください。
URLは以下のようになります。
/console/users
バックエンドのユニットテストを行う
概要
不足しているバックエンドのユニットテストを行います。
・獣害報告(Matter)のリスト取得
・獣害報告(Matter)の作成
・ユーザ(User)確認
GoogleCloudFunctionsを利用したバックエンド環境を構築する
概要
GoogleCloudFunctionsを利用したバックエンド環境を構築します。
バックエンドのサーバレスで開発を行います。
また、開発言語はフロントエンドのNext.jsに合わせた、Typescript(Node.js)で行います。
バックエンド 獣害情報一覧を表示できるようにコントローラーを修正する
#17 に続いて、
以前作った獣害情報をフロントに渡すために、1ページあたり20個ごとくらいの獣害情報を取得できるコントローラーを作成してください。
N+1問題が起こらないように、実装する。
バリデーションライブラリ yupのバリデーションの日本語化
管理者コンソール ユーザー詳細で、QRコードを表示できるようにする
概要
管理者コンソールのユーザ詳細画面にて、QRコードを表示できるようにしてください。
以下のアドレスをQRコードにして下さい。
http://localhost/users/{ユーザid}/report
なお、プロトコル部とホスト部は環境により可変であることが望ましいです。
URLをQR化するライブラリはいくつかあると思います。
若干適当に見繕いましたが、フック対応しているので、以下のライブラリを使うと良いかもしれません
https://github.com/Bunlong/next-qrcode
獣害情報一覧のユーザー名を押すと、そのユーザーの詳細ページに飛べるようにする
ユーザ一覧画面とユーザリストAPIをつなぎこむ
概要
ユーザ一覧画面とユーザリストAPIを接続し、利用できるようにする
フロントエンド テーブルコンポーネントを作成する
情報一覧で情報を削除する時にmodal windowで確認画面を出す
#56 から分離させたissueです。
#一覧表で削除する仕様どうする問題
ちょっと思ったのは、この一覧の詳細ボタンの横に、削除ボタンがあるのがいいのかどうかというのが気になりました。
あくまで主観的な印象でしかありませんが、よくあるのは、チェックを入れたものを一括で削除するというような「チェック入れる」→「一括削除ボタンを押す」という二段構えが多いなあと。
今のままで行くのか、削除ボタンの仕様を変えるのか、どちらが適切なのかというのが気になっています。次回のミーティングで話すor実際に現場に使ってもらってから決めるでも良さそうとは思います。
#現在の画面
#難しいかもポイント
モーダルの表示非表示の「const [visible, setVisible] = useState(false)」の状態が一覧表だとその行数個存在する形になることがややこしくなる原因?
#タスク
- ユーザー情報一覧
- 獣害情報一覧
フロントエンド テーブルの機能拡充(ページング)
概要
テーブルの機能について、以下の拡充を行います
・ページング機能
獣害情報編集画面で、地図から獣害情報を編集できるようにする
概要
獣害情報編集画面で、地図から獣害情報を編集できるようにします。
目的
現在、獣害情報の編集は、緯度経度を直接入力する方式になっており
実際の場所の想像ができず、非常に直感的ではありません。
この方式を変更し、地図画面から、獣害情報の編集を行えるようにします。
地図表示時にCORSのエラーが発生している
エラーコード
Access to fetch at 'https://c.tile.openstreetmap.org/9/444/206.png' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
DBの初期化を行うmakeコマンドを作成する
概要
DBの初期化を行うmakeコマンドを作成してください。
DBの初期化を簡単に行えるようにします。
初期化は、DBの内容を削除し、laravelのマイグレーションを行うことを指します。
管理者コンソール 獣害情報一覧 検索コンポーネントを作成する
概要
獣害情報を検索できる 検索コンポーネントを作成します。
検索できる内容としては
・日付 (期間)
・ユーザ (ユーザ名とユーザID)
この変更に伴うバックエンドの改修も行います。
ユーザ詳細画面にて、ユーザが投稿した獣害情報一覧を取得できるようにする
概要
ユーザ詳細画面にて、ユーザが投稿した獣害情報一覧を取得できるようにする
「更新」ボタン名を「変更」に変更する
概要
「更新」ボタン名を「変更」に変更してください。
「更新」ページの更新など、すでにあるものの再表示で、「変更」は今から情報を変えるといったイメージがあるため、
「更新」ボタン名を「変更」に変更してください。
GithubActionでプッシュ時に単体テストができるようにする
概要
GithubActionを利用してプッシュ時に単体テストができるようにしてください。
今のところ、mainブランチおよび、devブランチについて、単体テストできるようにします。
すべてのブランチについてする必要はありません。
リポジトリ内でフロントエンドとバックエンドのプロジェクトを扱えるようにする
概要
このリポジトリ内で、next.jsと、cloud functionsの2つのプロジェクトを扱えるようにします。
next.jsは、web
フォルダ
cloud functionsは、api
フォルダ
に格納します。
また、docker-compse.ymlで、2つのプロジェクトを一括で起動できるようにします。
管理者ログイン周りの単体テストを行う
概要
管理者ログイン周りの単体テストを行う
主に、Controller単体テストを重点する
管理者ログイン機能を作成する
獣害情報やユーザデータを管理するための管理者画面を作成するため、
管理者がログインできるような機能を作成する
管理者はconsole/login
にアクセスし、ユーザ名・パスワードを入力することで、管理者画面にアクセスできるようにする
一覧画面でチェックボックスによる一斉削除の機能をつくる
管理者画面内のユーザー情報一覧、獣害情報一覧にチェックボックスが実装されたので、チェックされたデータ(行)を同時に削除するという機能を実装します。
「全て削除」ボタンを押すとmodal windowが出て、警告するようにします。
関連PR
#76
実装方法memo
以下のような方向性で進めていきたいと思います。
deleteではなく、postで行う。
deleteにはbodyに情報が入れられないため。
1件の情報を消す場合と違って、bodyに消したい情報のIDを持っておく必要がある。
Actionはdeleteを消したい情報の回数実行することで実現する。
管理者コンソール ユーザ一覧検索コンポーネントと機能追加
概要
管理者コンソール ユーザ一覧画面にて、検索コンポーネントと機能を追加して下さい。
すでに、獣害情報一覧では検索が可能になっていますので、参考にしてみてください。
検索は、
・ユーザ名で部分一致
・ユーザIDで完全一致
するようにすれば良いかなと思います。
獣害の位置情報の記録先をスプレッドシートからデータベースに変更する
概要
獣害の位置情報の記録先をスプレッドシートからデータベースに変更してください。
スプレッドシートの記録の読み込みは一般的に遅く、クエリを利用した検索ができず非効率です。
フロントエンド 管理者コンソール 獣害情報一覧画面を作成する
概要
フロントエンド 管理者コンソール 獣害情報一覧画面を作成してください。
URLは以下のようになります。
/console/matters
また、獣害情報一覧は、以下のスライドを参照してください。
https://docs.google.com/presentation/d/15n-wXPODiaztN-RxQ9d8AQ1kHPBjrwUPN0cU8wD_zsE/edit#slide=id.p
トースト機能を追加する
概要
フロントエンドで画面に一時的な情報(「ユーザーを作成しました。」)などを表示させるための
トーストを追加します。
AdminUserControllerの名前空間とフォルダ配置を変更する
概要
AdminUserControllerの名前空間とフォルダ配置を変更します。
AdminUserContorller名前空間とフォルダを以下に変更します。
名前空間変更前: App\Http\Controllers
フォルダ変更前: app/Http/Contorllers/AdminUserController
名前空間変更後: App\Http\Controllers\Console
フォルダ変更後: app/Http/Contorllers/Console/AdminUserController
獣害情報削除アクションを作成する
概要
獣害情報削除アクションUseCases/Matter/RemoveAction
クラスを作成してください。
獣害情報Matterを引数に取って、その引数の獣害情報を削除できるようにしてください。
削除する獣害情報が実際にデータベースにない場合、何もする必要はありません。
UseCases/User/RemoveAction
が似たようなアクションになります。
獣害情報一覧APIを作成する
概要
獣害情報一覧APIを作成してください。
URLは以下のようになります。
GET: /api/console/matters
また、Controllerは、以下のアクションを利用してください。
App/UseCases/Matter/ListAction
docker composeのコマンドの修正とポートのカスタマイズ
概要
docker composeのコマンドの修正とポートのカスタマイズができるようにします。
現在、docker composeのコマンドは、docker-compose
となっており、非推奨の書き方になっています。
Makefileの書き方を推奨されたdocker compose
に変更します。
また、docker composeで、公開するポートについて、ローカルでカスタマイズできるようにします。
ユーザ一覧画面の削除ボタンを削除する
概要
ユーザ一覧画面の削除ボタンは、ユーザ詳細画面の削除ボタンのみとする
そのため、ユーザ一覧画面の削除ボタンは削除する
マップシステムをLeafletからDeck.glに変更する
ユーザ一覧APIを作成する
概要
ユーザ一覧APIを作成してください。
URLは以下のようになります。
GET: /api/console/users
また、Controllerは、以下のアクションを利用してください。
App/UseCases/User/ListAction
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.