ساخت یک جستجو با استفاده از Laravel Scout و Vue.js

در این مقاله از لیداوب، همراه ما باشید تا نحوه ساخت یک جستجو را با استفاده از Laravel Scout و Vue.js را با هم بیاموزیم.


اگر بخواهیم توضیح مختصری درباره Laravel Scout داشته باشیم، می‌توان گفت که Laravel Scout یک راه حل ساده مبتنی بر درایور ارائه می‌کند که می‌توان از طریق آن جستجوی یک متن کامل را به مدل‌های Eloquent اضافه کرد. Scout به صورت خودکار شاخص‌های جستجو را هماهنگ با رکوردهای Eloquent حفظ می‌کند.

این یک پکیج رسمی است که به صورت پیش‌فرض در لاراول قرار ندارد اما می‌توانید آن را توسط Composer نصب کرده و در برنامه‌های لاراول خود از آن استفاده کنید. این پکیج به همراه یک درایور Algolia ارئه می‌شود.

در این مقاله، برای ایجاد قابلیت جستجو با استفاده از Laravel Scout و Vue.js، مراحل کار را از اولین مراحل نصب و پیکربندی لاراول توضیح داده شده است، این مراحل به صورت زیر است:

نصب لاراول
پیکربندی پایگاه داده
ایجاد مدل‌ها و مایگریشن‌ها
وارد کردن داده‌های ساختگی در جدول
ایجاد مسیرها و کنترلرها
نصب Laravel Scout
اضافه کردن داده‌ها به Algolia
نوشتن متد search
تنظیمات فرانت اند برنامه
ایمپورت کردن Vue.js و Vue-resource
داده Vue.js و bindings
بازیابی و نمايش داده‌ها

با اینکه Scout به همراه یک درایور Algolia ارائه شده است، با این حال، نوشتن درایور سفارشی کار ساده‌ای است و می‌توانید گسترش Scout را با پیاده سازی جستجو خود نیز انجام دهید.

در تصویر زیر، نمای کلی از چیزی که در حال ساخت آن هستیم را مشاهده می‌کنید:

Laravel Scout and Vue.js

  نصب لاراول

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

composer create-project --prefer-dist laravel/laravel search

پس از نصب لاراول، شما باید ریشه document / web وب ‌سرور خود را به عنوان دایرکتوری public پیکربندی کنید. سپس، مطمئن شوید که دایرکتوری‌های موجود در دایرکتوری‌های storage و bootstrap / cache توسط وب سرور شما قابل خواندن هستند.

آخرین مرحله در نصب لاراول، ایجاد یک کلید برنامه یا application key است که برای رمزگذاری سشن‌های کاربر و سایر داده‌ها مورد استفاده قرار می‌گیرد. می‌توانید با اجرای دستور زیر این کار را انجام دهید:

php artisan key:generate

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

laravel-project

پیکربندی پایگاه داده

در این مرحله، نام فایل .env.example را به .env تغییر دهید و نام پایگاه داده، نام کاربری و رمز عبور خود را اضافه کنید. ما از پایگاه داده SQLite برای انجام این کار استفاده کرده‌ایم، ولی شما می‌توانید از پایگاه داده MySQL یا هر سیستم مدیریت پایگاه داده‌ای که ترجیح می‌دهید، استفاده کنید.

DB_CONNECTION=sqlite

ایجاد مدل‌ ها و مایگریشن‌ ها

در برنامه کوچکی که ما در حال ساخت آن هستیم، فقط نیاز به یک مدل Product و یک جدول products خواهیم داشت که در ادامه آن‌ها را ایجاد می‌کنیم:

php artisan make:model Product –m

زمانی که ما عبارت -m به دستور php artisan make:model اضافه می‌کنیم، یک migration ایجاد می‌شود.

سپس، در مایگریشن ایجاد شده، جدول products را به صورت زیر تعریف می‌کنیم:

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('image');
            $table->integer('price');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

در مرحله بعد، باید فایل خود را ذخیره کنید و دستور php artisan migrate را برای migrate کردن جدول اجرا کنید.

migrate

وارد کردن داده‌ های ساختگی در جدول

توسط model factory در لاراول، می‌توانیم برای انجام تست، داده‌های ساختگی را به جدول اضافه کنیم. برای این منظور، کدهای زیر را به فایل database/factories/ModelFactory.php اضافه می‌کنیم:

$factory->define(App\Product::class, function (Faker\Generator $faker) {
    return [
        'title' => $faker->sentence(),
        'image' => 'https://loremflickr.com/400/300?random='.rand(1, 100),
        'price' => $faker->numberBetween(3, 100),
        'description' => $faker->paragraph(2)
    ];
});

پس از نوشتن factory، برای ایجاد این داده‌ها، در خط فرمان، دستور php artisan tinker و سپس factory(App\Product::class, 100)->create(); را اجرا می‌کنیم. در این روش، می‌توانید به تعداد دلخواه رکورد ایجاد کنید.

 مقاله کاربردی مشابه:

مسیر ها و کنترلر ها

در این برنامه ما تنها به دو مسیر زیر نیاز داریم که بایستی آن‌ها را به صورت زیر ایجاد کنیم.

/ : GET این مسیر صفحه home وب سایت ما را نمایش می‌دهد. در فایل routes/web.php کدهای زیر را وارد می‌کنیم:

route::get('/', function () {
return view('home');
});

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

GET : api/search این مسیر برای مدیریت درخواست‌های عمل جستجو است. در فایل routes/api.php کدهای زیر را وارد می‌کنیم:

Route::get('/search', [
'as' => 'api.search',
'uses' => 'Api\[email protected]'
]);

برای ایجاد کلاس SearchController ، دستور php artisan make:controller Api\SearchController را اجرا کنید. در زمان اضافه کردن یک فضای نامی به نام کلاس کنترلر، لاراول به صورت خودکار یک پوشه برای شما ایجاد می‌کند و کنترلر ایجاد شده را در داخل آن قرار می‌دهد.

class SearchController extends Controller
{
public function search(Request $request)
{
// we will be back to this soon!
}
}

نصب Laravel Scout

نصب و پیکربندی Laravel Scout بسیار راحت است، می‌توانید این پکیج را با استفاده از دستور composer require laravel/scout نصب کنید. سپس، ScoutServiceProvider را به آرایه providers در فایل پیکربندی config/app.php اضافه کنید.

Laravel\Scout\ScoutServiceProvider::class,

سپس، باید پیکربندی Scout را با استفاده از دستور آرتیسان vendor:publish پابلیش کنید. این دستور، فایل پیکربندی scout.php را در دایرکتوری config برنامه شما پابلیش ‌می‌کند:

php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"

در آخر، ویژگی Laravel\Scout\Searchable را به مدل Product اضافه می‌کنیم تا قابلیت جستجو را به آن اضافه کنیم:

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
use Searchable;

اضافه کردن داده‌ ها به Algolia

پس از آنکه Laravel Scout نصب شد، وقت آن است که درایور Algolia را نصب کنیم:

composer require algolia/algoliasearch-client-php

کاری که اکنون باید انجام دهیم این است که داده‌هایی را که پیش از این تولید کرده‌ایم را به Algolia وارد کنیم. برای این کار، باید یک حساب کاربری ایجاد کنید.

زمانی که شما در حال ایجاد حساب کاربری خود در https://www.algolia.com/api-keys هستید، Application ID و Admin API Key خود را کپی کرده و آن‌ها را در فایل .env خود به صورت زیر اضافه کنید:

ALGOLIA_APP_ID=J4YK3E00YT
ALGOLIA_SECRET=9088241f69034ee7db231e67bc2cb0b4

سپس، دستور زیر را در ترمینال اجرا کنید:

php artisan scout:import "App\Product"

اگر همه کارها به درستی انجام داده باشد، باید این پیام را مشاهده کنید. این پیام به معنی این است که تمام داده‌های مربوط به جدول products شما به سرورهای Algolia کپی شده است.

algolia

می‌توانید این داده‌ها را با مراجعه به Indices page در حساب کاربری خود تأیید کنید.

algolia data

نوشتن متد search

در این مرحله، به متد search در app\Http\Controllers\Api\SearchController.php برمی‌گردیم:

/**
     * Search the products table.
     *
     * @param  Request $request
     * @return mixed
     */
    public function search(Request $request)
    {
        // First we define the error message we are going to show if no keywords
        // existed or if no results found.
        $error = ['error' => 'No results found, please try with different keywords.'];

        // Making sure the user entered a keyword.
        if($request->has('q')) {

            // Using the Laravel Scout syntax to search the products table.
            $posts = Product::search($request->get('q'))->get();

            // If there are results return them, if none, return the error message.
            return $posts->count() ? $posts : $error;

        }

        // Return the error message if no keywords existed
        return $error;
    }

 فراموش نکنید که بایستی مدل Product خود را با use App\Product; ایمپورت کنید. اکنون، با مراجعه به آدرس https://example.com/api/search?q=code مشاهده می‌کنید که یک نمایش JSON از داده‌های شما را بازمی‌گرداند.

data-search

 درباره Vue.js چه می‌دانید:

تنظیمات فرانت اند برنامه

درباره طراحی فرانت اند برنامه در این آموزش، بیش از حد تمرکز نشده است. در اینجا قالبی که با آن کار می‌کنیم را در فایل resource / home.blade.php خود کپی می‌کنیم.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <title>Search with Laravel Scout and Vue.js!</title>
    </head>
    <body>
        <div class="container">
            <div class="well well-sm">
                <div class="form-group">
                    <div class="input-group input-group-md">
                        <div class="icon-addon addon-md">
                            <input type="text" placeholder="What are you looking for?" class="form-control">
                        </div>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Search!</button>
                        </span>
                    </div>
                </div>
            </div>
            <div id="products" class="row list-group">
            </div>
        </div>
    </body>
</html>

ایمپورت کردن Vue.js و Vue-resource

قبل از بستن تگ </body> کدهای زیر را اضافه می‌کنیم:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.1/vue-resource.min.js"></script>
<script src="/js/app.js"></script>

در مرحله بعدی، فایل app.js را در داخل پوشه public/js/ ایجاد می‌کنیم (حذف آن در صورت وجود) و این چیزی است که آن را در حال حاضر نگه می‌دارد:

new Vue({
    el: 'body',
});

به این معنی که ما نمونه Vue را در تگ body در HTML بایند می‌کنیم.

داده Vue.js و bindings

برای دریافت آنچه که کاربر در ابتدای جستجو نوشته است، نمایش نتایج جستجو، نمایش پیغام خطا یا نمایش دکمه جستجو، تنها لازم است که این خطوط را در زیر پراپرتی el اضافه کنیم:

data: {
products: [],
loading: false,
error: false,
query: ''
},

برای انجام این کار لازم است که کمی HTML را تغییر دهیم، کارهایی که باید انجام دهیم، به صورت زیر است:

1. خصوصیت v-model را به ورودی جستجو اضافه می‌کنیم تا آن را به پراپرتی query در شئ داده ما مرتبط کند.

<input type="text" placeholder="What are you looking for?" class="form-control" v-model="query">

2. وقتی عملی در حال انجام شدن است، دکمه  ...Searching را نمایش داده و در غیر این صورت، دکمه search عادی را نمایش دهد.

<button class="btn btn-default" type="button" v-if="!loading">Search!</button>
<button class="btn btn-default" type="button" disabled="disabled" v-if="loading">Searching...</button>

برای نمایش پیغام خطا، ما باید این کد را در زیر تگ divای که دارای کلاس " well well sm " است، اضافه می‌کنیم:

<div class="alert alert-danger" role="alert" v-if="error">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    @{{ error }}
</div>

برای نمایش داده‌ها با Vue.js ما از سینتکس {{}} استفاده می‌کنیم، اما از آنجایی که لاراول نیز از همان سینتکس استفاده می‌کند، برای جدا کردن آن علامت @ را به ابتدای آن اضافه می‌کنیم.

بازیابی و نمایش داده‌ ها

مرحله باقیمانده و مهم این است که داده‌ها را بازیابی کنیم. ما با اتصال یک event listener به دکمه جستجو شروع می‌کنیم، با افزودن ویژگی @click به آن می‌توانیم این کار را انجام دهیم:

<button class="btn btn-default" type="button" @click="search()" v-if="!loading">Search!</button>

حال، اجازه دهید تابع search را ایجاد کنیم و آن را زیر data object قرار دهیم:

methods: {
    search: function() {
        // Clear the error message.
        this.error = '';
        // Empty the products array so we can fill it with the new products.
        this.products = [];
        // Set the loading property to true, this will display the "Searching..." button.
        this.loading = true;

        // Making a get request to our API and passing the query to it.
        this.$http.get('/api/search?q=' + this.query).then((response) => {
            // If there was an error set the error message, if not fill the products array.
            response.body.error ? this.error = response.body.error : this.products = response.body;
            // The request is finished, change the loading to false again.
            this.loading = false;
            // Clear the query.
            this.query = '';
        });
    }
}

مرحله آخر، نوشتن کد HTML برای product است، باید زیر div دارای products ID این کدها را اضافه کنید:

<div class="item col-xs-4 col-lg-4" v-for="product in products">
    <div class="thumbnail">
        <img class="group list-group-image" :src="product.image" alt="@{{ product.title }}" />
        <div class="caption">
            <h4 class="group inner list-group-item-heading">@{{ product.title }}</h4>
            <p class="group inner list-group-item-text">@{{ product.description }}</p>
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <p class="lead">[email protected]{{ product.price }}</p>
                </div>
                <div class="col-xs-12 col-md-6">
                    <a class="btn btn-success" href="#">Add to cart</a>
                </div>
            </div>
        </div>
    </div>
</div>

کاری که ما انجام دادیم این است که یک حلقه با استفاده از دستور v-for ایجاد کردیم و داده‌ها را همانند قبل با استفاده از سینتکس {{}} نمایش دادیم.

در این صورت، باید دقیقا کاری که این وب سایت انجام می‌دهد را در سرور خود داشته باشیم:

Laravel Scout and Vue.js

نتیجه گیری

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

فرا بگیرید:

آموزش پایه لاراول ۵,۵

آموزش CSS

آموزش HTML مقدماتی

امیدوارم این آموزش نیز به شما کمک کند تا حرفه‌ای ترین برنامه‌های کاریردی را در فریم ورک لاراول ایجاد کنید و از آن لذت ببرید. کتابخانه‌ آنلاین لیداوب همراه شماست تا بهترین آموزش‌های کاریردی برنامه نویسی با PHP و لاراول را در اختیار کاربران خود قرار دهد.