مطالعه موردی پلتفرم برنامه و بازی

سبد اپ؛ بازطراحی و توسعه پلتفرم برنامه و بازی

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

نوع پروژه
پلتفرم برنامه و بازی
نقش کدنوا
تحلیل، طراحی و توسعه کامل
وضعیت
تکمیل‌شده
مقیاس داده
بیش از ۶۶۰ هزار حساب کاربری

سبد اپ چیست و کدنوا چه نقشی در نسخه جدید آن داشت؟

سبد اپ یک سایت دانلود برنامه و بازی است. کدنوا تحلیل، طراحی و برنامه‌نویسی نسخه جدید را بر عهده داشت. این کار شامل صفحه‌هایی که کاربران می‌بینند، بخش اشتراک و پرداخت و پنل مدیریت بود. بیش از ۶۶۰ هزار حساب کاربری سایت قبلی هم در ساختار جدید حفظ شده است.

درخواست بررسی پروژه · مشاهده نمونه‌کارها · مشاهده سبد اپ

نسخه جدید سبد اپ در موبایل و دسکتاپ

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

تصویر ۱. صفحه اصلی سبد اپ در دسکتاپ.
تصویر ۳. صفحه یک دسته‌بندی در سبد اپ.
تصویر ۲. صفحه اصلی سبد اپ در موبایل.

چرا سایت قبلی دیگر برای رشد کافی نبود؟

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

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

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

نسخه جدید چه نیازهایی را باید پوشش می‌داد؟

با توجه به این شرایط، پیش از شروع طراحی این خواسته‌ها برای نسخه جدید مشخص شد:

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

تحلیل، طراحی و توسعه کامل نسخه جدید

برای پوشش این خواسته‌ها، کار در چهار بخش پیش رفت:

  1. 1 بررسی سایت و اطلاعات موجود

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

  2. 2 طراحی صفحه‌ها و تجربه کاربر

    صفحه‌های عمومی و حساب کاربری از نو طراحی شدند. مسیر اصلی کاربر، از ورود به سایت تا دانلود، برای موبایل و دسکتاپ جداگانه چیده شد.

  3. 3 برنامه‌نویسی همه بخش‌ها

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

  4. 4 انتقال اطلاعات و آزمایش

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

ساخت نسخه جدید بدون کنار گذاشتن صدها هزار حساب کاربری

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

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

انتقال اطلاعات به‌صورت مرحله‌ای انجام شد. حساب‌ها، برنامه‌ها و بازی‌ها، تصویرها، دیدگاه‌ها و اشتراک‌ها هر کدام مرحله جداگانه، قاعده مشخص و گزارش (لاگ) مخصوص خود را داشتند.

دلیل این تصمیم حجم کار بود. اگر بیش از ۶۶۰ هزار حساب یک‌باره منتقل شود و کار در میانه متوقف شود، معلوم نیست چه چیزی منتقل شده و چه چیزی نشده است. در روش مرحله‌ای، نتیجه هر مرحله جداگانه بررسی می‌شود و اگر مرحله‌ای متوقف شود، کار از همان نقطه ادامه پیدا می‌کند. دیتابیس سایت قبلی هم در تمام این مدت فقط خوانده شد و تغییری در آن ایجاد نشد؛ بنابراین داده‌های اصلی دست‌نخورده ماندند و نتیجه هر مرحله با آن‌ها قابل مقایسه بود.

تصویر ۴. مراحل انتقال اطلاعات از سایت قبلی به نسخه جدید.

ساختار داده‌ای که برای نسخه جدید از پایه طراحی شد

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

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

این تفاوت در عددها هم دیده می‌شود. تعداد جدول‌ها از ۶۱ به ۳۱ رسید. حجم کل دیتابیس، شامل داده‌ها و ایندکس‌ها (فهرست‌هایی که پیدا کردن اطلاعات را سریع می‌کنند)، هم از ۱٬۲۵۸٫۳۳ MiB (حدود ۱٫۲ گیگابایت) به ۱۵۶٫۱۴ MiB رسید؛ یعنی ۸۷٫۶٪ کاهش.

تصویر ۵. حجم دیتابیس در نسخه قبلی و نسخه جدید.

پیدا کردن، بررسی و دانلود برنامه‌ها و بازی‌ها

کاربر می‌تواند از صفحه اصلی شروع کند و دسته‌ها و مجموعه‌ها را مرور کند، یا اسم برنامه یا بازی را مستقیم جست‌وجو کند. هر دو راه به صفحه همان برنامه یا بازی می‌رسند.

جست‌وجو مخصوص زبان فارسی طراحی شده است. پیش از جست‌وجو، حروف و عددهای فارسی یکسان‌سازی می‌شوند (مثلاً «ی» فارسی و «ي» عربی، یا ارقام فارسی و انگلیسی). بنابراین تفاوت در نحوه نوشتن، نتیجه را تغییر نمی‌دهد. هم‌زمان با تایپ کاربر، تا هشت پیشنهاد به‌صورت لحظه‌ای نمایش داده می‌شود. دسته‌بندی‌ها و مجموعه‌ها برای کاربرانی است که هنوز برنامه مشخصی در ذهن ندارند و می‌خواهند محتوا را مرور کنند.

تصویر ۶. پیشنهادهای لحظه‌ای جست‌وجو در سبد اپ.

صفحه برنامه و بازی

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

تصویر ۷. صفحه یک برنامه و گزینه‌های دانلود آن.

از انتخاب پلن تا دسترسی، در یک مسیر مشخص

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

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

تصویر ۸. پلن‌های اشتراک.
تصویر ۹. ورود و پرداخت در مسیر خرید اشتراک.

حساب کاربری

کاربر وضعیت اشتراکش را در حساب کاربری می‌بیند. سفارش‌ها، دیدگاه‌هایی که نوشته، اطلاعات پروفایل و اعلان‌ها هم در همین بخش هستند.

تصویر ۱۰. حساب کاربری و وضعیت اشتراک.

مدیریت محصول از یک پنل واحد

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

تصویر ۱۱. داشبورد پنل مدیریت.

برنامه‌ها و بازی‌ها

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

تصویر ۱۲. فرم مدیریت یک برنامه در پنل.

مدیریت کاربران و محتوای سایت

کاربران، اشتراک‌ها و سفارش‌ها

مدیر از همین پنل حساب کاربران، پلن‌ها و اشتراک‌ها را مدیریت می‌کند و دیدگاه‌ها را پیش از انتشار تأیید یا رد می‌کند. سفارش‌ها و تراکنش‌ها در پنل فقط قابل مشاهده‌اند و امکان ویرایش ندارند؛ به این ترتیب سابقه مالی دقیق و دست‌نخورده می‌ماند.

محتوای سایت و تبلیغات

صفحه‌های ثابت سایت، اعلان‌ها و جایگاه‌های تبلیغ هم از پنل تغییر می‌کنند. پیام‌هایی که کاربران از فرم تماس می‌فرستند در همین پنل برای تیم نمایش داده می‌شود.

تصمیم‌های فنی پشت نسخه جدید

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

ساختار کد

کد سایت به چهار بخش مستقل تقسیم شد: برنامه‌ها و بازی‌ها (Catalog)، فروش و اشتراک (Commerce)، صفحه‌های ثابت (Pages) و تبلیغات (Advertising). هر بخش داده و مسئولیت خودش را دارد، بنابراین می‌توان آن را بدون اینکه بخش‌های دیگر تحت تأثیر قرار بگیرند توسعه داد. بخش عمومی سایت، حساب کاربری و پنل مدیریت هم از هم جدا هستند و مدیران و کاربران هر کدام سیستم ورود جداگانه‌ای دارند.

پرداخت و امنیت اطلاعات

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

علاوه بر این، سایت هر ۱۵ دقیقه پرداخت‌های تأییدنشده را خودکار بررسی می‌کند. گاهی پرداخت در درگاه موفق است، اما به دلیلی مثل بسته شدن صفحه یا قطع اینترنت، نتیجه آن به سایت نمی‌رسد. این پرداخت‌ها در بررسی خودکار تأیید می‌شوند و اشتراک کاربر بدون تماس با پشتیبانی فعال می‌شود. اطلاعات هر سفارش و تراکنش هم در لحظه خرید ثبت می‌شود و بعدها تغییر نمی‌کند.

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

آمادگی برای افزایش محتوا

با افزایش تعداد برنامه‌ها و بازی‌ها، فهرست‌ها صفحه‌بندی شده‌اند و هر صفحه فقط تعداد مشخصی مورد نمایش می‌دهد. تعداد درخواست‌هایی که هر صفحه از دیتابیس می‌گیرد هم محدود شده است؛ در آزمایش‌ها، صفحه اصلی با حداکثر ۲۰ درخواست بارگذاری شد. پیشنهادهای جست‌وجو نیز پنج دقیقه در حافظه موقت (Cache) نگه داشته می‌شوند تا برای هر جست‌وجو دوباره از دیتابیس درخواست نشود.

صفحه‌های عمومی و موتورهای جست‌وجو

محتوای اصلی هر صفحه روی سرور ساخته می‌شود، بنابراین موتورهای جست‌وجو آن را بدون نیاز به اجرای کد در مرورگر می‌بینند. نقشه سایت (Sitemap)، فایل Robots که مشخص می‌کند ربات‌های گوگل کدام صفحه‌ها را بخوانند، آدرس استاندارد (Canonical) هر صفحه و داده‌های ساختاریافته (اطلاعاتی که معرفی صفحه را برای گوگل روشن‌تر می‌کنند) در خود سایت مدیریت می‌شوند و به افزونه جداگانه نیاز ندارند. آدرس‌های قدیمی صفحه‌های برنامه‌ها هم با انتقال دائمی (ریدایرکت ۳۰۱) به آدرس جدیدشان هدایت می‌شوند تا لینک‌های قبلی از کار نیفتند.

مراحل اجرای پروژه

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

  1. 1 شناخت سایت قبلی

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

  2. 2 ساختار داده و بخش‌های اصلی

    پیش از طراحی صفحه‌ها، ساختار داده نسخه جدید و چهار بخش اصلی سایت مشخص شد.

  3. 3 صفحه‌های عمومی

    صفحه اصلی، جست‌وجو و صفحه برنامه‌ها و بازی‌ها طراحی و پیاده‌سازی شدند.

  4. 4 حساب کاربری، اشتراک و پنل مدیریت

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

  5. 5 انتقال اطلاعات و انتشار

    اطلاعات لازم در چند مرحله به نسخه جدید منتقل شد. پیش از انتشار، ۱۳۴ آدرس سایت بررسی شد و همه بدون خطا باز شدند. ۳۲۱ تست خودکار (آزمایش‌هایی که برنامه خودش روی بخش‌های مختلف سایت اجرا می‌کند) نیز با موفقیت انجام شد و ۱۲ لینک خرابی که در بررسی‌های قبلی پیدا شده بود اصلاح شد.

نسخه جدید سبد اپ در چند عدد

بیش از ۶۶۰ هزار حساب کاربری منتقل‌شده به ساختار جدید
۸۷٫۶٪ کاهش حجم دیتابیس نسبت به نسخه قبلی
۱٬۴۴۵ فایل رسانه‌ای منتقل‌شده به ساختار جدید
۲۴۵ برنامه و بازی منتشرشده؛ ۲۱۰ برنامه و ۳۵ بازی

این پروژه چه چیزی درباره روش کار کدنوا نشان می‌دهد؟

بازسازی سایتی با کاربران واقعی

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

امکاناتی که به هم متصل‌اند

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

کار با حجم بالای داده

صدها هزار حساب و بیش از هزار فایل رسانه‌ای به‌صورت مرحله‌ای به ساختاری منتقل شدند که کدنوا برای همین داده‌ها طراحی کرده بود.

طراحی برای کاربر و برای تیم

صفحه‌های عمومی برای راحتی کاربر طراحی شدند و پنل مدیریت برای کار روزانه تیم سبد اپ.

بررسی اولیه پروژه

محصول فعلی شما هم به ساختار و امکانات جدید نیاز دارد؟

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