アジャイルの歴史・スクラムの型について書きました
所属している会社でテックブログを書きました。 PharmaX 社内でスクラム勉強会を開催しました!|PharmaX Blog
LLM初心者が3日でPoCを作るためにやったことを書きました
所属している企業でLLM関連のテックブログを書きました note.com
Buefyで3列のグリッドレイアウトを作る
こちら勉強になった。こんな感じにするだけで3列のグリッドレイアウトになって、 溢れた分は折り返してくれる。
ul.columns.is-multiline li(v-for="(todo, index) in todos" :key="index" class="column is-4")
Firebase Authで匿名ログインを実装して作成したuserデータを取得する
Userドキュメント用のTypeを用意する
import firebase from "firebase" export type User = { id?: string name: string createdAt: firebase.firestore.Timestamp updatedAt: firebase.firestore.Timestamp } export const initialUser: User = { name: "", createdAt: firebase.firestore.Timestamp.now(), updatedAt: firebase.firestore.Timestamp.now(), }
匿名認証の機能を実装する
import 'firebase/auth' export const signin = async () => { const userCredential = await firebase.auth().signInAnonymously() const { uid } = userCredential.user const userDoc = await firebase.firestore().collection("users").doc(uid).get() //ユーザー情報が作られていない場合は初期化 if (!userDoc.exists) { await firebase.firestore().collection("users").doc(uid).set(initialUser) return { ...initialUser, id: uid } as User } else { return { //firestoreのドキュメントのdataはIDを返さないので展開して返している id: uid, ...userDoc.data() } as User } }
認証画面を作成する
メインのナビゲーターの前にログインしていなかったら、 弾くための認証画面を作る。
screens/AuthScreen.tsx
import React, { useEffect } from "react" import { StyleSheet, ActivityIndicator, Text, View } from 'react-native' import { signin } from "../utils/Fire" export const AuthScreen = () => { useEffect(() => { const fetchUser = async () => { const user = await signin() } fetchUser() }, []) return ( <View style={styles.container}> <ActivityIndicator size="large" /> <Text style={styles.text}>ログイン中...</Text> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, text: { marginTop: 16, fontSize: 12, color: "#888", }, })
今日の学び
- App.tsxでログイン状態をみて制御を行う
- 匿名認証はセッション毎にIDが発行されてusersコレクションに作成される。途中からメール認証に統合も可能、ログインしないでいいねとか出来る
- Firebaseのドキュメント毎にtypeを定義しておくがお作法