آموزش ساخت نسخه موبایل سایت در لاراول

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

مزایا و معایب قالب ریسپانسیو و نسخه موبایل

• طراحی سایت با قالب های ریسپانسیو بسیار ساده است و با سرعت بالایی انجام می شود.  
• حجم کدهای قالب ریسپانسیو کمتر می باشد.
• عیب یابی آن سریعتر می باشد.
• نسخه موبایل سایت زمان بیشتری را از طراح برای پیاده سازی میگیرد.
• نسخه موبایل سرعت بارگذاری بیشتری دارد
• نسخه موبایل سایت ux بسیار بالاتری نسبت به طرح ریسپانسیو دارد

نصب پکیج تشخیص agent

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

پکیجی به نام jenssegers وجود دارد که این کار را برای ما انجام می دهد. با وارد کردن کد زیر در terminal  میتوانید این پکیج را نصب کنید.

composer require jenssegers/agent

سپس کد زیر را در قسمت alias در دایرکتوری config و فایل app.php قرار دهید.

'Agent' => Jenssegers\Agent\Facades\Agent::class,

و در قسمت provider همان فایل، کد زیر را قرار دهید.

Jenssegers\Agent\AgentServiceProvider::class,

برای استفاده از این پکیج در کنترلر خود باید کلاس مربوطه را use کرده و یک آبجکت از آن بسازید:

use Jenssegers\Agent\Agent;
$agent = new Agent();

سپس توسط متغیر agent می توانید دستگاه و یا سیستم عامل کاربر مربوطه را تشخیص دهید.

$agent->is('Windows');
$agent->is('Firefox');
$agent->is('iPhone');
$agent->is('OS X');
$agent->isAndroidOS();
$agent->isNexus();
$agent->isSafari();
$agent->isMobile();
$agent->isTablet();

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

به مثال زیر توجه کنید:

use Jenssegers\Agent\Agent;
class FrontController extends Controller
{
    public function index()
    {
        $agent = new Agent();
        if($agent->isMobile())
        {
            $sliders = DB::table("tbl_slider")->get();
            return view("front.mobile.index.index",compact("sliders"));
        }
        if($agent->isDesktop())
        {
            return view("front.desktop.index.index");
        }
    }
}

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