مشروع عملي : بناء تطبيق دفتر ملاحظات (Notes App) باستخدام JavaScript

في

 

صورة توضح واجهة تطبيق على اللابتوب والجوال لعرض الملاحظات والرسوم البيانية


حديثنا اليوم راح يكون عن كيف يمكنك ان تبني دفتر ملاحظات (Notes App) باستخدام JavaScript



المقدمة

البرمجة ليست مجرد كتابة أوامر للحاسوب، بل هي وسيلة لإبداع أفكارنا وتحويلها إلى تطبيقات وأدوات عملية نستخدمها في حياتنا اليومية. من أجمل الطرق لتعلم البرمجة أن تبدأ ببناء مشاريع صغيرة تساعدك على ترسيخ المفاهيم التي تتعلمها.
ومن بين المشاريع المفيدة للمبتدئين والمطورين على حد سواء، يأتي مشروع تطبيق دفتر الملاحظات (Notes App) باستخدام JavaScript.

هذا المشروع بسيط من حيث الفكرة، لكنه غني بالمفاهيم الأساسية مثل:

  • التعامل مع DOM.

  • استخدام LocalStorage لحفظ البيانات.

  • إنشاء واجهة مستخدم تفاعلية.

  • إدارة الأحداث (Events).

في هذا المقال، سنتناول خطوة بخطوة كيفية بناء تطبيق ملاحظات باستخدام HTML، CSS، JavaScript، مع شرح كل جزء بالتفصيل، حتى يتمكن المبتدئ من تطبيقه بنفسه.

لماذا اخترنا مشروع Notes App؟

قد تسأل: لماذا بالذات نبدأ بمشروع مثل دفتر الملاحظات؟
الإجابة بسيطة: لأنه مشروع عملي يجمع بين عدة مفاهيم برمجية في آن واحد، ويعطيك نتيجة ملموسة تستطيع استخدامها بشكل يومي.

مميزات المشروع:

  1. سهل التطبيق ولا يحتاج إلى تقنيات متقدمة.

  2. مفيد عمليًا، حيث يمكنك تدوين أفكارك أو مهامك اليومية.

  3. يتيح لك فهم كيفية حفظ البيانات محليًا عبر LocalStorage.

  4. يطور مهاراتك في تصميم واجهة تفاعلية.

  5. يمكنك تطويره لاحقًا ليصبح تطبيقًا متقدمًا (إضافة تسجيل دخول، مزامنة مع قاعدة بيانات، واجهة أجمل).

الأدوات التي نحتاجها

قبل أن نبدأ، دعنا نحدد ما الذي نحتاجه لبناء المشروع:

  • محرر نصوص: مثل VS Code أو Sublime Text.

  • متصفح حديث: مثل Chrome أو Firefox لتجربة التطبيق.

  • لغات البرمجة الأساسية:

    • HTML → لبناء هيكل الصفحة.

    • CSS → لتنسيق الواجهة.

    • JavaScript → لإضافة التفاعل والوظائف.

تصميم واجهة المستخدم (UI)

أول خطوة لبناء أي تطبيق هي تصميم الواجهة. الواجهة في تطبيقنا بسيطة:

  1. حقل إدخال (Input) لكتابة الملاحظة.

  2. زر (Button) لإضافة الملاحظة.

  3. قائمة (List) تعرض جميع الملاحظات المضافة.

  4. إمكانية حذف الملاحظات عند الحاجة.

مثال على الهيكل باستخدام HTML:

مثال على كود HTML لتصميم واجهة تطبيق دفتر الملاحظات




















الكود جاهز للنسخ : 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>دفتر الملاحظات</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>تطبيق دفتر الملاحظات</h1>
    <input type="text" id="note-input" placeholder="اكتب ملاحظتك هنا">
    <button id="add-btn">إضافة</button>
    <ul id="notes-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

تنسيق الواجهة باستخدام CSS

بعد بناء الهيكل، نحتاج إلى تنسيقه ليبدو جذابًا.

كود CSS يوضح كيفية تصميم واجهة تفاعلية لتطبيق دفتر الملاحظات









كود CSS يوضح كيفية تصميم واجهة تفاعلية لتطبيق دفتر الملاحظات
















الكود جاهز للنسخ : 

body {

  font-family: Arial, sans-serif;

  background: #f0f4f7;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}


.container {

  background: #fff;

  padding: 20px;

  border-radius: 12px;

  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);

  width: 400px;

  text-align: center;

}


input {

  width: 70%;

  padding: 10px;

  border-radius: 6px;

  border: 1px solid #ccc;

}


button {

  padding: 10px 15px;

  border: none;

  background: #007bff;

  color: #fff;

  border-radius: 6px;

  cursor: pointer;

}


button:hover {

  background: #0056b3;

}


ul {

  margin-top: 20px;

  list-style: none;

  padding: 0;

}


li {

  background: #e9ecef;

  padding: 10px;

  margin: 8px 0;

  border-radius: 6px;

  display: flex;

  justify-content: space-between;

}

كتابة الأكواد بالـ JavaScript

هنا يأتي الجزء الممتع! سنقوم بكتابة الكود الذي يجعل التطبيق يعمل.

مثال على كود JavaScript لإضافة الملاحظات وعرضها في تطبيق دفتر الملاحظات








مثال على كود JavaScript لإضافة الملاحظات وعرضها في تطبيق دفتر الملاحظات












الكود جاهز للنسخ : 

// جلب العناصر من الصفحة

const addBtn = document.getElementById("add-btn");

const noteInput = document.getElementById("note-input");

const notesList = document.getElementById("notes-list");


// استدعاء الملاحظات من LocalStorage

let notes = JSON.parse(localStorage.getItem("notes")) || [];


// دالة عرض الملاحظات

function displayNotes() {

  notesList.innerHTML = "";

  notes.forEach((note, index) => {

    let li = document.createElement("li");

    li.innerHTML = `

      ${note} 

      <button onclick="deleteNote(${index})">❌</button>

    `;

    notesList.appendChild(li);

  });

}


// دالة إضافة ملاحظة

addBtn.addEventListener("click", () => {

  const note = noteInput.value.trim();

  if (note !== "") {

    notes.push(note);

    localStorage.setItem("notes", JSON.stringify(notes));

    noteInput.value = "";

    displayNotes();

  }

});


// دالة حذف ملاحظة

function deleteNote(index) {

  notes.splice(index, 1);

  localStorage.setItem("notes", JSON.stringify(notes));

  displayNotes();

}


// عرض الملاحظات عند تحميل الصفحة

displayNotes();

شرح عمل الكود

  1. جلب العناصر: نحدد الأزرار وحقل الإدخال والقائمة.

  2. تخزين الملاحظات: نستخدم localStorage للاحتفاظ بالملاحظات حتى بعد إغلاق المتصفح.

  3. إضافة الملاحظات: عند الضغط على زر "إضافة"، يتم تخزين الملاحظة وعرضها.

  4. حذف الملاحظات: لكل ملاحظة زر ❌ يحذفها من القائمة ومن LocalStorage.

  5. عرض الملاحظات: يتم استدعاء جميع الملاحظات عند تحميل الصفحة.

مميزات التطبيق

  • حفظ البيانات بشكل دائم عبر LocalStorage.

  • تصميم بسيط وسهل الاستخدام.

  • إمكانية التوسع وإضافة ميزات جديدة مثل:

    • زر تعديل الملاحظات.

    • البحث داخل الملاحظات.

    • تصنيف الملاحظات (عمل/شخصي/أفكار).

أفكار لتطوير المشروع

بعد الانتهاء من النسخة الأساسية، يمكنك إضافة تحسينات تجعل التطبيق أكثر احترافية، مثل:

  • دعم الوضع الليلي (Dark Mode).

  • إضافة مزامنة عبر حساب المستخدم.

  • إنشاء نسخة موبايل باستخدام تقنيات مثل React Native.

  • إضافة ميزة الوسوم (Tags) لتنظيم الملاحظات.

الفائدة التعليمية من المشروع

  • فهم كيفية ربط HTML + CSS + JS معًا.

  • تطبيق مفهوم الأحداث Events في JavaScript.

  • تعلم التعامل مع LocalStorage.

  • تنمية مهارة حل المشكلات البرمجية.

الخاتمة

مشروع دفتر الملاحظات (Notes App) هو خطوة رائعة لكل شخص يتعلم JavaScript.
ورغم بساطته، إلا أنه يضع بين يديك أساسيات قوية تستطيع من خلالها الانتقال لمشاريع أكبر وأكثر تعقيدًا.
ابدأ بتطبيقه الآن، ثم حاول تطويره وإضافة أفكارك الخاصة.

تذكر دائمًا: أفضل طريقة لتعلم البرمجة ليست قراءة الأكواد فقط، بل كتابتها وتطبيقها عمليًا.







تعليقات

إرسال تعليق