یادگیری نحوه ساخت یک اپلیکیشن ساده در درک بهتر و بهبود مهارت‌های برنامه نویسی جاوا اسکریپت بسیار موثر است. جاوا اسکریپت (JavaScript) یکی از محبوب‌ترین و بهترین زبان‌های برنامه نویسی در میان توسعه‌دهندگان وب به شمار می‌رود. اغلب، آموزش جاوا اسکریپت با یادگیری مفاهیم بنیادی آغاز و سپس با ساخت اپلیکیشن‌های ساده از طریق استفاده از مدل شی‌گرای سند (DOM Manipulation) ادامه می‌یابد. در این مقاله، چگونگی ساخت یک اپلیکیشن دیکشنری با جاوا اسکریپت و کار با مدل شی‌گرای سند آموزش داده شده است. انتظار می‌رود خواننده پیش از مطالعه این مقاله با مفاهیم پایه و مقدماتی جاوا اسکریپت آشنایی داشته باشد.

نگاهی به مفهوم API

API سرنامی برای عبارت «Application Programming Interface» و به معنی «رابط برنامه نویسی اپلیکیشن» است. APIها با ساده‌سازی و ایمن‌سازی امکان تبادل داده و به اشتراک‌گذاری قابلیت‌های عملکردی بین اپلیکیشن‌ها، منجر به بهبود و سادگی فرآیند توسعه نرم‌افزار شده‌اند. در این پروژه از یک API‌ به نام «dictionaryapi.dev» استفاده شده است. در این API رایگان، عبارت‌های گرامری نظیر چند معنی (Multiple Definitions)، آواشناسی (Phonetics) و سایر موارد ارائه می‌شوند. این API از اینجا [+] قابل دسترسی است. ابتدا باید رابط کاربری و ظاهر اپلیکیشن را در فرانت‌اند ایجاد و پیاده‌سازی کرد. این کار در ادامه مقاله آموزش ساخت یک اپلیکیشن دیکشنری ساده با جاوا اسکریپت انجام شده است.

طراحی قالب فرانت‌اند پروژه ساخت یک اپلیکیشن ساده دیکشنری با جاوا اسکریپت

قالب فرانت‌اند این پروژه با استفاده از HTML و Tailwind CSS ساخته شده است. می‌توان TailwindCSS را با CDN ذیل وارد فایل HTML کرد:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />

صفحه HTML در این پروژه، یک محل ورود متن به همراه یک دکمه دارد که کاربر می‌تواند با استفاده از آن‌ها کلمه مورد نیاز را جستجو کند. سه برچسب «div» دیگر نیز برای نمایش نقش واژه (Part of Speech)، چند معنی و صوت تلفظ برای تلفظ صحیح مورد نیاز است. به طور پیش‌فرض، Display Property برای این سه div مقدار None را به خود می‌گیرد. وقتی که داده‌ها از API دریافت شدند، مقدار block‌ برای Display Property این divها تنظیم می‌شود:

<div class="bg-green-100 min-h-screen pt-10">
     <h2 class="text-green-600 text-5xl pt-4 font-semibold text-center">
       Dictionary
     </h2>
     <div class="flex justify-center p-8 items-center">
       <input
         type="text"
         placeholder="Enter the word"
         id="word"
         class="
           py-2
           w-1/4
           focus:outline-none
           border-2 border-green-600
           rounded
           px-3
         "
       />
       <button
         id="search"
         class="bg-green-600 text-white text-xl px-4 py-2 rounded">
         Search
       </button>
     </div>
     <div class="flex flex-col justify-center items-center">
       <div id="partOfSpeechDiv" class="hidden">
         <h2 class="text-xl text-gray-500 py-2" id="partOfSpeechHeader"></h2>
         <p class="text-md" id="partOfSpeechPara"></p>
       </div>
       <div class="hidden" id="meaningDiv">
         <h2 class="text-4xl py-3 px-3 text-green-500" id="meaningHeader"></h2>
       </div>
       <div id="audio" class="hidden"></div>
     </div>
   </div>
   <script src="./index.js"></script>

به این ترتیب، قالب فرانت‌اند این پروژه در تصویر زیر ملاحظه می‌شود:

اکنون نوبت به افزودن کارکردها و قابلیت‌های عملکردی به پروژه ساخت یک اپلیکیشن ساده با جاوا اسکریپت فرا رسیده است.

افزودن قابلیت‌های عملکردی به پروژه با جاوا اسکریپت

پیش از دریافت داده‌ها از طریق API و نمایش آن، باید با استفاده از شناسه‌های (id) عناصر HTML، به این عناصر دسترسی پیدا کرد. با استفاده از متد getElementById()‎ در جاوا اسکریپت می‌توان به شناسه‌های عناصر HTML دسترسی پیدا کرد. 

const word = document.getElementById("word");
const search = document.getElementById("search");
const display = document.getElementById("display");
const partOfSpeechDiv = document.getElementById("partOfSpeechDiv");
const partOfSpeechHeader = document.getElementById("partOfSpeechHeader");
const partOfSpeechPara = document.getElementById("partOfSpeechPara");
const meaningDiv = document.getElementById("meaningDiv");
const audioDiv = document.getElementById("audio");
const meaningHeader = document.getElementById("meaningHeader");

افزودن Event Listener

عنصر ورودی در صفحه HTML یک شناسه به نام word دارد. پس از دسترسی به عنصر ورودی، می‌توان مقدار محتوای متن در عنصر ورودی را با استفاده از صفت ‎ .value‎‎بازیابی کرد. دکمه جستجو (Search) شناسه‌ای با نام search دارد. باید یک Event Listener (شنونده رویداد) با نام Click را برای شروع رویداد و فراخوانی یک تابع اضافه کرد. این تابع، دریافت (واکشی) داده‌ها از طریق API را انجام می‌دهد.

Async و Await

از سال ۱۳۹۶ (۲۰۱۷ میلادی)، جاوا اسکریپت مفاهیم Async و Await را برای اجرای درخواست‌های نامتقارن معرفی کرده است؛ به جای ‎ .then‎و ‎ .catch‎ از async-await برای حل و فصل (Resolve) و رد کردن (Reject) پردازه‌های Promise (پردازش‌هایی که در حال وقوع هستند) استفاده می‌شود.

search.addEventListener("click", async () => {
 try {
   let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word.value.toLowerCase()}`;
   const res = await fetch(url);
   const data = await res.json();
   displayData(data);
 } catch (error) {
   console.log(error);
 }
});

برای کار با Promiseها به وسیله async-await، باید کلمه کلیدی async را پیش از تعریف تابع اضافه کرد. هر زمان که یک درخواست یا فراخوانی تابع انجام می‌شود، باید کلمه کلیدی await را پیش از آن اضافه کرد. کلمه کلیدی await، ادامه اجرای تابع را به طور موقت تا زمانی که درخواست قبلی کامل نشده است، متوقف (Pause) می‌کند. تمام عملیات Promise مربوط به async-await باید در بلوک try-catch اجرا شود. اگر Promise نتواند داده‌ها را بیرون بکشد، آنگاه در بلوک catch،‌ خطا نمایش خواهد داد.

پیش از ارجاع کلمه به API، برای رسیدن به نتایج دقیق و صحیح، تمام حروف این کلمه باید به صورت حروف کوچک باشد. می‌توان از متُد رشته‌ای ‎.lowercase()‎‎ برای تبدیل (Convert کردن) کلمه مورد جستجو استفاده کرد. متد واکشی (fetch)، داده‌ها را از API بازیابی و دریافت خواهد کرد. باید کلمه کلیدی await را اضافه کرد تا تابع در لحظه بازیابی داده‌ها توسط متُد Fetch، موقتاً متوقف شود. پس از دریافت داده‌ها از API، باید پاسخ را با استفاده از متد ‎.json()‎‎ به قالب JSON تبدیل کرد. اکنون در آخرین مرحله، نوبت به نمایش داده‌ها به کاربر در خروجی فرا رسیده است.

نمایش داده‌ها در صفحه مرورگر

پس از دریافت داده‌ها از API و تبدیل پاسخ به قالب JSON، این داده‌ها باید در صفحه خروجی نمایش داده شوند. بنابراین، باید متد displayData()‎ را فراخوانی و داده‌ها را به آن ارجاع داد. کدهای مربوط به ساختار پاسخ API به صورت زیر است:

API نوع کلمه (Part of Speech)، تعاریف مختلف (Multiple Definitions) و تلفظ (Phonetics) کلمات را در پاسخ باز می‌گرداند. می‌توان تمام تعاریف کلمه مربوطه را با استفاده از خط کد زیر دریافت کرد:

const meanings = data[0].meanings[0].definitions;

متغیر meanings آرایه‌ای است که تمام تعاریف کلمه مربوطه در آن ذخیره شده‌اند. برای دریافت نوع کلمه یا همان Part of Speech کلمه مربوطه، از دستور زیر استفاده می‌شود:

const partOfSpeech = data[0].meanings[0].partOfSpeech;

می‌توان نوع کلمه را با استفاده از صفت ‎.innerHTML‎ اضافه کرد. در کدهای HTML،‌ خصوصیت نمایش برچسب div مربوط به Part of Speech به طور پیش‌فرض مقدار None را داشت. اما در کدهای جاوا اسکریپت، پس از دریافت داده‌ها از API، خصوصیت یا همان Property نمایش باید به block تغییر داده شود.

نمایش معانی کلمه در فرانت‌اند

برای نمایش معانی کلمه در ساخت این اپلیکیشن دیکشنری ساده با جاوا اسکریپت، باید یک متغیر به نام meaningList ایجاد شود. پس از ضمیمه کردن تمام معانی کلمه مربوطه به متغیر meaningList، باید آن را برای نمایش در صفحه مرورگر به صفت ‎ .innerHTMLتخصیص داد. باید در یک حلقه پیش رفت و هر یک از معانی و اندیس‌های مربوطه را به متغیر meaningList در داخل عنصر پاراگراف HTML ضمیمه کرد. پس از خارج شدن از حلقه، باید متغیر meaningList را به صفت ‎.innerHTML‎ مربوط به برچسب meaningDiv ارجاع داد.

نمایش عنصر صدا در صفحه مرورگر

پاسخی که از API دریافت می‌شود، حاوی Phoneticهایی است که به کاربران کمک می‌کنند تا تلفظ صحیح کلمه را فرا بگیرند. برای اضافه کردن صوت تلفظ کلمه به صفحه در فرانت‌اند، باید یک عنصر صوتی ایجاد شود. در پایان، باید عنصر صوتی را با استفاده از متد ‎.innerHTML در برچسب audioDiv قرار داد. نتیجه کار به صورت تصویر زیر خواهد بود:

کدهای مربوطه نیز در ادامه آمده است:

const displayData = (data) => {
 console.log(data);
 const partOfSpeech = data[0].meanings[0].partOfSpeech;
 const meanings = data[0].meanings[0].definitions;
 partOfSpeechDiv.className =
   "bg-gray-100 px-2 py-3 flex flex-col w-1/4 justify-center items-center border-2 border-green-500 rounded block";
 partOfSpeechHeader.innerHTML = "Part of Speech";
 partOfSpeechPara.innerHTML = partOfSpeech;
 let meaningList = ``;
 meanings.forEach((meaning, ind) => {
   meaningList += `<p class='my-3 px-4 py-1 text-md'>${ind + 1}) ${
     meaning.definition
   } </p>`;
 });
 meaningDiv.className =
   "text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 rounded block";
 meaningHeader.innerText = "Meanings";
 meaningDiv.innerHTML = meaningList;
 let aud = `<audio src="${data[0].phonetics[0].audio}" controls>`;
 audioDiv.className = "block";
 audioDiv.innerHTML = aud;
};

به این ترتیب، آموزش ساخت یک اپلیکیشن دیکشنری ساده با جاوا اسکریپت در اینجا به پایان می‌رسد.

جمع‌بندی

آموزش ساخت یک اپلیکیشن دیکشنری ساده با جاوا اسکریپت در این مقاله ارائه شد. پس از مطالعه این مقاله و یادگیری نحوه ساخت یک اپلیکیشن دیکشنری ساده با جاوا اسکریپت ،‌ می‌توان پروژه‌های مشابهی را برای تقویت مهارت برنامه نویسی جاوا اسکریپت انجام داد. علاوه بر تقویت مهارت، می‌توان پروژهای تمرینی اجرا شده را به عنوان نمونه کار به رزومه کاری اضافه و در مصاحبه استخدامی ارائه کرد. برای یادگیری و تمرین بیش‌تر برنامه نویسی جاوا اسکریپت می‌توان از دوره‌های آموزش ویدیویی و مقالات ارائه شده در سایت و مجله فراردس استفاده کرد.

اگر این مطلب مفید بوده است، استفاده از دوره‌های آموزشی و مطالب زیر نیز پیشنهاد می‌شوند:

• مجموعه دوره‌های آموزش برنامه نویسی
• دوره آموزش جاوا اسکریپت (JavaScript) — از مقدماتی تا انجام پروژه عملی
• مجموعه دوره‌های آموزش جاوا اسکریپت (JavaScript)
• دوره آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس

منبع [+]