اسمارت بنرِ بگیرش

درباره‌ی این پروژه

حتما برای شما هم پیش آمده است که کاربران وب اپ خودتون رو به استفاده از نسخه‌ی native اپلیکیشن اندرویدی محصولتون دعوت کرده باشید. اما معمولا چون پیوند به گوگل‌پلی یا کافه‌بازار از دید کاربر دور بوده، بازخورد خوبی نگرفته‌اید. راه حل این مشکل، استفاده از یک اسمارت بنر (smart banner) هست.

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

اون با JavaScript خالص و LESS ساخته شده و فوق‌العاده سبکه (حدود ۳ کیلوبایت)! توی این پروژه از آیکون‌های گربه و فونت وزیر استفاده شده که آن‌ها هم آزاد هستند. البته شما به راحتی قادر هستید هر تغییری که می‌خواهید اعمال کنید.

نصب

Yarn

برای دریافت بگیرش از طریق دیپندنسی مینجر Yarn، می‌توانید از کامند زیر استفاده کنید:

$ yarn add begiresh

NPM

برای دریافت بگیرش از طریق پکیج مینجر NPM، می‌توانید از کامند زیر استفاده کنید:

$ npm install --save begiresh

CDN

برای دریافت بگیرش از طریق شبکه‌های تحویل محتوا (CDN)، می‌توانید از پیوند‌های زیر استفاده کنید:

https://unpkg.com/begiresh/dist/begiresh.js
https://unpkg.com/begiresh/dist/begiresh.css

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

Clone پروژه

در صورتی که می‌خواهید آخرین تغییرات پروژه را مستقیما بر روی سیستم خود داشته باشید و یا اگر می‌خواهید به گسترش پروژه کمک کنید، می‌توانید به کمک کامند زیر، آن را clone کنید:

$ git clone https://github.com/inb-co/Begiresh.git

دانلود همه چیز

شما می‌توانید تمام پروژه‌ی بگیرش را یکجا دانلود کنید. این دانلود شامل تمام فایل‌های مربوط به آخرین نسخه‌ی پایدار و با حجم کمتر از ۲۱ کیلوبایت خواهد بود.

طرز استفاده

اضافه کردن بگیرش به پروژه

به طور کلی، هر صورتی که مایل هستید، بگیرش را دریافت کرده و به پروژه اضافه کنید:

<!-- Begiresh Style -->
<link rel="stylesheet" href="path/to/begiresh.css" media="screen" title="Begiresh Smart Banner CSS">

<!-- Begiresh Script -->
<script src="path/to/begiresh.js" charset="utf-8"></script>

اضافه کردن meta-data

با توجه جدول استورها که در بخش شخصی‌سازی آمده است، استور مورد نظر خود را به صورت meta به head اضافه کنید:

<meta name="cafe-bazaar-app" content="app-id=com.inb.roozame">

اضافه کردن favicon

بنر به صورت پیش‌فرض یکی از faviconهای زیر را به عنوان لوگوی اپ اندرویدی نمایش می‌دهد:

<link rel="android-touch-icon" href="roozame-android-icon.png"> <!-- Or -->
<link rel="apple-touch-icon" href="roozame-apple-touch-icon.png"> <!-- Or -->
<link rel="apple-touch-icon-precomposed" href="roozame-apple-touch-icon-precomposed.png">

ساخت بنر

و در نهایت، یک بنر بسازید:

new Begiresh({
  title: 'روزامه',
  author: 'ایده نگاران بینا'
});

توجه: این پروژه به طور پیش‌فرض از آیکون‌های گربه و فونت وزیر استفاده می‌کند که هر دو نیز آزاد و رایگان می‌باشند. با این حال شما می‌توانید به راحتی آن‌ها را overwrite کنید.

شخصی سازی

آپشن‌ها

تمام آپشن‌های زیر برای شخصی‌سازی بگیرش موجود هستند:

استورهای پشتیبانی شده

در حال حاضر بگیرش از استورهای زیر پشتیبانی می‌کند:

• گوگل‌پلی

  ID on Instance:

  googlePlay

  ID on Meta:

  google-play-app

• کافه‌بازار

  ID on Instance:

  cafeBazaar

  ID on Meta:

  cafe-bazaar-app

• مایکت

  ID on Instance:

  myket

  ID on Meta:

  myket-app

• درخواست استور

  اگر فک می‌کنید لازم است تا استور دیگری به بگیرش اضافه شود، در گیتهاب پروژه مطرح کنید!

پوسته‌ها

توسعه

قبل از انجام هر تغییری، برای ممکن‌سازی گرفتن build،به دایرکتوری پروژه رفته و وابستگی‌های آن را نصب کنید:

$ cd Begiresh/
$ npm install

حال می‌توانید با اجرای دستور زیر، CSS و JS را همزمان build کنید:

$ npm run build

توسعه‌ی CSS

ظاهر بگیرش به کمک ترنس‌پایلر LESS ساخته شده است که می‌توانید آن را در آدرس src/begiresh.less پیدا کنید.

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

همچنین لازم نیست نگران پیشوند برای کدهای less خود باشید. در زمان build گرفتن و بعد از ترنس‌پایل کردن، کل استایل‌ها توسط postCSS و Autoprefixer، پارس می‌شوند.

پس از اعمال تغییرات، می‌توانید با اجرای دستور زیر، فایل less را ترنس‌پایل کنید:

$ npm run build-css

توسعه‌ی JS

فانکشنلیتی بگیرش به کمک جاواسکریپت خالص و به استاندارد ES5 ساخته‌ شده است که می‌توانید آن را در آدرس src/begiresh.js پیدا کنید

پس از اعمال تغییرات، می‌توانید با اجرای دستور زیر، فایل js را باندل و مینیفای کنید:

$ npm run build-js