【JavaScript】Ionicで架空のECアプリを作成する #10 - 完成

前回の記事はこちら

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

最低限の機能は、実装できたかな？というところまで来たので、今回で一旦完成ということにします。

下記のURLから実際にさわれます。

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

後からリポジトリを見直した時になんのシステムかわかるように、README.mdを書くアンド GitHub Pagesにプッシュして完了にしたいと思います。

GitHubリポジトリ

github.com

バージョン情報
README.mdを書く
- 各画面のスクショをとる
GitHub Pagesに配置する

バージョン情報

Angular（JavaScriptのWebフレームワーク）ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています

ionic-angular@3.9.2
Angular@5.2.10
Google Chrome バージョン: 60.0.3112.113

README.mdを書く

README.mdの構成ですが、Getting Started（ローカルでのアプリの動かし方）とApp Preview（各画面のスクリーンショット）だけ書いて終わりにします。

各画面のスクショをとる

$ ionic serve --labを使うと、各種OS（iOS, Android, Windows）の動作確認を一度に実行することができるので、便利です。

f:id:l08084:20180512192139p:plain — 商品リスト画面のスクショ

f:id:l08084:20180512193014p:plain — 商品詳細画面のスクショ

f:id:l08084:20180512193139p:plain — カート画面のスクショ

撮ったスクリーンショットをresources/screenshots/配下に配置して、README.mdから参照できるようにする。

README.md:

## App Preview

[Try it live](https://l08084.github.io/ionic-sample-shopping-app/www)

* Home Page

  <img src="resources/screenshots/HomePage.png">

* Detail Page

  <img src="resources/screenshots/DetailPage.png">

* Cart Page

  <img src="resources/screenshots/CartPage.png">

MacPCを使っていて、かつエディタがVSCodeのかたは、キーボードで「command + shift + v」と打つことで、マークダウンのプレビューをみることが出来るので、便利ですよ