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

اغلب توسعه‌دهندگان به سهولت استفاده و توسعه سریع 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"   },

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

منبع: فرادرس

ساخت ویجت گفتگوی زنده با پشتیبانی در ری اکت (React) — از صفر تا صد

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

در این مقاله به روش یکپارچه‌سازی یک گفتگوی زنده در اپلیکیشن‌های React می‌پردازیم. قصد ما این است که شیوه یکپارچه قابلیت گفتگوی زنده در اپلیکیشن ری‌اکت را بدون نگرانی از نگهداری سرور گفتگو و معماری آن پیاده‌سازی کنیم. در ادامه تصویری از آن چه قصد داریم بسازیم را مشاهده می‌کنید.

ما برای راه‌اندازی بخش گفتگوی اپلیکیشن خود از خدمات CometChat Pro استفاده می‌کنیم. CometChat Pro یک API ارتباطی قدرتمند است که امکان افزودن قابلیت‌های گفتگو را به اپلیکیشن فراهم می‌سازد. این API با قابلیت یکپارچه‌سازی آسان و مستندات منظم به شما کمک می‌کند تا ویژگی گفتگوی زنده را با نوشتن چند خط کد به اپلیکیشن خود اضافه کنید. به این منظور ابتدا باید یک حساب رایگان در این وب‌سایت (+) بسازید.

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

• Create React App
• react-chat-widget
• Express
• Bootstrap
• Axios
• react-md (spinner component only)

پیشنهاد ما این است که تا انتهای این راهنما همراه باشید تا گام‌به‌گام اپلیکیشن مورد نظر خود را بسازیم، اما اگر بیش از این شتاب دارید، می‌توانید کد کامل این مقاله را در این صفحه گیت‌هاب (+) ملاحظه کنید.

ایجاد اپلیکیشن CometChat

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

برای ایجاد یک اپلیکیشن CometChat باید به داشبورد CometChat بروید و روی آیکون + کلیک کنید. ما اپلیکیشن خود را react-chat-widget می‌نامیم، اما شما می‌توانید اپلیکیشن خود را با هر نامی که دوست دارید ایجاد کنید.

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

از آنجا که ما احتمالاً مشتریان زیادی خواهیم داشت، برای هر مشتری که به گفتگو وصل می‌شود، باید به صورت دینامیک یک کاربر CometChat ایجاد کنیم. با این وجود از آنجا که تنها یک کارمند وجود خواهد داشت، می‌توانیم یک Agent را از پیش در داشبورد ایجاد کنیم.

به این منظور در داشبورد به برگه Users بروید و روی Create User کلیک کنید:

برای ID کاربر مقدار ecommerce-agent را وارد کنید و برای نام کارمند نیز مقدار Demo Agent را وارد کنید. اگر قصد دارید از مراحل این راهنما پیروی کنید، از همین نام‌ها استفاده کنید، چون در غیر این صورت در ادامه با مشکل مواجه خواهید شد. ID کاربر را یادداشت کنید، زیرا در ادامه به آن ارجاع خواهیم داد.

پیش از آن که از داشبورد خارج شوید و به کدنویسی بپردازید، باید یک کلید دسترسی کامل CometChat نیز بسازید. در همین صفحه روی برگه API Keys و سپس روی Create API Key کلیک کنید:

ما کلید خود را react-chat-api نامیده‌ایم، اما نام آن اهمیت چندانی ندارد. کلید API و ID اپلیکیشن خود را نیز مانند ID کاربر در جایی یادداشت کنید، چون در ادامه لازم خواهد شد.

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

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

1. کاربر CometChat را با استفاده از کلید دسترسی کامل بسازد.
2. توکن‌های احراز هویت را بازگشت دهد (در ادامه بیشتر توضیح خواهیم داد)
3. لیستی از کاربران CometChat برای استفاده بعدی در داشبورد بازگشت دهد.

اینک نوبت آغاز کار است. ابتدا یک دایرکتوری خالی جدید برای اپلیکیشن اکسپرس خود ایجاد می‌کنیم و دستور npm init -y را اجرا می‌کنیم:

mkdir react-express-chat-widgetcd react-express-chat-widgetnpm init –y

سپس اکسپرس و axios را نصب می‌کنیم:

npm install express axios

سپس در فایلی به نام server.js کد زیر را وارد می‌کنیم:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const express = require('express'); const axios = require('axios'); const app = express();   const appID = '{appID}'; const apiKey = '{apiKey}'; const agentUID = '{agentUID}';   const url = 'https://api.cometchat.com/v1';   const headers = {   'Content-Type': 'application/json',   appid: appID,   apikey: apiKey, };

در فایل فوق موارد زیر وجود دارند:

• اطلاعات هویتی اپلیکیشن و ID کاربر پاسخگو که قبلاً ایجاد کردیم ذخیره می‌شوند.
• UIRL مربوط به API-ی CometChat برای دسترسی راحت‌تر تعریف می‌شود.
• یک شیء headers که با استفاده از appID و apiKey ایجاد می‌شود. ما این هدر را به همراه هر درخواست CometChat ارسال می‌کنیم.

در همین فایل اکنون یک مسیر تعریف می‌کنیم تا ایجاد کاربران جدید CometChat را مدیریت کنیم. برای ایجاد یک کاربر جدید باید یک درخواست POST را با UID و نام کاربر ارسال کنیم.

در این راهنما، نام یکسانی را برای همه مشتریان به صورت hard-code می‌نویسیم، یعنی همه مشتری‌ها را «customer» می‌نامیم، اما UID آن‌ها باید یکتا باشد. برای UID می‌توانیم از تابع POST برای ایجاد ID-های یکتا استفاده کنیم.

کد زیر را به فایل server.js اضافه کنید:

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

app.get('/api/create', (req, res) => {   const data = {     uid: new Date().getTime(),     name: 'customer',   };   axios     .post(`${url}/users`, JSON.stringify(data), {       headers,     })     .then(response => {       requestAuthToken(response.data.data.uid)         .then(token => {           console.log('Success:' + JSON.stringify(token));           res.json(token);         })         .catch(error => console.error('Error:', error));     })     .catch(error => console.error('Error:', error)); });   app.get('/api/auth', (req, res) => {   const uid = req.query.uid;   requestAuthToken(uid)     .then(token => {       console.log('Success:' + JSON.stringify(token));       res.json(token);     })     .catch(error => console.error('Error:', error)); });   const requestAuthToken = uid => {   return new Promise((resolve, reject) => {     axios       .post(`${url}/users/${uid}/auth_tokens`, null, {         headers,       })       .then(response => {         console.log('New Auth Token:', response.data);         resolve(response.data.data);       })       .catch(error => reject(error));   }); };

زمانی که این مسیر فراخوانی شود، اکسپرس کارهای زیر را انجام می‌دهد:

• یک درخواست POST به آدرس https://api.cometchat.com/v1/users با headers صحیح و اطلاعاتی در مورد کاربر جدید ارسال می‌کند.
• توکن احراز هویت را برای کاربر جدید واکشی می‌کند.
• و در نهایت آن را به فراخواننده بازمی‌گرداند.

ما همچنین یک تابع به نام requestAuthToken می‌سازیم تا به واکشی کردن توکن احراز هویت کمک کند. سپس در همان فایل یک مسیر احراز هویت می‌سازیم که آن را برای ایجاد توکن جهت کاربران بازگشتی فراخوانی خواهیم کرد:

1 2 3 4 5 6 7 8 9

app.get('/api/auth', (req, res) => {   const uid = req.query.uid;   requestAuthToken(uid)     .then(token => {       console.log('Success:' + JSON.stringify(token));       res.json(token);     })     .catch(error => console.error('Error:', error)); });

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

app.get('/api/users', (req, res) => {   axios     .get(`${url}/users`, {       headers,     })     .then(response => {       const { data } = response.data;       const filterAgentData = data.filter(data => {         return data.uid !== agentUID;       });       res.json(filterAgentData);     })     .catch(error => console.error('Error:', error)); });

در انتهای فایل server.js، سرور را اجرا می‌کنیم:

1 2 3 4

const PORT = process.env.PORT || 5000; app.listen(PORT, () => {   console.log(`Listening on port ${PORT}`); });

اگر از ابتدای این مقاله با ما همگام بوده باشید، اینک فایل Server.js باید به صورت زیر در آمده باشد:

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

const express = require('express'); const axios = require('axios'); const app = express();   const appID = '{appID}'; const apiKey = '{apiKey}'; const agentUID = '{agentUID}';   const url = 'https://api.cometchat.com/v1';   const headers = {   'Content-Type': 'application/json',   appid: appID,   apikey: apiKey, };   app.get('/api/create', (req, res) => {   const data = {     uid: new Date().getTime(),     name: 'customer',   };   axios     .post(`${url}/users`, JSON.stringify(data), {       headers,     })     .then(response => {       requestAuthToken(response.data.data.uid)         .then(token => {           console.log('Success:' + JSON.stringify(token));           res.json(token);         })         .catch(error => console.error('Error:', error));     })     .catch(error => console.error('Error:', error)); });   app.get('/api/auth', (req, res) => {   const uid = req.query.uid;   requestAuthToken(uid)     .then(token => {       console.log('Success:' + JSON.stringify(token));       res.json(token);     })     .catch(error => console.error('Error:', error)); });   const requestAuthToken = uid => {   return new Promise((resolve, reject) => {     axios       .post(`${url}/users/${uid}/auth_tokens`, null, {         headers,       })       .then(response => {         console.log('New Auth Token:', response.data);         resolve(response.data.data);       })       .catch(error => reject(error));   }); };   app.get('/api/users', (req, res) => {   axios     .get(`${url}/users`, {       headers,     })     .then(response => {       const { data } = response.data;       const filterAgentData = data.filter(data => {         return data.uid !== agentUID;       });       res.json(filterAgentData);     })     .catch(error => console.error('Error:', error)); });   const PORT = process.env.PORT || 5000; app.listen(PORT, () => {   console.log(`Listening on port ${PORT}`); });

در یک پنجره ترمینال دستور node server.js را اجرا کنید و منتظر باشید تا پیامی به صورت زیر نمایش یابد:

Listening on port 5000

اکنون باید زمان مناسبی برای تست endpoint-ها به همراه curl یا Postman باشد تا مطمئن شویم که کار می‌کنند و سپس به بخش کدنویسی کلاینت بپردازیم.

راه‌اندازی اپلیکیشن React

درون دایرکتوری خود دستور npx create-react-app را اجرا کنید تا ساختار اولیه یک اپلیکیشن ری‌اکت ایجاد شود:

npx create-react-app client

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

|-- express-react-chat-widget |-- package-lock.json |-- package.json |-- server.js |-- client |--.gitignore |-- package-lock.json |-- package.json |-- public |-- src

زمانی که اپلیکیشن ری‌اکت آماده شد، به دایرکتوری client بروید و ماژول‌های زیر را نصب کنید:

cd clientnpm install @cometchat-pro/chat react-chat-widget react-router-dom bootstrap react-md-spinner

اپلیکیشن Create React برای bootstrap کردن یک اپلیکیشن ری‌اکت کاملاً مفید است، اما فایل‌های زیادی تولید می‌کند که مورد نیاز ما نیستند و این‌ها شامل فایل‌های تست و از این دست هستند. پیش از اقدام به کدنویسی، همه چیز را از دایرکتوری client/src حذف کنید تا از صفر کار خود را شروع کنیم. برای شروع یک فایل config.js با ID اپلیکیشن و UID کارمند در مسیر client/src/config.js با محتوای زیر بسازید:

1 2 3 4 5 6

const config = {   appID: '{appID}',   agentUID: '{agentUID}', }   export default config;

این کد مبنایی است که می‌توان برای ارجاع به اطلاعات احراز هویت CometChat از هر کجا مورد استفاده قرار داد. با این که ما آن را کد مبنا می‌نامیم، اما این فرصت را نیز داریم که یک فایل index.css بسازیم:

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

body {   margin: 0;   padding: 0;   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",     sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }   code {   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",     monospace; }     .message {   overflow: hidden; }   .balon1 {   float: right;   background: #35cce6;   border-radius: 10px; }   .balon2 {   float: left;   background: #f4f7f9;   border-radius: 10px; }

ما این فایل را در ادامه از داشبورد مورد ارجاع قرار می‌دهیم. اکنون در فایل با نام index.js کد زیر را درج کنید:

1 2 3 4 5 6 7 8 9 10 11

import React from 'react'; import ReactDOM from 'react-dom'; import 'bootstrap/dist/css/bootstrap.css'; import './index.css'; import App from './App'; import { CometChat } from '@cometchat-pro/chat'; import config from './config';   CometChat.init(config.appID)   ReactDOM.render(<App />, document.getElementById('root'));

در این کد ما Bootstrap ،CometChat و فایل پیکربندی را که پیش از مقداردهی اولیه CometChat و رندر کردن App ساخته‌ایم ایمپورت می‌کنیم. اگر در این راهنما با ما همگام بوده باشید، متوجه شده‌اید که ما هنوز App را تعریف نکرده‌ایم. بنابراین در این مرحله این کار را انجام می‌دهیم. در فایل به نام App.js کد زیر را درج کنید:

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

import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom';   import Client from './Client'; import Agent from './Agent';   const App = () => {   return (     <Router>       <React.Fragment>         <ul>           <li>             <Link to='/'>Client Home</Link>           </li>           <li>             <Link to='/agent'>Agent Dashboard</Link>           </li>         </ul>         <hr />         <Route exact path='/' component={Client} />         <Route path='/agent' component={Agent} />       </React.Fragment>     </Router>   ); }   export default App;

در این کد ما دو مسیر را تعریف کردیم:

• مسیر / یا Customer home جهت برقراری اتصال با کارمند پشتیبانی است.
• و مسیر agent/ یا Agent Dashboard برای دسترسی سریع و راحت به داشبورد تعریف شده است.

در ادامه ابتدا کامپوننت در دید مشتری را بررسی می‌کنیم. ما آن را کامپوننت کلاینت می‌نامیم.

ایجاد کامپوننت کلاینت

کامپوننت کلاینت ما دو مسئولیت عمده خواهد داشت:

1. ایجاد یک کاربر CometChat جدید از طریق سرور Express در زمانی که نخستین مشتری وصل می‌شود.
2. ارسال و دریافت پیام‌ها به صورت آنی.

یک فایل به نام Client.js بسازید و کد زیر را در آن درج کنید:

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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157

import React, {Component} from 'react'; import {Widget, addResponseMessage, addUserMessage, dropMessages} from 'react-chat-widget'; import {CometChat} from '@cometchat-pro/chat';   import config from './config'; import 'react-chat-widget/lib/styles.css';   const agentUID = config.agentUID; const CUSTOMER_MESSAGE_LISTENER_KEY = "client-listener"; const limit = 30;   class Client extends Component {   componentDidMount() {     addResponseMessage('Welcome to our store!');     addResponseMessage('Are you looking for anything in particular?');          let uid = localStorage.getItem("cc-uid");     // check for uid, if exist then get auth token, login, create message listener and fetch previous messages    if ( uid !== null) {      this.fetchAuthToken(uid).then(        result => {          console.log('auth token fetched', result);          CometChat.login(result.authToken)          .then( user => {            console.log("Login successfully:", { user });            this.createMessageListener();            this.fetchPreviousMessages();                    })        },        error => {          console.log('Initialization failed with error:', error);        }      );    }   }     fetchAuthToken = async uid => {     const response = await fetch(`/api/auth?uid=${uid}`)     const result = await response.json()     return result;   }     createUser = async () => {     const response = await fetch(`/api/create`)     const result = await response.json()     return result;   }     createMessageListener = () => {     CometChat.addMessageListener(       CUSTOMER_MESSAGE_LISTENER_KEY,       new CometChat.MessageListener({         onTextMessageReceived: message => {           console.log("Incoming Message Log", { message });           addResponseMessage(message.text);         }       })     );   }     fetchPreviousMessages = () => {     var messagesRequest = new CometChat.MessagesRequestBuilder()     .setUID(agentUID)     .setLimit(limit)     .build();       messagesRequest.fetchPrevious().then(       messages => {         console.log("Message list fetched:", messages);         messages.forEach( message => {           if(message.receiver !== agentUID){             addResponseMessage(message.text);           } else {             addUserMessage(message.text)           }         });       },       error => {         console.log("Message fetching failed with error:", error);       }     );   }     handleNewUserMessage = newMessage => {     console.log(`New message incoming! ${newMessage}`);     var textMessage = new CometChat.TextMessage(       agentUID,       newMessage,       CometChat.MESSAGE_TYPE.TEXT,       CometChat.RECEIVER_TYPE.USER     );     let uid = localStorage.getItem("cc-uid");       if (uid === null) {       this.createUser().then(         result => {           console.log('auth token fetched', result);           localStorage.setItem("cc-uid",result.uid)           CometChat.login(result.authToken)           .then(user => {             console.log("Login successfully:", { user });             CometChat.sendMessage(textMessage).then(               message => {                 console.log('Message sent successfully:', message);               },               error => {                 console.log('Message sending failed with error:', error);               }             );             CometChat.addMessageListener(               CUSTOMER_MESSAGE_LISTENER_KEY,               new CometChat.MessageListener({                 onTextMessageReceived: message => {                   console.log("Incoming Message Log", { message });                   addResponseMessage(message.text);                 }               })             );           })       },       error => {         console.log('Initialization failed with error:', error);       })     } else {       // we have uid, do send       CometChat.sendMessage(textMessage).then(         message => {           console.log('Message sent successfully:', message);         },         error => {           console.log('Message sending failed with error:', error);         }       );     }   };     componentWillUnmount() {     CometChat.removeMessageListener(CUSTOMER_MESSAGE_LISTENER_KEY);     CometChat.logout();     dropMessages();   }     render() {     return (       <div className='App'>         <Widget           handleNewUserMessage={this.handleNewUserMessage}           title='My E-commerce Live Chat'           subtitle='Ready to help you'         />       </div>     );   } }   export default Client;

اگر فکر می‌کنید این کد حجم بالایی دارد جای نگرانی نیست چون در ادامه آن را جزء به جزء توضیح می‌دهیم.

تابع render به قدر کافی ساده است، در واقع وظیفه اصلی آن رندر کردن react-chat-widget است. بخش زیادی از کد اختصاص به مدیریت پیام جدید ارسالی از سوی مشتری در تابعی به نام handleNewUserMessage دارد.

به طور خلاصه، ابتدا باید بررسی کنیم که آیا UID مشتری در localStorage وجود دارد یا نه. اگر چنین باشد، از این UID برای لاگین کردن کاربر و ارسال پیام استفاده می‌کنیم. در غیر این صورت تابع ()createUser را فراخوانی می‌کنیم و از مقدار بازگشتی برای لاگین کردن کاربر استفاده می‌کنیم. این تابع createUser یک endpoint را فراخوانی می‌کند که قبلاً در همین راهنما تعریف کردیم.

در نهایت در یک تابع چرخه عمر ری‌اکت componentWillUnmount را فرا می‌خوانیم و به خاطر می‌سپاریم که شنونده پیام را حذف کنیم. پیش از ادامه باید به یک نکته کوچک اشاره کنیم. در کد فوق، به جای وارد کردن URL سرور و پورت آن (localhost:5000/users) یا چیزی مانند آن در فرانت‌اند، می‌توانیم یک گزینه proxy به فایل package.json اضافه کنیم. بدین ترتیب می‌توانیم به جای localhost:5000/users// صرفاً از /users استفاده کنیم:

"browserslist": [">0.2%"، "not dead"، "not ie <= 11"، "not op_mini all"]،"proxy": http://localhost:5000

در این مرحله اپلیکیشن مانند زیر خواهد بود:

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

برای حل این مشکل یک متد componentDidMount تنظیم می‌کنیم که به دنبال UID مشتری در localStorage می‌گردد، به طوری که وقتی مشتریان صفحه را رفرش بکنند، می‌توانند گفتگو را از همان جایی که مانده بود ادامه دهند.

زمانی که UID را پیدا کردیم، می‌توانیم از آن برای مقداردهی اولیه یک زنجیره از متدها جهت login ،fetch کردن پیام‌های قبلی و ایجاد listener برای پیام‌های ورودی استفاده کنیم.

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

componentDidMount() {     addResponseMessage('Welcome to our store!');     addResponseMessage('Are you looking for anything in particular?');          let uid = localStorage.getItem("cc-uid");     // check for uid, if exist then get auth token, login, create message listener and fetch previous messages    if ( uid !== null) {      this.fetchAuthToken(uid).then(        result => {          console.log('auth token fetched', result);          CometChat.login(result.authToken)          .then( user => {            console.log("Login successfully:", { user });            this.createMessageListener();            this.fetchPreviousMessages();                    })        },        error => {          console.log('Initialization failed with error:', error);        }      );    }   }     fetchAuthToken = async uid => {     const response = await fetch(`/api/auth?uid=${uid}`)     const result = await response.json()     return result;   }     createUser = async () => {     const response = await fetch(`/api/create`)     const result = await response.json()     return result;   }     createMessageListener = () => {     CometChat.addMessageListener(       CUSTOMER_MESSAGE_LISTENER_KEY,       new CometChat.MessageListener({         onTextMessageReceived: message => {           console.log("Incoming Message Log", { message });           addResponseMessage(message.text);         }       })     );   }     fetchPreviousMessages = () => {     var messagesRequest = new CometChat.MessagesRequestBuilder()     .setUID(agentUID)     .setLimit(limit)     .build();       messagesRequest.fetchPrevious().then(       messages => {         console.log("Message list fetched:", messages);         messages.forEach( message => {           if(message.receiver !== agentUID){             addResponseMessage(message.text);           } else {             addUserMessage(message.text)           }         });       },       error => {         console.log("Message fetching failed with error:", error);       }     );   }

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

اما همچنان مشکل کوچکی وجود دارد. چنان که مشخص شد، هنوز راهی برای کارمند پشتیبانی وجود ندارد که به پیام مشتری پاسخ دهد. ما این مشکل را از طریق ساختن داشبورد کارمند حل می‌کنیم. در این حالت کارمند می‌تواند به پیام‌های گفتگو که از سوی مشتریان می‌رسند پاسخ دهد. بدن ترتیب کار ما در فایل Client.js به پایان می‌رسد و در ادامه به ساخت فایل Agent.js می‌پردازیم.

ایجاد کامپوننت agent

منبع: فرادرس

۱۱ ترفند بسیار کاربردی جاوا اسکریپت — به زبان ساده

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

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

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

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

1. فیلتر کردن مقادیر یکتا (Arrays)

نوع شیء set در ES6 معرفی شده است و می‌توان از آن به همراه عملگر spread (…) برای ایجاد یک آرایه جدید با استفاده صرف از مقادیر یکتا بهره گرفت.

1 2 3

const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // Result: [1, 2, 3, 5]

تا پیش از ES6 جداسازی مقادیر یکتا نیاز به کد بسیار بیشتر از این داشت.

این ترفند برای آرایه‌هایی که شامل انواع ابتدایی یعنی undefined ،null ،boolean ،string و number هستند مناسب است. اگر آرایه‌ای دارید که شامل اشیا، تابع‌ها یا آرایه‌های دیگر است به رویکرد متفاوتی نیاز دارد.

2. ارزیابی اتصال کوتاه (CONDITIONALS)

عملگر سه‌تایی روشی سریع برای نوشتن گزاره‌های شرطی ساده (و گاهی اوقات نه چندان ساده) به صورت زیر است:

1 2	x > 100 ? 'Above 100' : 'Below 100'; x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

اما در پاره‌ای موارد حتی عملگر سه‌تایی نیز بیش از حد ضرورت پیچیده است. به جای آن می‌توان از عملگرهای منطقی and (&&) و or (||) برای ارزیابی عبارت‌های خاص به روشی فشرده‌تر استفاده کرد. این وضعیت غالباً به نام «اتصال کوتاه» یا «ارزیابی اتصال کوتاه» نامیده می‌شود.

ارزیابی اتصال کوتاه چگونه کار می‌کند؟

فرض کنید می‌خواهیم تنها یک یا دو گزینه را بازگشت دهیم. با استفاده از && نخستین مقدار false یا کاذب بازگشت می‌یابد. اگر همه عملوندها به صورت true ارزیابی شوند، آخرین عبارت ارزیابی‌شده بازگشت می‌یابد.

1 2 3

let one = 1, two = 2, three = 3; console.log(one && two && three); // Result: 3 console.log(0 && null); // Result: 0

استفاده از عملگر || نخستین مقدار true یا صادق را بازگشت می‌دهد. اگر همه عملوندها false ارزیابی شوند، آخرین عبارت ارزیابی‌شده بازگشت می‌یابد.

1 2 3

let one = 1, two = 2, three = 3; console.log(one || two || three); // Result: 1 console.log(0 || null); // Result: null

مثال اول

تصور کنید می‌خواهیم length یک متغیر را پیدا کنیم؛ اما نوع متغیر را نمی‌دانیم. در این شرایط می‌توان از گزاره if/else برای بررسی این که متغیر foo از نوع قابل قبول باشد استفاده کرد؛ اما این رویکرد بسیار طولانی است. «ارزیابی اتصال کوتاه»، امکان این کار را به صورت زیر فراهم می‌سازد:

1	return (foo || []).length;

اگر متغیر foo صادق باشد، این عبارت مقدار بازگشتی خواهد داشت، در غیر این صورت length آرایه خالی به صورت 0 بازگشت می‌یابد.

مثال دوم

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

تصور کنید می‌خواهیم به یک مشخصه به نام data درون this.state دسترسی پیدا کنیم؛ اما data تا زمانی که برنامه ما یک درخواست واکشی را با موفقیت بازگشت نداده است، تعریف نشده است.

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

1 2 3 4 5

if (this.state.data) {   return this.state.data; } else {   return 'Fetching Data'; }

اما این وضعیت کاملاً مفصل به نظر می‌رسد. عملگر or یک راه‌حل بسیار فشرده‌تر ارائه می‌کند:

1	return (this.state.data || 'Fetching Data');

نمی‌توان کد فوق را برای استفاده از && «بازسازی» (refactor) کرد. گزاره زیر:

 'Fetching Data' && this.state.data

مقدار this.data.state را چه تعریف شده باشد و یا نباشد، بازگشت می‌دهد. دلیل این امر آن است که ‘Fetching Data’ صادق است و از این رو && زمانی که در ابتدا قرار گیرد همواره از آن رد می‌شود.

پیشنهاد یک ویژگی جدید: زنجیره‌سازی اختیاری

در حال حاضر پیشنهاد شده است که «زنجیره‌سازی اختیاری» (Optional Chaining) در زمان تلاش برای بازگشت یک مشخصه از اعماق ساختارهای شبه درختی مورد استفاده قرار گیرد. در این پیشنهاد علامت سؤال (?) می‌تواند برای استخراج مشخصه تنها در صورتی قابل استفاده است که null نباشد.

برای نمونه، می‌توانیم مثال فوق را طوری به صورت this.state.data?. () بازسازی کنیم که data تنها در صورتی بازگشت یابد که null نباشد.

همچنین اگر دغدغه اصلی ما در مورد این باشد که آیا state تعریف شده یا نه، می‌توانیم this.state?.data را بازگشت دهیم. این پیشنهاد هنوز در مرحله 1 و به عنوان یک ویژگی آزمایشی است. البته شما می‌توانید از طریق Babel و از طریق افزودن babel/plugin-proposal-optional-chaining@ به فایل babelrc. از آن استفاده کنید.

3. تبدیل به بولی (TYPE CONVERSION)

جاوا اسکریپت علاوه بر مقادیر معمول بولی true و false با همه مقادیر دیگر به صورت «صادق» (truthy) یا «کاذب» (falsy) برخورد می‌کند. همه مقادیر در جاوا اسکریپت به جز 0، “” ،null ،undefined ، NaN و البته false صادق هستند.

می‌توان به سادگی بین مقادیر true و false با استفاده از عملگر منفی (!) سوئیچ کرد. این عملگر نوع متغیر را نیز به Boolean تغییر می‌دهد.

1 2 3 4 5

const isTrue  = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue); // Result: true console.log(typeof true); // Result: "boolean"

این نوع از تبدیل نوع در گزاره‌های شرطی بسیار کارآمد است؛ اما شاید تنها هدف از این که بخواهیم false را به صورت 1! تعریف کنیم، این است که می‌خواهیم کدمان تا حد امکان فشرده باشد.

4. تبدیل به رشته (TYPE CONVERSION)

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

1 2 3 4

const val = 1 + "";   console.log(val); // Result: "1" console.log(typeof val); // Result: "string"

5. تبدیل به عدد (TYPE CONVERSION)

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

1 2 3 4 5

let int = "15"; int = +int;   console.log(int); // Result: 15 console.log(typeof int); Result: "number"

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

1 2	console.log(+true);// Return: 1 console.log(+false); // Return: 0

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

یک کاراکتر مد که به نام «عملگر NOT بیتی» نیز شناخته می‌شود؛ عملگر معادل n — 1- است. از این رو برای مثال، 15~ معادل 16- است.

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

1	— ( — n — 1) — 1 = n + 1 — 1 = n

به بیان دیگر 16-~ برابر با 15 است.

1 2 3

const int = ~~"15" console.log(int); // Result: 15 console.log(typeof int); Result: "number"

گرچه این عملیات کاربردهای زیادی ندارد؛ اما عملگر NOT بیتی روی مقادیر بولی به صورت‌های زیر نیز قابل استفاده است:

true = -2~

false = -1~

6. توان سریع (OPERATIONS)

از ES7 به بعد امکان استفاده از عملگر نمایی ** به عنوان یک میانبر برای توان فراهم شده است که روش سریع‌تری برای نوشتن (Math.pow(2, 3 است. این دستور سرراستی محسوب می‌شود؛ اما موجب سردرگمی می‌شود، زیرا اغلب راهنماها برای معرفی این عملگر به‌روزرسانی نشده‌اند!

1	console.log(2 ** 3); // Result: 8

این عملگر نباید با عملگر ^ اشتباه گرفته شود که به طور معمول برای نمایش نماها استفاده می‌شود؛ چون در جاوا اسکریپت عملگر ^ برای نمایش عملگر XOR بیتی استفاده می‌شود.

تا پیش از ES7 این میانبر تنها برای توان‌های در پایه 2 وجود داشت که با استفاده از عملگر شیفت چپ بیتی >> عمل می‌کرد:

1 2 3 4

// The following expressions are equivalent: Math.pow(2, n); 2 << (n - 1); 2**n;

برای نمونه

 2 << 3 = 16

معادل عبارت زیر است:

 2 ** 4 = 16

7. تبدیل سریع Float به Integer

اگر بخواهید یک مقدار Float را به Integer تبدیل کنید، می‌توانید از ()Math.floor() ،Math.ceil یا ()Math.round استفاده کنید. اما روش سریع‌تری نیز برای کاهش یک مقدار اعشاری به صحیح با استفاده از | وجود دارد که عملگر OR بیتی است.

1 2	console.log(23.9 | 0);// Result: 23 console.log(-23.9 | 0); // Result: -23

رفتار | بسته به این که با مقادیر مثبت یا منفی سروکار داشته باشد متفاوت خواهد بود، بنابراین بهتر است تنها در صورتی که مطمئن هستید از آن استفاده کنید.

اگر n مثبت باشد، n | 0 موجب گرد شدن مطمئن عدد n می‌شود. اگر n منفی باشد، باز به طرز مؤثری گرد می‌شود. برای این که موضوع روشن‌تر شود، باید گفت که این عملیات هر آن چه را که پس از ممیز اعشاری می‌آید حذف می‌کند و بدین ترتیب عدد اعشاری به یک عدد صحیح تبدیل می‌شود.

همان تأثیر گرد کردن از طریق استفاده از ~~ فوق نیز میسر است و در واقع هر عملگر بیتی می‌تواند یک مقدار اعشاری را به مقدار صحیح تبدیل کند. دلایل عملکرد صحیح این عملیات خاص آن است که زمانی روی یک عدد صحیح اعمال می‌شود، مقدار آن بدون تغییر باقی می‌ماند.

حذف ارقام نهایی

عملگر OR بیتی می‌تواند برای حذف هر تعداد از ارقام از انتهای یک عدد صحیح نیز استفاده شود. این بدان معنی است که لازم نیست از کدی مانند زیر برای تبدیل بین نوع‌ها استفاده کنیم:

1 2	let str = "1553"; Number(str.substring(0، str.length - 1));

به جای آن عملگر OR بیتی امکان نوشتن کدی به صورت زیر را به ما می‌دهد:

1 2 3

console.log(1553 / 10 | 0)// Result: 155 console.log(1553 / 100 | 0)// Result: 15 console.log(1553 / 1000 | 0)// Result: 1

8. اتصال خودکار در کلاس‌ها (CALSSES)

می‌توان از نماد Arrow در ES6 برای متدهای کلاس استفاده کرد و بدین ترتیب binding اعمال می‌شود. این حالت در اغلب موارد موجب صرفه‌جویی چندین خط از کد در سازنده کلاس می‌شود و می‌تواند پایانی بر عبارت‌های تکراری مانند گزاره زیر باشد:

 this.myMethod = this.myMethod.bind(this)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import React, { Component } from React; export default class App extends Compononent {   constructor(props) {   super(props);   this.state = {};   } myMethod = () => {     // This method is bound implicitly!   } render() {     return (       <>         <div>           {this.myMethod()}         </div>       </>     )   } };

9. کوتاه کردن یک آرایه (ARRAYS)

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

1 2 3

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array); // Result: [0, 1, 2, 3]

این یک راه‌حل فشرده است. با این وجود، زمان اجرای متد ()slice می‌تواند از این هم سریع‌تر باشد. اگر سرعت هدف اصلی شما است، می‌توانید از چیزی مانند زیر استفاده کنید:

1 2 3

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array); // Result: [0, 1, 2, 3]

10. دریافت آخرین آیتم‌ها در یک آرایه (ARRAYS)

متد ()slice آرایه می‌تواند اعداد صحیح منفی نیز بپذیرد و در این حالت مقادیر را به جای ابتدا از انتهای آرایه می‌گیرد.

1 2 3 4 5

let array = [0، 1، 2، 3، 4، 5، 6، 7، 8، 9];   console.log(array.slice(-1)); // Result: [9] console.log(array.slice(-2)); // Result: [8، 9] console.log(array.slice(-3)); // Result: [7، 8، 9]

11. قالب‌بندی کد JSON

در نهایت احتمالاً تاکنون از JSON.stringify استفاده کرده‌اید؛ اما آیا متوجه شده‌اید که این متد می‌تواند به ایجاد تورفتگی در JSON نیز کمک کند؟ متد ()stringify دو پارامتر اختیاری می‌گیرد، یکی تابع replacer است که برای فیلتر کردن JSON نمایش یافته استفاده می‌شود و دیگری مقدار space است.

مقدار space یک عدد صحیح می‌گیرد که تعداد فاصله‌ها یا رشته‌ای (مانند ‘t\’ برای درج tab) هست که قرار می‌گیرد و موجب می‌شود که خواندن داده‌های JSON واکشی شده بسیار آسان‌تر شود.

1 2 3 4 5 6

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t')); // Result: // '{ //     "alpha": A, //     "beta": B // }' منبع: فرادرس

ریاضیات لازم برای برنامه نویسی — پادکست پرسش و پاسخ

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

پادکست پیرامون ریاضیات لازم برای برنامه نویسی

00:00

08:22

ذخیره کردن این فایل صوتی: لینک دانلود

نسخه نوشتاری

یکی از دوستان سوالاتی را با توجه به این موضوع پرسیده‌اند که من همواره تاکید می‌­کنم، برنامه‌نویسی بدون ریاضیات نمی‌­شود. ایشان پرسیده‌اند که از کجا باید یادگیری را شروع کنیم؟ افرادی که ریاضیات آن‌ها ضعیف است چه کاری باید انجام دهند و در نهایت اینکه، کدام مباحث ریاضی برای برنامه‌نویسی از اهمیت بیشتری برخوردار هستند. باید توجه داشت که اصلا در برنامه‌نویسی و به طور کلی در این فضا، مهم‌­تر از چیزی که فرد هست، چیزی است که می‌­تواند باشد. در بحث ریاضیات نیز، مهم‌­تر از چیزی که فرد در حال حاضر بلد است، چیزی است که می‌­تواند بیاموزد و ذهن ایشان پذیرش آن را دارد. فردی که فضای «الگوریتمیک» (algorithmic) را توانسته درک بکند، فکر نرم­‌افزاری دارد.

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

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

حالا می‌توان حل این مساله را روی کاغذ انجام داد و یا انجام آن را با برنامه‌نویسی به کامپیوتر سپرد. این، همان دانشی است که فرد به آن نیاز دارد؛ یعنی چیزی فراتر از بلد بودن یک مساله ریاضی است. می‌توان از مسائل خیلی ساده هم شروع کرد. مثلا من در «دوره آموزشی جاوا»، محاسبه «شاخص توده بدنی» (Body mass index | BMI) را انجام دادم که نرخ سلامتی یک نفر را با توجه به قد و وزن او، نشان می‌دهد. خب BMI فرمول ساده‌ای دارد؛ اما این دید ریاضی را شما باید داشته باشید. به عنوان مثالی دیگر، می‌توان به مساله محاسبه اقساط یک وام اشاره کرد که می‌توان با زبان‌های برنامه‌نویسی گوناگون آن را حل کرد و پیاده‌سازی مربوط به آن را انجام داد. با بهره‌گیری از برنامه‌نویسی، از این محاسبات ساده ریاضی گرفته تا یک بحث پیچیده را می‌توان انجام داد.

مثلا فرض کنید که از گوشه یک کاغذ، عکسی را گرفته‌اند. عمود که نیست؛ این امر موجب می‌شود که زاویه قائمه کاغذ، در عکس قائمه دیده نشود. زاویه قائمه است، ولی به خاطر زاویه دوربین، قائمه بودن دیده نمی‌شود یا بعضی چیزها دوران پیدا می­‌کنند. این را چطور می­‌توان اصلاح کرد؟ این یک مساله هندسی و در واقع یک مساله ریاضی است که ریشه آن برای مثال به ماتریس­‌ها باز می‌گردد. شما باید کار با ماتریس‌­ها و محاسبات ماتریسی را بلد باشید تا بتوانید این مساله را حل کنید و این موضوع نیاز به مطالعاتی دارد. گاهی هم خیلی از مسائل تبدیل می‌شوند به یک گراف، یعنی شما باید مساله­ را به شکل یک مساله ریاضی توصیف کنید و بعد، پیدا کردن یک مسیر روی گراف یک پاسخ برای مساله فرد می‌­شود که نمونه آن را می‌توان در بسیاری از «موتورهای جستجو» (Search Engines) و «سیستم‌های توصیه‌گر» (Recommender system) مشاهده کرد.

منبع: فرادرس

آموزش برنامه نویسی سوئیفت (Swift): مفهوم ژنریک ها (Generics) –‌ بخش سیزدهم

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

• آموزش برنامه‌نویسی سوئیفت (Swift): اسامی مستعار نوع (Type Aliases) –‌ بخش دوازدهم

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

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

ژنریک

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

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

این بدان معنی است که می‌توان یک تابع منفرد نوشت که مقدار مجموع را محاسبه می‌کند و مهم نیست که مقادیر ارسالی به آن از نوع int ،double، یا float باشند. این تابع برای هر نوع Binarty Integr نیز کار می‌کند، اما در مورد انواع String کارکردی نخواهد داشت. در ادامه این تابع ژنریک را مورد بررسی بیشتری قرار می‌دهیم:

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

struct List<T> {     var items = [Any]()        mutating func add<T>(newItem: T) {         items.append(newItem)     }        func getItem<T>(at index: Int) -> T? {         if items.count > 0 {             return items[index] as? T         } else {             print("No items have been added")         }         return nil     }        init() {         self.items = []     } }   var integerList = List<Int>() integerList.add(42) integerList.add(57) integerList.add(25)   let number = integerList.getItem(at: 1) print(number)   //prints 57

در این بخش نوعی ساختار جدید را شاهد هستیم. ابتدا <T> را می‌بینید. البته هر چیزی می‌تواند درون براکت‌ها باشد و عموماً از T برای نمایش نوع T استفاده می‌شود. همچنین در برخی موارد به صورت <Elements> می‌بینیم.

نکته دیگری که مشاهده می‌شود تغییر اعلان تابع است که عنوان آن به صورت زیر است:

1	mutating func add<T>(newItem: T)

در واقع این یک mutating func جدید است که add را فراخوانی می‌کند و از یک نوع ژنریک با نام <T> استفاده می‌کند و یک آرگومان منفرد newItem از نوع T می‌گیرد. Mutating به این معنی است که این تابع می‌تواند ساختار آرایه items را تغییر دهد.

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

1	var integerList = List<Int>()

همه رخدادهای <T> درون دامنه ساختار List ژنریک را به <Int> تغییر می‌دهد. از این رو آرایه Items و همه تابع‌ها انتظار نوع Int را خواهند داشت.

اگر یک List جدید با استفاده از <String> ساخته شود و در stringList ذخیره شود، این آرایه و تابع می‌تواند انتظار استفاده از یک نوع String را داشته باشد.

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

آرایه‌های اعداد صحیح با استفاده از ساختار ()[Int] اعلان می‌شوند؛ اما سوئیفت آن را به صورت ()<Array<Int بسط می‌دهد.

دیکشنری‌های رشته‌ها با استفاده از ()[String: String] اعلان می‌شوند؛ اما همانند آرایه‌ها، سوئیفت آن را به صورت دیکشنری‌های ()<Dictionary<String: String درک می‌کند.

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

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

1	func getItem<T>(at index: Int) -> T?

طرز کار این متد مانند متد add است و به جای T هر نوعی که برای ایجاد List استفاده شده باشد جایگزین می‌شود؛ اما این متد از Int به عنوان مقدار پارامتر استفاده می‌کند. دلیل این کار آن است که باید اندیس مبتنی بر Integer آرایه را داشته باشیم. علی غم این که محتوای آرایه ژنریک است؛ اما اندیس‌ها همچنان عدد صحیح هستند.

البته عنصری که در آن اندیس قرار دارد از نوع ژنریک تعریف‌شده ما خواهد بود؛ اما اگر کاربر هیچ چیزی به آرایه اضافه نکرده باشد چطور؟ ما باید این موقعیت که هیچ عنصری در آرایه نباشد را نیز مدیریت کنیم. بنابراین ابتدا مطمئن می‌شویم که یک آیتم را در لیست خود داریم. در ادامه می‌توانیم تلاش کنیم عنصر را دریافت کنیم. اما اگر نتوانیم آن عنصر را پیدا کنیم مقدار nil بازگشت می‌دهیم.

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

1	let value = integerList.getItem(at: 3)

به نظر می‌رسد باید چیز دیگری را نیز بررسی کنیم تا از کرش کردن برنامه جلوگیری کنیم. کشف این نکته را بر عهده شما می‌گذاریم.

در این بخش یک سؤال دیگر را مطرح می‌کنیم. اگر یک لیست جدید با استفاده از دستور زیر ایجاد کنیم و مقادیر 3، 4 و 5 را به آن اضافه کنیم:

1	var doubleList = List<Double>()

در این صورت اگر از دستور زیر استفاده کنیم، در زمان استفاده از print(value) دقیقاً چه متنی در کنسول نمایش می‌یابد؟

1	let value = doubleList.getElement(at: 0)

سازگاری

شما می‌تواند کاری کنید که ژنریک‌ها با پروتکل‌های خاصی سازگاری داشته باشد. بدین ترتب آن‌ها تنها می‌توانند با نوع‌های خاصی وهله‌سازی شوند. برای نمونه زمانی که از پروتکل BinaryInteger استفاده می‌کنید، در واقع تعیین کرده‌اید که صرفاً اعداد صحیح با علامت (+/-) و بی علامت (+) می‌توانند در این متد ژنریک استفاده شوند.

امکان تعریف سازگاری با هر نوع وجود دارد؛ اما بهترین استفاده از آن با بهره‌گیری از رفتارهای پایه و پروتکل‌های پایه‌ای مانند Numeric ،Stridable ،Sequence و/یا Collection است.

این‌ها رفتارهای پایه‌ای هستند که می‌توان سازگاری با آن‌ها را تعریف کرد. در این صفحه (+) می‌توانید فهرست کامل را مشاهده کنید؛ اما در ادامه برخی از مواردی که استفاده متداولی دارند را نیز بررسی کرده‌ایم:

• Equatable  – امکان بررسی این مسئله را می‌دهد که مقدار یک متغیر مقدار دیگر برابر است یا نه.
• Comparable  – امکان مقایسه مقدار یک متغیر با متغیر دیگر را با استفاده از عملگرهای رابطه (بولی) مانند «بزرگ‌تر از»، «کمتر از»، «برابر» می‌دهد.
• Hashable  – یک هش Integer ایجاد می‌کند که امکان استفاده از نوع، در یک مجموعه یا یک کلید دیکشنری را می‌دهد.

برخی اوقات یکی از این موارد برای نیازهای شما کافی است؛ اما در موقعیت‌های دیگری نیز ممکن است به بیش از یک مورد نیاز داشته باشید.

برای این که بهترین استفاده را از ژنریک‌ها داشته باشید باید پروتکل‌های مختلف توصیف‌شده در مستندات اپل را بررسی کنید. هر پروتکلی که استفاده می‌شود، صرفاً باید مطمئن شوید که با آن چه برایش استفاده می‌کنید سازگار است. این بدان معنی است که نباید فهرستی از سن افراد بسازید که از پروتکل FloatingPoint استفاده کند؛ مگر این که بخواهید از این تابع با اعداد اعشاری (float, double) استفاده کنید.

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

1 2 3 4 5 6

func add<T: Numeric>(_ value1: T, to value2: T) -> T{      return value1 + value2 }   print(add(1, to: 3)       //prints 4 print(add(3.5, to: 8.7)   // prints 12.2

ما با استفاده از پروتکل Numeric به کامپایلر اعلام می‌کنیم، هر نوعی که عدد است را می‌تواند به جای T قبول کند. این امر به ما اجازه می‌دهد که از همان تابع برای انواع مختلفی استفاده کنیم.

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

ژنریک‌ها در پروتکل‌ها

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

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

Self یک الگوریتم جستجوی باینری است که شباهت زیادی به روش جستجو در یک دفترچه شماره تلفن یا دیکشنری دارد. فرض کنید به دنبال کلمه Swift در دیکشنری می‌گردید.

1. ابتدا کتاب را باز می‌کنید و مثلاً به جایی روی حروف M می‌رسید.
2. S بزرگ‌تر از M است و بنابراین نیمی از صفحه‌ها را به عقب بازمی‌گردیم تا به جایی مانند T می‌رسیم.
3. S کوچک‌تر از T است و از این رو دوباره نیمی از صفحه‌های قبلی را به جلو ورق می‌زنیم تا به جایی بین حرف M و T برسیم.
4. این کار را تا جایی ادامه می‌دهیم که به صفحه‌ای حاوی کلمه Swift برسیم.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

protocol Ordered {     func precedes(other: Self) -> Bool }   struct Number: Ordered {     var value: Double = 0        func precedes(other: Number) -> Bool {         return self.value < other.value     } }   func binarySearch(sortedKeys: [Ordered], forKey k: Ordered) -> Int {     var lo = 0     var hi = sortedKeys.count        while hi > lo {         let mid = lo + (hi - lo) / 2         if sortedKeys[mid].precedes(k) { lo = mid + 1 }         else { hi = mid }     }        return lo }

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

سپس اندیس بالا و پایین آرایه را به دست می‌آوریم (چون مرتب است) و در ادامه مقداری که به دنبالش هستیم را پیدا می‌کنیم. به این منظور ابتدا میانه آرایه را می‌یابیم. الگوریتم زیر این کار را انجام می‌دهد:

1	lo + (hi — lo) / 2

چون که:

0 + (10 - 0) / 2 = 5

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

 5 + (10–5) / 2 = 8

سپس [if sortedKeys[mid را بررسی کنیم، که مقدار 5 را به دست می‌دهد، (precedes(k قبل از مقداری است که به دنبالش می‌گردیم و از این رو مقدار زیر یا مقداری بالاتر از میانه را تنظیم می‌کنیم:

1	lo = mid + 1

اگر مقدار مورد نظر در این بازه نباشد، مقدار hi = mid را تنظیم می‌کنیم، چون می‌خواهیم هر چیزی پایین تراز mid را بگردد. بدین ترتیب ادامه می‌دهیم تا زمانی که یک مقدار باقی بماند که lo است.

انواع Associated به منظور placeholder-هایی مشابه <T>؛ اما در اعلان پروتکل استفاده می‌شوند. مثال لیست فوق را با استفاده از پروتکل با یک نوع Associated بازنویسی می‌کنیم:

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

protocol Listable {     associatedtype Item        var items: [Item] { get }        mutating func add(_ item: Item)     func getItem(at index: Int) -> Item? }   struct List<T>: Listable {     typealias Item = T     var items: [Item]        mutating func add(_ item: Item) {         self.items.append(item)     }        func getItem(at index: Int) -> Item? {         guard items.count > 0 else {             print("No elements in list")             return nil         }                guard index < items.count else {             print("No element at index")             return nil         }                return items[index]     }        init() {         self.items = []     } }   var integerList = List<Int>()

ابتدا associatedtype را داریم که آن را Item می‌نامیم، زیرا قرار است آیتم‌هایی را در یک آرایه ذخیره کنیم.

سپس آرایه items را با استفاده از یک getter که با { get } نمایش می‌یابد ایجاد می‌کنیم. این دستور به کامپایلر اعلام می‌کند که این آرایه باید فقط-خواندنی باشد. اگر بخواهیم این آرایه قابل خواندن و قابل نوشتن باشد می‌توانیم از { get set } استفاده کنیم. در این حالت تنها می‌خواهیم که کاربر متغیر را با استفاده از تابع add تعیین کند. در مقالات آینده در مورد getrer-ها و setter-ها بیشتر صحبت خواهیم کرد.

در این مورد نیز یک mutating func داریم، زیرا تابع خودش، یعنی آن struct که مالک متد را تغییر می‌دهد همچنین متدی برای دریافت آیتم‌ها ایجاد می‌کنیم که نکته جدیدی ندارد.

Struct با نام <List<T خارج از چارچوب پروتکل و تا حدود زیادی شبیه به وضعیت پیشین است. البته ما هیچ اکستنشنی برای پروتکل ایجاد نکرده‌ایم که بتواند در صورت نیاز کارکردهای پیش‌فرض را شامل شود. در برخی موارد زمانی که بین انواع مختلف سوئیچ می‌کنیم، ممکن است به کارکردهای متفاوتی نیاز داشته باشیم. برای نمونه زمانی که از یک <List<String استفاده می‌کنیم، ممکن است بخواهیم یک آرایه از کاراکترها و یا آرایه‌ای از رشته‌ها را الحاق کنیم. همین موضوع در مورد <List<Character نیز صدق می‌کند.

اینک با کسب این دانش جدید می‌دانیم که پروتکل‌های دیگری نیز وجود دارند که انواع رایجی مانند String ،Int ،Double و غیره از چیزی مانند Numeric ارث می‌برند و می‌توانیم یک اکستنشن از Numeric بسازیم که پروتکل را به خدمت بگیرد و کارکرد پیش‌فرضی که همه انواع Numeric را در برمی‌گیرد برای آن تعریف کنیم. در این حالت می‌توانیم یک چنین موردی را برای نوع‌های StringProtocol برای رشته‌ها بسازیم.

نکته آخری که باید در مورد ژنریک‌ها بگوییم در خصوص بند where است. بند where یک متمم برای پروتکل یا associatedtypes است.

1	protocol myProtocol where Self == Hashable { }

بدین ترتیب myProtocol یک الزام روی هر چیزی که از این پروتکل استفاده کند، قرار می‌دهد و همچنین از Hashable استفاده می‌کند. به طور معمول سازگاری با پروتکل‌های کتابخانه استاندارد سوئیفت نیازمند پیاده‌سازی چند نوع، متغیر و/یا متد associated است که کمی اضافه‌کاری به نظر می‌رسد. در مورد Hashable باید کد زیر را به struct یا class خود اضافه کنید.

1 2 3 4 5 6

struct List<T>: myProtocol, Hashable {     var hashvalue: Int        static func ==(lhs: List<T>, rhs: List<T>) -> Bool {     } }

hashvalue کاملاً سرراست است؛ اما static func ==(lhs:rhs:) -> Bool برای ما کاملاً جدید است.

static به این معنی است که می‌توان آن را در هر کجا صرفاً با استفاده از ListA == ListB فراخوانی کرد و دو لیست را برای برابری فشرده می‌سازد. علامت == جایی است که برابرسازی اجرا می‌شود و یک روش استفاده از این عملگر محسوب می‌شود. lhs و rhs به معنی سمت چپ و سمت راست عملگر برابری هستند. ما یک مقدار بولی بازگشت می‌دهیم اما پیاده‌سازی این تابع خالی است. بنابراین باید پرسید چه اتفاقی در آن می‌افتد؟ منطقی که قصد داریم استفاده کنیم استفاده از بررسی برابری است. ما صرفاً یک پیاده‌سازی پیش‌فرض می‌سازیم که چارچوبی مانند زیر دارد:

1 2 3 4 5 6 7

struct List<T>: myProtocol, Hashable {     var hashvalue: Int        static func ==(lhs: List<T>, rhs: List<T>) -> Bool {         return lhs == rhs     } }

اگر lhs برابر با rhs باشد، مقدار true و در غیر این صورت مقدار false بازگشت می‌یابد.

در بخش دوم که بند where با یک نوع associated استفاده شده است، در واقع قصد داریم کارکرد خود را در صورتی ارائه کنیم که شیئی که پروتکل را اختیار کرده است، الزام نوع مرتبط آن را نیز مورد استفاده قرار دهد. اگر شیء این کار را بکند، همه متدهایی که از نوع associated استفاده می‌کنند را به دست می‌آورد و در غیر این صورت چنین اتفاقی نخواهد افتاد. پیاده‌سازی آن به صورت زیر است:

1 2 3 4 5 6 7 8 9 10 11 12

protocol Listable {     associatedtype Item        var items: [Item] { get }        mutating func add(_ item: Item)     func getItem(at index: Int) -> Item?        associatedtype Iterator: IteratorProtocol where Iterator.Element == Item        func makeIterator() -> Iterator }

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

سخن پایانی

بدین ترتیب به پایان این مقاله با موضوع ژنریک‌ها می‌رسیم. ژنریک‌ها کارکردهای زیادی را با چند تغییر کوچک در کد در اختیار ما قرار می‌دهند. این موردی است که در زمان ایجاد پروتکل‌ها قطعاً باید در خاطر داشته باشیم و از خود بپرسیم آیا این پروتکل برای انواع مختلفی استفاده خواهد شد؟ یا این انواع چندان متفاوت هستند که باید به دنبال استفاده از بند where برای محدودسازی کارکردهای ارائه شده باشیم.

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

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

منبع: فرادرس