طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

پنج نکته کلیدی برای شروع یادگیری زبان برنامه نویسی C — راهنمای مقدماتی

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

زبان برنامه‌نویسی C چیست؟

برای این که بدانید ماهیت زبان برنامه‌نویسی C چیست، بهتر است ابتدا با مفهوم کدنویسی آشنا شوید. بدین منظور پیشنهاد می‌کنیم ابتدا مطلب زیر را مطالعه نمایید:

آموزش زبان C با یک پروژه ساده — راهنمای مقدماتی

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

چرا باید برنامه‌نویسی C را بیاموزیم؟

اگر C چنین پیچیده و خطرناک است، پس اصلاً چرا باید آن را آموخت؟ پاسخ این است که:

C در همه جا حضور دارد.
تقریباً همه سیستم‌های عامل برای رایانه‌ها به زبان C نوشته شده‌اند.
اغلب گوشی‌های هوشمند و تبلت‌ها سیستم عامل مبتنی بر زبان C دارند.
تقریباً همه میکروکنترلرها چه روی نمایشگر درب میکروویو باشند و چه در مسافت‌یاب داخلی خودرو به کار رفته باشند، به زبان C برنامه‌نویسی شده‌اند.
C++، Objective C و #C مستقیماً بر مبنای C ساخته شده‌اند و زبان برنامه‌نویسی «پایتون» (Python) نیز به وسیله آن نوشته شده است.
کسب دانش مناسب از زبان C، در رزومه هر برنامه‌نویسی نقطه‌ای مثبت تلقی می‌شود.

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

یادگیری C در واقع به معنی یادگیری طرز کار رایانه‌ها نیز هست. برنامه نویسان C می‌توانند درک عمیق‌تری از شیوه تأثیر کد روی سیستم‌ها داشته باشند و در نتیجه یادگیری زبان‌های برنامه‌نویسی دیگر برای آن‌ها آسان‌تر خواهد بود.

1. یادگیری انواع متغیرهای پایه

داده‌ها در انواع مختلفی هستند. دانستن این که با چه نوع داده‌ای سر و کار داریم حائز اهمیت است، زیرا در غیر این صورت ممکن است موجب ایجاد سردرگمی ‌شوند. به عنوان مثال باید بدانیم که عدد 5 می‌تواند یک «عدد صحیح» (Integer) باشد و همچنین می‌تواند یک کاراکتر متنی باشد.

1
int number = 5;

کد فوق دیگر موجب سردرگمی نمی‌شود، چون مقدار صحیح 5 به متغیر عددی انتساب یافته است. باید به C اعلام شود که چه نوع داده‌ای می‌تواند بپذیرد تا بتواند به طرز بهتری با داده‌ها کار کند. انواع داده و روش‌های انتساب آن‌ها به متغیرها بخشی ضروری از یادگیری C محسوب می‌شود و درک آن‌ها حائز اهمیت بالایی است. دانستن شیوه انتساب انواع صحیح به داده‌ها، در همه زبان‌های برنامه‌نویسی یک مهارت مهم محسوب می‌شود، اما در زبان C کاملاً ضروری است.

2. یادگیری عملگرها

اگر C نخستین زبان برنامه‌نویسی است که یاد می‌گیرید، احتمالاً نخستین باری است که با عملگرها آشنا می‌شوید. عملگرها نمادهایی هستند که به کامپایلر اعلام می‌کنند یک وظیفه را اجرا کند. شاید ساده‌ترین مثال عملگر + است.

1
answer = number + anotherNumber;

درک این که کد فوق دو متغیر صحیح را با هم جمع می‌کند کار دشواری محسوب می‌شود. البته همه عملگرها به این سادگی نیستند. C از عملگرهای زیادی برای عملیات حسابی، انتسابی، منطقی و موارد دیگر استفاده می‌کند. دانستن این که هر کدام از این عملگرها چه کاری انجام می‌دهند، به شما کمک می‌کند که مفاهیم برنامه‌نویسی را سریع‌تر درک کنید.

3. استفاده از کتابخانه‌های استاندارد

C ممکن است یک زبان سطح پایین باشد؛ اما مجموعه‌ای از کتابخانه‌ها برای کمک به ایجاد برنامه‌ها دارد. عملیات حسابی، داده‌های خاص locale (مانند نمادهای پولی) و انواع متغیرهای مختلف و ماکروها، همگی مواردی هستند که در این کتابخانه‌ها تعریف شده‌اند.

شما می‌توانید با گنجاندن این کتابخانه‌ها در کد خود، آن‌ها را مورد استفاده قرار دهید. مثال زیر را در نظر بگیرید:

1
2
3
4
5
6
#include <stdio.h>
int main()
{
  printf("Hello, World!");
  return 0;
}

در C عمل ساده خروجی دادن به کنسول نیازمند گنجاندن فایل هدر stdio.h (کتابخانه استاندارد ورودی/خروجی) است. 15 کتابخانه استاندارد مختلف برای برنامه‌نویسی در زبان C وجود دارند که هر یک وظایف مختلفی بر عهده دارند.

4. C بخشش ندارد

زبان C دقیقاً همان کاری را انجام می‌دهد که به آن اعلام شده است و به جای این که در صورت بروز موقعیت‌های بی‌معنی شکایت کند، به تلاش خود در جهت اجرای وظیفه‌اش ادامه می‌دهد. این وضعیت نه تنها می‌تواند منجر به از کار افتادن برنامه شما بشود؛ بلکه ممکن است کل سیستم را از کار بیندازد.

با این که این وضعیت بغرنج به نظر می‌رسد؛ اما معمولاً چنین نیست. شما قرار نیست رایانه خود را خراب بکنید؛ اما ممکن است در نهایت چندین باگ در برنامه‌تان کشف کنید. به مثال زیر توجه کنید:

زبان برنامه نویسی C

این قطعه کد سؤال‌هایی را در کنسول نمایش می‌دهد و سپس ورودی‌های کاربر را پیمایش کرده و آن‌ها را در اعداد صحیحی ذخیره می‌کند. این برنامه برای جمع و تفریق کردن اعداد پیش از نمایش مجدد پاسخ به کاربر طراحی شده است. احتمالاً متوجه شده‌اید که اشکالی در این برنامه وجود دارد؛ چون خروجی قطعاً بی‌معنی است:

زبان برنامه نویسی C

از آنجا که ما هرگز مقادیر را تفریق نکرده‌ایم؛ متغیر تفریق مقدار بی‌معنی ‌دارد. زبان‌های برنامه‌نویسی دیگر در مواردی که به متغیر تفریق هیچ مقداری نداده باشید، خطایی به شما نمایش می‌دهند، اما C چنین نیست.

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

5. دیباگ کردن بهترین دوست شما است

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

زبان برنامه نویسی C

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

سپس برنامه به صورت نرمال اجرا می‌شود. اعداد که وارد شدند، در ادامه برنامه پس از خط 10 مکث می‌کند. ابزار دیباگ از شما می‌خواهد که مقدار تفریق شده را نمایش دهید که عدد 37 را نمایش می‌دهد. این وضعیت معنی‌دار است، چون ما هنوز از آن نخواسته‌ایم که تفریقی انجام دهد و از این رو یک مقدار تصادفی است. در ادامه دیباگر کار خود را به پیش می‌برد. این فرایند پس از خط 13 نیز ادامه می‌یابد و مقدار تفریق شده تنها برای یافتن مقداری که تغییر یافته است نمایش می‌یابد.

زبان برنامه نویسی C

بدین ترتیب مشخص می‌شود که ما کلاً فراموش کرده‌ایم مقدار را محاسبه کنیم و به جای آن یک خط خالی از کد قرار داده‌ایم. درک این نکته به لطف دیباگر ممکن شده است. GDB بهترین دوست کدنویس‌های C است و هر چه زودتر کار با آن را یاد بگیرید، خوشحال‌تر خواهید بود.

سخن پایانی

زبان C در واقع یک تجربه یادگیری به درازای عمر است و موارد مهمی مانند اشاره‌گرها و تخصیص حافظه در آن وجود دارند که در این مقاله اصلاً اشاره نکرده‌ایم. با این که C مشهور به زبان دشوار است؛ اما شما می‌توانید با تمرین آن را یاد بگیرید، بنابراین دست به کار شوید و در اولین فرصت شروع به یادگیری آن بکنید

منبع: فرادرس

مشاوره شنبه 26 مرداد 1398 ساعت 11:17

0 نظر

جستجوی تمام متن در لاراول با Scout — به زبان ساده

جستجوی تمام متن یک قابلیت ضروری جهت فراهم ساختن امکان حرکت در میان صفحه‌های وب‌سایت‌های با محتوای گسترده است. در این مقاله، شیوه پیاده‌سازی امکان جستجوی تمام متن را برای یک اپلیکیشن لاراول بررسی می‌کنیم. در واقع ما از کتابخانه Scout لاراول استفاده می‌کنیم که پیاده‌سازی جستجوی تمام متن را به امری ساده و جذاب تبدیل کرده است.

مستندات رسمی، کتابخانه Scout لاراول را به صورت زیر توصیف می‌کنند:

کتابخانه Scout لاراول یک راه‌حل ساده و مبتنی بر درایور برای افزودن امکان جستجوی تمام متن به مدل‌های Eloquent ارائه می‌کند. Scout با استفاده از «مشاهده‌گرهای مدل» (model observers) به طور خودکار اندیس‌های جستجو را در وضعیتی همگام‌سازی شده با رکوردهای Eloquent حفظ می‌کند.

کتابخانه Scout لاراول به مدیریت دستکاری اندیس‌ها در زمان بروز تغییراتی در داده‌های مدل می‌پردازد. جایی که داده‌ها اندیس می‌شوند به درایوری وابسته است که برای کتابخانه Scout پیکربندی‌شده است.

در حال حاضر کتابخانه Scout از Algolia پشتیبانی می‌کند که یک API موتور جستجوی مبتنی بر کلود است و ما نیز در این مقاله از آن برای نمایش پیاده‌سازی جستجوی تمام متن استفاده خواهیم کرد.

ما کار خود را با نصب کتابخانه‌های Scout و Algolia server آغاز می‌کنیم و در ادامه برخی مثال‌های واقعی را بررسی می‌کنیم که شیوه اندیس‌گذاری و جستجوی داده‌ها را نمایش می‌دهد.

Scout

پیکربندی سرور

در این بخش ما قصد داریم وابستگی‌هایی را که برای کار کردن کتابخانه Scout با لاراول لازم هستند نصب کنیم. پس از نصب، باید کمی آن را پیکربندی کنیم تا لاراول بتواند کتابخانه Scout را تشخیص دهد.

در ادامه کتابخانه Scout را با استفاده از Composer نصب می‌کنیم:

composer require laravel/scout

اگر صرفاً خواسته باشیم کتابخانه Scout را نصب کنیم، کار به همین سادگی است. اینک که کتابخانه Scout نصب شده است، ابتدا باید مطمئن شویم که لاراول در مورد آن اطلاع دارد.

در صورتی که با لاراول کار کرده باشید، احتمالاً با مفهوم «ارائه‌دهنده سرویس» (service provider) که امکان پیکربندی سرویس‌ها در اپلیکیشن را می‌دهد، آشنا هستید. بدین ترتیب هر زمان که بخواهید یک سرویس جدید را در اپلیکیشن لاراول پیکربندی کنید، کافی است یک مدخل ارائه‌دهنده سرویس مرتبط را در config/app.php اضافه کنید.

اگر با مفهوم ارائه‌دهنده سرویس در لاراول آشنا نیستید؛ قویاً توصیه می‌کنیم که ابتدا به طور کامل با این مفهوم آشنا شوید.

در مورد اپلیکیشنی که می‌خواهیم طراحی بکنیم باید یک ارائه‌دهنده سرویس به نام ScoutServiceProvider را به فهرست ارائه‌دهنده‌های سرویس در فایل config/app.php اضافه کنیم. روش کار در قطعه کد زیر نمایش یافته است:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
...
...
'providers' => [
 
        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        Illuminate\Bus\BusServiceProvider::class,
        Illuminate\Cache\CacheServiceProvider::class,
        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
        Illuminate\Cookie\CookieServiceProvider::class,
        Illuminate\Database\DatabaseServiceProvider::class,
        Illuminate\Encryption\EncryptionServiceProvider::class,
        Illuminate\Filesystem\FilesystemServiceProvider::class,
        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
        Illuminate\Hashing\HashServiceProvider::class,
        Illuminate\Mail\MailServiceProvider::class,
        Illuminate\Notifications\NotificationServiceProvider::class,
        Illuminate\Pagination\PaginationServiceProvider::class,
        Illuminate\Pipeline\PipelineServiceProvider::class,
        Illuminate\Queue\QueueServiceProvider::class,
        Illuminate\Redis\RedisServiceProvider::class,
        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
        Illuminate\Session\SessionServiceProvider::class,
        Illuminate\Translation\TranslationServiceProvider::class,
        Illuminate\Validation\ValidationServiceProvider::class,
        Illuminate\View\ViewServiceProvider::class,
 
        /*
         * Package Service Providers...
         */
        Laravel\Tinker\TinkerServiceProvider::class,
 
        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
        Laravel\Scout\ScoutServiceProvider::class,
],
...
...

اینک لاراول از وجود ارائه‌دهنده سرویسی به نام ScoutServiceProvider آگاهی دارد. کتابخانه Scout به همراه یک فایل پیکربندی ارائه می‌شود که به ما امکان تنظیم نام کاربری و رمز عبور API را می‌دهد.

در ادامه فایل‌های ارائه شده از سوی Scout را با استفاده از دستور زیر منتشر می‌کنیم:

1
2
3
$ php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"
Copied File [/vendor/laravel/scout/config/scout.php] To [/config/scout.php]
Publishing complete.

همان طور که می‌بینید بدین ترتیب فایل vendor/laravel/scout/config/scout.php به مسیر config/scout.php کپی شده است.

حساب کاربری Algolia

در ادامه یک حساب کاربری در سرویس Algolia (+) ایجاد می‌کنیم، چون به نام کاربری و رمز عبور API آن نیاز داریم. زمانی که اطلاعات API را به دست آوردید می‌توانید اقدام به پیکربندی تنظیمات مورد نیاز در فایل config/scout.php به شیوه‌ای که در قطعه کد زیر نمایش یافته است، بکنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php
 
return [
 
    /*
    |--------------------------------------------------------------------------
    | Default Search Engine
    |--------------------------------------------------------------------------
    |
    | This option controls the default search connection that gets used while
    | using Laravel Scout. This connection is used when syncing all models
    | to the search service. You should adjust this based on your needs.
    |
    | Supported: "algolia", "null"
    |
    */
 
    'driver' => env('SCOUT_DRIVER', 'algolia'),
 
    /*
    |--------------------------------------------------------------------------
    | Index Prefix
    |--------------------------------------------------------------------------
    |
    | Here you may specify a prefix that will be applied to all search index
    | names used by Scout. This prefix may be useful if you have multiple
    | "tenants" or applications sharing the same search infrastructure.
    |
    */
 
    'prefix' => env('SCOUT_PREFIX', ''),
 
    /*
    |--------------------------------------------------------------------------
    | Queue Data Syncing
    |--------------------------------------------------------------------------
    |
    | This option allows you to control if the operations that sync your data
    | with your search engines are queued. When this is set to "true" then
    | all automatic data syncing will get queued for better performance.
    |
    */
 
    'queue' => env('SCOUT_QUEUE', false),
 
    /*
    |--------------------------------------------------------------------------
    | Chunk Sizes
    |--------------------------------------------------------------------------
    |
    | These options allow you to control the maximum chunk size when you are
    | mass importing data into the search engine. This allows you to fine
    | tune each of these chunk sizes based on the power of the servers.
    |
    */
 
    'chunk' => [
        'searchable' => 500,
        'unsearchable' => 500,
    ],
 
    /*
    |--------------------------------------------------------------------------
    | Soft Deletes
    |--------------------------------------------------------------------------
    |
    | This option allows you to control whether to keep soft deleted records in
    | the search indexes. Maintaining soft deleted records can be useful
    | if your application still needs to search for the records later.
    |
    */
 
    'soft_delete' => false,
 
    /*
    |--------------------------------------------------------------------------
    | Algolia Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your Algolia settings. Algolia is a cloud hosted
    | search engine which works great with Scout out of the box. Just plug
    | in your application ID and admin API key to get started searching.
    |
    */
 
    'algolia' => [
        'id' => env('ALGOLIA_APP_ID', 'STQK4DEGMA'),
        'secret' => env('ALGOLIA_SECRET', '6ef572194f70201ed7ad102cc9f90e05'),
    ],
 
];

دقت داشته باشید که ما مقدار SCOUT_DRIVER را برابر با درایور algolia تعیین کرده‌ایم. از این رو لازم است که تنظیمات لازم برای درایور Algolia را در انتهای فایل پیکربندی کنید. بدین منظور کافی است مقدار id و secret را که از حساب کاربری Algolia دریافت کرده‌اید تنظیم کنید.

همان طور که شاهد هستید، ما مقادیر را از متغیرهای محیطی واکشی کرده‌ایم، بنابراین باید مطمئن شویم که متغیرهای زیر را در فایل env. به صورت صحیحی تعیین کرده‌ایم:

1
2
3
4
5
6
...
...
ALGOLIA_APP_ID=STQK4DEGMA
ALGOLIA_SECRET=6ef572194f70201ed7ad102cc9f90e05
...
...

درنهایت باید SDK مربوط به Algolia PHP را نصب کنیم که برای تعامل با Algolia از طریق API-ها ضروری است. آن را با استفاده از composer و به صورت زیر نصب می‌کنیم:

1
$composer require algolia/algoliasearch-client-php

بدین ترتیب ما همه وابستگی‌های لازم برای ارسال و اندیس کردن داده‌ها در سرویس algolia را در اختیار داریم.

ایجاد قابلیت اندیس‌گذاری و جستجو در مدل‌ها

در بخش قبلی ما همه کارهایی را که برای راه‌اندازی کتابخانه‌های Scout و Algolia لازم بود انجام دادیم و از این رو اینک می‌توانیم داده‌ها را با استفاده از سرویس جستجوی Algolia اندیس‌گذاری و جستجو کنیم.

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

نخستین کاری که باید انجام دهیم، افزودن خصیصه Laravel\Scout\Searchable به مدل Post است. بدین ترتیب مدل Post قابل جستجو می‌شود و لاراول رکوردهای پست را هر بار که یک رکورد پست، اضافه، به‌روزرسانی یا حذف می‌شود، با اندیس Algolia همگام‌سازی می‌کند.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
namespace App;
 
use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;
 
class Post extends Model
{
    use Searchable;
 
    /**
     * The attributes that should be mutated to dates.
     *
     * @var array
     */
    protected $dates = [
        'created_at',
        'updated_at'
    ];
}

بدین ترتیب مدل Post برای جستجو مناسب‌سازی می‌شود. در ادامه و در وهله نخست فیلدهایی را که می‌بایست اندیس‌گذاری شوند پیکربندی کنیم. البته لازم نیست همه فیلدهای مدل را در Algolia اندیس‌گذاری کنید و بهتر است آن را سبک و کارآمد نگه داریم. در واقع در اغلب موارد به چنین کاری نیاز هم نداریم.

می‌توان toSearchableArray را در کلاس مدل اضافه کرد تا فیلدهایی که قرار است اندیس‌گذاری شوند، پیکربندی شوند.

1
2
3
4
5
6
7
8
9
10
11
/**
 * Get the indexable data array for the model.
 *
 * @return array
 */
public function toSearchableArray()
{
  $array = $this->toArray();
     
  return array('id' => $array['id'],'name' => $array['name']);
}

اکنون آماده ایمپورت و اندیس‌گذاری رکوردهای موجود Post در Algolia هستیم. در واقع کتابخانه Scout این کار را از طریق ارائه دستور artisan زیر ساده‌تر ساخته است:

1
$php artisan scout:import "App\Post"

این دستور همه رکوردهای مدل Post را در یک حرکت ایمپورت می‌کند. همه آن‌ها به محض ایمپورت شدن، اندیس‌گذاری می‌شوند و از این رو در این لحظه آماده کوئری زدن هستند. در ادامه داشبورد Algolia را بررسی کنید تا رکوردهای ایمپورت شده و دیگر ابزارها را مشاهده کنید.

Scout

جمع‌بندی طرز کار Scout

در این بخش مثالی را ارائه می‌کنیم که شیوه اجرای عمل جستجو و عملیات CRUD را که به صورت آنی با اندیس Algolia همگام‌سازی شده‌اند نمایش می‌دهد.

در این بخش فایل app/Http/Controllers/SearchController.php را با محتوای زیر ایجاد می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use App\Post;
 
class SearchController extends Controller
{
    public function query()
    {
        // queries to Algolia search index and returns matched records as Eloquent Models
        $posts = Post::search('title')->get();
         
        // do the usual stuff here
        foreach ($posts as $post) {
          // ...
        }
    }
 
    public function add()
    {
        // this post should be indexed at Algolia right away!
        $post = new Post;
        $post->setAttribute('name', 'Another Post');
        $post->setAttribute('user_id', '1');
        $post->save();
    }
     
    public function delete()
    {
        // this post should be removed from the index at Algolia right away!
        $post = Post::find(1);
        $post->delete();
    }
}

البته ما باید مسیرهای مرتبط را نیز اضافه کنیم:

1
2
3
Route::get('search/query', 'SearchController@query');
Route::get('search/add', 'SearchController@add');
Route::get('search/delete', 'SearchController@delete');

در ادامه از متد query استفاده می کنیم تا ببینیم شیوه جستجو در Algolia چگونه است:

1
2
3
4
5
6
7
8
9
10
public function query()
{
    // queries to Algolia search index and returns matched records as Eloquent Models
    $posts = Post::search('title')->get();
     
    // do the usual stuff here
    foreach ($posts as $post) {
        // ...
    }
}

خصیصه Searchable

به یاد داشته باشید که ما مدل Post را با افزودن خصیصه Searchable قابل جستجو کرده‌ایم. از این رو مدل Post می‌تواند از متد search برای بازیابی رکوردها از اندیس Algolia استفاده کند. در مثال فوق ما تلاش کرده‌ایم رکوردهایی را که با کلیدواژه title مطابقت دارند بازیابی کنیم.

در ادامه یک متد add وجود دارد که گردش کار افزودن یک رکورد جدید post را تقلید می‌کند.

1
2
3
4
5
6
7
8
public function add()
{
    // this post should be indexed at Algolia right away!
    $post = new Post;
    $post->setAttribute('name', 'Another Post');
    $post->setAttribute('user_id', '1');
    $post->save();
}

در کد فوق هیچ نکته جذابی وجود ندارد و صرفاً یک رکورد post جدید با استفاده از مدل Post ایجاد کرده است. اما مدل Post خصیصه Searchable را پیاده‌سازی می‌کند و از این رو لاراول در این مورد به مقداری کار اضافی برای اندیس کردن رکورد جدیداً ایجاد شده در Algolia دارد. بدین ترتیب همان طور که می‌بینید اندیس‌گذاری به صورت آنی صورت می‌گیرد.

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

1
2
3
4
5
6
public function delete()
{
    // this post should be removed from the index at Algolia right away!
    $post = Post::find(1);
    $post->delete();
}

همان طور که انتظار می‌رود، این رکورد بی‌درنگ پس از حذف شدن از پایگاه داده از اندیس Algolia نیز حذف می‌شود.

در واقع در صورتی که بخواهید مدل‌های موجود را قابل جستجو بکنید، نیاز به هیچ تلاش اضافی از سمت شما وجود ندارد. همه چیز از سوی کتابخانه Scout با استفاده از مشاهده‌گرهای مدل مدیریت می‌شود.

سخن پایانی

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

lمنبع: فرادرس

مشاوره شنبه 26 مرداد 1398 ساعت 11:16

0 نظر

۷ قابلیت ویژوال استودیو کد برای توسعه دهندگان وب — راهنمای کاربردی

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

ویژوال استودیو کد قابلیت‌های داخلی زیادی دارد، اما اگر افزونه‌های متعدد (و همچنان در حال رشد) آن را نیز در نظر بگیریم، درنهایت هزاران روش برای سفارشی‌سازی تجربه کاری خود در آن خواهید یافت.

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

این مقاله برای دو دسته از افراد به طور خاص مفید است:

افراد مبتدی که به تازگی شروع به کار با VS Code کرده‌اند و می‌خواهند مطمئن شوند که از همان ابزارهایی استفاده می‌کنند که افراد حرفه‌ای بهره می‌گیرند.
کاربران متوسط که VS Code را به خوبی می‌شناسند؛ اما همچنان حس می‌کنند می‌توانند بهبودهایی در گردش کار خود ایجاد کنند.

چرا باید از VS Code استفاده کنیم؟

VS Code از زمان انتشار در سال 2015 به سرعت جایگاه خود را به عنوان محبوب‌ترین ویرایشگر کد موجود تثبیت کرد. در طی دو سال اخیر، با مراجعه به نتایج روندهای جستجوی گوگل مشاهده می‌کنیم که علاقه به VS Code (در نمودار زیر به رنگ قرمز) نسبت به همه ویرایشگرهای کد دیگر بیشتر بوده است.

با این که هر ویرایشگر کدی نقاط قوت خاص خود را دارد، اما VS Code به طرز معقولی محبوب‌ترین گزینه است، زیرا قابلیت سفارشی‌سازی دارد؛ سریع‌تر به‌روزرسانی می‌شود و نسبت به رقبایش اکوسیستم متنوع‌تری از افزونه‌ها دارد. در مجموع این قابلیت‌ها به VS Code امکان می‌دهند که گردش کار بسیار سریعی برای توسعه‌دهندگان ارائه دهد. در ادامه دلیل این مسئله را به صورت دقیق‌تری مورد بررسی قرار می‌دهیم.

اگر تاکنون برخی آموزش‌های ویدئویی را در خصوص این IDE تماشا کرده باشید و یا با برخی از همکاران‌تان کار کرده باشید، احتمالاً با چند مورد از این قابلیت‌های VS Code آشنا هستید. در ادامه فهرستی از قابلیت‌های اساسی VS Code برای توسعه‌دهندگان جدی وب ارائه شده است.

اگر می‌خواهید این نرم‌افزار را نصب کنید، می‌توانید به این آدرس (+) مراجعه کنید.

1. اختصارهای Emmet

VS Code

این میانبرهای مفید به صورت قابلیت‌های درونی VSCode ارائه شده‌اند و موجب می‌شوند که نوشتن کدهای HTML و CSS بسیار سریع‌تر صورت بگیرد.

آماده‌سازی فایل HTML

اگر عبارت html را در هر فایلی تایپ کنید، گزینه‌های زیادی برای پر کردن داده‌های اولیه ضروری در فایل ارائه می‌شود. با زدن کلیدهای سمت بالا یا پایین می‌توانید بین این گزینه‌ها حرکت کنید و سپس با زدن دکمه tab آن میانبر را باز کنید تا چیزی مانند زیر را ببینید:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>

همچنین می‌توانید با زدن کلیدهای Control + SPACE (در ویندوز) یا CMD + SPACE (در macOS) پیش از باز کردن یک گزینه، اطلاعات بیشتری در مورد آن مشاهده کنید.

افزودن تگ

از طریق دانستن چند اختصار که یادگیری آسانی دارند، می‌توان امکان ایجاد سریع تگ‌های HTML، تعریف کردن ID برای آن‌ها، نام‌های کلاس، عناصر هم‌نیا و فرزند را به دست آورد.

برای نمونه اگر بخواهید یک لیست نامرتب با سه مدخل ایجاد کنید که هر کدام یک نام کلاس منحصر به فرد داشته باشند، می‌توانید عبارت ul>li.item$*3 را وارد کنید تا چیزی مانند زیر را به دست آورید:

1
2
3
4
5
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

در این مثال، ما از نمادهای اختصاری زیر استفاده کرده‌ایم:

< مشخص می‌کند که تگ بعدی باید یک فرزند از تگ قبلی باشد.
. مشخص می‌کند که متنی که در ادامه آمده است نام کلاس است.
$ برای نمایش یک عدد منحصر به فرد استفاده می‌شود (که از 1 رو به بالا شمارش می‌شود).
درنهایت * امکان تکثیر سریع یک تگ برای تولید به هر تعداد که می‌خواهید را فراهم می‌سازد.

شما می‌توانید فهرست کاملی از میانبرهای Emmet را با مراجعه به صفحه مستندات رسمی (+) مشاهده کنید؛ اما ساده‌ترین روش برای شروع به کار استفاده از این تقلب نامه (+) است.

افزودن متن ساختگی

یکی از مفیدترین اختصارهای Emmet برای توسعه وب امکانی برای درج مقدار دلخواهی از متن ساختگی است. برای درج 10 واژه کافی است عبارت lorem100 را وارد کرده و دکمه tab را بزنید. و برای درج 1000 کلمه می‌توانید از lorem1000 + tab و همین طور تا آخر استفاده کنید.

Emmet برای JSX

اگر از JSX در React یا هر جایگزین دیگر برای HTML استفاده می‌کنید، همچنان می‌توانید از اختصارهای Emmet کمک بگیرید. تنها تفاوت این است که این بار باید آن‌ها را به صورت دستی فعال کنید.

به این منظور باید کلیدهای ترکیبی , + Ctrl را بزنید تا بخش تنظیمات باز شود و سپس روی نماد آکولاد {} در گوشه راست-بالای آن کلیک کنید تا بخش settings.json باز شود. زمانی که باز شد، کافی است کد زیر را اضافه کنید:

1
2
3
4
5
6
7
8
{
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "xml": {
      "attr_quotes": "single"
    }
  }
}

2. CLI یکپارچه (رابط کاربری خط فرمان)

قابلیت ویژوال استودیو کد

VS Code برای صرفه‌جویی زمان مورد نیاز جهت سوئیچ کردن بین پنجره‌ها یک ترمینال یکپارچه یا CLI ارائه کرد است. کافی است دکمه‌های ‘ + CTRL یا ‘ + CMD را بزنید تا آن را باز کنید. با همین دستور می‌توانید این ترمینال داخلی را ببندید. این ترمینال به صورت خودکار در همان دایرکتوری که VS Code باز شده است، باز می‌شود و بدین ترتیب مراحل ناوبری مورد نیاز برای اجرای عملیات در یک ترمینال استاندارد را کاهش می‌دهد.

این ترمینال کار نصب وابستگی‌های NPM یا YRAN، کامیت فایل‌ها به Git، و ارسال فایل‌ها به گیت‌هاب را آسان‌تر ساخته است. همچنین هر کار دیگری که می‌بایست از طریق خط فرمان اجرا شود در این محیط به آسانی صورت می‌پذیرد.

نکته‌ای برای کاربران ویندوز

اگر از سیستم عامل ویندوز استفاده می‌کنید، به شدت توصیه می‌شود که Git for Windows (+) را نصب کنید. این ابزار امکان استفاده از برخی دستورها که برای کاربران Mac و Linux آشنا هستند را در اختیار شما قرار می‌دهد و همچنین با استفاده از آن می‌توانید گیت را از خط فرمان اجرا کنید.

زمانی که ابزار فوق نصب شد می‌توانید ترمینال پیش‌فرض را از Powershell به Git Bash تغییر دهید و کد زیر را به فایل settings.json اضافه کنید:

1
{ "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe" }

3. ESLint

قابلیت ویژوال استودیو کد

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

می‌توان آن را به صورت یک پکیج Node بر مبنای پروژه اضافه کرد و یا این که می‌توان از افزونه ESLint درون VS Code استفاده کرد. گزینه دوم آسان و ساده است و موجب نمی‌شود که از پیکربندی‌های یکتای ESLint برای پروژه‌های بعدی استفاده نکنید. بنابراین افزونه ESLint را یافته و آن را نصب کنید.

برای این که بیشترین بهره را از این افزونه بگیرید، بهتر است از نسخه سراسری کتابخانه ESLint که روی رایانه نصب می‌شود استفاده کنید. به این منظور باید مطمئن شوید که Node روی سیستم نصب شده است. سپس ترمینال خود را باز کنید (اگر درون VS Code هستید، دکمه‌های ‘ + CTRL یا ‘ + CMD را بزنید) و کد زیر را وارد کنید:

npm i -g eslint

زمانی که افزونه و کتابخانه سراسری نصب شد، نیازی به اجرای دستور زیر روی تک تک پروژه‌ها نخواهید داشت.

npm i eslint –s

به جای آن می‌توانید فایل eslintrc را به دایرکتوری اصلی پروژه خود اضافه کنید.

به این منظور باید NPM را مقداردهی اولیه کنید. ابتدا مطمئن شوید که در دایرکتوری اصلی پروژه خود هستید و در ترمینال عبارت زیر را وارد کنید:

npm init

در ادامه می‌توانید فایل eslintrc را با وارد کردن دستور زیر ایجاد کنید:

eslint –init

و در ادامه مراحل مورد نظر را تعقیب کنید. اگر مطمئن نیستید که از کدام «راهنمای سبک» (Style-guide) باید استفاده کنید، پیشنهاد می‌کنیم از نوع AirBnB’s پیروی کنید.

زمانی که از تنظیمات ESLint راضی بودید، می‌توانید مطمئن باشید که اصلاح‌های خودکار در زمان ذخیره‌سازی و با افزودن دستور زیر به فایل settings.json اعمال می‌شوند:

1
{ "eslint.autoFixOnSave": true }

نکته‌ای دیگر برای کاربران ویندوز: Pesky Linebreaks

به صورت پیش‌فرض محل‌های پایان خطوط در مک و لینوکس از یک فید خط ساده (LF) یعنی n\ استفاده می‌کنند. اما ویندوز از یک فید (carriage return line (CRLF یعنی r\n\ استفاده می‌کند.

دو راه‌حل برای این مسئله وجود دارد. ابتدا می‌توانید تنظیمات شکستن خط را از unix به windows تغییر دهید. به این منظور به فایل eslintrc بروید و عبارت “linebreak-style”: “windows” را زیر شیء rules اضافه کنید.

در غیر این صورت اگر فکر می‌کنید که استفاده از r\n\ ضرورتی ندارد و n\ کفایت می‌کند و یا به صورت عمده همکارانتان از سیستم‌های مک و لینوکس استفاده می‌کنند، می‌توانید رفتار پیش‌فرض شکستن خط را به LF تغییر دهید و کد زیر را به فایل settings.json اضافه کنید:

1
{ "files.eol": "\n" }

4. Prettier

قابلیت ویژوال استودیو کد

Prettier یک ابزار قالب‌بندی کد است. این ابزار سبک‌های قالب‌بندی معینی را به عنوان سبک صحیح توصیف می‌کند؛ اما محبوبیت آن موجب شده است که قواعد آن به یک استاندارد تثبیت‌شده برای جاوا اسکریپت، CSS و تعداد فزاینده‌ای از زبان‌های دیگر تبدیل شود.

یک همپوشانی بین Prettier و ESLint وجود دارد؛ اما در نهایت Prettier تمرکز بیشتری روی یافتن خطاها دارد و Prettier بیشتر بر اصلاح قالب‌بندی کد متمرکز شده است. این دو با یکدیگر همکاری می‌کنند و نوعی یکپارچه‌سازی برای کمک به اجرای روان‌تر کارها تا حد ممکن دارند.

افزونه‌ای که باید نصب کنیم Prettier — Code formatter نوشته Esben Peterson است. برای فعال‌سازی یکپارچه‌سازی ESLint کد زیر را به فایل settings.json اضافه کنید:

1
{ "prettier.eslintIntegration": true }

قالب‌بندی در زمان ذخیره‌سازی

زمانی که این افزونه نصب شد، می‌توانید با زدن دکمه‌های ترکیبی Shift + Alt+ F (در ویندوز) و یا Shift + Option + F (در مک) موجب شوید که Prettier بی‌درنگ کدهای جاوا اسکریپت و CSS را قالب‌بندی کند.

یک گزینه مناسب این است که افزونه را طوری تنظیم کنیم که در زمان ذخیره‌سازی فایل به صورت خودکار کدها را قالب‌بندی کند. به این منظور باید دستور زیر را به فایل settings.json اضافه کنید:

1
{ "editor.formatOnSave": true }

زبان‌های دیگر

از Prettier می‌توان برای قالب‌بندی زبان‌های دیگر به جز جاوا اسکریپت و CSS نیز استفاده کرد. این افزونه فهرست رو به رشدی از زبان‌ها را پشتیبانی می‌کند که شامل جاوا، روبی و PHP می‌شود. البته این موارد به صورت آماده نصب نمی‌شوند و باید آن‌ها را به صورت مستقل نصب کنید.

5. میانبرهای چند کرسری

قابلیت ویژوال استودیو کد

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

دستورهای پایه

برای افزودن دستی کرسرهای جدید، کلید Alt یا Option را نگه دارید و سپس هر جایی که می‌خواهید کرسر قرار گیرد، کلیک کنید. هر زمان با زدن دکمه Esc می‌توانید به حالت تک کرسری بازگردید. صرفاً با استفاده از همین دو دستور می‌توانید مقدار زیادی در زمان خود صرفه‌جویی کنید؛ اما موارد دیگری نیز وجود دارند.

انتخاب ستون

با نگه داشتن کلیدهای Shift + Alt یا Shift + Option در زمان کشیدن ماوس، یک کرسر جدید به انتهای هر خط انتخاب شده اضافه می‌شود.

درست بالا یا زیر کرسر فعلی

برای افزودن یک کرسر جدید، درست بالای مکان فعلی کرسر می‌توانید کلیدهای Ctrl + Alt یا CMD + Option را بزنید و سپس از کلیدهای جهتی بالا یا پایین استفاده کنید.

انتخاب همه کدهای یکسان

با انتخاب یک بخش از کد و سپس زدن کلیدهای Ctrl + Shift + L یا CMD + Shift+ L می‌توانید بی‌درنگ یک کرسر جدید در انتهای هر بخش کد با همان میزان تورفتگی ایجاد می‌شود.

انتخاب کد یکسان به صورت یک به یک

در مواردی که نخواهید همه کدهای یکسان انتخاب شوند، می تونید از کلیدهای Ctrl + D یا CMD + D برای هایلایت کردن متن تورفته به صورت یک به یک استفاده کنید.

نکته: اکستنشن‌های Keymap

اگر به مجموعه کلیدهای ترکیبی یک ویرایشگر متن دیگر عادت داشته باشید، این امکان وجود دارد که از آن ترکیب‌ها استفاده کنید. در واقع به جای این که وقت خود را صرف یادگیری مجموعه جدیدی از کلیدهای ترکیبی بکنید، می‌توانید با مراجعه به مسیر Preferences > Keymaps فهرستی از اکستنشن‌های مرتبط را ببینید.

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

6. شکستن خطوط

قابلیت ویژوال استودیو کد

در اغلب موارد ما تمایل نداریم که متنی که می‌بینیم از بخش قابل رؤیت صفحه خارج شود تا مجبور نباشیم از اسکرول افقی که چندان هم آسان نیست استفاده کنیم. برای فعال یا غیرفعال کردن امکان شکستن خطوط بر مبنای هر فایل مستقل کافی است کلیدهای Alt + Z را بزنید.

همچنین اگر نمی‌خواهید هیچ وقت امکان شکستن خطوط غیرفعال شود، می‌توانید آن را به صورت رفتار پیش‌فرض تنظیم کنید. به این منظور درون فایل settings.json کد زیر را اضافه کنید تا همه متون به صورت پیش‌فرض شکسته شوند:

1
{ "editor.wordWrap": "on" }

7. اجرا و دیباگ کد جاوا اسکریپت

چندین گزینه عالی برای اجرا و دیباگ کردن کدهای جاوا اسکریپت درون ویژوال استودیو کد وجود دارد که در ادامه آن‌ها را یک به یک توضیح می‌دهیم:

Quokka.js

قابلیت ویژوال استودیو کد

Quokka یک ابزار رایگان است که به ما کمک می‌کند در هر لحظه از اتفاق‌هایی که در کد جاوا اسکریپت رخ می‌دهد اطلاع پیدا کنیم. این ابزار خود را به صورت «چک نویس زنده» توصیف کرده و یک راهنمایی بصری ارائه می‌کند تا ببینیم آیا کد کاری که قرار بوده انجام دهد را انجام می‌دهد یا نه.

زمانی که آن را نصب کنید با زدن کلیدهای CTRL + K + Q یا CMD + K + Q می‌توانید آن را روی فایل موجود جاوا اسکریپت اجرا یا ری‌استارت کنید.

دیباگر برای کروم

قابلیت ویژوال استودیو کد

بهترین گزینه برای دیباگ کردن کدهای جاوا اسکریپت درون VS Code، اکستنشن خود مایکروسافت به نام «Debugger for Chrome» است. البته طرز کار آن ممکن است کمی پیچیده باشد و از این رو توصیه می‌کنیم به صفحه مستندات رسمی (+) آن مراجعه کنید تا موارد بیشتری را در خصوص آن بیاموزید. این اکستنشن یک ابزار قدرتمند است و امکاناتی که ارائه می‌کند بسیار فراتر از ()comsole.log است.

Code Runner

قابلیت ویژوال استودیو کد

اگر گزینه‌های فوق برای شما پیچیده هستند و ترجیح می‌دهید که به روشی ساده قطعه کدها یا فایل‌های خود را اجرا کنید، توصیه می‌کنیم که اکستنشن Code Runner را که تألیف Jun Han است بررسی کنید. این اکستنشن زبان‌های زیادی را پوشش می‌دهد و با یک دستور ساده (Ctrl + Alt + N یا CMD + Option + N) می‌توانید خروجی کد خود را در انتهای صفحه ملاحظه کنید. در مورد جاوا اسکریپت رفتار این افزونه شبیه به یک کنسول مرورگر ادغام شده درون VS Code است.

سخن پایانی

قابلیت‌هایی که در این مقاله معرفی شدند برای هر محیط توسعه وب کاملاً مفید هستند و امیدواریم موجب شوند که گردش کار VS Code شما تا حد امکان سریع‌تر شود و یا اگر مبتدی هستید بتوانید آغاز قدرتمندی در استفاده از این IDE محبوب داشته باشید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

منبع: فرادرس

مشاوره جمعه 25 مرداد 1398 ساعت 11:41

0 نظر

فرم های HTML در مرورگرهای قدیمی — راهنمای جامع

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

برای مطالعه بخش قبلی این سری مطالب آموزشی روی لینک زیر کلیک کنید:

ارسال فرم HTML با جاوا اسکریپت — راهنمای جامع

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

بیان مسئله

اساساً مهم‌ترین نکته در زمان مواجهه با این مشکل، خواندن مستندات آن مرورگرهای قدیمی و تلاش برای درک الگوهای رایج است. برای نمونه در اغلب موارد پشتیبانی از CSS بزرگ‌ترین مشکل در فرم‌های HTML محسوب می‌شود. بنابراین بهترین نقطه شروع همین‌جا است. کافی است پشتیبانی از عناصر (یا اینترفیس DOM) که می‌خواهید استفاده کنید را مورد بررسی قرار دهید. وب‌سایت MDN جدول سازگاری را برای اغلب عناصر، مشخصه‌ها و API-هایی که می‌توان در صفحه‌های وب مورد استفاده قرار ارائه کرده است. اما منابع دیگری نیز وجود دارند که می‌توانند مفید واقع شوند و در ادامه به معرفی آن‌ها می‌پردازیم.

مستندات ارائه‌دهنده مرورگر

موزیلا: به این منظور کافی است به بررسی وب‌سایت MDN بپردازید.
مایکروسافت: مستندات پشتیبانی استانداردهای اینترنت اکسپلورر (+)
WebKit: از آنجا که نسخه‌های مختلفی برای این موتور وجود دارد، بررسی مستندات آن کمی پیچیده‌تر است:
- بلاگ وب کیت (+) و وب‌سایت Planet WebKit (+) بهترین مقالات ارائه شده از سوی تیم مرکزی توسعه وب کیت را شامل می‌شوند.
- وب‌سایت Chrome platform status (+) نیز مهم است.
- همچنین می‌توانید به وب‌سایت اپل (+) سر بزنید.

مستندات مستقل

وب‌سایت Can I Use (+) اطلاعاتی در مورد فناوری‌های کاملاً نوین ارائه می‌کند.
وب‌سایت Quirks Mode (+) یک منبع شگفت‌انگیز در مورد سازگاری مرورگرها محسوب می‌شود. بخش موبایل این وب‌سایت یکی از بهترین منابع حال حاضر است.
وب‌سایت Position Is Everything (+) بهترین منبع موجود در مورد رندر کردن باگ‌ها در مرورگرهای قدیمی و هر گونه راه‌حل موجود در این زمینه است.
وب‌سایت Mobile HTML5 (+) اطلاعات سازگاری را در مورد طیف وسیعی از مرورگرهای موبایل و نه انواع برندهای مطرح ارائه می‌کند.

ساده‌سازی مسائل

از آنجا که فرم‌های HTML شامل تعامل‌های پیچیده‌ای هستند، یک قاعده ساده سرانگشتی در مورد آن‌ها وجود دارد: تلاش کنید همه چیز را ساده حفظ کنید. موارد زیادی وجود دارند که می‌خواهیم فرم‌ها «زیباتر» یا «با کارکردهای پیچیده‌تر» باشند، اما ساخت فرم‌های HTML کارآمد به طراحی یا کارکرد ربطی ندارد.

«تنزل مطبوع» بهترین دوست توسعه‌دهنده وب است

«تنزل مطبوع» (Graceful degradation) و «بهبود پیش‌رونده» (progressive enhancement) دو الگوی توسعه هستند که امکان ساخت محصولاتی عالی و همزمان پشتیبانی از طیف وسیعی از مرورگرها را فراهم می‌سازند. زمانی که چیزی را برای یک مرورگر مدرن می‌سازید و می‌خواهید مطمئن باشید که روی مرورگرهای قدیمی هم به هر حال به طریقی حتماً کار خواهد کرد در واقع از روش تنزل مطبوع استفاده می‌کنید. در ادامه چند نمونه از این مفهوم را در ارتباط با فرم‌های HTML بررسی می‌کنیم.

انواع ورودی HTML

انواع ورودی جدید ارائه شده از سوی HTML5 بسیار جالب هستند، زیرا روش تنزل آن‌ها کاملاً قابل پیش‌بینی است. اگر مرورگری مقدار خصوصیت type یک عنصر <input> را نداند، به مقدار text بازمی‌گردد.

1
2
3
4
<label for="myColor">
  Pick a color
  <input type="color" id="myColor" name="color">
</label>

Chrome 24	Firefox 18

سلکتورهای خصوصیت CSS

سلکتورهای خصوصیت CSS در فرم‌های HTML بسیار مفید هستند، اما برخی مرورگرهای قدیمی از آن‌ها پشتیبانی نمی‌کنند. در این حالت می‌توان از یک کلاس معادل برای حل این مشکل استفاده کرد:

1
<input type="number" class="number">

1
2
3
4
5
6
7
input[type=number] {
  /* This can fail in some browsers */
}
 
input.number {
  /* This will work everywhere */
}

توجه کنید که کد زیر بی‌فایده است (زیرا تکراری است) و ممکن است در برخی مرورگرها کار نکند:

1
2
3
4
5
input[type=number],
input.number {
  /* This can fail in some browsers because if they do not understand
     one of the selectors, they will skip the whole rule */
}

دکمه‌های فرم

دو روش برای تعریف دکمه‌ها در فرم‌های HTML وجود دارد:

عنصر <input> با خصوصیت type که دارای مقدار button، submit، reset یا image است.
عنصر <button>.

عنصر <input> در صورتی که بخواهید نوعی CSS را با استفاده از سلکتور‌های عنصر روی آن اعمال کند، می‌تواند موجب دشواری‌هایی شود.

1
<input type="button" class="button" value="click me">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
input {
  /* This rule turns off the default rendering for buttons defined with an input element */
  border: 1px solid #CCC;
}
 
input.button {
  /* This does NOT restore the default rendering */
  border: none;
}
 
input.button {
  /* That doesn't either! Actually there is no standard way to do it in any browser */
  border: auto;
}

عنصر <button> از دو مشکل احتمالی رنج می‌برد:

یک باگ در برخی نسخه‌های قدیمی اینترنت اکسپلورر وجود دارد. وقتی که کاربر روی دکمه کلیک کند، این محتوای خصوصیت value نیست که ارسال می‌شود، بلکه محتوای HTML بین تگ‌های آغاز و پایانی عنصر <button> خواهد بود. این مورد تنها در صورتی مشکل محسوب می‌شود که بخواهید چنین مقداری را ارسال کنید. برای نمونه اگر بخواهید بسته به دکمه‌ای که کاربر کلیک کرده است داده‌ای را پردازش کنید چنین حالتی متصور خواهد بود.
برخی مرورگرهای قدیمی از submit به عنوان مقدار پیش‌فرض خصوصیت type استفاده نمی‌کنند، از این رو توصیه می‌شود که همواره خصوصیت type را روی عنصرهای <button> تعیین کنید.

1
2
3
4
<!-- Clicking this button sends "<em>Do A</em>" instead of "A" in some cases -->
<button type="submit" name="IWantTo" value="A">
  <em>Do A</em>
</button>

انتخاب هر کدام از راه‌حل‌های فوق بر مبنای محدودیت‌های پروژه به عهده شما است.

پشتیبانی از CSS

بزرگ‌ترین مشکل فرم‌های HTML در مرورگرهای قدیمی، بحث پشتیبانی از CSS است. در چنین مواردی حتی اگر امکان اعمال نوعی تغییر روی عناصر متن (مانند تغییر اندازه یا رنگ) وجود داشته باشد، همواره عوارض ناخواسته‌ای وجود خواهد داشت. در این موارد بهترین رویکرد این است که کلاً از خیر استایل‌دهی به ویجت‌های فرم HTML بگذرید. با این حال همچنان می‌توان استایل ها را روی همه آیتم‌های پیرامونی اعمال کرد. اگر یک فرد حرفه‌ای باشید و مشتری از شما بخواهد، می‌توانید در این حالت برخی تکنیک‌های دشوار مانند ساخت مجدد ویجت‌ها با جاوا اسکریپت را انجام دهید.

کشف قابلیت و polyfill-ها

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

یکی از بزرگ‌ترین مشکل‌ها، دسترسی به API-ها است. به همین دلیل کار با جاوا اسکریپت «غیر مزاحم» (unobtrusive) بهترین رویه در نظر گرفته می‌شود. این یک الگوی توسعه است که دو الزام را تعریف می‌کند:

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

مفهوم جاوا اسکریپت «غیر مزاحم» که در ابتدا از سوی پیتر پاول کخ برای Dev.Opera.com عرضه شده است ( و اینک به Docs.WebPlatform.org انتقال یافته است) این ایده‌ها را به خوبی توضیح می‌دهد.

کتابخانه Modernizr

موارد زیادی وجود دارند که polyfill مناسب تا حدود زیادی می‌تواند به ارائه یک API مفقود کمک کند. یک polyfill نوعی کد جاوا اسکریپت است که موارد نقص کارکردهای مرورگرهای قدیمی را جبران می‌کند. با این که می‌توان از آن برای بهبود پشتیبانی هر نوع کارکردی استفاده کرد، استفاده از آن‌ها برای جاوا اسکریپت نسبت به CSS یا HTML ریسک کمتری دارد. موارد زیادی وجود دارند که جاوا اسکریپت ممکن است (به دلیل مشکلات شبکه، تعارض اسکریپت و غیره) از کار بیفتد. اما برای جاوا اسکریپت اگر با ذهنیت جاوا اسکریپت غیر مزاحم کار کنیم، در صورت فقدان polyfill نیز مشکل مهمی به حساب نمی‌آید.

بهترین روش برای polyfill کردن API مفقود، استفاده از کتابخانه Modernizr و پروژه جانبی آن YepNope است. Modernizr کتابخانه‌ای است که امکان تست وجود کارکرد را می‌دهد تا بر اساس آن عمل کنید. YepNope یک کتابخانه بارگذاری شرطی است. به مثال زیر توجه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Modernizr.load({
  // This tests if your browser supports the HTML5 form validation API
  test : Modernizr.formvalidation,
 
  // If the browser does not support it, the following polyfill is loaded
  nope : form-validation-API-polyfill.js,
 
  // In any case, your core App file that depends on that API is loaded
  both : app.js,
 
  // Once both files are loaded, this function is called in order to initialize the App.
  complete : function () {
    app.init();
  }
});

تیم Modernizr لیستی از polyfill-های عالی را به سادگی نگهداری می‌کند.

نکته: Modernizr قابلیت‌های مدرن دیگری نیز دارد که امکان کار با جاوا اسکریپت غیر مزاحم و تکنیک‌های تنزل مطبوع را می‌دهد. برای کسب اطلاعات بیشتر به مستندات Modernizr (+) مراجعه کنید.

نکاتی در خصوص عملکرد

با این که اسکریپت‌هایی مانند Modernizr در مورد عملکرد بسیار آگاهانه عمل می‌کنند، بارگذاری یک پلی‌فیل 200 کیلوبایتی می‌تواند بر عملکرد اپلیکیشن تأثیر بگذارد. این وضعیت به طور خاص در مورد مرورگرهای قدیمی صدق می‌کند، چون بسیاری از آن‌ها موتور جاوا اسکریپت کُندی دارند که می‌تواند اجرای همه پلی‎فیل ها را برای کاربر زجرآور کند. عملکرد نیز برای خود موضوع مهمی محسوب می‌شود، اما مرورگرهای قدیمی بسیار حساس هستند، چون کند هستند و هر چه از پلی‌فیل های زیادی استفاده کنید، کد جاوا اسکریپت بیشتری باید پردازش شود. بنابراین دشواری آن‌ها نسبت به مرورگرهای مدرن‌تر دو برابر است. شما باید کد خود را روی مرورگرهای قدیمی تست کنید تا ببینید عملکرد آن‌ها چگونه است. برخی اوقات از دست رفتن برخی کارکردها منجر به تجربه کاربری بهتری نسبت به داشتن دقیق همان کارکرد در همه مرورگرها می‌شود. به عنوان آخرین یادآوری باید اشاره کنیم که همواره باید کاربر نهایی را در نظر داشته باشید.

سخن پایانی

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

منبع: فرادرس

مشاوره جمعه 25 مرداد 1398 ساعت 11:34

0 نظر

ساخت اپلیکیشن وب یادگیری ماشین با ری اکت و فلسک — از صفر تا صد

اغلب توسعه‌دهندگان به سهولت استفاده و توسعه سریع NodeJS به همراه وب‌سرور اکسپرس علاقه‌مند هستند، اما در مورد مقیاس‌پذیری و «امنیت نوع» (type-safety) مورد نیاز برای اپلیکیشن‌های بزرگ دغدغه دارند. اما جای نگرانی نیست زیرا تایپ‌اسکریپت به کمک شما می‌آید. در این شرایط همچنان از مزیت یک زبان اسکریپت‌نویسی بهره‌مند هستید و همزمان از پایداری یک زبان استاتیک مانند سی شارپ یا جاوا نیز استفاده می‌کنید. یادگیری تایپ‌اسکریپت در صورتی که قبلاً با جاوا اسکریپت آشنا باشید کار آسانی است و پیکربندی آن تنها به یک گام اضافی نیاز دارد. باید اشاره کنیم که مقالاتی وجود دارند که شیوه استفاده از اکسپرس و تایپ اسکریپت را نمایش می‌دهند، اما این مقالات یا زمان زیادی را صرف صحبت در مورد دلیل استفاده از تایپ‌اسکریپت می‌کنند و یا روی راه‌اندازی اکسپرس به روشی شیءگرا تأکید ندارند. نقطه تمرکز این مقاله نمایش بهترین و ساده‌ترین پیکربندی برای تایپ‌اسکریپت جهت توسعه NodeJs/Express است.

راه‌اندازی تایپ‌اسکریپت

ما در زمان توسعه می‌توانیم کد تایپ‌اسکریپت خودمان را مستقیماً از فایل‌های ts. که ایجاد کرده‌ایم اجرا کنیم. با این حال در فاز پروداکشن باید آن‌ها را به جاوا اسکریپت transile کنیم تا سرور ما بتواند مستقیماً از NodeJS اجرا کند. برای پیکربندی شیوه transpile شدن کد تایپ‌اسکریپت و برای تعیین قواعد استایل‌بندی کد باید به ترتیب فایل‌های tsconfig.json و tslint.json را ایجاد کنیم. استفاده از tslint الزامی نیست، اما برای اجرای دقیق استانداردهای کدنویسی بسیار کارآمد است و منجر به تولید کد تمیزتری در بلندمدت می‌شود.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "compilerOptions": {
    "module": "commonjs",
    "strict": true,
    "baseUrl": "./",
    "outDir": "build",
    "removeComments": true,
    "experimentalDecorators": true,
    "target": "es6",
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./src/public/"
  ]
}

به گزینه exclude در خط 23 توجه کنید که /src/public/ را نشان می‌دهد. ما قصد نداریم در این راهنما به بررسی بخش فرانت‌اند بپردازیم، اما زمانی که خواستید محتوای فرانت‌اند را نیز اضافه کنید، می‌توانید در اینجا انجام دهید.

اکنون باید کد زیر را به فایل tslint.json اضافه کنیم. ما از تنظیمات پیشنهادی با چند تغییر کوچک استفاده می‌کنیم. شما می‌توانید در صورت نیاز هر کدام از این تنظیمات را تغییر دهید.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "extends": "tslint:recommended",
  "rules": {
    "max-line-length": {
      "options": [100]
    },
    "member-ordering": false,
    "no-consecutive-blank-lines": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "quotemark": [true, "single"],
    "variable-name": [true, "allow-leading-underscore"]
  }
}

برای این که بتوانیم کدی را اجرا کنیم باید یک اسکریپت آغازین ایجاد کنیم که سرور ما را بوت کند. از آنجا که هنوز سروری نداریم فعلاً از آن می‌خواهیم که صرفاً عبارت “hello world” را نمایش دهد. پوشه و فایل src/start.ts را ایجاد کرده و دو خط کد زیر را به آن اضافه کنید:

1
2
// tslint:disable-next-line
console.log('hello world');

نکته: tslint غیرفعال شده است، زیرا ما را ملزم می‌کند که از ()console.log استفاده نکنیم و رها کردن آن در این وضعیت در فاز پروداکشن کار خوبی محسوب نمی‌شود.

در سوی دیگر نمی‌خواهیم زمانی که کدی را تغییر دادیم، مجبور باشیم همه چیز را به صورت دستی ری‌استارت کنیم، بنابراین از nodemon برای رصد تغییرات در فایل‌های خود استفاده می‌کنیم و بدین ترتیب اسکریپت آغازین خود را مجدداً اجرا می‌کنیم.

1
2
3
4
5
6
{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/public"],
  "exec": "NODE_ENV=development ts-node src/start.ts"
}

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

npm init

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

npm i -D ts-node nodemon typescript tslint

بنابراین اکنون می‌توانیم موارد مختلف را با سهولت بیشتر کدنویسی بکنیم و دیگر لازم نیست هر بار دسته‌ای از دستورهای طولانی در کنسول وارد کنیم. یک اسکریپت به package.json اضافه می‌کنیم تا اسکریپت آغازین را از طریق nodemon و با ts-node اجرا کند.

1
2
3
4
5
6
7
8
{
  "name": "expresstypescript",
  "version": "1.0.0",
  "description": "Develop and ExpressJS webserver using TypeScript",
  "main": "build/start.js",
  "scripts": {
    "test": "none",
    "start-dev": "nodemon --config \"./util/nodemon.json\"/",

اکنون اگر دستور npm run start-dev را اجرا کنید، باید خروجی hello world را در کنسول مشاهده کنید.

راه‌اندازی اکسپرس

اکنون که تایپ‌اسکریپت آماده شده و به خوبی اجرا می‌شود، نوبت آن رسیده که یک وب‌سرور ساده ExpressJS و چند مسیر ایجاد کنیم. ما می‌توانستیم مستقیماً از ExpressJS استفاده کنیم، اما در این صورت از مزیت تایپ‌اسکریپت بهره‌مند نمی‌شدیم. بهتر است که کلاس‌هایی را با متدها بسازیم، تا این که مجبور باشیم چیزی مانند عبارت زیر را وارد کنیم و آن را بارها و بارها تکرار کنیم:

1
let router = express.Router(), router.get/put/post, app.use(router)

برای این که به الگوی MVC وفادار مانده و از برنامه‌نویسی به سبک شیءگرا استفاده کنید، پیشنهاد می‌کنیم از OvernightJS بهره بگیرید تا کنترلرها و دکوراتورهای مسیر را به اکسپرس اضافه کنید. شاید بگویید فریمورک‌هایی مانند NestJS و ts-express-decorators وجود دارند که مسیرهای اکسپرس را دکوراته می‌کنند، اما همه این‌ها فریمورک‌های بزرگی هستند که وب‌سایت‌های کاملی به مستندات آن‌ها اختصاص یافته است. Overnight (+) صرفاً یک مجموعه کوچک و ساده‌ای از کتابخانه‌ها است که برای افزودن دکوراتورها به اکسپرس و چند چیز دیگر کاربرد دارد. بدین ترتیب یک لایه تجرید روی اکسپرس ایجاد نمی‌کند و در صورتی که از قبل با اکسپرس آشنا باشید، می‌توانید آن را در حدود 10 دقیقه بیاموزید.

در ادامه اکسپرس و Overnight را نصب کرده و یک وب‌سرور را راه‌اندازی می‌کنیم:

npm i -s express body-parser @overnightjs/core @overnightjs/logger

npm i -D @types/node @types/express

پکیج body-parser نیز به منظور فراهم ساختن امکان ارسال داده‌ها به صورت JSON استفاده می‌شود.

در دایرکتوری src/ یک فایل برای سرور مثلاً به نام ExampleServer.ts ایجاد کرده و یک کلاس با همان نام ایجاد کنید. سپس پوشه/فایل controllers/ExampleController.ts را اضافه کنید. ما ابتدا کنترلر را پیاده‌سازی کرده و سپس آن را در فایل سرور خود ایمپورت می‌کنیم.

محتوای زیر را به فایل کنترلر اضافه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { Request, Response } from 'express';
import { Controller, Middleware, Get, Put, Post, Delete } from '@overnightjs/core';
import { Logger } from '@overnightjs/logger';
 
@Controller('api')
export class ExampleController {
 
    @Get(':msg')
    private getMessage(req: Request, res: Response) {
        Logger.Info(req.params.msg);
        res.status(200).json({
            message: req.params.msg,
        });
    }
 
    @Put(':msg')
    private putMessage(req: Request, res: Response) {
        Logger.Info(req.params.msg);
        return res.status(400).json({
            error: req.params.msg,
        });
    }
 
    @Post(':msg')
    private postMessage(req: Request, res: Response) {
        Logger.Info(req.params.msg);
        return res.status(400).json({
            error: req.params.msg,
        });
    }
 
    @Delete(':msg')
    private delMessage(req: Request, res: Response) {
        try {
            throw new Error(req.params.msg);
        } catch (err) {
            Logger.Err(err, true);
            return res.status(400).json({
                error: req.params.msg,
            });
        }
    }
}

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

زمانی که کار شما با کنترلر به پایان رسید، باید مطمئن شوید که فایل index.ts را با خط زیر به controllers/ اضافه کرده‌اید:

1
export * from ‘./ExampleController’;

به این ترتیب فایل‌های کنترلر جدید ایجاد شده در آینده می‌توانند به سادگی صرفاً با افزودن یک خط کد اضافه شوند.

در سرور کنترلرها را ایمپورت کرده و کلاس را با اکسپورت Server مربوط به Overnight بسط دهید. با بسط دادن Server به وهله‌ای از اکسپرس با this.app دسترسی می‌یابید که می‌توانید با آن دقیقاً همانند هر وهله نرمال دیگر اکسپرس که با دستور زیر ساخته شده است تعامل پیدا کنید:

1
require(‘express’)()

کنترلرها باید وهله‌سازی شده و به صورت مدخلی به (…)super.addControllers اضافه شوند تا مسیرهایتان فعال شوند. مطمئن شوید که کنترل‌هایتان را پس از تنظیم میان‌افزار اما قبل از آغاز به کار سرور اضافه کرده‌اید.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import * as bodyParser from 'body-parser';
import * as controllers from './controllers';
import { Server } from '@overnightjs/core';
import { Logger } from '@overnightjs/logger';
 
class ExampleServer extends Server {
 
    private readonly SERVER_STARTED = 'Example server started on port: ';
 
    constructor() {
        super(true);
        this.app.use(bodyParser.json());
        this.app.use(bodyParser.urlencoded({extended: true}));
        this.setupControllers();
    }
 
    private setupControllers(): void {
        const ctlrInstances = [];
        for (const name in controllers) {
            if (controllers.hasOwnProperty(name)) {
                const controller = (controllers as any)[name];
                ctlrInstances.push(new controller());
            }
        }
        super.addControllers(ctlrInstances);
    }
 
    public start(port: number): void {
        this.app.get('*', (req, res) => {
            res.send(this.SERVER_STARTED + port);
        });
        this.app.listen(port, () => {
            Logger.Imp(this.SERVER_STARTED + port);
        });
    }
}
 
export default ExampleServer;

اکنون که سرور و کنترلرهای خود را در اختیار داریم، باید همه چیز را از اسکریپت آغازین بوت کنیم. به این منظور سرور را ایمپورت، آن را وهله‌سازی و سپس start(portNumber) را فراخوانی کنید:

1
2
3
4
import ExampleServer from './ExampleServer';
 
const exampleServer = new ExampleServer();
exampleServer.start(3000);

زمانی که دیدید عبارت زیر در کنسول نمایش یافته است:

1
"[someTimestamp]: Example server started on port: 3000"

می‌توانید یک ابزار فراخوانی API (مانند Postman) را باز کرده و درخواست‌هایی به سرور ارسال کنید. اگر از دستورهای این راهنما به طور کامل پیروی کرده باشید، اینک باید ببینید که بخش msg: مسیرها در کنسول نمایش می‌یابند.

کدنویسی

اکنون که یک سرور توسعه کاملاً عملیاتی را راه‌اندازی و اجرا کرده‌ایم، تنها چیزی که نیاز داریم این است که آن را برای پروداکشن آماده کنیم. در حالتی که فایل‌های ts. را در زمان توسعه حذف کرده باشید باید هر بار که traspile می‌کنید، پوشه build/ را پاک کنید، چون در غیر این صورت با فایل‌های ts. باطلی رو به رو می‌شوید.

برای آغاز کدنویسی پروداکشن باید به جای src/start.ts دستور build/start.js را اجرا کنید. در ادامه دو مسیر دیگر به package.json اضافه می‌کنیم تا کد پروداکشن را ساخته و اجرا کنیم. دستور tsc کد ما را transpile می‌کند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "expresstypescript",
  "version": "1.0.0",
  "description": "Develop and ExpressJS webserver using TypeScript",
  "main": "build/start.js",
  "scripts": {
    "test": "none",
    "start-dev": "nodemon --config \"./util/nodemon.json\"/",
    "build": "rm -rf ./build/ && tsc",
    "start": "node build/start.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/seanpmaxwell/ExpressTypeScript.git"
  },

زمانی که سرور آغاز شد، همه مسیرها باید دقیقاً همانند قبل عمل کنند. بدین ترتیب به پایان این راهنما با موضوع راه‌اندازی اکسپرس و تایپ‌اسکریپت می‌رسیم.

منبع: فرادرس

مشاوره جمعه 25 مرداد 1398 ساعت 11:34

0 نظر

332
1
...
12
13
صفحه 14
15
16
...
67

طراحی سایت و برنامه نویسی

ابر برجسب

جدیدترین یادداشت‌ها

بایگانی

جستجو

پنج نکته کلیدی برای شروع یادگیری زبان برنامه نویسی C — راهنمای مقدماتی

زبان برنامه‌نویسی C چیست؟

چرا باید برنامه‌نویسی C را بیاموزیم؟

1. یادگیری انواع متغیرهای پایه

2. یادگیری عملگرها

3. استفاده از کتابخانه‌های استاندارد

4. C بخشش ندارد

5. دیباگ کردن بهترین دوست شما است

سخن پایانی

جستجوی تمام متن در لاراول با Scout — به زبان ساده

پیکربندی سرور

حساب کاربری Algolia

ایجاد قابلیت اندیس‌گذاری و جستجو در مدل‌ها

جمع‌بندی طرز کار Scout

خصیصه Searchable

سخن پایانی

۷ قابلیت ویژوال استودیو کد برای توسعه دهندگان وب — راهنمای کاربردی

چرا باید از VS Code استفاده کنیم؟

1. اختصارهای Emmet

آماده‌سازی فایل HTML

افزودن تگ

افزودن متن ساختگی

Emmet برای JSX

2. CLI یکپارچه (رابط کاربری خط فرمان)

نکته‌ای برای کاربران ویندوز

3. ESLint

نکته‌ای دیگر برای کاربران ویندوز: Pesky Linebreaks

4. Prettier

قالب‌بندی در زمان ذخیره‌سازی

زبان‌های دیگر

5. میانبرهای چند کرسری

دستورهای پایه

انتخاب ستون

درست بالا یا زیر کرسر فعلی

انتخاب همه کدهای یکسان

انتخاب کد یکسان به صورت یک به یک

نکته: اکستنشن‌های Keymap

6. شکستن خطوط

7. اجرا و دیباگ کد جاوا اسکریپت

Quokka.js

دیباگر برای کروم

Code Runner

سخن پایانی

فرم های HTML در مرورگرهای قدیمی — راهنمای جامع

بیان مسئله

مستندات ارائه‌دهنده مرورگر

مستندات مستقل

ساده‌سازی مسائل

«تنزل مطبوع» بهترین دوست توسعه‌دهنده وب است

انواع ورودی HTML

سلکتورهای خصوصیت CSS

دکمه‌های فرم

پشتیبانی از CSS

کشف قابلیت و polyfill-ها

کتابخانه Modernizr

نکاتی در خصوص عملکرد

سخن پایانی

ساخت اپلیکیشن وب یادگیری ماشین با ری اکت و فلسک — از صفر تا صد

راه‌اندازی تایپ‌اسکریپت

راه‌اندازی اکسپرس

کدنویسی