目的 Firebaseを使って業務アプリケーションを作りたい。 背景 普段はAWSのECSでフロント/バックエンドのサーバを立てて業務アプリケーションを稼働させています。 ですが、利用者も限られてるしフロントエンドサーバに至ってはコンテンツの配信を一日に数回するだけなので、なんか過剰なことをやっている気もする。 FirebaseのCloud Functionとhostingで代用できるかも…？ バックエンドにしたって、簡単なRESTのIFとRDBへの型変換をやっているだけな気がする。 バリデーションをフロントエンド側でやればもしかしたらFirebaseのCloudStoreで代用できるかも…？ ということで、Firebaseを使って業務アプリケーションを作ってみようというのが今回の目的。 やること FirebaseのCloudStore/Functions/Hostingを使う Nuxt.
はじめに Nuxt.jsの学習でTodoアプリを作成したので、理解した内容で少し機能の追加をしてみました。 0から作成する手順をまとめたいと思います。初学者のため、コード等お見苦しい箇所が多くあるかもしれません。お許しください 作成物 リポジトリ 機能 以下が主な機能でnewが追加した部分になります。 タスクが登録できる タスクに備考が登録できる new タスクに日付が登録できる new タスクを完了にできる タスクを削除できる UIフレームワークでVuetifyを使用する new 登録の際にダイアログを表示する new TodoとDoneは別々の表示領域を用意する new 前提 Googleアカウントを所持していること Nuxtの開発環境が用意してあること ※開発環境の用意についてはこちらにまとめてみました！ Firebaseの設定 データの格納場所としてFirebaseの CloudF
Nuxt/VuexでFirebase Authenticationを使ったユーザー認証機能を作るにあたって、基本的なやり方はFirebaseドキュメントに書いてあるのですが、「どこに何を書けばいいのか」がよくわからなかったので調べながらまとめてみました。 完成形 こんな感じで用意されたUIを使ってログイン機能が実装できます。 前提条件 Firebase Projectの作成/Firebase SDKの作成はNuxt/Vuexには関係しない部分なので次の記事を参考に行ってください。この記事はFirebase SDKをNuxt/Vuexにどう組み込むか、を中心に書きたいと思います。 firebase.google.com 環境 nuxt@2.5.1 vue@2.6.10 vuex@3.1.0 firebase@5.9.2 firebaseui@3.5.2 FirebaseUIインストール＆CS
株式会社ROLOさんが主催しているJavaScript Buildersで受けたHands-onでやったことを復習も兼ねて調べながらメモ。 1. Nuxtのプロジェクトを作成 $ npx create-nuxt-app <Project Name> $ cd <Project Name> create-nuxt-appをインストールした覚えがないのですが、npxコマンドだとそのままプロジェクトが作成できるっぽい!? Nuxt.jsの起動 $ yarn run dev ブラウザでhttp://localhost:3000にアクセス Nuxt.jsで静的ファイルの生成 $ yarn run generate 2. プロジェクトをFirebaseに接続する Firebaseのコンソールから新規プロジェクトを作成している前提。 2-1. Firebase CLIのインストール Firebase C
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
