l08084のブログ

技術記事の執筆は、祈りに近い

【JavaScript】Ionicで架空のECアプリを作成する #1 - 商品データを作る

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。

第1回目である今回は、商品(洋服)データを作成するところまで

  • デモ

こちらのURLで、完成版のアプリを実際に操作することができます

https://l08084.github.io/ionic-sample-shopping-app/www

  • GitHubリポジトリ

github.com

バージョン情報

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

タブ型の初期プロジェクトがちゃんと作成されていることを確認

f:id:l08084:20180428155357p:plain
初期状態の表示

モデルクラスを作成する

商品を表すモデルクラスを作成する。enumPRODUCT_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ファイルを配置して、そこからデータを取得する方式にする。

画像ファイル取得

サムネイルに使う画像ファイルが欲しかったので、下記のサイトから洋服の画像ファイルを取得する。

https://www.photo-ac.com/

ダウンロードした画像ファイルは、src/assets/配下に配置する。

f:id:l08084:20180429003408p:plain

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
  }
]

今回はここまで。


次回の記事はこちら