هر برنامه‌ی وب، دارای یک frontend و یک backend است. تا اینجا، تمام تمرکز این سری، بر روی پیاده سازی frontend بود و هیچکدام از برنامه‌هایی را که تکمیل کردیم، تبادل اطلاعاتی را با وب سرویس‌های backend نداشتند؛ اما به عنوان یک توسعه دهنده‌ی React، نیاز است با نحوه‌ی ارتباط با سرور آشنایی داشت که در طی چند قسمت به آن می‌پردازیم.
ایجاد برنامه‌ی backend ارائه دهنده‌ی REST API
در اینجا یک برنامه‌ی ساده‌ی ASP.NET Core Web API را جهت تدارک سرویس‌های backend، مورد استفاده قرار می‌دهیم. هرچند این مورد الزامی نبوده و اگر علاقمند بودید که مستقل از آن کار کنید، حتی می‌توانید از
سرویس آنلاین JSONPlaceholder نیز برای این منظور استفاده کنید که یک Fake Online REST API است. کار آن ارائه‌ی یک سری endpoint است که به صورت عمومی از طریق وب قابل دسترسی هستند. می‌توان به این endpintها درخواست‌های HTTP خود را مانند GET/POST/DELETE/UPDATE ارسال کرد و از آن اطلاعاتی را دریافت نمود و یا تغییر داد. به هر کدام از این endpointها یک API گفته می‌شود که جهت آزمایش برنامه‌ها بسیار مناسب هستند. برای نمونه در قسمت resources آن اگر به آدرس
https://jsonplaceholder.typicode.com/posts مراجعه کنید، می‌توان لیستی از مطالب را با فرمت JSON مشاهده کرد. کار آن ارائه‌ی آرایه‌ای از اشیاء جاوا اسکریپتی قابل استفاده‌ی در برنامه‌های frontend است. بنابراین زمانیکه یک HTTP GET را به این endpoint ارسال می‌کنیم، آرایه‌ای از اشیاء مطالب را دریافت خواهیم کرد. همین endpoint، امکان تغییر این اطلاعات را توسط برای مثال HTTP Delete نیز میسر کرده‌است.
اگر علاقمندید بودید می‌توانید از JSONPlaceholder استفاده کنید و یا در ادامه دقیقا ساختار همین endpoint ارائه‌ی مطالب آن‌را با ASP.NET Core Web API نیز پیاده سازی می‌کنیم (برای مطالعه‌ی قسمت «ارتباط با سرور» اختیاری است و از هر REST API مشابهی که توسط nodejs یا PHP و غیره تولید شده باشد نیز می‌توان استفاده کرد):
مدل مطالب namespace sample_22_backend.Models
{
public class Post
{
public int Id { set; get; }
public string Title { set; get; }
public string Body { set; get; }
public int UserId { set; get; }
}
}
ساختار این مدل، با ساختار مدل مطالب JSONPlaceholder یکی درنظر گرفته شده‌است، تا مطلب قابلیت پیگیری بیشتری را پیدا کند.
منبع داده‌ی فرضی مطالب
برای ارائه‌ی ساده‌تر برنامه، یک منبع داده‌ی درون حافظه‌ای را به همراه یک سرویس، در اختیار کنترلر مطالب، قرار می‌دهیم:
using System;
using System.Collections.Generic;
using System.Linq;
using sample_22_backend.Models;
namespace sample_22_backend.Services
{
public interface IPostsDataSource
{
List<Post> GetAllPosts();
bool DeletePost(int id);
Post AddPost(Post post);
bool UpdatePost(int id, Post post);
Post GetPost(int id);
}
/// <summary>
/// هدف صرفا تهیه یک منبع داده آزمایشی ساده تشکیل شده در حافظه است
/// </summary>
public class PostsDataSource : IPostsDataSource
{
private readonly List<Post> _allPosts;
public PostsDataSource()
{
_allPosts = createDataSource();
}
public List<Post> GetAllPosts()
{
return _allPosts;
}
public Post GetPost(int id)
{
return _allPosts.Find(x => x.Id == id);
}
public bool DeletePost(int id)
{
var item = _allPosts.Find(x => x.Id == id);
if (item == null)
{
return false;
}
_allPosts.Remove(item);
return true;
}
public Post AddPost(Post post)
{
var id = 1;
var lastItem = _allPosts.LastOrDefault();
if (lastItem != null)
{
id = lastItem.Id + 1;
}
post.Id = id;
_allPosts.Add(post);
return post;
}
public bool UpdatePost(int id, Post post)
{
var item = _allPosts
.Select((pst, index) => new { Item = pst, Index = index })
.FirstOrDefault(x => x.Item.Id == id);
if (item == null || id != post.Id)
{
return false;
}
_allPosts[item.Index] = post;
return true;
}
private static List<Post> createDataSource()
{
var list = new List<Post>();
var rnd = new Random();
for (var i = 1; i < 10; i++)
{
list.Add(new Post { Id = i, UserId = rnd.Next(1, 1000), Title = $"Title {i} ...", Body = $"Body {i} ..." });
}
return list;
}
}
}
در این سرویس، نیازمندی‌های کنترلر مطالب مانند ارائه لیست تمام مطالب، نمایش اطلاعات یک مطلب، به روز رسانی، ایجاد و حذف یک مطلب، تدارک دیده شده‌اند. سپس از این سرویس در کنترلر زیر استفاده می‌کنیم:
کنترلر Web API برنامه‌ی backend using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using sample_22_backend.Models;
using sample_22_backend.Services;
namespace sample_22_backend.Controllers
{
[ApiController]
[Route("api/[controller]")]
public class PostsController : ControllerBase
{
private readonly IPostsDataSource _postsDataSource;
public PostsController(IPostsDataSource postsDataSource)
{
_postsDataSource = postsDataSource;
}
[HttpGet]
public ActionResult<List<Post>> GetPosts()
{
return _postsDataSource.GetAllPosts();
}
[HttpGet("{id}")]
public ActionResult<Post> GetPost(int id)
{
var post = _postsDataSource.GetPost(id);
if (post == null)
{
return NotFound();
}
return Ok(post);
}
[HttpDelete("{id}")]
public ActionResult DeletePost(int id)
{
var deleted = _postsDataSource.DeletePost(id);
if (deleted)
{
return Ok();
}
return NotFound();
}
[HttpPost]
public ActionResult<Post> CreatePost([FromBody]Post post)
{
post = _postsDataSource.AddPost(post);
return CreatedAtRoute(nameof(GetPost), new { post.Id }, post);
}
[HttpPut("{id}")]
public ActionResult<Post> UpdatePost(int id, [FromBody]Post post)
{
var updated = _postsDataSource.UpdatePost(id, post);
if (updated)
{
return Ok(post);
}
return NotFound();
}
}
}
این کنترلر که در مسیر شروع شده‌ی با https://localhost:5001/api قرار می‌گیرد، جهت پشتیبانی از افعال مختلف HTTP مانند Get/Post/Delete/Update طراحی شده‌است که در ادامه، در برنامه‌ی React خود از آن‌ها استفاده خواهیم کرد. پس از ایجاد این پروژه‌ی web api، یک نمونه خروجی آن در مسیر https://localhost:5001/api/posts، به صورت زیر خواهد بود:
البته نمایش فرمت شده‌ی JSON در مرورگر کروم، نیاز به نصب
این افزونه را دارد.
ایجاد ساختار ابتدایی برنامه‌ی ارتباط با سرور
در اینجا برای بررسی کار با سرور، یک پروژه‌ی جدید React را ایجاد می‌کنیم:
> create-react-app sample-22-frontend
> cd sample-22-frontend
> npm start
در ادامه توئیتر بوت استرپ 4 را نیز نصب می‌کنیم. برای این منظور پس از باز کردن پوشه‌ی اصلی برنامه توسط VSCode، دکمه‌های ctrl+` را فشرده (ctrl+back-tick) و دستور زیر را در ترمینال ظاهر شده وارد کنید:
> npm install --save bootstrap
سپس برای افزودن فایل bootstrap.css به پروژه‌ی React خود، ابتدای فایل index.js را به نحو زیر ویرایش خواهیم کرد:
import "bootstrap/dist/css/bootstrap.css";
این import به صورت خودکار توسط webpack ای که در پشت صحنه کار bundling & minification برنامه را انجام می‌دهد، مورد استفاده قرار می‌گیرد.
سپس فایل app.js را به شکل زیر تکمیل می‌کنیم:
import "./App.css";
import React, { Component } from "react";
class App extends Component {
state = {
posts: []
};
handleAdd = () => {
console.log("Add");
};
handleUpdate = post => {
console.log("Update", post);
};
handleDelete = post => {
console.log("Delete", post);
};
render() {
return (
<React.Fragment>
<button className="btn btn-primary mt-1 mb-1" onClick={this.handleAdd}>
Add
</button>
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.posts.map(post => (
<tr key={post.id}>
<td>{post.title}</td>
<td>
<button
className="btn btn-info btn-sm"
onClick={() => this.handleUpdate(post)}
>
Update
</button>
</td>
<td>
<button
className="btn btn-danger btn-sm"
onClick={() => this.handleDelete(post)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</React.Fragment>
);
}
}
export default App;
که حاصل آن، یک دکمه، برای افزودن مطلبی جدید، به همراه جدولی است از مطالب که قصد داریم در ادامه، اطلاعات آن‌را از سرور دریافت کرده و حذف و یا به روز رسانی کنیم:
نگاهی به انواع و اقسام HTTP Clientهای مهیا
در ادامه نیاز خواهیم داشت تا از طریق برنامه‌های React خود، درخواست‌های HTTP را به سمت سرور (یا همان برنامه‌ی backend) ارسال کنیم، تا بتوان اطلاعاتی را از آن دریافت کرد و یا تغییری را در اطلاعات موجود، ایجاد نمود. همانطور که پیشتر نیز در این سری عنوان شد، React برای این مورد نیز راه‌حل توکاری را به همراه ندارد و تنها کار آن، رندر کردن View و مدیریت DOM است. البته شاید این مورد یکی از مزایای کار با React نیز باشد! چون در این حالت می‌توانید از کتابخانه‌هایی که خودتان ترجیح می‌دهید، نسبت به کتابخانه‌هایی که به شما ارائه/تحمیل (!) می‌شوند (مانند برنامه‌های Angular) آزادی انتخاب کاملی را داشته باشید. برای مثال هرچند Angular به همراه یک HTTP Module توکار است، اما تاکنون چندین بار بازنویسی از ابتدا شده‌است! ابتدا با یک کتابخانه‌ی HTTP مقدماتی شروع کردند. بعدی آن‌را
منسوخ شده اعلام و با یک ماژول جدید جایگزین کردند. بعد در نگارشی دیگر، چون این کتابخانه وابسته‌است به RxJS و خود RxJS نیز بازنویسی کامل شد، روش کار کردن با این HTTP Module نیز مجددا
تغییر پیدا کرد! بنابراین اگر با Angular کار می‌کنید، باید کارها را آنگونه که Angular می‌پسندد، انجام دهید؛ اما در اینجا خیر و آزادی انتخاب کاملی برقرار است.
بنابراین اکنون این سؤال مطرح می‌شود که در React، برای برقراری ارتباط با سرور، چه باید کرد؟ در اینجا آزاد هستید برای مثال از Fetch API جدید مرورگرها و یا روش Ajax ای مبتنی بر XML قدیمی‌تر آن‌ها، استفاده کنید (
اطلاعات بیشتر) و یا حتی اگر علاقمند باشید می‌توانید از محصور کننده‌های آن مانند jQuery Ajax استفاده کنید. بنابراین اگر با jQuery Ajax راحت هستید، به سادگی می‌توانید از آن در برنامه‌های React نیز استفاده کنید. اما ... ما در اینجا از یک کتابخانه‌ی بسیار محبوب و قدرتمند HTTP Client، به نام
Axios (اکسیوس/ یک واژه‌ی یونانی به معنای «سودمند») استفاده خواهیم کرد که فقط تعداد بار دانلود هفتگی آن،
6 میلیون بار است!
نصب Axios در برنامه‌ی React این قسمت
برای نصب کتابخانه‌ی Axios، در ریشه‌ی پروژه‌ی React این قسمت، دستور زیر را در خط فرمان صادر کنید:
> npm install --save axios
پس از برپایی این مقدمات، ادامه‌ی مطلب «ارتباط با سرور» را در قسمت بعدی پیگیری می‌کنیم.
کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید:
sample-22-frontend-part-01.zip و
sample-22-backend-part-01.zip
