プログラミング学習者のアウトプット 漆

約1ヶ月かけて、チーム開発でフリーマーケットアプリを作成したため、アプリの概要と担当箇所について紹介する。

アプリ概要

fig.1   メイン画面

作成したのはメルカリを参考とした、フリーマーケットの模擬アプリ。ユーザー登録をした後に右下にある「出品する」ボタンを押すと、商品出品画面に移動する。商品情報を入力すると出品ができ、メインページの新規投稿商品欄に追加される。出品したユーザーであれば、商品の画像をクリックすると情報の編集ができ、別のユーザーであれば商品の購入ができる。私が担当したのは商品出品画面のフロントサイドとサーバーサイド、商品情報編集画面のフロントサイドとサーバーサイドの実装を行った。

fig.2   商品出品画面

fig.3   商品出品画面２

商品の画像は10枚まで投稿することができ、プレビュー表示、それぞれの画像の変更、削除ができるようにした。これは主にJavaScriptを用いて実装したが、画像それぞれに番号を振って管理するのに苦戦し、時間がかかった。

fig.4    出品後

fig.5   商品情報編集画面

商品編集時には出品時に入力した情報が予め入力されているため、変えたい項目のみ編集できる。画像は変更、削除以外にも追加することができる。