打造多語言詞彙應用程式：使用 React Native、Firebase 與 Chat GPT 的實踐指南—第三部分

摘要

本文章深入探討如何利用React Native、Firebase與ChatGPT API打造一款高效且具個人化特性的多語言詞彙應用程式，為學習者提供更豐富的學習體驗。 歸納要點:

• 高效整合ChatGPT API以生成多語言例句、同義詞及測驗題目,提升學習者的互動體驗。
• React Native應用程式的效能優化策略,包括使用FlatList和虛擬化技術,以增強對大型資料庫的搜尋效率。
• Firebase資料庫設計與安全規則設定,確保多語言詞彙資料的高效能索引及使用者權限管理,符合GDPR等規範。

npm i react-native-openai

import { SetStateAction } from "react"; import OpenAI from "react-native-openai";  const openAI = new OpenAI({   apiKey:     "YOUR_API_KEY",   organization: "YOUR_ORGANIZATION_KEY", });  export const fetchTranslations = async (   gptWord: string[],   translatedTexts: string[],   target: string,   setCards: React.Dispatch>,   setLoading: React.Dispatch> ) => {   const wordPairs = gptWord.map(     (word, index) => `"${word}": "${translatedTexts[index]}"`   );  const prompt = ` Here is a list of English words with their exact translations in ${target} language: {${wordPairs.join(   ", " )}}. Do not translate the words yourself. Use only the provided translations as the exact "correct" translations.  For each word, find 3 other similar words in ${target} language. Ensure these words: 1. Are in the same ${target} language as the "correct" translation. 2. Do not carry the exact meaning of the "correct" translation, but are somewhat related. 3. Do not give synonyms or directly interchangeable words that could fully replace the correct translation.  For example, if the correct translation for "orange" is "turuncu", do not use words like "portakal" (meaning the fruit) or exact synonyms of "turuncu". Instead, choose words that suggest a similar color tone or concept, but are not direct synonyms or definitions.  The response format should be: {   "word1": { "correct": "exact_translation_provided", "others": ["similar_word1_not_exact_synonym", "similar_word2_not_exact_synonym", "similar_word3_not_exact_synonym"] },   "word2": { "correct": "exact_translation_provided", "others": ["similar_word1_not_exact_synonym", "similar_word2_not_exact_synonym", "similar_word3_not_exact_synonym"] } }  Return only JSON in this format, with no explanations or additional text. Make sure the similar words are not exact synonyms or the same as the correct translation.`;    setLoading(true);   const updatedCards: SetStateAction = [];    try {     const result = await openAI.chat.create({       messages: [         {           role: "user",           content: prompt,         },       ],       model: "gpt-4o-mini",     });      let rawResponse = result.choices[0].message.content.trim();     rawResponse = rawResponse.replace(/```json|```/g, "").trim();      const parsedResponse = JSON.parse(rawResponse);     console.log("Parsed GPT Response:", parsedResponse);      Object.keys(parsedResponse).forEach((word) => {       const { correct, others } = parsedResponse[word];       const uniqueOthers = Array.from(new Set(others));       const allOptions = [...uniqueOthers.slice(0, 3), correct];       const shuffled = allOptions.sort(() => 0.5 - Math.random());        const wordData = {         text: word,         top: shuffled[0],         bottom: shuffled[1],         left: shuffled[2],         right: shuffled[3],         correct,         removing: false,       };        updatedCards.push(wordData);     });      setCards(updatedCards);   } catch (error) {     console.error("Error parsing GPT response:", error);     throw error;   } finally {     setLoading(false);   } };

高效建置多語詞彙學習App：從API整合到卡片式互動設計

打造穩健的React Native應用程式：最佳錯誤處理與非同步程式設計

  const handlePractice = async () => {     if (wordList.length === 0) {       Alert.alert("No Words", "Please add words before practicing.");       return;     }      try {       setLoading(true);        const originalWords = wordList.map((word) => word.source);       const translatedWords = wordList.map((word) => word.target);        const preparedQuestions = [];       await fetchTranslations(         originalWords,         translatedWords,         targetLanguage,         (cards) => {           if (cards.length > 0) {             cards.forEach(({ text: originalWord, correct: translatedWord, ...options }) => {               const allOptions = [options.top, options.bottom, options.left, options.right].sort(                 () => Math.random() - 0.5               );               preparedQuestions.push({                 originalWord,                 translatedWord,                 options: allOptions,               });             });           } else {             console.error("Failed to prepare questions.");           }         },         setLoading       );        router.push({         pathname: "./Question",         params: {           main: sourceLanguage,           target: targetLanguage,           words: JSON.stringify(preparedQuestions),         },       });     } catch (error) {       console.error("Error preparing questions:", error);       Alert.alert("Error", "Failed to prepare questions.");     } finally {       setLoading(false);     }   };

useEffect(() => {   prepareQuestions(); }, []);

useEffect(() => {   if (timeLeft > 0) {     const timer = setTimeout(() => setTimeLeft((prev) => prev - 1), 1000);     return () => clearTimeout(timer);   } else {     handleTimeUp();   } }, [timeLeft]);

const handleAnswer = (answer: string) => {   setSelectedAnswer(answer);    if (answer === currentQuestion.translatedWord) {     setCorrectCount((prev) => prev + 1);   } else {     setWrongCount((prev) => prev + 1);   }    setTimeout(() => {     setSelectedAnswer(null);     setTimeLeft(30);      if (currentIndex + 1 < questions.length) {       setCurrentIndex((prev) => prev + 1);     } else {       Alert.alert(         "Quiz Complete",         `Correct: ${correctCount + (answer === currentQuestion.translatedWord ? 1 : 0)}, Wrong: ${wrongCount + (answer !== currentQuestion.translatedWord ? 1 : 0)}`       );       router.back();     }   }, 2000); };

Alert.alert(   "Quiz Complete",   `Correct: ${correctCount}, Wrong: ${wrongCount}` ); router.back();

   What's the meaning of:{" "}   {currentQuestion?.originalWord}?     {currentQuestion?.options.map((option, index) => (      handleAnswer(option)}       disabled={!!selectedAnswer}     >       {option}        ))} 

AI 驅動的個人化詞彙學習應用程式：升級版動態測驗與情境式學習