وحید نصیری وحید نصیری
مطالب
پیاده سازی پروژه‌های React با TypeScript - قسمت هفتم - تعیین نوع هوک useContext
پیشتر در مطلب «React 16x - قسمت 33 - React Hooks - بخش 4 - useContext Hook» با هوک useContext آشنا شدیم. در این قسمت می‌خواهیم نکات تایپ‌اسکریپتی آن‌را بررسی کنیم.


ایجاد UserContext

فرض کنید برای انتقال داده‌های کاربر وارد شده‌ی به سیستم، از روش انتقال props از بالاترین کامپوننت موجود در component tree به پایین‌ترین کامپوننت آن، نیاز است از Context استفاده کنیم. به همین جهت فایل جدید src\contexts\userContext.tsx را با محتوای زیر ایجاد می‌کنیم:
import React from "react";

export type User = {
  name: string;
  isActive: boolean;
  logOut: () => void;
};

export const UserContext = React.createContext<User>({});
export const useUser = () => React.useContext(UserContext);
متد createContext در اصل یک متد جنریک است که بر اساس نوع آرگومان جنریک آن، مقدار شیء تامین کننده‌ی مقدار آن مشخص می‌شود. برای مثال اگر نوع User را تعریف کرده و به آن انتساب دهیم، یک چنین امضایی را پیدا می‌کند:
function React.createContext<User>(defaultValue: User,
 calculateChangedBits?: ((prev: User, next: User) => number) | undefined): React.Context<User>
اما ... قطعه کد فوق با خطای تایپ‌اسکریپتی زیر کامپایل نمی‌شود:
Argument of type '{}' is not assignable to parameter of type 'User'.
Type '{}' is missing the following properties from type 'User': name, isActive, logOutts(2345)
عنوان می‌کند که شیء خالی که به createContext ارسال کرده‌ایم، از نوع User نیست. برای رفع این مشکل می‌توان از مفهومی به نام Partial استفاده کرد:
export const UserContext = React.createContext<Partial<User>>({});
به این ترتیب تمام خواص نوع User به صورت اختیاری معرفی می‌شوند و در این حالت انتساب یک شیء خالی اولیه به آن، مشکلی را ایجاد نخواهد کرد.

نکته 1: البته می‌توان آرگومان جنریک آن‌را ذکر نکرد و createContext را با یک شیء آغازین از نوع User مقدار دهی کرد. در این حالت با استفاده از Type Inference، نوع آن، همان User درنظر گرفته می‌شود و دیگر نیازی به ذکر صریح این نوع نخواهد بود.
نکته 2: اگر از شیء مقدار دهی شده‌ی آغازین استفاده کنید، دیگر حتی نیازی به ذکر export type User هم نیست. نوع createContext بر اساس نوع خواص شیء آغازین ارسالی به آن در سراسر برنامه مشخص شده و قابل دسترسی می‌شود؛ با intellisense کامل و type checking دقیق.
نکته 3: useUser تعریف شده، در حقیقت یک هوک سفارشی است که می‌توان بجای React.useContext از آن در سایر قسمت‌های برنامه استفاده کرد.
نکته 4: اگر علاقمند به استفاده‌ی از نوع Partial نیستید، می‌توان از union types هم در اینجا استفاده کرد. در این حالت می‌توان مقدار اولیه را undefined تعریف کرد:
export const UserContext = React.createContext<User | undefined>(undefined);


معرفی UserContext به بالاترین کامپوننت موجود در component tree

برای این منظور به فایل src\App.tsx مراجعه کرده و آن‌را با UserContext.Provider محصور می‌کنیم:
import { User, UserContext } from "./contexts/userContext";
// ...

function App() {
  const user: User = {
    name: "User 1",
    isActive: true,
    logOut: () => {
      console.log("LogOut.");
    },
  };

  return (
    <UserContext.Provider value={user}>
    // ... 
    </UserContext.Provider>
  );
}

export default App;
ابتدا نوع User و سپس UserContext  را import کرده‌ایم و سپس کل محتوای موجود در کامپوننت App را با UserContext.Provider که دارای مقدار user ابتدایی تعریف شده‌است، محصور می‌کنیم.


خواندن شیء Context در کامپوننتی دیگر

برای این منظور به کامپوننت src\components\Head.tsx که در قسمت‌های قبل ایجاد کردیم، مراجعه کرده و آن‌را به صورت زیر تکمیل می‌کنیم:
import { UserContext } from "../contexts/userContext";

// ...

export const Head = ({ title, isActive = true }: Props) => {
  const context = React.useContext(UserContext); // or useUser();
// ...
};
در اینجا با استفاده از هوک useContext به UserContext دریافتی دسترسی یافته و سپس می‌توان با اطلاعات شیء User کار کرد.
اولین مزیت کار با TypeScript در اینجا، وجود intellisense کامل به همراه context است:


و یا اگر از Object Destructuring استفاده کنیم، در صورت وجود یک اشتباه تایپی، بلافاصله در زمان کامپایل، خطایی را دریافت می‌کنیم:



یک نکته: اگر UserContext را با استفاده از union types تعریف کنیم:
export const UserContext = React.createContext<User | undefined>(undefined);
هنگام استفاده‌ی از آن، خطای عدم وجود خاصیت‌های آن‌را در حین Object Destructuring دریافت می‌کنیم:


علت اینجا است که با فعال بودن بررسی نوع‌های نال‌نپذیر، چون user context اکنون می‌تواند undefined هم باشد، یا باید از روش context?.name استفاده کرد و یا یک علامت تعجب را پس از useContext قرار داد:
const context = React.useContext(UserContext)!; // or useUser()!;
const { name } = context;
ذکر ! به این معنا است که می‌دانیم خروجی این متد، نال و یا undefined نیست (راهنمایی کردن کامپایلر TypeScript). چون پیشتر آن‌را در کامپوننت App، در حین تعریف Provider، مقدار دهی اولیه کرده‌ایم.
‫۴ سال و ۴ ماه قبل، یکشنبه ۱۸ خرداد ۱۳۹۹، ساعت ۱۹:۳۵
وحید محمدطاهری وحید محمدطاهری
اشتراک‌ها
2.Visual Studio 2017 15.8 منتشر شد

These are the customer-reported issues addressed in 15.8.2:

2.Visual Studio 2017 15.8 منتشر شد
‫۶ سال و ۱ ماه قبل، پنجشنبه ۸ شهریور ۱۳۹۷، ساعت ۰۳:۵۷
مهدی ملائیان مهدی ملائیان
اشتراک‌ها
مقدمه ای بر Web Sql

In this post we will see some informations about Web SQL. I know you all are familiar with SQL, If not I strongly recommend you to read some basic informations here . As the name implies, Web SQL has so many similarities with SQL. So if you are good in SQL, you will love Web SQL too. Web SQL is an API which helps the developers to do some database operations in client side, like creating database, open the transaction, creating tables, inserting values to tables, deleting values, reading the data. 

مقدمه ای بر Web Sql
‫۸ سال و ۹ ماه قبل، پنجشنبه ۱ بهمن ۱۳۹۴، ساعت ۲۳:۰۹
وحید نصیری وحید نصیری
نظرات مطالب
شروع به کار با AngularJS 2.0 و TypeScript - قسمت اول - نصب پیشنیازها
به روز رسانی: ارتقاء به نگارش «2.0.0rc.0 »

برای ارتقاء به نگارش RC0، این مراحل را باید طی کنید:
1) پیش از هر کاری، پوشه‌ی node_modules قدیمی خود را حذف کنید (با تمام محتوای آن).
2) به روز رسانی فایل package.json به صورت ذیل:
{
    "name": "asp-net-mvc5x-angular2x",
    "version": "1.0.0",
    "author": "DNT",
    "description": "",
    "scripts": {
        "postinstall": "typings install"
    },
    "license": "Apache-2.0",
    "dependencies": {
        "@angular/common": "^2.0.0-rc.0",
        "@angular/compiler": "^2.0.0-rc.0",
        "@angular/core": "^2.0.0-rc.0",
        "@angular/http": "2.0.0-rc.0",
        "@angular/router": "2.0.0-rc.0",
        "@angular/router-deprecated": "^2.0.0-rc.0",
        "@angular/platform-browser": "^2.0.0-rc.0",
        "@angular/platform-browser-dynamic": "^2.0.0-rc.0",
        "bootstrap": "^3.3.6",
        "es6-promise": "^3.1.2",
        "es6-shim": "^0.35.0",
        "jquery": "^2.2.3",
        "reflect-metadata": "^0.1.3",
        "rxjs": "^5.0.0-beta.6",
        "systemjs": "^0.19.27",
        "zone.js": "^0.6.12"
    },
    "devDependencies": {
        "typescript": "^1.8.9",
        "typings": "^0.8.1"
    },
    "repository": { }
}
به روز شده‌ی محتوای فوق، همیشه در آدرس مستندات npm packages موجود است.
3) افزودن فایلی به نام typings.json در ریشه‌ی پروژه؛ با این محتوا: 
{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
    }
}
این فایل توسط قسمت «postinstall» اسکریپت package.json نصب می‌شود. اما چون مسیر https://raw.githubusercontent.com قابل دسترسی نیست (از این طرف البته!)، موفق به دریافت آن نخواهید شد. بنابراین یک پوشه را به نام typings به ریشه‌ی سایت اضافه کنید و سپس فایل ذیل را به آن اضافه نمائید:
es6-shim.d.ts
بدون این فایل، کامپایلر TypeScript تعاریف ES 6 را مانند Map و Promise و امثال آن‌، نمی‌شناسد و پروژه را کامپایل نخواهد کرد.

اکنون یکبار فایل package.json را ذخیره کنید تا کار به روز رسانی بسته‌ها انجام شود. البته اگر بر روی این فایل کلیک راست کنید، در منوی ظاهر شده، گزینه‌ی restore packages هم موجود است.

4) پس از آن، چند تغییر جزئی ذیل باید در کدهای این سری، اعمال شوند:
هر جایی angular2 تعریف شده، اینبار می‌شود angular@. مثلا:
import { PipeTransform, Pipe } from '@angular/core';
فایل مسیریابی آن قرار است تغییرات کلی داشته باشد. این مورد به صورت ذیل تغییر نام یافته است:
import { RouteParams, Router } from '@angular/router-deprecated';
5) فایل main.ts (قسمت دوم) به صورت ذیل تغییر کرده‌است:
/// <reference path="../typings/es6-shim.d.ts" />
import { bootstrap } from '@angular/platform-browser-dynamic';

// Our main component
import { AppComponent } from "./app.component";

bootstrap(AppComponent);
6) تعاریف اسکریپت‌های Index.html سایت، اینبار به نحو ذیل تغییر کرده‌اند:
یک نکته: اگر می‌خواهید این تعاریف را در یک فایل razor، وارد کنید، چون @ به ابتدای پوشه‌ی angular2 اضافه شده (node_modules\@angular)، مشکل پردازشی razor را ایجاد خواهد کرد و باید escape شود. به همین جهت بجای @ بهتر است معادل آن را یعنی ("@")Html.Raw@   وارد کنید.
سپس ابتدا فایل systemjs.config.js را از اینجا دریافت کنید.
در ادامه مداخل جدید را هم در فایل index.html مثال رسمی آغازین آن بررسی کنید.

بنابراین، فایل systemjs.config.js را  به ریشه‌ی سایت اضافه کنید (از این جهت که مسیر بسته‌های node_modules را از ریشه‌ی سایت می‌خواند). سپس فایل Views\Shared\_Layout.cshtml را به نحو ذیل تغییر دهید:
<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>

    <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="~/app/app.component.css" rel="stylesheet"/>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css"/>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="~/node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>

    <script src="~/systemjs.config.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.import('app/main').then(null, console.error.bind(console));
    </script>
</head>
<body>
    <div>
        @RenderBody()
        <pm-app>Loading App...</pm-app>
    </div>

    @RenderSection("Scripts", required: false)
</body>
</html>

خلاصه‌ی سریع این موارد
الف) تغییرات آخرین بسته‌های npm را از مستندات آن پیگیری و اعمال کنید. آخرین نگارش آن همیشه در اینجا قابل دسترسی است.
ب) تغییرات index.html، فایل main.ts و مداخل آغازین آن‌را از مثال آغازین رسمی آن پیگیری و اعمال کنید.
‫۸ سال و ۶ ماه قبل، سه‌شنبه ۱۴ اردیبهشت ۱۳۹۵، ساعت ۱۸:۵۱
سیروان عفیفی سیروان عفیفی
مطالب
سری بررسی SQL Smell در EF Core - ایجاد روابط Polymorphic - بخش دوم
در مطلب قبل نحوه‌ی ایجاد روابط Polymorphic را بررسی کردیم و همچنین چندین راه‌حل جایگزین را نیز ارائه دادیم. همانطور که عنوان شد این نوع روابط اساساً از لحاظ طراحی دیتابیس اصولی نیستند و تا حد امکان نباید استفاده شوند. این نوع روابط بیشتر ORM friendly هستند و اکثر فریم‌ورک‌های غیردات‌نتی به عنوان یک گزینه‌ی توکار، امکان ایجاد این روابط را فراهم میکنند. به عنوان مثال درLaravel Eloquent ORM به صورت توکار از این قابلیت پشتیبانی می‌شود: 
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model
{
    /**
     * Get the owning commentable model.
     */
    public function commentable()
    {
        return $this->morphTo();
    }
}

class Post extends Model
{
    /**
     * Get all of the post's comments.
     */
    public function comments()
    {
        return $this->morphMany('App\Comment', 'commentable');
    }
}

class Video extends Model
{
    /**
     * Get all of the video's comments.
     */
    public function comments()
    {
        return $this->morphMany('App\Comment', 'commentable');
    }
}

اما در Entity Framework Core هنوز این قابلیت پیاده‌سازی نشده است. در اینجا می‌توانید وضعیت پیاده‌سازی Polymorphic Association را پیگیری کنید. پیاده‌سازی این قابلیت از این جهت مهم است که امکان کوئری نویسی را برای این نوع روابط ساده‌تر خواهد کرد به عنوان مثال در کدهای PHP فوق جهت واکشی کامنت‌های یک مطلب می‌توانیم اینگونه عمل کنیم: 
$post = App\Post::find(1);

foreach ($post->comments as $comment) {
    //
}

همچنین امکان واکشی owner این رابطه را نیز حین کار با کامنت‌ها را خواهیم داشت: 
$comment = App\Comment::find(1);

$commentable = $comment->commentable;

در ادامه می‌خواهیم معادل LINQ آن را پیاده‌سازی کنیم. در مطلب قبل مدل Comment این چنین ساختاری داشت: 
public enum CommentType
{
    Article,
    Video,
    Event
}

public class Comment
{
    public int Id { get; set; }
    public string CommentText { get; set; }
    public string User { get; set; }
    public int? TypeId { get; set; }
    public CommentType CommentType { get; set; }
}

در اینجا همانطور که مشاهده میکنید هیچگونه ارتباط معناداری بین Comment و همچنین owner رابطه (که ممکن است هر کدام از مقادیر Enum فوق باشد) وجود ندارد. اگر این مدل به تنها یک مدل مثلاً Article اشاره داشته باشد، نیاز به تعیین Navigation Property در دو طرف رابطه خواهد بود: 
public class Comment
{
    public int Id { get; set; }
    public string CommentText { get; set; }
    public string User { get; set; }

    public virtual Article Article { get; set; }
    public int ArticleId { get; set; }
}

public class Article
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Slug { get; set; }
    public string Description { get; set; }
    
    public virtual ICollection<Article> Articles { get; set; }
}

اما از آنجائیکه رابطه یک حالت پویا دارد، نمی‌توانیم به صورت صریح نوع ارجاعات را در دو طرف رابطه تعیین کنیم. برای داشتن همچین قابلیتی می‌توانیم Navigation Property را به صورت [NotMapped] تعیین کنیم که EF Core آنها را در نظر نگیرید. بنابراین به صورت دستی عملکرد آنها را پیاده‌سازی خواهیم کرد. برای اینکار می‌توانیم یک اینترفیس با عنوان ICommentable را تعریف کنیم و برای هر مدلی که نیاز به قابلیت کامنت دارد، این اینترفیس را پیاده‌سازی کنیم. همچنین یک ارجاع به لیستی از کامنت‌ها را به صورت Navigation Property به هر کدام از مدلها نیز اضافه خواهیم کرد:  
interface ICommentable
{
    int Id { get; set; }
}

public class Article : ICommentable
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Slug { get; set; }
    public string Description { get; set; }
    
    [NotMapped]
    public ICollection<Comment> Comments { get; set; }
}

public class Video : ICommentable
{
    public int Id { get; set; }
    public string Url { get; set; }
    public string Description { get; set; }
    
    [NotMapped]
    public ICollection<Comment> Comments { get; set; }
}

public class Event : ICommentable
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTimeOffset? Start { get; set; }
    public DateTimeOffset? End { get; set; }
    
    [NotMapped]
    public ICollection<Comment> Comments { get; set; }
}

سپس درون مدل Comment ارجاع به Polymorphic relation را نیز به صورت [NotMapped] پیاده‌سازی خواهیم کرد: 
public class Comment
{
    public int Id { get; set; }
    public string CommentText { get; set; }
    public string User { get; set; }
    public int? TypeId { get; set; }
    public CommentType CommentType { get; set; }

    ICommentable _parent;

    [NotMapped]
    public ICommentable Parent
    {
        get => _parent;
        set
        {
            _parent = value;
            TypeId = value.Id;
            CommentType = (CommentType) Enum.Parse(typeof(CommentType), value.GetType().Name);
        }
    }
}

کاری که در بالا انجام شده، تنظیم تایپ مدلی است که می‌خواهیم واکشی کنیم. یعنی به محض مقداردهی، پراپرتی Comments مدل مورد نظر به همراه Id و در نهایت نوع آن را تنظیم کرده‌ایم. اکنون برای واکشی کامنت‌های یک مطلب خواهیم داشت: 
var article = dbContext.Articles.Find(1);
            
article.Comments = dbContext.Comments
    .Where(c => c.TypeId == article.Id
                && c.CommentType == CommentType.Article)
    .ToList();

foreach (var comment in article.Comments)
    comment.Parent = article;

foreach (var comment in article.Comments)
{
    Console.WriteLine($"{comment.User} - ${comment.CommentText} - {((Article) comment.Parent).Title}");
}

همانطور که مشاهده می‌کنید اکنون می‌توانیم از هر دو طرف رابطه به اطلاعات موردنیازمان دسترسی داشته باشیم.
‫۴ سال و ۲ ماه قبل، پنجشنبه ۹ مرداد ۱۳۹۹، ساعت ۱۷:۴۰
محسن خان محسن خان
نظرات مطالب
(Domain Driven Design) به زبان ساده

عنوان مطلب هست «به زبان ساده»، ولی اصل PI و Specification pattern و مانند اون در مقدمه مطلب بکار رفتن که کمی برای قسمت اول زیاده روی هست. ضمنا Refactoring اصلا به معنای بهبود و توسعه همزمان سیستم نیست. Refactoring بهبود کیفیت کدها هست بدون تغییری در ساختار کلی سیستم.

‫۱۱ سال و ۴ ماه قبل، یکشنبه ۹ تیر ۱۳۹۲، ساعت ۲۳:۴۲
وحید نصیری وحید نصیری
مطالب
آزمایش Web APIs توسط Postman - قسمت دوم - ایجاد گردش کاری بین درخواست‌ها
تا اینجا مثال‌هایی را که بررسی کردیم، متکی به خود بودند و اطلاعات هر کدام، از یک درخواست به درخواستی دیگر کاملا متفاوت بود. همچنین اطلاعات ارسالی و یا دریافتی توسط آن‌ها نیز ثابت و از پیش تعیین شده بود.


کار با اطلاعات متغیر دریافتی از سرور

در Postman یک برگه‌ی جدید را باز کنید و سپس آدرس https://httpbin.org/uuid را در حالت Get درخواست نمائید:


این درخواست، یک Guid اتفاقی جدید را باز می‌گرداند. هربار که بر روی دکمه‌ی Send کلیک کنیم، مقدار Guid دریافتی متفاوت خواهد بود. این خروجی دقیقا حالتی است که در برنامه‌های دنیای واقعی با آن سر و کار داریم. در این نوع برنامه‌ها، پیشتر نمی‌توان مقدار خروجی دریافتی از سرور را پیش‌بینی کرد. همچنین علاقمندیم این مقدار دریافتی (از درخواست 1) را به Post request ای که در انتهای قسمت قبل ایجاد کردیم (درخواست 2)، ارسال کنیم و اطلاعاتی را بین درخواست‌ها به اشتراک بگذاریم.
برای این منظور، مجموعه‌ی httpbin ای را که در قسمت قبل ایجاد کردیم، انتخاب کرده و Post request ذخیره شده‌ی در آن‌را انتخاب کنید تا مجددا جزئیات آن بازیابی شود:

اکنون با مراجعه به برگه‌ی بدنه‌ی درخواست آن، قصد داریم یک خاصیت جدید id را با guid دریافتی از سرور توسط درخواستی دیگر، مقدار دهی کنیم:


برای دسترسی به این اطلاعات، می‌توان از ویژگی بسیار قدرتمند postman به نام متغیرها استفاده کرد. به همین جهت به برگه‌ی درخواست دریافت guid مراجعه کرده و برگه‌ی Tests آن‌را باز کنید:


این قسمت پس از پایان درخواست جاری، اجرا می‌شود. بنابراین دراینجا فرصت خواهیم داشت تا مقدار دریافتی از سرور را در یک متغیر ذخیره کنیم. سپس می‌توان از این متغیر در حین ارسال درخواستی دیگر استفاده کرد. در پنل کنار textbox نوشتن آزمون‌ها، تعدادی نمونه کد هم وجود دارند. برای مثال در اینجا نمونه کد «Set a global variable» را با کلیک بر روی آن انتخاب می‌کنیم:
 pm.globals.set("uuid", "foo");
در این مثال key/value این متغیر سراسری، با یک کلید مشخص و مقداری ثابت، مقدار دهی شده‌اند.

اکنون مجددا بر روی دکمه‌ی Send این درخواست کلیک کنید. پس از اجرای آن، این قطعه کد اجرا شده و یک متغیر سراسری، با کلید uuid و مقدار ثابت مشخص شده، در تمام برگه‌های postman در دسترس خواهند بود. برای بررسی صحت این عملیات، می‌توانید بر روی دکمه‌‌ای با آیکن چشم، در بالای سمت راست صفحه، کلیک کنید:


در ادامه برای استفاده‌ی از این متغیر سراسری، به برگه‌ی Post request مراجعه کرده و بدنه‌ی درخواست را به صورت زیر ویرایش می‌کنیم:
{
"name": "Vahid",
"id": "{{uuid}}"
}
در جائیکه بدنه‌ی درخواست درج می‌شود، متغیرها باید درون {{ }} قرار گیرند.
سپس این درخواست را ارسال کنید، در خروجی دریافتی از سرور httpbin، خاصیت و مقدار جدید id قابل مشاهده هستند که به معنای ارسال صحیح آن به سرور است:
    "json": {
        "id": "foo",
        "name": "Vahid"
    },
در اینجا، foo، مقداری است که از یک درخواست دیگر خوانده شده و توسط درخواست مجزای post جاری، ارسال گردیده‌است.
در این مرحله بر روی دکمه‌ی Save برگه‌ی uuid کلیک کرده و آن‌را در مجموعه‌ی httpbin، ذخیره کنید.


روش دسترسی و به اشتراک گذاری مقدار متغیر uuid دریافتی

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



pm.response حاوی کل اطلاعات شیء response است و برای مثال بدنه‌ی response دریافتی از سمت سرور httpbin، یک چنین شکلی را دارد:
{
    "uuid": "4594e7ad-cae3-487b-bd42-fc49c312c0e9"
}
با فراخوانی متد json بر روی این شیء، اکنون می‌توان به اطلاعات آن همانند یک شیء متداول جاوا اسکریپتی که دارای کلید و خاصیت uuid است، دسترسی یافت:
let jsonResponse = pm.response.json();
pm.globals.set("uuid", jsonResponse.uuid);
پس از این تنظیم، مجددا درخواست را ارسال کنید که سبب دریافت uuid جدیدی می‌شود:
{
    "uuid": "83d437a8-bce6-438b-8693-068e5399182c"
}
برای بررسی نتیجه‌ی این عملیات، با کلیک بر روی دکمه‌‌ای با آیکن چشم، در بالای سمت راست صفحه، چنین خروجی قابل مشاهده خواهد بود:


که به معنای دسترسی به مقدار متغیر uuid دریافتی از سمت سرور و تنظیم آن به عنوان یک متغیر سراسری است.
اکنون اگر مجددا به برگه‌ی مجزای Post request مراجعه و آن‌را ارسال کنیم، در خروجی بدنه‌ی response دریافتی از سمت سرور:
   "json": {
        "id": "83d437a8-bce6-438b-8693-068e5399182c",
        "name": "Vahid"
    },
دقیقا ارسال همان مقدار متغیر دریافتی از برگه‌ای دیگر که توسط متغیر {{uuid}} تنظیم شده‌، قابل مشاهده‌است.
تا اینجا تمام برگه‌های باز را ذخیره کنید:


در این تصویر، uuid پس از Post request قرار گرفته، چون ترتیب ذخیره سازی آن‌ها به همین صورت بوده‌است. اما نیاز است uuid را به پیش از درخواست post، منتقل کرد. برای اینکار می‌توان از drag/drop آیتم آن کمک گرفت.


نوشتن یک آزمون ساده

هدف اصلی از برگه‌ی Tests هر درخواست در Postman، نوشتن آزمون‌های مختلف است. به همین جهت برای نوشتن یک آزمون ساده، به برگه‌ی Post request که هم اکنون باز است، مراجعه کرده و سپس برگه‌ی Tests آن‌را به صورت زیر تنظیم می‌کنیم:


pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});
در اینجا در پنل code snippets کناری آن، بر روی لینک و گزینه‌ی «Status code: code is 200» کلیک کرده‌ایم تا به صورت خودکار، قطعه کد فوق را تولید کند. البته Tests را در قسمت‌های بعدی با جزئیات بیشتری بررسی خواهیم کرد. در اینجا بیشتر هدف آشنایی مقدماتی با برگه‌ی Tests آن است.
این آزمون، بررسی می‌کند که آیا status code بازگشتی از سرور 200 است یا خیر؟ برای اجرای آن، فقط کافی است بر روی دکمه Send این برگه کلیک کنید:


نتیجه‌ی آن‌را در برگه‌ی جدید Test Results، در قسمت نمایش response دریافتی از سمت سرور، می‌توان مشاهده کرد که بیانگر موفقیت آمیز بودن آزمایش انجام شده‌است.
اگر علاقمندید تا حالت شکست آن‌را نیز مشاهده کنید، بجای عدد 200، عدد 404 را وارد کرده و مجددا درخواست را ارسال کنید.


اجرای ترتیبی آیتم‌های یک مجموعه

تا اینجا اگر درخواست‌ها را در مجموعه‌ی httpbin ذخیره کرده و همچنین ترتیب آن‌ها را نیز به نحوی که گفته شد، اصلاح کرده باشید، یک چنین شکلی را باید مشاهده کنید:


در اینجا برای اجرای ترتیبی این آیتم‌ها و اجرای گردش کاری کوچکی که ایجاد کرده‌ایم (درخواست post باید پس از درخواست uuid و بر اساس مقدار دریافتی آن از سرور اجرا شود)، می‌توان از collection runner برنامه‌ی Postman استفاده کرد:


با کلیک بر روی دکمه‌ی Runner، در نوار ابزار برنامه‌ی Postman، صفحه‌ی Collection runner آن ظاهر می‌شود. در این صفحه ابتدا httpbin collection را انتخاب می‌کنیم که سبب نمایش محتویات و اجزای آن خواهد شد. سپس بدون ایجاد هیچگونه تغییری در تنظیمات این صفحه، بر روی دکمه‌ی run httpbin کلیک می‌کنیم:


پس از اجرای خودکار مراحل این مجموعه، نتیجه‌ی عملیات ظاهر می‌شود:


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


امکان اجرای یک چنین قابلیتی توسط برنامه‌ی CLI ای به نام newman نیز به همراه Postman وجود دارد که جهت استفاده‌ی در continuous integration servers می‌تواند بسیار مفید باشد. جزئیات آن‌را در قسمت‌های بعدی بررسی خواهیم کرد.
‫۵ سال و ۵ ماه قبل، یکشنبه ۱۵ اردیبهشت ۱۳۹۸، ساعت ۱۶:۵۵
سید امید موسوی سید امید موسوی
اشتراک‌ها
اضافه شدن HTTP Logging توکار در NET 6.0.

HTTP Logging is a middleware that logs information about HTTP requests and HTTP responses. HTTP logging provides logs of

HTTP request information
Common properties
Headers
Body
HTTP response information

HTTP Logging is valuable in several scenarios to

Record information about incoming requests and responses
Filter which parts of the request and response are logged
Filtering which headers to log

اضافه شدن HTTP Logging توکار در NET 6.0.
‫۲ سال و ۱ ماه قبل، چهارشنبه ۱۲ مرداد ۱۴۰۱، ساعت ۱۹:۱۵
وحید نصیری وحید نصیری
اشتراک‌ها
ReSharper Ultimate 2018.1.1 منتشر شد

ReSharper’s shell loading has been optimized to decrease Visual Studio’s startup time. Now it is faster, and we have mostly got rid of the Visual Studio yellow notification about the slowness of starting up ReSharper. There is still a yellow box about total u 

ReSharper Ultimate 2018.1.1 منتشر شد
‫۶ سال و ۴ ماه قبل، شنبه ۵ خرداد ۱۳۹۷، ساعت ۱۲:۱۴