Quasar を使ってちょっとしたモバイルアプリを作ってみる。(1/2)


#目的
復旧・復興支援制度データベースの内容（
https://www.r-assistance.go.jp/blob/ssdb-apidoc/API-common_spec.html
）を表示するアプリを Quasar 0.14 （
http://quasar-framework.org
）を使って作ってみる。

#準備
node, npm をインストールしておく
https://nodejs.org/ja/

XCode があればなお可。

Vue の知識
https://jp.vuejs.org
https://qiita.com/Satachito/items/7c393513bf42ea3d1ebd

#Quasar のインストール
```
$ npm install -g quasar-cli
```

#アプリの雛形の作成
```
$ quasar init <folder_name>
$ cd <folder_name>
$ npm i
```

#開発用のサービス
上記で作成したアプリを 8080 ポートでサービスする。

```
$ quasar dev
```

サービスが開始する。（自動的にブラウザが開いて、サービスされた localhost:8080 を読み込んでくれる）

![SS1.png](https://qiita-image-store.s3.amazonaws.com/0/73493/da8f81fc-c56d-79d7-2fea-27fc6b06e9de.png)

Xcode があれば、Simulator の safari で localhost:8080 にアクセスしてみる。

![SS2.png](https://qiita-image-store.s3.amazonaws.com/0/73493/a1f716fa-222c-caa8-879a-8c5b53101f91.png)


# API にアクセスして返ってきたJSONを表示してみる。

復旧・復興支援制度データベース API のアドレス。
```
http://api.r-assistance.go.jp/v2/supports.json?appkey=0
```

以下のファイルがコンポーネントがユーザーに見えるコンポーネント。

```
<folder_name>/src/components/Hello.vue
```

とりあえずこれを編集してみる。

```src/components/Hello.vue

<template>
  <q-layout
    ref="layout"
    view="lHh Lpr fff"
    :left-class="{'bg-grey-2': true}"
  >
    <q-toolbar slot="header" class="glossy">
      <q-toolbar-title>
		復旧・復興支援制度データベース
        <div slot="subtitle">Running on Quasar v{{$q.version}}</div>
      </q-toolbar-title>
    </q-toolbar>

    <div class="layout-padding non-selectable no-pointer-events">
		{{ m }}
    </div>
  </q-layout>
</template>

<script>
import {
  QLayout,
  QToolbar,
  QToolbarTitle
} from 'quasar'

export default {
  name: 'index',
  components: {
    QLayout,
    QToolbar,
    QToolbarTitle
  },
  data () {
    return { m: {} }
  },
  created () {
    fetch('http://api.r-assistance.go.jp/v2/supports.json?appkey=0').then(
      p => p.json()
    ).then(
      p => { this.m = p }
    ).catch(
      err => alert(err)
    )
  }
}
</script>

```

![SS3.png](https://qiita-image-store.s3.amazonaws.com/0/73493/f6165d94-d3c0-07b3-4d70-2d14dd1cfc67.png)

Xcode があれば、Simulator の safari で localhost:8080 にアクセスしてみる。

![SS4.png](https://qiita-image-store.s3.amazonaws.com/0/73493/35fca8b5-b765-b793-9fd3-06567cab7541.png)

# 少しアプリらしくしてみる。

## 左側にドロワーを置きマスターディテールの形にしてみる。

### src/components 以下に Root.vue と Detail.vue を作成して、router.js でルーティングする。

```src/components/Root.vue
<template>
	<h1>←ドロワーから、見たい制度を選んでください。</h1>
</template>
```

```src/components/Detail.vue
<template>
	<div>
		<h3>{{ $store.state.json.supports[ $route.params.idx ].name }}</h3>
		{{ $store.state.json.supports[ $route.params.idx ].summary }}
		<br>
		<br>
		{{ $store.state.json.supports[ $route.params.idx ].general_info }}
	</div>
</template>
```

```src/router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

function load (component) {
  return () => import(`@/${component}.vue`)
}

export default new VueRouter({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),

  routes: [
    { path: '/', component: load('Root') },
    { path: '/detail/:idx', component: load('Detail') },

    // Always leave this last one
    { path: '*', component: load('Error404') } // Not found
  ]
})
```

### App.vue の中でドロワーを置いて、内容をメニューにしてみる。

```src/App.vue
<template>
  <div id="q-app" >
    <q-layout ref="layout" view="lHh Lpr fff" :left-class="{'bg-grey-2': true}">

      <q-toolbar slot="header" class="glossy">
        <q-btn flat @click="$refs.layout.toggleLeft()">
          <q-icon name="menu" />
        </q-btn>
        <q-toolbar-title>
          復旧・復興支援制度データベース
          <div slot="subtitle">Running on Quasar v{{$q.version}}</div>
        </q-toolbar-title>
      </q-toolbar>
  
      <div slot="left">
        <div v-for="( w, i ) in $store.state.json.supports" :key='i'>
          <q-side-link item :to="'/detail/' + i">
            <q-item-main :label="w.name" />
          </q-side-link>
        </div>
      </div>
  
      <router-view />

    </q-layout>
  </div>
</template>

<script>

import {
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QSideLink,
  QItemMain
} from 'quasar'

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default {
  name: 'index',
  components: {
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QSideLink,
    QItemMain
  },
  store: new Vuex.Store({
    state: { json: { supports: [] } },
    mutations: {
      json: (state, payload) => { state.json = payload.json }
    }
  }),
  created () {
    fetch('http://api.r-assistance.go.jp/v2/supports.json?appkey=0').then(
      p => p.json()
    ).then(
      p => this.$store.commit('json', { json: p })
    ).catch(
      err => alert(err)
    )
  }
}
</script>
```

![SS8.png](https://qiita-image-store.s3.amazonaws.com/0/73493/d45eecea-5afc-c148-69fd-c765fec4a3a0.png)

![SS9.png](https://qiita-image-store.s3.amazonaws.com/0/73493/b64f62fa-1759-1cab-5c93-c074e4488a75.png)

![SS10.png](https://qiita-image-store.s3.amazonaws.com/0/73493/d5c082cb-cca3-d1db-1460-d927bfee6934.png)


# Quasar を使ってちょっとしたモバイルアプリを作ってみる。(2/2)に続く
https://qiita.com/Satachito/items/f606e2dad0400fecebeb