Flashcards telah lama digunakan sebagai alat pembelajaran yang efektif dengan menyediakan pertanyaan yang cepat dan berulang yang membantu pengguna menghafal fakta atau konsep. Secara tradisional, kartu flash berisi pertanyaan di satu sisi dan jawaban di sisi lain. Konsepnya sederhana, namun kuat untuk dihafal, baik Anda sedang belajar bahasa, matematika, atau mata pelajaran lainnya.

Permainan kartu flash bertenaga AI membawa metode pembelajaran ini ke tingkat berikutnya. Daripada mengandalkan konten statis, AI secara dinamis menghasilkan pertanyaan dan jawaban baru berdasarkan masukan pengguna, pola pembelajaran, dan kinerja dari waktu ke waktu. Personalisasi ini membuat proses pembelajaran menjadi lebih interaktif dan adaptif, memberikan pertanyaan yang menargetkan area tertentu yang memerlukan perbaikan oleh pengguna.

Dalam tutorial ini, kita akan menggunakan LLaMA 3.1, model bahasa luas open source yang kuat, untuk membuat kartu flash dinamis. Mesin AI akan menghasilkan pertanyaan dan jawaban baru secara real time berdasarkan topik atau kata kunci yang diberikan pengguna. Hal ini meningkatkan pengalaman belajar dengan menjadikan kartu flash lebih serbaguna, dipersonalisasi, dan efektif.

Membangun lingkungan yang kondusif bagi pembangunan

Kita perlu mengatur lingkungan kerja kita sebelum mulai menulis kode untuk aplikasi kartu flash kita.

1. Instal Node.js dan npm

Langkah pertama adalah menginstal Node.js dan npm. Pergi ke situs web Node.js dan dapatkan versi dukungan jangka panjang untuk sistem yang berjalan di komputer Anda. Ikuti langkah-langkah yang diberikan untuk instalasi.

2. Jalankan proyek dengan Next.js

Mulai terminal Anda dan pergi ke lokasi di mana Anda ingin melaksanakan proyek Anda. Setelah itu, jalankan perintah berikut:

• npx create-next-app@latest flash-card-app (Dengan @latest flag, npm mendapatkan versi terbaru dari konfigurasi startup Next.js.)
• cd flash-card-app

Ini akan membuat proyek Next.js baru dan mengarahkan Anda ke jalurnya. Anda akan ditawari sejumlah pilihan konfigurasi selama proses instalasi. Definisikan mereka seperti yang ditunjukkan di bawah ini:

• Apakah Anda ingin menggunakan TypeScript? TIDAK
• Apakah Anda ingin menggunakan ESLint? Ya
• Apakah Anda ingin menggunakan Tailwind CSS? TIDAK
• Apakah Anda ingin menggunakan src/ direktori? TIDAK
• Apakah Anda ingin menggunakan Router Aplikasi? Ya
• Apakah Anda ingin menyesuaikan alias impor default? TIDAK

3. Menginstal Firebase dan Material-UI

Di direktori proyek Anda, jalankan perintah berikut: npm install @mui/material @emotion/react @emotion/styled firebase.

Menyiapkan Firebase

• Mulai proyek baru di Firebase console.
• Klik “Tambahkan aplikasi” setelah proyek Anda dibuat, lalu pilih platform web (>).
• Beri nama pada aplikasi Anda saat Anda menyimpannya, misalnya “aplikasi kartu flash”.
• Buat salinan file instalasi Firebase. Nantinya akan bermanfaat.

4. Buat File Konfigurasi Firebase

Buat file baru bernama firebase.js di direktori utama proyek Anda dan tambahkan kode berikut, ganti placeholder dengan setelan Firebase proyek Anda yang sebenarnya:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
 };

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const auth = getAuth(app);
export const db = getFirestore(app);

Cara membuat token API di OpenRouter

Kami akan menggunakan versi gratis LLaMA 3.1 dari Rute Terbuka dan untuk ini kita perlu mendapatkan token API. Berikut langkah-langkah untuk mendapatkannya:

Langkah 1: Daftar atau masuk ke OpenRouter

1. Mengunjungi Situs web resmi OpenRouter.
2. Buat akun jika Anda tidak memilikinya. Anda dapat mendaftar dengan email Anda atau menggunakan penyedia OAuth seperti Google, GitHub, atau lainnya.
3. Masuk ke akun OpenRouter Anda jika Anda sudah memilikinya.

Langkah 2: Buka Pengaturan Kunci API

1. Setelah masuk, buka Dasbor.
2. Di dasbor, temukan API Atau Alat pengembangan bagian.
3. Klik pada Kunci API Atau Token pilihan.

Langkah 3: Buat kunci API baru

1. Di bagian Kunci API, Anda akan melihat tombol atau tautan ke Hasilkan kunci API baru.
2. Klik pada Menghasilkan tombol untuk membuat kunci API baru.
3. Anda mungkin diminta memberi nama pada kunci API Anda. Ini membantu Anda mengatur kunci jika Anda memiliki beberapa kunci API untuk proyek berbeda (misalnya, “Kunci Aplikasi Flashcard”).

Langkah 4: Salin kunci API

1. Setelah kunci API dibuat, itu akan ditampilkan di layar. Menyalin segera kunci API, karena beberapa layanan mungkin tidak lagi menampilkannya setelah Anda meninggalkan halaman.
2. Simpan kunci API dengan aman di file konfigurasi lingkungan Anda (misalnya, .env.local).

Langkah 5: Tambahkan kunci API ke .env.local Deposito

1. Di proyek Next.js Anda, buka .env.local file (jika Anda tidak memilikinya, buatlah).
2. Tambahkan baris berikut: OPENROUTER_API_KEY=your-generated-api-key-here.

Pastikan untuk mengganti your-generated-api-key-here dengan kunci API sebenarnya yang Anda salin.

Langkah 6: Gunakan kunci API di aplikasi Anda

Bangun logika dasar untuk mengimpor LLaMa 3.1 guna membuat Kartu Flash

Buat file baru di bawah folder aplikasi dengan nama route.js dan ikuti kode di bawah ini:

import { NextResponse } from "next/server";

const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY;

const systemPrompt = `
You are an AI flashcard creator. Your task is to generate concise and effective flashcards based on the given topic or content. Follow these guidelines:
1. Create clear and concise questions for the front of the flashcard.
2. Provide accurate and informative answers for the back of the flashcard, ensuring they do not exceed one or two sentences.
3. Ensure that each flashcard focuses on a single concept or piece of information.
4. Use simple language to make the flashcards accessible to a wide range of learners.
5. Include a variety of question types, such as definitions, examples, comparisons, and applications.
6. Avoid overly complex or ambiguous phrasing in both questions and answers.
7. When appropriate, use mnemonics or memory aids to help reinforce the information.
8. Tailor the difficulty level of the flashcards to the user's specified preferences.
9. If given a body of text, extract the most important and relevant information for the flashcards.
10. Aim to create a balanced set of flashcards that covers the topic comprehensively.
11. Only generate 10 flashcards.

Return in the following JSON format:
{
    "flashcards": [{
        "front": str,
        "back": str
    }]
}

Remember, the goal is to facilitate effective learning and retention of information through these flashcards.
`;

export async function POST(req) {
    const data = await req.text(); // Get the raw text from the request
  
    try {
      const response = await fetch(" {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${OPENROUTER_API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: "meta-llama/llama-3.1-8b-instruct",
          messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: data }
          ],
        })
      });
  
      if (!response.ok) {
        throw new Error(`Failed to fetch from OpenRouter AI: ${response.statusText}`);
      }
  
      const completion = await response.json();
      // Extracting JSON from the response content
      const rawJson = completion.choices[0].message.content;
      const startIndex = rawJson.indexOf('{');
      const endIndex = rawJson.lastIndexOf('}') + 1;
      const jsonString = rawJson.substring(startIndex, endIndex);
      const flashcardsData = JSON.parse(jsonString);
  
      // Assuming flashcardsData contains the "flashcards" array directly
      return NextResponse.json({ flashcards: flashcardsData.flashcards });
    } catch (error) {
      console.error("Error processing request:", error);
      return new Response("Error processing request", { status: 500 });
    }
  }

Kode bekerja dengan menerima a POST permintaan pelanggan dan ekstraksi teks biasa yang dimasukkan menggunakan req.text(). Dia kemudian mengirimkan a POST menanyakan OpenRouter API dengan prompt sistem yang menjelaskan bagaimana LLaMA 3.1 harus menghasilkan kartu flash. Responsnya, yang berisi kartu flash dalam format JSON, diurai dan dikirim kembali ke klien. Jika terjadi kesalahan saat memanggil atau memproses API, kesalahan tersebut dicatat dan respons 500 dikembalikan ke klien.

Membuat komponen dasar untuk aplikasi Flash Card

Langkah 1: Siapkan akun juru tulis Anda

1. Mendaftarlah sebagai petugas: Pergi ke Petugas.dev dan buat akun jika Anda belum memilikinya.
2. Buat aplikasi:
   • Setelah masuk, navigasikan ke Dasbor Petugas dan membuat aplikasi baru.
   • Aplikasi ini akan digunakan untuk sistem otentikasi aplikasi flashcard Anda.
3. Ambil kunci API: Di dasbor Panitera Anda, Anda akan menemukan dua kunci: Kunci API ujung depan Dan Kunci rahasia. Anda akan menggunakannya dalam proyek Next.js untuk integrasi Clerk.

Langkah 2: Instal Clerk SDK di proyek Next.js Anda

Jalankan perintah berikut untuk menginstal Clerk Next.js SDK: npm install @clerk/nextjs.

Langkah 3: Konfigurasikan variabel lingkungan

Untuk menyimpan kredensial petugas Anda dengan aman, tambahkan kredensial tersebut ke file .env.local Anda. Buat file ini jika tidak ada:

NEXT_PUBLIC_CLERK_FRONTEND_API=your-frontend-api-key
CLERK_API_KEY=your-secret-api-key

Mengganti your-frontend-api-key Dan your-secret-api-key dengan nilai sebenarnya dari dashboard petugas.

Langkah 4: Membuat Komponen Koneksi

"use client";

import { AppBar, Container, Typography, Box, Toolbar, Button } from "@mui/material";
import { useRouter } from 'next/navigation';
import { SignIn } from "@clerk/nextjs";

export default function LoginPage() {
  const router = useRouter();

  const handleHomeClick = () => {
    router.push("
  };

  return (
    
      
        
          
            Learn in a Flash
          
          
            Home
          
        
      
      
        
          Login to Your Account
        
        
      
    
  );
}

Langkah 5: Membuat Komponen Registrasi

"use client";

import { AppBar, Container, Typography, TextField, Button, Box, Toolbar } from "@mui/material";
import { useRouter } from 'next/navigation';

export default function SignUpPage() {
  const router = useRouter();

  const handleHomeClick = () => {
    router.push("
  };

  const handleLoginClick = () => {
    router.push('/sign-in'); // Ensure the leading slash for routing
  };

  return (
    
      
        
          
            Learn in a Flash
          
          
            Home
          
          
            Login
          
        
      
      
        
          Create an Account
        
        
      
    
  );
}

Membuat komponen front-end generasi Flashcard

1. Menyiapkan petugas untuk otentikasi pengguna

Pada bagian ini kita menggunakan alat petugas useUser() kait untuk mengelola otentikasi pengguna. Ini membantu mengidentifikasi apakah pengguna masuk dan memberikan akses ke data pengguna, yang sangat penting untuk mengaitkan kartu flash dengan pengguna yang benar.

import { useUser } from "@clerk/nextjs"; 
export default function Generate() { 
const { isLoaded, isSignedIn, user } = useUser(); 
// Other code will be placed below this 
}

Perkataan:

• isLoaded: Memeriksa apakah data pengguna terisi penuh
• isSignedIn: Memeriksa apakah pengguna sudah login
• user: Berisi data pengguna jika diautentikasi

2. Mengelola status kartu memori

Di sini kita mendefinisikan variabel status menggunakan React useState untuk mengelola kartu flash, keadaan terbalik, input pengguna, dan menangani kotak dialog untuk menyimpan kartu flash.

const [flashcards, setFlashcards] = useState([]);  // Stores the generated flashcards
const [flipped, setFlipped] = useState({});  // Keeps track of which flashcards are flipped
const [text, setText] = useState("");  // User input for generating flashcards
const [name, setName] = useState("");  // Name for the flashcard collection
const [open, setOpen] = useState(false);  // Dialog state for saving flashcards

Perkataan:

• flashcards: Tabel untuk memuat kartu flash yang dihasilkan
• flipped: Keberatan untuk mengetahui apakah setiap kartu flash dikembalikan
• text: menyimpan teks yang dimasukkan oleh pengguna untuk menghasilkan kartu flash
• name: Menyimpan nama koleksi kartu flash
• open: Mengelola visibilitas kotak dialog untuk menyimpan kartu flash

3. Mengirimkan Masukan Pengguna untuk Menghasilkan Flashcards

Fungsi ini menangani pengiriman teks masukan ke API untuk menghasilkan kartu flash dan memperbaruinya flashcards status berdasarkan respons API.

const handleSubmit = async () => {
  try {
    const response = await fetch("/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text }),  // Sends the input text to the API
    });

    if (!response.ok) {
      throw new Error("Failed to fetch flashcards");
    }

    const data = await response.json();  // Extracts the response data
    if (data && data.flashcards) {
      setFlashcards(data.flashcards);  // Updates the flashcards state with the generated flashcards
    }
  } catch (error) {
    console.error("Error generating flashcards:", error);
  }
};

Perkataan:

• Kirim a POST bertanya /api/generate dengan teks yang dimasukkan pengguna
• Server mengembalikan kartu flash yang dihasilkan, yang kemudian ditentukan di flashcards Negara.

4. Manajemen pembalikan Flashcard saat diklik

Fitur ini memungkinkan pengguna mengklik kartu flash untuk “membaliknya”, sehingga memperlihatkan bagian depan atau belakang kartu.

const handleCardClick = (index) => {
  setFlipped((prev) => ({
    ...prev,
    [index]: !prev[index],  // Toggles the flipped state of the flashcard at the given index
  }));
};

Perkataan:

• Saat Anda mengklik kartu, flipped Statusnya diubah untuk indeks rekaman yang bersangkutan, beralih antara menampilkan bagian depan dan belakang.

5. Membuka dan menutup kotak dialog Simpan

Di sini, fungsinya mengatur visibilitas kotak dialog. Pengguna dapat membuka kotak dialog untuk menyimpan kartu flash dan menutupnya setelah selesai.

const handleOpen = () => {
  setOpen(true);  // Opens the dialog
};

const handleClose = () => {
  setOpen(false);  // Closes the dialog
};

Perkataan:

• handleOpen: Membuka kotak dialog simpan
• handleClose: Menutup kotak dialog simpan

6. Simpan Kartu Flash di Firebase

Fitur ini menyimpan kartu flash yang dihasilkan di Firebase Firestore pada koleksi pengguna saat ini, memastikan bahwa setiap kumpulan kartu flash dikaitkan secara unik dengan pengguna.

const saveFlashcards = async () => {
  if (!name) {
    alert("Please enter a name");
    return;
  }

  const batch = writeBatch(db);  // Firestore batch for atomic writes
  const userDocRef = doc(collection(db, "users"), user.id);  // User document reference
  const docSnap = await getDoc(userDocRef);

  if (docSnap.exists()) {
    const collectionData = docSnap.data().flashcards || [];
    if (collectionData.find((f) => f.name === name)) {
      alert("Flashcard with this name already exists.");
      return;
    } else {
      collectionData.push({ name });  // Add the new flashcard collection name
      batch.set(userDocRef, { flashcards: collectionData }, { merge: true });
    }
  } else {
    batch.set(userDocRef, { flashcards: [{ name }] });  // Create a new user document if it doesn't exist
  }

  const colRef = collection(userDocRef, name);  // Reference to the flashcard collection
  flashcards.forEach((flashcard) => {
    const cardDocRef = doc(colRef);  // Create a document for each flashcard
    batch.set(cardDocRef, flashcard);  // Save each flashcard
  });

  await batch.commit();  // Commit the batch
  handleClose();
  router.push("/flashcards");  // Redirect to the flashcards page after saving
};

Perkataan:

• Memeriksa apakah pengguna memasukkan nama untuk koleksi kartu memori
• Menggunakan penulisan batch Firestore untuk memastikan semua kartu memori disimpan secara atom
• Menyimpan kartu flash di bawah dokumen dan koleksi pengguna di Firestore

7. Rendering UI

Ini adalah bagian utama BEJ, yang menangani form input teks, menampilkan kartu flash dan menampilkan dialog simpan.

return (
  
    
       setText(e.target.value)}  // Update the text state on input
      />
      
        Generate Flashcards
      
    

    {flashcards.length > 0 && (
      
        
          Flashcard Preview
        
        
          {flashcards.map((flashcard, index) => (
            
               handleCardClick(index)}>
                
                  
                    
                      {flipped[index] ? flashcard.back : flashcard.front}
                    
                  
                
              
            
          ))}
        
        
          
            Save
          
        
      
    )}

    

      Save the Flashcards
      
        
          Please enter a name for your Flashcard's Collection
        
         setName(e.target.value)}
        />
      
      
        Cancel
        Save
      
    
  
);

Perkataan:

• Ini menampilkan formulir untuk memasukkan teks dan menghasilkan kartu flash.
• Ini juga menangani rendering kartu flash yang dihasilkan dengan fungsi flip dan menyertakan dialog untuk menyimpan kartu flash ke Firebase Firestore.

Contoh tampilan layar depan setelah pembuatan

Kesimpulan

Ini menyimpulkan pembuatan aplikasi kartu flash kami. Dalam contoh ini, saya menggunakan model bahasa LLaMA 3.1, namun jangan ragu untuk bereksperimen dengan model lain yang Anda suka.

Selamat membuat kode!