占いアプリをVuetifyで作る

By on Dec 16, 2018

2018/12/19 第7回 SOL-Tech（静岡のWeb/アプリ勉強会）のテーマは「占いアプリ・プチコンテスト」ということで、占いアプリをFirebaseにデプロイする。※人前で発表なんてはじめて。ドキドキする！

Vuetify で占いアプリを作成する

DEMO

DEMO : 2019TECH占い : https://fortune-telling-2019.firebaseapp.com

機能

ユーザーが名前をアルファベット（例：SHOKO）で入力する。　
ユーザー名（例：SHOKO）と翌年の2019年（TWENTY-NINETEEN）のアルファベットをシャッフルする。
シャッフルされたアルファベットから、占い結果の頭文字として無作為に1つ選び、占い結果を表示する。

Vue.jsを使えるようにする

  $ yarn global add @vue/cli
  $ vue create fortune-telling-2019
  $ cd fortune-telling-2019
  $ yarn serve

Vue.jsの初期画面が「http://localhost:1313」で見えることを確認する

Vuetifyを使えるようにする

  $ vue add vuetify
  $ yarn serve

Vuetifyのパッケージが追加されて、Vuetifyの初期画面が「http://localhost:1313」で見えることを確認する

プログラム作成

ソースコードは「shokokb/fortune-telling-2019@GitHub」にあるので、ご自由にどうぞ。

Firebaseにデプロイする

Firebase Consoleからプロジェクトを作成する

Firebase Consoleにログインする
Firebase Consoleの「Firebaseへようこそ」の画面で「プロジェクトを追加」をクリックする。

Firebaseへようこそ
プロジェクトID等を設定し、「プロジェクトを作成」する。

プロジェクトを作成
プロジェクトが作成される。

作成中

Firebase CLIをインストールする

  $ yarn global add firebase-tools

Firebaseにログインする

ログインコマンドを入力する
「アカウントの選択」が表示されるので、Googleアカウントを選択する。

Success!が表示されれば、成功である。

firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information?
Yes

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=856911908&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

✔  Success! Logged in as foobar@gmail.com

ホスティングを初期化する

Firebase のホスティングにログインする。
「? Select a default Firebase project for this directory: 」で[create a new project]を選択する。
プロジェクト名を「fortune-telling-2019」に設定する。

「? What do you want to use as your public directory? (public)」で「dist」を入力する。

$ firebase init hosting

   ######## #### ########  ######## ########     ###     ######  ########
   ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
   ######    ##  ########  ######   ########  #########  ######  ######
   ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
   ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

/Users/shoko_kb/Desktop/fortune-telling-2019


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: [create a new project]

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) dist

   
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote dist/404.html
✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

JSONファイル（firebase.json）を確認する

  $ ls
    ... firebase.json ...

ビルドする

  $ yarn build
    :
  ✨  Done in 22.35s.

デプロイする

  firebase deploy --project fortune-telling-2019
  Project Console: https://console.firebase.google.com/project/fortune-telling-2019/overview
  Hosting URL: https://fortune-telling-2019.firebaseapp.com