من بازی حدس زدن کلمه را در برنامه واژگانم معرفی کردم

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

این چیزی است که برنامه من می تواند کمک کند. این برنامه به شما امکان می‌دهد فرهنگ لغت خود را بسازید، واژگانی را به فلش کارت بسازید، و فرآیند سیستم لایتنر را با نام تکرار فاصله ای طی کنید تا بتوانید آن را به طور موثر یاد بگیرید. نه تنها این، بلکه می توانید یک گروه ایجاد کنید و به طور مشترک بسازید و یاد بگیرید.

آن را در برنامه Android بررسی کنید یا به برنامه وب دسترسی پیدا کنید. همچنین یک برنامه وب پیشرو (PWA) است، یعنی می‌توان آن را روی iOS نصب کرد و تجربه‌ای بومی را به شما می‌دهد.

ویژگی جدید هیجان انگیز: بازی حدس زدن کلمات!

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

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

سفر

بزرگترین چالش تولید معانی به صورت تصادفی از فهرست واژگان ایجاد شده توسط کاربر بود. خوشبختانه، Postgres دارای ویژگی انتخاب سطرها به صورت تصادفی است. و حدس بزنید چه؟ من استفاده کردم!

select meaning
from "Definition"
        tablesample bernoulli (10);

من مجبور شدم فیلتر مناسبی را اعمال کنم تا معانی متعلق به گروه کاربر را بدست بیاورم. اما، با استفاده از نمونه‌برداری برنولی، Postgres داده‌ها را به‌طور تصادفی تولید می‌کند، و من نمی‌خواهم معانی پانزده روز گذشته را به کاربر نشان دهم، نیاز به تغییری داشتم.

ایده بسیار ساده است. با استفاده از نمونه برنولی تولید کنید اما نتیجه نهایی باید معانی انتخاب شده قبلی را نادیده بگیرد. به راحتی می توان انتخاب فعلی را در یک سرویس کش ذخیره کرد و پرس و جو نیاز به کمی تنظیم برای فیلتر کردن آن ها دارد.

جایگزین Redis

همانطور که می دانید من لوکس استفاده از Redis را ندارم، می خواستم از هزینه های اضافی جلوگیری کنم. و، Postgres دوباره نجات داد!

Postgres مفهوم جدول UNLOGGED را دارد که در آن داده‌ها به WAL نوشته نمی‌شوند. بنابراین، من یک جدول UNLOGGED ایجاد کردم تا پانزده روز گذشته کاربر را با حدس زدن اطلاعات مربوط به بازی ذخیره کند.

پرس و جو نهایی به این شکل است.

اطلاعات قدیمی را حذف کنید

اگر متوجه پرس و جو برای واکشی داده ها از GuessingGame جدول برای وارد کردن به پرسش دیگری که در بالا ذکر شد، خواهید دید که هیچ فیلتری مربوط به زمان وجود ندارد. به نظر می رسد اگر یک معنی به کاربر نشان داده شود، هرگز برای آن کاربر نمایش داده نمی شود. اما، الزام من این بود که از نمایش فقط پانزده روز گذشته خودداری کنم.

اما، خوب کار می کند. چون، من یک کار cron ایجاد کردم که هر ساعت برای حذف ردیف‌های قدیمی‌تر از 15 روز اجرا می‌شود. به این ترتیب، مطمئن می‌شوم که فقط پانزده روز از داده‌های قدیمی‌تر را در آن نگه می‌دارم GuessingGame جدول.

کمی چالش اضافی

تا کنون، یک کاربر معانی را از فرهنگ لغت خود دریافت می کند. برای چالش‌برانگیزتر کردن بازی، من از یک منبع خارجی معنا می‌آورم. WordsApi مجموعه ای جالب از واژگان دارد و آنها یک API برای واکشی کلمات به صورت تصادفی دارند.

در حال حاضر، هر روز، کاربر می تواند معانی را از فرهنگ لغت خود و همچنین از یک منبع مختلف دریافت کند، که آن را لذت بخش تر و چالش برانگیزتر می کند.

پیاده سازی Front-end

خوب، من چند کد نوشتم تا داده ها را واکشی کنم و آن داده ها را به SwiperJS تغذیه کنم تا کاربر بتواند به راحتی به هر کارت پیمایش کند.

برای هر حدس صحیح، صدای رضایت بخشی پخش می شود و یک انیمیشن ساده تعداد را افزایش می دهد.

علیرغم عدم مهارت های طراحی رابط کاربری که به خود اعتراف می کنم، به این که چگونه این ویژگی ها ظاهر شدند افتخار می کنم!

در اینجا کدهایی برای اعمال انیمیشن وجود دارد!

@keyframes bounce {
   0%,
   20%,
   50%,
   80%,
   100% {
       transform: translateY(0);
   }
   40% {
       transform: translateY(-30px);
   }
   60% {
       transform: translateY(-15px);
   }
}


.animate-count {
   display: inline-block;
   animation: bounce 1s ease-out;
}

animateCount(index: number): void {
   const element = document.getElementsByClassName('correct-count')[index];
   element.classList.add('animate-count');
   element.addEventListener(
       'animationend',
       () => {
           element.classList.remove('animate-count');
       },
       { once: true },
   );
},

می‌توانم به اشتراک‌گذاری تمام جزئیات ادامه دهم، اما بیایید آن را تمام کنیم. امیدوارم از ویژگی های جدید لذت ببرید! فراموش نکنید که نظر خود را در فروشگاه Play بگذارید! یادگیری مبارک!