چرا Angular را برای ساختن یک URL Shortener انتخاب کردم؟

کوتاه‌کننده‌های URL ابزارهایی هستند که از آنها برای کوتاه‌تر کردن لینک‌ها از آنچه واقعاً هستند استفاده می‌کنیم. با یک URL Shortener، می توانید یک پیوند طولانی (شاید برای یک فرم ثبت نام یا مقاله) را به یک نسخه کوتاه تر تبدیل کنید.

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

پیوندهای کوتاه شده از کوتاه کننده های URL معمولاً زمانی استفاده می شوند که نسخه طولانی آن پیوندها برای استفاده طولانی باشد. به اشتراک گذاری پیوندها در رسانه های اجتماعی یا هنگام طراحی بروشور و تبلیغات، استفاده رایج از کوتاه کننده URL است.

برای یکی از پروژه هایم، یک کوتاه کننده URL شخصی ایجاد کردم. قصد من این بود که از آن برای پیوند به مقالاتی که می‌نویسم یا ویدیوهایی که می‌سازم استفاده کنم. من استفاده کردم Firebase برای ساخت backend کوتاه کننده URL. به طور خاص، من از پایگاه داده Firestore برای ذخیره نسخه های کوتاه و طولانی هر پیوند داده شده استفاده کردم.

برای ایجاد لینک، مجبور شدم از کنسول Firebase استفاده کنم. این مشکلی نبود، اما برای فرکانس بالای ویرایش پیوندها دست و پا گیر بود. تجربه کاربری (UX) ایده آل نبود. حالا با مشکلی مواجه شدم. چگونه لینک ها را ایجاد، ویرایش و حذف کنم؟ من نیاز داشتم که برای کوتاه کننده URL یک پیشوند بسازم. من برای این کار به یک وب سایت نیاز داشتم.

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

بیان مسأله

الزامات پروژه عبارت بودند از:

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

اولین انتخاب تصمیم: زاویه ای

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

1. سازندگان وب سایت – مانند WordPress، Wix، Squarespace و غیره.
2. ساختمان Vanilla – با استفاده از HTML ساده، CSS و جاوا اسکریپت.
3. چارچوب جاوا اسکریپت – مانند React، Vue، Angular و غیره.

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

استفاده از سبک بدون فریمورک یا وانیل ممکن است. با این حال، عامل تعیین کننده ای که باعث شد مسیر وانیل خالص را انتخاب نکنم این بود آخرین نسخه غیر CDN Firebase JavaScript SDK (نسخه 9) با نصب از طریق طراحی شده است npm or yarn و بسته بندی ماژول در ذهن.

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

فریمورک های جاوا اسکریپت زیادی برای توسعه frontend وجود دارد. به عنوان مثال می توان به Angular، React، Vue و غیره اشاره کرد.

از میان فریمورک های موجود، من بیشترین آشنایی را با Angular دارم. این به این دلیل است که من از آن در پروژه های قبلی مانند:

• مسابقه کر کارول: پورتالی که در آن شرکت کنندگان مسابقه در دو دور آنلاین سوالات چند گزینه ای زمان بندی شده در فصل های منتخب کتاب مقدس به رقابت پرداختند.
• انجمن Genesys AE-FUNAI: فرم سفارشی که در آن اعضای Genesys Campus Club AE-FUNAI (جامعه من) پیشرفت خود را گزارش می دهند و دستاوردهای خود را به اشتراک می گذارند.
• سیستم مدیریت آموزش: داشبورد مدیریت جلسات ساده بین دانش آموزان و معلمان.

این آشنایی به من اجازه می دهد تا به سرعت با Angular بسازم. توانایی ساخت سریع را نباید دست کم گرفت.

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

در Angular، کامپوننت‌ها (و روش‌های چرخه حیات آن‌ها) در کلاس‌های TypeScript قرار می‌گیرند. این باعث می شود به روش OOP فکر کنید. مزیت OOP در نحوه عملکرد اجزای Angular به عنوان واحدهای UI قابل استفاده مجدد در چارچوب Angular منعکس می شود. به این ترتیب شما یک جزء Angular را به عنوان یک موجودیت خودکفا می بینید که هنوز بخشی از یک کل است. این امر توسعه frontend را آسان می‌کند زیرا بخش‌های مختلف برنامه frontend را می‌توان به کامپوننت‌ها محدود کرد و از این رو می‌توان در صورت نیاز از آن استفاده کرد.

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

در نتیجه سیستم نوع خود، TypeScript زمان صرف شده برای اشکال زدایی برنامه های Angular را کاهش می دهد. این به توسعه دهنده تجربه می دهد زیرا توسعه دهنده زمان بیشتری برای ساخت برنامه frontend خواهد داشت. اشکال زدایی نیز برای توسعه دهنده آسان می شود.

توجه داشته باشید: در اینجا بیشتر در مورد برنامه نویسی شی گرا با TypeScript است

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

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

مزایای برنامه نویسی شی گرا، تایپ اسکریپت و تزریق وابستگی، Angular را به یکی از ابزارهای پیشرو برای توسعه frontend تبدیل کرده است. همراه با این واقعیت که من قبلاً با Angular آشنا بودم، Angular برای این پروژه کوتاه کننده URL راحت تر بود.

مقالات زاویه ای در CSS-Tricks نیز بخشی از داستان هستند. آنها با استفاده از Angular به من اعتماد به نفس بیشتری دادند.

انتخاب تصمیم دوم: طراحی مواد

پس از انتخاب Angular، وظیفه بعدی من این بود که چگونه رابط کاربری (UI) را مدیریت کنم.

من می توانم نادیده بگیرم و به جای آن CSS وانیلی انجام دهم، اما چرا چرخ را دوباره اختراع کنیم؟ پس از همه، این دلیل استفاده از چارچوب جاوا اسکریپت - راحتی - را از بین می برد.

با انتخاب یک جعبه ابزار UI، به نظر می رسد اقیانوسی از گزینه ها وجود دارد. برای نام بردن از چند مورد، می توان از Bootstrap، Bulma، Semantic UI، Tailwind و غیره استفاده کرد. هر جعبه ابزار مشخصات و انگیزه های خاص خود را دارد.

برای استفاده از پروژه من، متریال دیزاین بسته را رهبری کرد.

یکی از مهمترین عوامل پشتیبانی از Angular و Material Design بود. یک مشخصات کامل Angular-only برای Material on وجود دارد material.angular.io (این به عنوان یک زیر دامنه برای خود اسناد Angular است).

من به متریال دیزاین رضایت دادم زیرا روی کامپوننت ها تمرکز دارد. برخلاف سایر فریم ورک‌های CSS، کلاس‌های کاربردی CSS ندارد. این مشکلی نداشت، زیرا من فقط یک کیت مؤلفه می‌خواستم (دکمه‌ها، نمادها، ورودی‌ها، نوارهای کناری، نوارهای اسنک، و غیره). راحت‌تر از کتابخانه‌های دیگر.

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

برای راحتی کار، هنگام راه‌اندازی Angular Material یک تم تیره را انتخاب کردم.

انتخاب تصمیم سوم: اشکال واکنشی

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

بیایید این فرم را ویرایشگر پیوندها بنامیم. فرم ویرایشگر پیوندها تنها دو ورودی دارد، یکی برای نسخه کوتاه یک پیوند و دیگری برای URL کامل که نسخه کوتاه به آن هدایت می شود.

برای مدیریت فرم ها، Angular با دو مکانیسم ارائه می شود. بنابراین به جای ایجاد یک فرم و مدیریت اعتبار و ارسال آن همانطور که در وانیلی HTML و جاوا اسکریپت انجام می شود، باید از یکی از دو راهی که Angular ارائه می دهد استفاده کنید. این دو روش عبارتند از:

1. فرم های الگو محور
2. اشکال واکنشی

فرم های الگو محور همانطور که از نام آن پیداست، کد HTML (الگو) را درگیر کنید که بخش بزرگی از فرم Angular را کنترل می کند. این رویکرد زمانی ترجیح داده می شود که فرم شما کار زیادی انجام نمی دهد یا برای یک بار استفاده است.

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

توجه داشته باشید: در اینجا مطالب بیشتری در مورد استفاده از فرم های واکنشی وجود دارد.

در این مرحله، مزایای انتخاب های قبلی شروع شد. متریال زاویه ای دارد form-field اجزاء. این form-field ورودی را به عنوان یک جزء پیچیده می کند و در صورت لزوم انیمیشن ها، جلوه های موج دار و پیام های خطا را ارائه می دهد.

بنابراین من از آن برای دو ورودی فرم ویرایشگر استفاده کردم.

انتخاب تصمیم چهارم: ورق و کشو پایینی مواد زاویه ای

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

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

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

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

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

زیر شلواری در کنار باز کردن استفاده از کشو برای باز کردن فرم ویرایشگر پیوندها در یک صفحه گسترده، گزینه پیشرو بود. کشوها برای ویرایشگر در صفحه نمایش تلفن همراه خوب نیستند. عرض صفحه نمایش نسبتاً کوچک خواهد بود و کشو ممکن است صفحه را کاملاً مسدود کند (که UX مطلوبی نیست).

من این دو مؤلفه رابط کاربری را از Material Design برای فرم انتخاب کردم تا اثری پاسخگو داشته باشد. بنابراین ایجاد پیوندها در تلفن یا لپ تاپ من در یک مؤلفه رابط کاربری مناسب انجام می شود.

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

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

تعمیر و نگهداری، محافظت از آینده، انتشارات آینده

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

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

اگر مجبور بودم دوباره این کار را انجام دهم، فکر می کنم روش وانیلی را امتحان می کردم. ساختن کاملاً بدون هیچ کمکی مانند اجزای Angular، Material یا UI. من سعی می‌کنم از ابتدا در HTML، CSS و جاوا اسکریپت بسازم و ببینم آیا آنطور که فکر می‌کردم، راحتی را از دست نداده‌ام.

نتیجه

در اینجا در GitHub می توانید به کد نهایی Angular دسترسی پیدا کنید.

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

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

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

به سلامتی!