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

راهی برای تشویق کردن کاربران وب‌سایت به استفاده از اپلیکیشن اندرویدی

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

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

حتما برای شما هم پیش آمده است که کاربران وب اپ خودتون رو به استفاده از نسخه‌ی 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 کنید.

شخصی سازی

آپشن‌ها

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

متغیر پیش‌فرض نوع توضیحات
title هیچ‌چیز استرینگ عنوان اپلیکیشن
author هیچ‌چیز استرینگ نام توسعه دهنده‌ی اپلیکیشن
price رایگان استرینگ قیمت اپلیکیشن
icon favicon سایت استرینگ آدرس به آیکون آپلیکیشن
daysHidden 15 نامبر تعداد روزهایی که بنر بعد از لمس شدن دکمه‌ی بستن، نمایش داده نخواهد شد
daysReminder 90 نامبر تعداد روزهایی که بنر بعد از لمس شدن دکمه‌ی بگیرش، نمایش داده نخواهد شد
storeLang زبان مرورگر کاربر (بر اساس کد زبان‌ها در استاندارد ISO) استرینگ زبان استور
store googlePlay استرینگ آی‌دی استور
button بگیرش استرینگ متن داخل دکمه‌ی دانلود
theme default استرینگ تم بنر
force false بولین اجرا شدن بر روی تمامی پلت‌فرم‌ها، بدون در نظر گرفتن سیستم عامل و یا کوکی‌ها
onDownload هیچ‌چیز فانکشن اجرای یک دستورالعمل بعد از لمس شدن دکمه‌ی بگیرش.
onClose هیچ‌چیز فانکشن اجرای یک دستورالعمل بعد از لمس شدن دکمه‌ی بستن.

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

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

پوسته‌ها

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

  • Default

    پیش‌فرض

    default

  • Minimal

    مینیمال

    minimal

توسعه

قبل از انجام هر تغییری، برای ممکن‌سازی گرفتن 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