質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

552閲覧

Firestoreに複数データを挿入したい

cacao86

総合スコア97

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/05/09 14:46

編集2021/05/09 15:09

ReactNativeでチャットアプリの制作をしています。
ユーザーがチャットを送信するとTalkAPIからレスポンスが返ってくるというシンプルなものです。
問題は、送信したチャットの内容とレスポンスをFirestoreに保存したいと思っているのですが、現在のコードですとAPIからのレスポンスのみが保存されます。
Firestoreの内容をチャット画面に反映したいと思っておりますので2つともDBに保存したいです。
①の後に②を実行させたく思います。
非同期処理について今一理解に乏しい面もあってなかなか解決できません。
お力添え宜しくお願い致します!

javascript

1import { StatusBar as ExpoStatusBar } from 'expo-status-bar'; 2import React, {useState} from 'react'; 3import { StyleSheet, TextInput, SafeAreaView, View, Button } from 'react-native'; 4import { getMessageDocRef } from '../lib/firebase'; 5import firebase from 'firebase'; 6import axios from 'axios'; 7 8export default function ChatScreen() { 9 const [text, setText] = useState(''); 10 const url = 'https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk'; 11 const apiKey = '*****'; 12 const sendMessage = async (value) =>{ 13 if(value !== ''){ 14 const docRef = await getMessageDocRef(); 15 const newMessage = { 16 text: value, 17 created_at: firebase.firestore.Timestamp.now(), 18 userId: '1' 19 } 20 await docRef.set(newMessage); ・・・・・① 21 let params = new FormData(); 22 params.append("apikey", apiKey); 23 params.append("query", newMessage.text ); 24 const response = await axios.post(url,params) 25 const responseMessage = ({text: response.data.results[0].reply, 26 created_at: firebase.firestore.Timestamp.now(), 27 userId: 'TalkAPI'}) 28 docRef.set(responseMessage); ・・・・・② 29 setText(''); 30 }else{ 31 alert('error') 32 } 33 } 34 35 return ( 36 <SafeAreaView style={styles.container}> 37 <ExpoStatusBar style="light" /> 38 <View style={styles.inputTextContainer}> 39 <TextInput 40 styls={styles.inputText} 41 onChangeText={(value)=>{ 42 setText(value) 43 }} 44 value={text} 45 placeholder="Plese enter a message" 46 placeholderTextColor="#777" 47 autoCapitalize="none" 48 autoCorrect={false} 49 returnKeyType="done" 50 /> 51 <Button title="send" onPress={() => {sendMessage(text)}} /> 52 </View> 53 </SafeAreaView> 54 ); 55 }

JavaScript

1firebase.js 2一部省略 3export const getMessageDocRef = async () => { 4 return await firebase.firestore().collection('message').doc(); 5}

こちらの記事を参考にしております。
叩くTalkAPI

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問