Edited at

Firebase+Nuxt.jsでともだちのSNSリンクを一カ所で管理できるサービスを作ってしまった......【個人開発】

じぇいです!

今回僕は、Firebaseの勉強にサービスを一つリリースしました。

それは!

ともだちのSNSリンクを一カ所で管理できる「ともだちびお」というサービスです。

Firebase+Nuxt.jsで作りました!Firebaseは初めての挑戦です。

リリースツイートはこちらです!え、リツイートしてくれますよね...?


サービス内容

サービス内容はともだちのSNSリンクを一カ所で管理できる連絡帳サービスです。

Twitter, Facebook, Instagram, Githubなどのリンクを登録できます!


使ったもの


Nuxt.js

Vue.jsをさらに便利に活用できるフレームワーク。SPAもSSRもどっちも来い!っていうなんでもできちゃう感。SPAで今回は作りました!


Firebase Authentication

Twitter認証に使いました(後述)。


Firebase Realtime Database

基本的なCRUDを実装しました(後述)。ルール定義で自分の保存データしかアクセスできないようにすることで連絡帳サービスを実装しています。Firestoreも興味深かったのですが、学習コストがたかそうだったので、まずはRealtime Databaseからにしました。


Firebase Hosting

デプロイもものすごく簡単!カスタムドメインにもSSL接続を無料でできてハッピー!


FontAwesome

最初、CDNで使ってたんですが速度が遅かったので最終的にはnpmパッケージで使うことにしました。使うアイコンだけlibrary.add()すれば、読み込みも遅くなりません。


nuxt-buefy

BulmaのVueに最適化したフレームワーク。細かい部品は頼りきりでした。


vue-lazyload

画像の遅延読み込みに使いました。少しは速度は改善したはず......。


vue-burger-menu

おしゃれなバーガーメニューを実装できます。


vue-tags-input

タグの入力に使いました。


@nuxtjs/pwa

PWA対応を簡単にできます。ただTwitter OAuthを使っているので一度Safariに遷移してしまってあまりうまく使えてません。Androidはできてるのかな?


@nuxtjs/google-analytics

Google Analyticsの設定が楽々!


Firebaseの認証・CRUD


認証

Twitterログイン

methods: 

twitterLogin () {
var provider = new firebase.auth.TwitterAuthProvider()
firebase.auth().signInWithPopup(provider)
}
}

ログアウト

logout: function() {

firebase.auth().signOut();
},

ログインしてるかのチェック

firebase.auth().onAuthStateChanged(user => {

if (user) {
this.isLogin = true
this.user = user
} else {
this.isLogin = false
this.user = null
};
})


CRUD

Create(投稿)

var newLinkKey = firebase.database().ref().child('posts').push().key;

firebase
.database()
.ref('posts/' + this.user.uid + '/' + newLinkKey)
.set({
content: this.content,
// 省略
})

Read(読み取り)

firebase.database().ref('posts/' + this.user.uid).on('value', function(snapshot) {

this.posts = snapshot.val()
})

Update(更新)

var newPost = {

content: this.content
// 省略
}
var updates = {}
updates['/posts/' + this.user.uid + '/' + key] = newPost
firebase.database().ref().update(updates)

Delete(削除)

firebase.database().ref('links/' + this.user.uid + '/' + key).remove();


最後に

Firebaseはこれだけでマイクロサービスを作り上げることができます。

Nuxt.jsと組み合わせることでサービスの幅も広がって良き良き。

Twitterフォローしてねー!