ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。
第1回目である今回は、商品(洋服)データを作成するところまで
- デモ
こちらのURLで、完成版のアプリを実際に操作することができます
https://l08084.github.io/ionic-sample-shopping-app/www
- GitHubリポジトリ
バージョン情報
Angular(JavaScriptのWebフレームワーク)ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っている
- ionic-angular@3.9.2
- Angular@5.2.10
Ionicプロジェクト作成
Ionic CLIをPCに入れていない場合は、まずインストールする必要がある。
$ npm install -g ionic
タブのテンプレートを採用したプロジェクトを作成する。
$ ionic start ionic-sample-shopping-app tabs
プロジェクトがちゃんと作成されたかの、動作確認
$ cd ionic-sample-shopping-app $ ionic serve
タブ型の初期プロジェクトがちゃんと作成されていることを確認
モデルクラスを作成する
商品を表すモデルクラスを作成する。enum
のPRODUCT_TYPE
は、商品のジャンル(アウターかジャケットかなど)を判定するのに使う予定。
src/model/product.model.ts
:
export interface Product { id: string; name: string; price: number; type: number; imagePath: string; commentOne: string; commentTwo: string; quantity: number; } export const enum PRODUCT_TYPE { tops = 0, jacket = 1 }
商品データを作成する
データを取得できるWebAPIが存在しないので、ローカルにJSONファイルを配置して、そこからデータを取得する方式にする。
画像ファイル取得
サムネイルに使う画像ファイルが欲しかったので、下記のサイトから洋服の画像ファイルを取得する。
ダウンロードした画像ファイルは、src/assets/
配下に配置する。
JSONファイル作成
続いて、架空のアパレルショップA店の商品データ8件を格納した、JSONファイルを作成する
src/assets/data/products.json
:
[ { "id": "01", "name": "ボーダーシャツ長袖 ホワイト/ブラック", "price": 3500, "type": 0, "imagePath": "assets/imgs/black-white-border.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 }, { "id": "02", "name": "ドット柄ブラウス ブルー", "price": 2400, "type": 0, "imagePath": "assets/imgs/blue-blouse.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 }, { "id": "03", "name": "英字プリント半袖Tシャツ", "price": 2200, "type": 0, "imagePath": "assets/imgs/gray-t-shirt.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 }, { "id": "04", "name": "ストライプ柄ブラウス ホワイト", "price": 3700, "type": 0, "imagePath": "assets/imgs/white-blouse.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 }, { "id": "11", "name": "シワ加工ジャケット ベージュ", "price": 12000, "type": 1, "imagePath": "assets/imgs/beige-jacket.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 }, { "id": "12", "name": "スクールダッフルコート ブルー", "price": 11000, "type": 1, "imagePath": "assets/imgs/blue-duffle-coat.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 }, { "id": "13", "name": "スクールダッフルコート ホワイト", "price": 11000, "type": 1, "imagePath": "assets/imgs/white-duffle-coat.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 }, { "id": "14", "name": "ナイロンパーカー パープル/ピンク", "price": 37000, "type": 1, "imagePath": "assets/imgs/nylon-parker.png", "commentOne": "合わせやすいカジュアルなボーダーの長袖シャツ", "commentTwo": "シワ加工ディティール入り、オーバーサイズシャツ、ケアレスファイバー", "quantity": 1 } ]
今回はここまで。
次回の記事はこちら