ساخت یک برنامه چت Real-time با Sails.js

اگر توسعه دهنده ای هستید که در حال حاضر از framework هایی مثل Django، Laravel یا Rails استفاده می کند، احتمالا درباره Node.js شنیده اید. شاید در حال حاضر نیز از کتابخانه های Front-end معروفی مثل Angular یا React در پروژه های خود استفاده کنید. حال دیگر بهتر است به فکر یک انتقال کامل به یک تکنولوژی سرور بر پایه Node.js باشید.

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

اگر از از دست دادن تجربه برنامه نویسی خود در دنیای Node می ترسید، نگران نباشید، زیرا ما Sails.js را داریم.

Sails.js یک فریموورک MVC به صورت Real-time است که برای کمک به توسعه دهندگان در ساخت برنامه هایی آماده تولید و در سطح پیشرفته در مدت زمان کوتاه طراحی شده است. Sails.js یک راه حل خالص جاوا اسکریپت است که چندین دیتابیس (به طور همزمان) و چندین تکنولوژی Front-end را پشتیبانی می کند. اگر شما یک توسعه دهنده Sails.js هستید، خوش حال می شوید که بدانید Mike McNeil، موسس Sails.js، از Rails الهام گرفته بود. پس در پروژه های Rails و Sails.js شباهت های زیادی خواهید یافت.

در این مقاله، با نشان داده این که چگونه یک برنامه چت ساده و کاربر دوستانه بسازید، اصول Sails.js را به شما آموزش می دهم. سورس کد کامل برای این پروژه را می توانید در گیت هاب بیابید.

ساخت یک برنامه چت Real-time با Sails.js

پیش نیاز ها

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

برای این که این آموزش برای همگان کاربردی باشد، از کتابخانه هایی که به طور پیشفرض بر روی یک پروژه Sails.js جدید نصب شده اند، استفاده می کنیم. هیچ ادغامی با کتابخانه های Front-end مدرن مثل React، Vue یا Angular صورت نخواهد گرفت. گرچه، شدیدا پیشنهاد می کنم که پس از این آموزش نگاهی به آنها داشته باشید. همچنین، با هیچ دیتابیسی نیز ادغامی نخواهیم داشت. در عوض، از دیتابیس های پیشفرض، بر روی دیسک که بر حسب فایل هستند، برای توسعه و آزمایش استفاده خواهیم کرد.

نقشه پروژه

هدف این آموزش، این است که به شما نشان دهیم چگونه یک برنامه چت مشابه Slack، Gitter یا Discord بسازید.

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

در عوض، محصولی مانند یک برنامه چت خواهیم ساخت، که شامل این موارد می شود:

یک چت روم ساده
احراز هویت ساده (بدون رمز عبور)
به روز رسانی پروفایل

بخش به روز رسانی پروفایل را برای پوشش دادن ویژگی های بیشتری از Sials.js قرار داده ام.

نصب Sails.js

قبل از شروع کار با Sails.js، باید یک محیط Node.js مناسب راه اندازی کنیم. در هنگام نوشتن این مقاله، آخرین نسخه پایدار، نسخه 0.12.14 است. نسخه 1.0.0 نیز در دسترس است، اما هنوز در فاز بتا است و برای استفاده پیشنهاد نمی شود.

آخرین نسخه Node که من به آن دسترسی دارم، نسخه 8.9.4 است. متاسفانه، Sails.js 0.12 به خوبی با این نسخه کار نمی کند. گرچه، من نسخه 7.10 را آزمایش کرده، و همه چیز را خوب دیدم. همچنین می توانیم از کد های جدید ES8 syntax استفاده کنیم.

به عنوان یک توسعه دهنده جاوا اسکریپت، درک می کنید که کار با یک نسخه Node.js کافی نیست. از این رو، پیشنهاد می کنم که از nvm tool برای مدیریت چند نسخه از Node.js و NPM استفاده استفاده کنید. اگر این کار را انجام نداده اید، نسخه فعلی Node.js خود را پاک سازی کنید، و سپس nvm را نصب کنید تا به شما در مدیریت چند نسخه از Node.js کمک کند.

در اینجا، دستور العمل های پایه نصب Node نسخه 7 و Sails.js را مشاهده می کنید:

# Install the latest version of Node v7 LTS
nvm install v7

# Make Node v7 the default
nvm default alias v7

# Install Sails.js Global
npm install -g sails

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

# Go to your projects folder
cd Projects

# Generate your new app
sails generate new chat-app

# Wait for the install to finish then navigate to the project folder
cd chat-app

# Start the app
sails lift

برنامه باید در عرض چند ثانیه اجرا شود. باید آدرس http://localhost:1337 را به طور دستی بر روی مرورگر خود اجرا کنید و برنامه جدید خود را ببینید.

ساخت یک برنامه چت Real-time با Sails.js

دیدن این، تایید می کند که ما یک پروژه در حال اجرا بدون هیچ گونه خطایی داریم، و این که می توانیم کار خود را شروع کنیم. برای متوقف کردن پروژه، در ترمینال Ctrl + c را بفشارید. از ویرایشگر مورد علاقه خود برای معاینه کردن ساختار پروژه استفاده کنید. ( من از Atom استفاده می کنم) در زیر، فولدر های اصلی که باید بشناسید را مشاهده می کنید:

api: کنترلر ها، مدل ها، سرویس ها و مجوز ها
assets: عکس ها، فونت ها، JS، CSS، Less، Sass و...
config: دیتابیس پیکربندی پروژه، Route ها، گواهی نامه ها، امنیت و...
node_modules: پکیج های npm نصب شده.
tasks: اسکریپت های پیکربندی و اسکریپت های Pipeline برای کمپایل کردن و تزریق asset ها.
views: صفحه های view - برای مثال، EJS، Jade یا هر موتور الگو سازی که شما ترجیح می دهید.
tmp: فولدر موقت استفاده شده توسط Sails برای ساخت پروژه شما، هنگامی که در حالت توسعه هستید.

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

. به روز رسانی پکیج EJS. اگر EJS 2.3.4 را در package.json دارید، باید با تغییر آن به 2.5.5 آن را به روز رسانی کنید. این نسخه شامل یک ضعف امنیتی جدی می شود. بعد از تغییر عدد، یک npm install اجرا کنید تا به روز رسانی انجام گیرد.

. بارگذاری مجدد Hot. پیشنهاد می کنم که silas-hook-autoreload را نصب کنید تا بارگذاری مجدد را برای Sails.js در برنامه خود فعال کنید. این یک راه حل بی نقص نیست، اما توسعه را آسان تر می کند. جهت نصب آن برای این نسخه از Sails.js، این کد را اجرا کنید:

npm install sails-hook-autoreload@for-sails-0.12 --save

نصب Dependency های Front-end

برای این آموزش، کمترین زمان را برای ساخت یک UI صرف می کنیم. هر فریموورک CSS که شما راحت ترید، پاسخ گو خواهد بود. برای این آموزش، من با کتابخانه Semantic UI CSS پیش می روم.

Sails.js راهنمای مشخصی برای نحوه نصب کتابخانه های CSS ندارد. سه، یا چند راه برای این کار وجود دارد. بیایید نگاهی به هر کدام داشته باشیم.

1- دانلود دستی

می توانید فایل های CSS اسکریپت های جاوا اسکریپت را به همراه Dependency هایشان، خودتان دانلود کنید. پس از دانلود، فایل ها را داخل فولدر assets قرار دهید.

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

2- استفاده از Bower

این روش نیازمند ساخت فایلی به نام bowerrc به عنوان ریشه پروژه شما است. این قطعه را paste کنید:

{
"directory" : "assets/vendor"
}

این کد، Bower را برای نصب شدن در فولدر assets/vendor، به جای فولدر پیشفرض bower_components راهنمایی می کند. سپس، Bower را به صورت Global نصب کنید، و Dependency های Front-end خود را با استفاده از Bower به صورت local نصب کنید:

# Install bower globally via npm-
npm install -g bower

# Create bower.json file, accept default answers (except choose y for private)
bower init

# Install semantic-ui via bower
bower install semantic-ui --save

# Install jsrender
bower install jsrender --save

در ادامه هدف از jsrender را توضیح خواهم داد. دقت کنید، jQuery نیز از آنجایی که یک Dependency برای semantic-ui محسوب می شود، نصب شده است.

بعد از نصب، فایل assets/style/importer.less را به روز رسانی کرده، و این خط را به آن اضافه کنید:

@import '../vendor/semantic/dist/semantic.css';

سپس، Dependency های جاوا اسکریپت را در tasks/pipeline.js اضافه کنید:

var jsFilesToInject = [

// Load Sails.io before everything else
'js/dependencies/sails.io.js',

// Vendor dependencies
'vendor/jquery/dist/jquery.js',
'vendor/semantic/dist/semantic.js',
'vendor/jsrender/jsrender.js',

// Dependencies like jQuery or Angular are brought in here
'js/dependencies/**/*.js',

// All of the rest of your client-side JS files
// will be injected here in no particular order.
'js/**/*.js'
];

وقتی که sails lift را اجرا می کنیم، فایل های جاوا اسکریپت همانند pipeline.js به طور خودکار به فایل views/layout.ejs تزریق می شوند. راه اندازی grunt فعلی، به تزریق Dependency های CSS رسیدگی می کند.

نکته: کلمه vendor را به فایل gitignore اضافه کنید. زیرا نمی خواهیم که Dependency های vendor در Repository ما ذخیره شوند.

3- استفاده از npm + grunt.copy

روش سوم نیازمندی کمی تلاش بیشتر برای راه اندازی است، اما ردپای کمتری از خود با جای می گذارد. Dependency ها را به این صورت با استفاده از npm نصب کنید:

npm install semantic-ui-css jsrender --save

از آنجایی که jQuery به عنوان یک Dependency برای semantic-ui-css قرار دارد، به طور خودکار نصب می شود. این کد کپی کردن فایل های JS و CSS از فولدر node_modules به assets/vendor را به Grunt می سپرد. فایل کلی باید این چنین باشد:

module.exports = function(grunt) {

grunt.config.set('copy', {
  dev: {
    files: [{
      expand: true,
      cwd: './assets',
      src: ['**/*.!(coffee|less)'],
      dest: '.tmp/public'
    },
    //Copy JQuery
    {
      expand: true,
      cwd: './node_modules/jquery/dist/',
      src: ['jquery.min.js'],
      dest: './assets/vendor/jquery'
    },
    //Copy jsrender
    {
      expand: true,
      cwd: './node_modules/jsrender/',
      src: ['jsrender.js'],
      dest: './assets/vendor/jsrender'
    },
    // copy semantic-ui CSS and JS files
    {
      expand: true,
      cwd: './node_modules/semantic-ui-css/',
      src: ['semantic.css', 'semantic.js'],
      dest: './assets/vendor/semantic-ui'
    },
    //copy semantic-ui icon fonts
    {
      expand: true,
      cwd: './node_modules/semantic-ui-css/themes',
      src: ["*.*", "**/*.*"],
      dest: './assets/vendor/semantic-ui/themes'
    }]
  },
  build: {
    files: [{
      expand: true,
      cwd: '.tmp/public',
      src: ['**/*'],
      dest: 'www'
    }]
  }
});

grunt.loadNpmTasks('grunt-contrib-copy');
};

این خط را به فایل assets/styles/importer.less اضافه کنید:

@import '../vendor/semantic-ui/semantic.css';

فایل های JS را به config.pipeline.js اضافه کنید:

// Vendor Dependencies
'vendor/jquery/jquery.min.js',
'vendor/semantic-ui/semantic.js',
'vendor/jsrender/jsrender.js',

در نهایت، این دستور را برای کپی کردن فایل ها از فولدر node_modules به فولدر assets/vendor اجرا کنید. برای هر بار نصب تمیز پروژه خود، تنها کافی است یک بار این کار را انجام دهید:

grunt copy:dev

به یاد داشته باشید که vendor را به gitignore اضافه کنید.

آزمایش نصب Dependency ها

هر روشی که انتخاب کرده اید، باید مطمئن شوید که Dependency های مورد نیاز در حال بارگذاری هستند. برای این کار، کد موجود در views/homepage.ejs را با این کد جایگزین کنید:

<h2 class="ui icon header">
<i class="settings icon"></i>
<div class="content">
  Account Settings
  <div class="sub header">Manage your account settings and set e-mail preferences.</div>
</div>
</h2>

پس از ذخیره فایل، یک sails lift انجام دهید. صفحه خانه شما باید چنین ظاهری داشته باشد:

ساخت یک برنامه چت Real-time با Sails.js

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

ساخت view ها

وقتی که بحث توسعه پروژه ها می شود، دوست دارم با رابط کاربری شروع کنم. ما از الگوی Embedded JavaScript برای ساخت view ها استفاده می کنیم. این یک موتور الگوسازی است که به طور پیشفرض بر روی تمام پروژه های Sails.js نصب شده است. گرچه، باید مطلع باشید که عملکرد محدودی دارد و دیگر تحت توسعه نیست.

فایل config/bootstrap.js را باز کنید و این خط را به آن اضافه کنید، تا عنوان مناسبی به صفحه خود بدهیم. آن را دقیقا داخل تابع موجود قبل از cb() قرار دهید:

sails.config.appName = "Sails Chat App";

می توانید نگاهی به views/layout.ejs داشته باشید و ببینید که تگ title چگونه قرار گرفته است. سپس، شروع به ساخت رابط کاربری صفحه خانه خود می کنیم.

طراحی صفحه خانه

فایل views/homepage.ejs را باز کنید و کد موجود را با این کد جایگزین کنید:

<div class="banner">
<div class="ui segment teal inverted">
  <h1 class="ui center aligned icon header">
    <i class="chat icon"></i>
    <div class="content">
      <a href="/">Sails Chat</a>
      <div class="sub header">Discuss your favorite technology with the community!</div>
    </div>
  </h1>
</div>
</div>
<div class="section">
<div class="ui three column grid">
  <div class="column"></div>
  <div class="column">
    <div class="ui centered padded compact raised segment">
      <h3>Sign Up or Sign In</h3>
      <div class="ui divider"></div>
      [TODO : Login Form goes here]
    </div>
  </div>
  <div class="column"></div>
</div>
</div>

فایل جدیدی در assets/styles/theme.less بسازید و این محتویات را به آن اضافه کنید:

.banner a {
color: #fff;
}

.centered {
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 30px !important;
}

.section {
margin-top: 30px;
}

.menu {
border-radius: 0 !important;
}

.note {
font-size: 11px;
color: #2185D0;
}

#chat-content {
height: 90%;
overflow-y: scroll;
}

اینها استایل های سفارشی هستند که در پروژه مان استفاده می کنیم. باقی استایل بندی ها از کتابخانه Semantic UI می آیند.

سپس، فایل assets/style/importer.less را به روز رسانی کنید، تا تمی که ساختیم را شامل شود:

@import 'theme.less';

Sails lift را اجرا کنید. حال پروژه شما باید چنین ظاهری داشته باشد:

ساخت یک برنامه چت Real-time با Sails.js

حال، به سراغ ساخت منوی راهنما می رویم.

منوی راهنما

از انجایی که این مورد در فایل های view متعددی استفاده خواهد شد، به عنوان یک فایل partial ساخته می شود. داخل فولدر view، فولدری به نام partials بسازید. سپس فایل views/partials/menu.ejs را بسازید، و این کد را به آن اضافه کنید:

<div class="ui labeled icon inverted teal menu">
<a class="item" href="/chat">
  <i class="chat icon"></i>
  Chat Room
</a>
<a class="item" href="/profile">
  <i class="user icon"></i>
  Profile
</a>
<div class="right menu">
  <a class="item" href="/auth/logout">
    <i class="sign out icon"></i>
    Logout
  </a>
</div>
</div>

اگر کد بالا را بررسی کنید، میبینید که لینکی برای /chat، /profile و /auth/logout ساخته ایم. بیایید ابتدا view های profile و chat room را بسازیم.

پروفایل

فایل views/profile.ejs را بسازید و این کد را به آن اضافه کنید:

<% include partials/menu %>

<div class="ui container">
<h1 class="ui centered header">Profile Updated!</h1>
<hr>
<div class="section">
  [ TODO put user-form here]
</div>
</div>

فرم کاربر را بعدا که API را ساختیم، خواهیم ساخت. در قدم بعدی، طرح چت روم را می سازیم.

طرح چت روم

چت روم از سه بخش تشکیل می شود:

کاربران چت - لیست کاربران
پیام های چت - لیست پیام ها
پست چت - فرمی برای ارسال پیام های جدید

فایل views/chatroom/ejs را بسازید و این کد را به آن اضافه کنید:

<% include partials/menu %>

<div class="chat-section">
<div class="ui container grid">

  <!-- Members List Section -->
  <div class="four wide column">
    [ TODO chat-users ]
  </div>

  <div class="twelve wide column">

    <!-- Chat Messages -->
    [ TODO chat-messages ]

    <hr>

    <!-- Chat Post -->
    [ TODO chat-post ]

  </div>
</div>
</div>

قبل از این که بتوانیم صفحه را مشاهده کنیم، باید route ها را راه اندازی کنیم.

Routing

فایل config/routes.js را باز کنید و آن را به این صورت به روز رسانی کنید:

'/': {
view: 'homepage'
},
'/profile': {
view: 'profile'
},
'/chat': {
view: 'chatroom'
}

Routing های Sails.js بسیار انعطاف پذیر است. بر حسب سناریو، راه های مختلفی برای تعریف Routing ها وجود دارد. این اساسی ترین نسخه است، که در آن ما یک URL را به یک view مپ می کنیم.

برنامه Sails خود را راه اندازی کنید، یا اگر هنوز در پس زمینه در حال اجراست، فقط صفحه خود را Refresh کنید. در حال حاضر، هیچ ارتباطی میان صفحه خانه و دیگر صفحات وجود ندارد. از آنجایی که بعدا یک سیستم احراز حویت ابتدایی را خواهیم ساخت که کاربران وارد شده را به /chat هدایت می کند، این از روی عمد است. فعلا، از نوار آدرس مرورگر خود استفاده کنید و /chat یا /profile را به انتهای URL اضافه کنید.

ساخت یک برنامه چت Real-time با Sails.js

تا به این مرحله، باید view های بالا را داشته باشید. حال بیایید ادامه دهیم و شروع به ساخت API ها بکنیم.

تولید یک API کاربر

ما می خواهیم از command-line کاربردی Sails.js برای تولید API کاربر خود استفاده کنیم. برای این مرحله، باید برنامه را متوقف کنیم:

sails generate api User

در کمتر از یک دقیقه، پیام «یک API جدید ساخته شده» را خواهیم گرفت. اساسا، دو مدل User.js و UserController.js برای ما ساخته شده اند. حال بیایید فایل api/model/User.js را با یکی سری صفت های مدل به روز رسانی کنیم:

module.exports = {

attributes: {

  name: {
    type: 'string',
    required: true
  },

  email: {
    type: 'string',
    required: true,
    unique: true
  },

  avatar: {
    type: 'string',
    required: true,
    defaultsTo: 'https://s.gravatar.com/avatar/e28f6f64608c970c663197d7fe1f5a59?s=60'
  },

  location: {
    type: 'string',
    required: false,
    defaultsTo: ''
  },

  bio: {
    type: 'string',
    required: false,
    defaultsTo:''
  }
}
};

به نظر من، کد بالا خودش خودش را توضیح می دهد. به طور پیشفرض، Sails.js از یک دیتابیس موجود بر روی دیسک استفاده می کند که اساسا فایلی است که در فولدر tmp قرار دارد. برای آزمایش برنامه مان، باید یک سری کاربر بسازیم. آسان ترین راه برای این کار، نصب پکیج sails-seed است:

npm install sails-seed --save

بعد از نصب، می بینید که فایل config/seeds.js برای شما ساخته شده است. این داده ها را در آن قرار دهید:

module.exports.seeds = {
user: [
  {
    name: 'John Wayne',
    email: 'johnnie86@gmail.com',
    avatar: 'https://randomuser.me/api/portraits/men/83.jpg',
    location: 'Mombasa',
    bio: 'Spends most of my time at the beach'
  },
  {
    name: 'Peter Quinn',
    email: 'peter.quinn@live.com',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
    location: 'Langley',
    bio: 'Rather not say'
  },
  {
    name: 'Jane Eyre',
    email: 'jane@hotmail.com',
    avatar: 'https://randomuser.me/api/portraits/women/94.jpg',
    location: 'London',
    bio: 'Loves reading motivation books'
  }
]
}

حال که یک API ساخته ایم، بهتر است Migration policy را در فایل config/models.js پیکربندی کنیم:

migrate: 'drop'

سه استراتژی Migration (مهاجرت) هستند که Sails.js هر موقع که اجرا می شود، از آنها برای تشخیص نحوه بازسازی دیتابیس شما استفاده می کند

Safe - Migrate نکن، خودم به طور دستی آن را انجام می دهم.
alter - Migrate کن، اما سعی کن داده های موجود را نگه داری.
drop - تمام جدول ها را پاک کن و همه چیز را بازسازی کن.

از آنجایی که تکرار های زیادی در پیش رو خواهیم داشت، پیشنهاد من برای توسعه، استفاده از drop است. اگر می خواهید داده های موجود را نگه دارید، می توانید از alter استفاده کنید. با این اوصاف، دیتابیس ما هر بار پر از داده خواهد شد.

حال بگذارید یک چیز جالب به شما نشان دهم. Sails خود را اجرا کنید و به آدرس های /user و /user/1 بروید.

ساخت یک برنامه چت Real-time با Sails.js

با تشکر از Sails.js Blueprints API، ما یک CRUD API کاملا عملی، بدون نوشتن حتی یک خط کد داریم. می توانید برای دسترسی به User API از Postman استفاده کنید و عملیات های دستکاری داده ها مانند ساخت، به روز رسانی و حذف را اجرا کنید.

در بخش بعد، به سراغ ساخت فرم پروفایل، و ادامه آموزش می رویم.

منبع