add first Project Basic App

add & revisi Icon BTN biar gak manual pake emot dari keyboard :|
update
2024-11-03 13:00:57 +07:00 · 2024-11-03 08:37:31 +07:00 · 2024-11-02 21:38:13 +07:00 · 2024-11-02 13:30:09 +00:00 · 2024-11-02 13:29:36 +00:00 · 2024-11-02 13:29:00 +00:00
24 changed files with 423 additions and 1 deletions
--- a/.env
+++ b/.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  
--- a/.gitignore
+++ b/.gitignore
--- a/FrontEnd/app.js
+++ b/FrontEnd/app.js
--- a/FrontEnd/components/ChatBox.js
+++ b/FrontEnd/components/ChatBox.js
--- a/FrontEnd/components/Message.js
+++ b/FrontEnd/components/Message.js
--- a/FrontEnd/components/Navbar.js
+++ b/FrontEnd/components/Navbar.js
--- a/FrontEnd/css/style.css
+++ b/FrontEnd/css/style.css
@ -0,0 +1,122 @@
+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f0f2f5;
+    color: #333;
+}
+
+#app {
+    width: 100%;
+    max-width: 420px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 90vh;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Header */
+header {
+    background-color: #075e54;
+    color: #fff;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.settings-btn {
+    font-size: 18px;
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+}
+
+/* Chat Box */
+#chat-box {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    background-color: #e5ddd5;
+}
+
+.message {
+    max-width: 75%;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 1.4;
+    position: relative;
+}
+
+.message.sent {
+    background-color: #dcf8c6;
+    align-self: flex-end;
+    text-align: right;
+}
+
+.message.received {
+    background-color: #fff;
+    align-self: flex-start;
+    text-align: left;
+}
+
+/* Message Form */
+#message-form {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background-color: #f0f2f5;
+    border-top: 1px solid #ddd;
+}
+
+#message-input {
+    flex: 1;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    margin-right: 10px;
+    outline: none;
+}
+
+button {
+    padding: 10px 15px;
+    font-size: 20px;
+    color: #fff;
+    background-color: #075e54;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+/* Responsive Design */
+@media (max-width: 480px) {
+    #app {
+        height: 100vh;
+        max-width: 100%;
+        border-radius: 0;
+    }
+}
--- a/FrontEnd/index.html
+++ b/FrontEnd/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatsApp</title>
+    <link rel="stylesheet" href="css/style.css">
+    <!-- Font BOXICO-->
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+
+</head>
+<body>
+    <div id="app">
+        <header>
+            <div class="header-content">
+                <h1>ChatsApp</h1>
+                <button class="settings-btn"><i class='bx bx-cog'></i></button> <!-- Disini we tambahin font icon biar gak manul lu bikin icon pake emote dari keyboard njir :| -->
+            </div>
+        </header>
+        <main>
+            <section id="chat-box"></section>
+            <form id="message-form">
+                <input type="text" id="message-input" placeholder="Type a message...">
+                <button type="submit">➤</button>
+            </form>
+        </main>
+    </div>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- a/FrontEnd/js/main.js
+++ b/FrontEnd/js/main.js
@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const chatBox = document.getElementById("chat-box");
+    const messageForm = document.getElementById("message-form");
+    const messageInput = document.getElementById("message-input");
+
+    // Function to add message to chat box
+    function addMessage(text, type) {
+        const messageElement = document.createElement("div");
+        messageElement.textContent = text;
+        messageElement.classList.add("message", type);
+        chatBox.appendChild(messageElement);
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+
+    // Handle message send
+    messageForm.addEventListener("submit", (e) => {
+        e.preventDefault();
+        const messageText = messageInput.value.trim();
+        if (messageText !== "") {
+            addMessage(messageText, "sent");
+            messageInput.value = "";
+
+            // Simulate received message after 1 second
+            setTimeout(() => {
+                addMessage("This is an auto-reply!", "received");
+            }, 1000);
+        }
+    });
+});
--- a/FrontEnd/services/api.js
+++ b/FrontEnd/services/api.js
--- a/FrontEnd/style.css
+++ b/FrontEnd/style.css
--- a/README.md
+++ b/README.md
@ -1,3 +1,6 @@
 # ChatsApp

 ChatsApp The Project Real Time Chating
+
+Install: `npm install`
+Run : `npm serve`
--- a/package.json
+++ b/package.json
--- a/public/index.html
+++ b/public/index.html
--- a/src/App.vue
+++ b/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>
+  
--- a/src/components/ChatBox.vue
+++ b/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>
+  
--- a/src/components/Message.vue
+++ b/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>
+  
--- a/src/firebase/auth.js
+++ b/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);
+  }
+};
--- a/src/firebase/database.js
+++ b/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);
+  });
+};
--- a/src/firebase/firebaseConfig.js
+++ b/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;
--- a/src/main.js
+++ b/src/main.js
--- a/src/router/index.js
+++ b/src/router/index.js
--- a/src/store/index.js
+++ b/src/store/index.js
--- a/src/views/ChatRoom.vue
+++ b/src/views/ChatRoom.vue
Author	SHA1	Message	Date
syn	768a416918	add first Project Basic App	2024-11-03 13:00:57 +07:00
syn	5d451a4847	add & revisi Icon BTN biar gak manual pake emot dari keyboard :\|	2024-11-03 08:37:31 +07:00
Lefiathan	e730db80bd	update	2024-11-02 21:38:13 +07:00
Lefiathan	45d476266b	Add FrontEnd/assets/components/css/js/services/api.js	2024-11-02 13:30:09 +00:00
Lefiathan	155b43d3bd	Add FrontEnd/assets/components/css/js/main.js	2024-11-02 13:29:36 +00:00
Lefiathan	e59a7151e6	Add FrontEnd/assets/components/css/style.css	2024-11-02 13:29:00 +00:00
Lefiathan	0426ad28c8	Add FrontEnd/assets/components/Navbar.js	2024-11-02 13:28:12 +00:00
Lefiathan	1a12ed10dc	Add FrontEnd/assets/components/Message.js	2024-11-02 13:27:48 +00:00
Lefiathan	71ebb9579b	Add FrontEnd/assets/components/ChatBox.js	2024-11-02 13:27:09 +00:00
Lefiathan	47cc123245	Add FrontEnd/style.css	2024-11-02 13:25:19 +00:00
Lefiathan	4a4b8de5d3	Add FrontEnd/app.js	2024-11-02 13:24:53 +00:00
Lefiathan	9cddf21749	Add FrontEnd/index.html	2024-11-02 13:21:12 +00:00
Lefiathan	a4170b487f	Delete FrontEnd	2024-11-02 13:11:32 +00:00
Lefiathan	f9a25ba197	Add FrontEnd	2024-11-02 13:09:56 +00:00