ارائه؛ افزونه تحت مرورگر نت‌برگ

یک‌شنبه، ۳ خرداد ماه ۱۳۹۴ × سیامک مختاری.

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

طرح اولیه

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

اسکلت بندی

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

تایپوگرافی

یک رابط کاربری خوب می‌بایست تایپوگرافی خوبی را به‌ همراه داشته باشد. در ساختار تایپوگرافی این پروژه از نسبت ۱۵:۱۶ استفاده کردم. دلیل انتخاب این نسبت نمایشگر نبستا کوچک است. (عرض: ۴۵۰ پیکسل ؛ ارتفاع: ۶۰۰ پیکسل) واحد های استفاده شده REM, EM, PX هستند. (در آینده نزدیک تابع محاسبه سایزها را منتشر خواهم کرد) - فونت های استفاده شده هماهنگ با نسخه حال حاضر نت‌برگ هستند که توسطصالح سوزنچی بهینه شده اند.

تکنولوژی و ساختار

در فرآیند ساخت این پروژه از HTML5, CSS3, AngularJS استفاده کرده ام. پیش-پردازنده(Pre–Processor) هایSass وJade نقش اصلی را بازی می‌کنند. از Jade برای لایه بندی کلی پروژه استفاده شده است. Layout.jade:

block document-info
doctype html

html(lang="en" ng-app="NetBarg" ng-csp="NetBarg")
    head
    meta(charset='utf-8')

        block title
        title= pagename

        link(href="static/css/styles.css", rel="stylesheet")
        script(src="static/js/angular.min.js" type="text/javascript")
        script(src="static/js/angular-route.min.js" type="text/javascript")
        script(src="static/js/jquery-1.11.2.min.js" type="text/javascript")
        script(src="static/js/app.js" type="text/javascript")

        block header

body(ng-controller="NetBarg-Deals")
    include _header.jade

    netbarg
        ng-view

    block footer

انیمیشن ها

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

See the PenSort items with animationby Siamak Mokhtari (@siamak) on CodePen.

کدنویسی

کد های CSS موجود تا جای ممکن داینامیک نوشته شده اند تا آن را به راحتی بتوان توسعه داد. Sass در ساخت گرید، تایپوگرافی، میکس‌این ها و ویژگی های اصلی خود Sass به من کمک کرده است. Sass با استفاده ازLibsass کامپایل شدند. که سرعت بالاتری نسبت بهruby-sass داراست که با استفاده از پکیجgulp-sass در Gulp خروجی گرفتم. ازgulp-autoprefixer برای اضافه کردن پیشوندهای vendor به CSS استفاده کردم.

ماهیت این پروژه یک اپلیکیشن تحت وب است که در لحظه قرار است اطلاعاتی را دریافت کند و به نمایش بگذارد. در این پروژه ازAngularJS استفاده کردم که از ساختار MVC بهره می‌برد و با نوشتن چند کنترلر، مدل و اتصال آنها به REST API نت‌برگ اطلاعات مورد نظر را دریافت و نمایش می‌دهد.
از jQuery 1.11.2 و پکیج های مرتبط به AngularJS نظیرangular-router برای routing اَپ استفاده کردم و با استفاده از Jade ساختار کلی HTML را نوشتم.

برای ذخیره اطلاعات کاربر ازlocalstorage استفاده کردم و هربار اَپ اطلاعات را می‌خواند و براساس اطلاعات کاربر Deal ها را نمایش می‌دهد. از localstorage استفاده کردم چون کارکرد ساده تری نسبت به کـوکـی دارد و برای سمت کاربر (client-side) ساخته شده است.
آیکون های موجود در پروژه همگی از نوعSVG هستند که ازFlaticon انتخاب شدند و به صورت Sprite در کنار هم هستند. همبرگر آیکون (آیکون منو) به دلیل انجام انیمیشن روی آن با CSS نوشته شده است و با استفاده ازgulp-svgo فایل های SVG را آپتیمایز و فشرده کردم.
در این پروژه ازGulp.js استفاده کردم. که چندین وظیفه تعریف کردم مانند کامپایل Sass به CSS و فشرده سازی آن. ازgulp-watch برای watch کردن فایل های CSS و JS استفاده کردم. ازgulp-jade برای کامپایل کردن فایل های Jade به HTML استفاده کردم.
از اپ هایSketch,Sublime Text 3 استفاده کردم. تمامی فایل های پروژه بر رویGit موجود هستند.

هم اکنون…

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

با آرزوی موفقیت،
سیامک مختاری – بهار، خرداد ۱۳۹۴.