add first Project Basic App

.env

@@ -0,0 +1,7 @@
+VUE_APP_FIREBASE_API_KEY=YOUR_API_KEY
+VUE_APP_FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
+VUE_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
+VUE_APP_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
+VUE_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
+VUE_APP_FIREBASE_APP_ID=YOUR_APP_ID
+# Disini We Belum Uji Sama Sekali Nunggu nanti aja lah  

README.md

@@ -1,3 +1,6 @@
 # ChatsApp
 
-ChatsApp The Project Real Time Chating
+ChatsApp The Project Real Time Chating
+
+Install: `npm install`
+Run : `npm serve`

src/App.vue

@@ -0,0 +1,63 @@
+<template>
+    <div id="app">
+      <button v-if="!user" @click="login">Login with Google</button>
+      <div v-else>
+        <p>Welcome, {{ user.displayName }}!</p>
+        <ChatBox />
+        <button @click="logout">Logout</button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { ref, onMounted } from "vue";
+  import { signInWithGoogle, signOutUser } from "./firebase/auth";
+  import ChatBox from "./components/ChatBox.vue";
+  
+  export default {
+    components: {
+      ChatBox,
+    },
+    setup() {
+      const user = ref(null);
+  
+      // Fungsi login Google
+      const login = async () => {
+        const loggedInUser = await signInWithGoogle();
+        if (loggedInUser) {
+          user.value = loggedInUser;
+          localStorage.setItem("user", JSON.stringify(loggedInUser));
+        }
+      };
+  
+      // Fungsi logout
+      const logout = () => {
+        signOutUser();
+        user.value = null;
+        localStorage.removeItem("user");
+      };
+  
+      // Periksa status login saat pertama kali dimuat
+      onMounted(() => {
+        const savedUser = localStorage.getItem("user");
+        if (savedUser) {
+          user.value = JSON.parse(savedUser);
+        }
+      });
+  
+      return { user, login, logout };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Tambahkan gaya untuk App.vue */
+  #app {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+  </style>
+  

src/components/ChatBox.vue

@@ -0,0 +1,80 @@
+<!-- src/components/ChatBox.vue -->
+<template>
+    <div class="chatbox">
+      <ul class="message-list">
+        <Message
+          v-for="message in messages"
+          :key="message.id"
+          :message="message"
+        />
+      </ul>
+      <input
+        v-model="newMessage"
+        @keyup.enter="sendMessage"
+        placeholder="Type a message"
+      />
+      <button @click="sendMessage">Send</button>
+    </div>
+  </template>
+  
+  <script>
+  import { ref } from "vue";
+  import Message from "./Message.vue";
+  import { sendMessage, listenForMessages } from "../firebase/database";
+  
+  export default {
+    components: {
+      Message,
+    },
+    setup() {
+      const messages = ref([]);
+      const newMessage = ref("");
+  
+      // Mendengarkan pesan secara real-time
+      listenForMessages((loadedMessages) => {
+        messages.value = loadedMessages;
+      });
+  
+      // Fungsi untuk mengirim pesan
+      const sendMessageHandler = () => {
+        if (newMessage.value.trim()) {
+          sendMessage(newMessage.value);
+          newMessage.value = "";
+        }
+      };
+  
+      return {
+        messages,
+        newMessage,
+        sendMessage: sendMessageHandler,
+      };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Tambahkan gaya untuk komponen chatbox */
+  .chatbox {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  
+  .message-list {
+    flex: 1;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+  }
+  
+  input {
+    width: 100%;
+    padding: 8px;
+    margin-top: 10px;
+    box-sizing: border-box;
+  }
+  </style>
+  

src/components/Message.vue

@@ -0,0 +1,25 @@
+<!-- src/components/Message.vue -->
+<template>
+    <li class="message">
+      <strong>{{ message.sender }}:</strong> {{ message.text }}
+    </li>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      message: Object,
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Tambahkan gaya untuk pesan individual */
+  .message {
+    margin-bottom: 10px;
+    padding: 5px;
+    border-radius: 5px;
+    background-color: #f1f1f1;
+  }
+  </style>
+  

src/firebase/auth.js

@@ -0,0 +1,14 @@
+// src/firebase/auth.js
+import { getAuth, signOut } from "firebase/auth";
+import app from "./firebaseConfig";
+
+const auth = getAuth(app);
+
+export const signOutUser = async () => {
+  try {
+    await signOut(auth);
+    console.log("User logged out");
+  } catch (error) {
+    console.error("Error during logout:", error);
+  }
+};

src/firebase/database.js

@@ -0,0 +1,35 @@
+// src/firebase/database.js
+import { getFirestore, collection, addDoc, onSnapshot, query, orderBy } from "firebase/firestore";
+import app from "./firebaseConfig";
+
+const db = getFirestore(app);
+const messagesRef = collection(db, "messages");
+
+// Fungsi untuk mengirim pesan
+export const sendMessage = async (text) => {
+  try {
+    const user = JSON.parse(localStorage.getItem("user"));
+    if (!user) return;
+
+    await addDoc(messagesRef, {
+      text,
+      sender: user.displayName,
+      uid: user.uid,
+      timestamp: new Date(),
+    });
+  } catch (error) {
+    console.error("Error adding message: ", error);
+  }
+};
+
+// Mendengarkan pesan secara real-time
+export const listenForMessages = (callback) => {
+  const q = query(messagesRef, orderBy("timestamp"));
+  onSnapshot(q, (snapshot) => {
+    const messages = snapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    }));
+    callback(messages);
+  });
+};

src/firebase/firebaseConfig.js

@@ -0,0 +1,14 @@
+// src/firebase/firebaseConfig.js
+import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
+  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.VUE_APP_FIREBASE_APP_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+export default app;