وحید نصیری وحید نصیری
مطالب
React 16x - قسمت 34 - توزیع برنامه
در قسمت آخر این سری، نگاهی خواهیم داشت به نحوه‌ی توزیع برنامه‌های React و نکات مرتبط با آن.


افزودن متغیرهای محیطی

در برنامه‌ی نمایش لیست فیلم‌هایی که تا قسمت 29 آن‌را بررسی کردیم، از فایل src\config.json برای ذخیره سازی اطلاعات تنظیمات برنامه استفاده شد. هرچند این روش کار می‌کند اما بر اساس محیط‌های مختلف توسعه، متغیر نیست. اغلب برنامه‌ها باید بتوانند حداقل در سه محیط توسعه، آزمایش و تولید، بر اساس متغیرها و تنظیمات خاص هر کدام، کار کنند. برای مثال بر روی سیستمی که کار توسعه در آن انجام می‌شود، می‌خواهیم apiUrl متفاوتی را نسبت به حالتیکه برنامه توزیع می‌شود، داشته باشیم.
برای رفع این مشکل، برنامه‌هایی که توسط create-react-app تولید می‌شوند، دارای پشتیبانی توکاری از متغیرهای محیطی هستند. برای این منظور نیاز است در ریشه‌ی پروژه (جائیکه فایل package.json قرار دارد) فایل جدید env. را ایجاد کرد. در ویندوز برای ایجاد یک چنین فایل‌هایی که فقط از یک پسوند تشکیل می‌شوند، باید نام فایل را به صورت .env. وارد کرد؛ سپس خود ویندوز نقطه‌ی نهایی را حذف می‌کند. البته اگر از ادیتور VSCode برای ایجاد این فایل استفاده می‌کنید، نیازی به درج نقطه‌ی انتهایی نیست. در این فایل environment ایجاد شده می‌توان تمام متغیرهای محیطی مورد نیاز را با مقادیر پیش‌فرض آن‌ها درج کرد. همچنین می‌توان این مقادیر پیش‌فرض را بر اساس محیط‌های مختلف کاری، بازنویسی کرد. برای مثال می‌توان فایل env.development. را اضافه کرد؛ به همراه فایل‌های env.test. و env.production.


متغیرهای محیطی به صورت key=value درج می‌شوند. این کلیدها نیر باید با REACT_APP_ شروع شوند؛ در غیر اینصورت، کار نخواهند کرد. برای مثال در فایل env.، دو متغیر پیش‌فرض زیر را تعریف می‌کنیم:
REACT_APP_NAME=My App
REACT_APP_VERSION=1
اکنون برای خواندن این متغیرها برای مثال در فایل index.js (و یا هر فایل جاوا اسکریپتی دیگری در برنامه)، سطر زیر را درج می‌کنیم:
console.log(process.env);
process به معنای پروسه‌ی جاری برنامه‌است (و مرتبط است به پروسه‌ی node.js ای که برنامه‌ی React را اجرا می‌کند) و خاصیت env، به همراه تمام متغیرهای محیطی برنامه می‌باشد. در این حالت اگر برنامه را اجرا کنیم، در کنسول توسعه دهندگان مرورگر، به یک چنین خروجی خواهیم رسید:


در این خروجی، متغیر "NODE_ENV: "development به صورت خودکار با تولید بسته‌های مخصوص ارائه‌ی نهایی، به production تنظیم می‌شود. سایر متغیرهای محیطی تعریف شده را نیز در اینجا ملاحظه می‌کنید. با توجه به خواص شیء env، برای مثال جهت دسترسی به نام برنامه می‌توان از مقدار process.env.REACT_APP_NAME استفاده کرد.


یک نکته: با هر تغییری در مقادیر متغیرهای محیطی، نیاز است یکبار دیگر برنامه را از ابتدا توسط دستور npm start، راه اندازی مجدد کرد؛ چون این فایل‌ها به صورت خودکار ردیابی نمی‌شوند.


نحوه‌ی پردازش متغیرهای محیطی درج شده‌ی در برنامه

اگر همان سطر لاگ کردن خروجی process.env را به صورت زیر تغییر دهیم:
console.log("My App Name", process.env.REACT_APP_NAME);
و برنامه را مجددا اجرا کنیم، با مراجعه‌ی به برگه‌ی Sources و انتخاب مسیر localhost:3000/static/js/main.chunk.js و سپس جستجوی "My App Name" ای که در اینجا اضافه کردیم (با فشردن دکمه‌های Ctrl+F)، به خروجی زیر خواهیم رسید:


همانطور که مشاهده می‌کنید، فراخوانی console.log ما، دیگر به همراه متغیر process.env.REACT_APP_NAME نیست؛ بلکه مقدار اصلی این متغیر در اینجا درج شده‌است. بنابراین اگر در در حین توسعه‌ی برنامه، از متغیرهای محیطی استفاده شود، این متغیرها با مقادیر اصلی آن‌ها در حین پروسه‌ی Build نهایی، جایگزین می‌شوند.


Build برنامه‌های React برای محیط تولید

اجرای دستور npm start، سبب ایجاد یک Build مخصوص محیط توسعه می‌شود که بهینه سازی نشده‌است و به همراه اطلاعات اضافی قابل توجهی جهت دیباگ ساده‌تر برنامه‌است. برای رسیدن به یک خروجی بهینه سازی شده‌ی مخصوص محیط تولید و ارائه‌ی نهایی باید دستور npm run build را در خط فرمان اجرا کرد. خروجی نهایی این دستور، در پوشه‌ی جدید build واقع در ریشه‌ی پروژه، قرار می‌گیرد. اکنون می‌توان کل محتویات این پوشه را جهت ارائه‌ی نهایی در وب سرور خود، مورد استفاده قرار داد.
پس از پایان اجرای دستور npm run build، پیام «امکان ارائه‌ی آن توسط static server زیر نیز وجود دارد» ظاهر می‌شود:
> npm install -g serve
> serve -s build
اگر علاقمند باشید تا خروجی حالت production تولید شده را نیز به صورت محلی آزمایش کنید، ابتدا باید static server یاد شده را توسط دستور npm install فوق نصب کنید. سپس ریشه‌ی پروژه را در خط فرمان باز کرده و دستور serve -s build را صادر کنید (البته اگر با خط فرمان به پوشه‌ی build وارد شدید، دیگر نیازی به ذکر پوشه‌ی build نخواهد بود). اکنون می‌توانید برنامه را در آدرس http://localhost:5000 در مرورگر خود بررسی نمائید.

البته با توجه به اینکه backend سرور برنامه‌های ما نیز در همین آدرس قرار دارد و در صورت ورود این آدرس، به صورت خودکار به https://localhost:5001/index.html هدایت خواهید شد، می‌توان این پورت پیش‌فرض را با اجرای دستور  serve -s build -l 1234 تغییر داد. اکنون می‌توان آدرس جدید http://localhost:1234 را در مرورگر آزمایش کرد که ... با خطای زیر کار نمی‌کند:
Access to XMLHttpRequest at 'https://localhost:5001/api/genres' from origin 'http://localhost:1234' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
روش رفع این مشکل را در قسمت 23 بررسی کردیم و در اینجا جهت بهبود آن می‌توان متد WithOrigins فایل Startup.cs را به صورت زیر تکمیل کرد:
WithOrigins("http://localhost:3000", "http://localhost:1234")

یک نکته: زمانیکه از دستور npm start استفاده می‌شود، متغیرهای محیطی از فایل env.development. خوانده خواهند شد و زمانیکه از دستور npm run build استفاده می‌شود، این متغیرها از فایل env.production. تامین می‌شوند. در این حالت‌ها اگر متغیری در این دو فایل درج نشده بود، از مقدار پیش‌فرض موجود در فایل env. استفاده می‌گردد. از فایل env.test. با اجرای دستور npm test، به صورت خودکار استفاده می‌شود.


آماده سازی برنامه‌ی React، برای توزیع نهایی

تا اینجا برنامه‌ی React تهیه شده، اطلاعات apiUrl خودش را از فایل config.json دریافت می‌کند. اکنون می‌خواهیم بر اساس حالات مختلف توسعه و تولید، از apiUrlهای متفاوتی استفاده شود. به همین جهت به فایل env.production. مراجعه کرده و تنظیمات ذیل را به آن اضافه می‌کنیم:
REACT_APP_API_URL=https://localhost:5001/api
REACT_APP_ADMIN_ROLE_NAME=Admin
البته فعلا همین متغیرها را به فایل env.development. نیز می‌توان اضافه کرد؛ چون backend سرور ما در هر دو حالت، در این مثال، در آدرس فوق قرار دارد.

اکنون به برنامه مراجعه کرده و در هرجائی که ارجاعی به فایل config.json وجود دارد، سطر import آن‌را حذف می‌کنیم. با این تغییر، تمام آدرس‌هایی مانند:
const apiEndpoint = apiUrl + "/users";
را به صورت زیر ویرایش می‌کنیم:
const apiEndpoint =  "/users";
در ادامه برای تامین مقدار apiUrl به صورت خودکار، به فایل src\services\httpService.js مراجعه کرده و در ابتدای آن، یک سطر زیر را اضافه می‌کنیم:
 axios.defaults.baseURL = process.env.REACT_APP_API_URL;
به این ترتیب تمام درخواست‌های ارسالی توسط Axios، دارای baseURL ای خواهند شد که از فایل متغیر محیطی جاری تامین می‌شود. همانطور که پیش‌تر نیز عنوان شد، این مقدار در زمان Build، با مقدار ثابتی که از فایل env جاری خوانده می‌شود، جایگزین خواهد شد.
همچنین adminRoleName مورد نیاز در فایل src\services\authService.js را نیز از همان فایل env جاری تامین می‌کنیم:
const adminRoleName =  process.env.REACT_APP_ADMIN_ROLE_NAME;
پس از این تغییرات، نیاز است برای حالت توسعه، یکبار دیگر دستور npm start و یا برای حالت تولید، دستور npm run build را اجرا کرد تا اطلاعات درج شده‌ی در فایل‌های env.، پردازش و جایگزین شوند.


کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: sample-34-frontend.zip و sample-34-backend.zip
‫۴ سال و ۹ ماه قبل، پنجشنبه ۵ دی ۱۳۹۸، ساعت ۱۵:۵۵
سید امید موسوی سید امید موسوی
نظرات مطالب
روش یکی کردن پروژه‌های React و ASP.NET Core
در پروژه ای قصد دارم فقط صفحه ای خاص رو با react طراحی کنم و بقیه صفحات توسط razor پیاده سازی شد است دست نخورده باقی بماند.
در این صورت نحوه احراز هویت این صفحه به چه صورت است ؟ 
نحوه خواندن cookie‌های پروژه در react به چه صورت امکان پذیر است ؟
‫۴ سال قبل، چهارشنبه ۲ مهر ۱۳۹۹، ساعت ۱۹:۴۲
وحید محمدطاهری وحید محمدطاهری
اشتراک‌ها
24.Visual Studio 2017 15.9 منتشر شد

Issues Fixed in 15.9.24

  • Fixed a bug in the C++ linker missing imports when using umbrella LIBs with difference casing on postfix of DLL name.
  • Fixed a bug in the ARM64 C++ compiler where the wrong values could be restored after setjmp.
  • Fixed C++ compiler bug for proper folding of inline variable dynamic initializers.
  • Made a change that enables Enterprise IT administrators and deployment engineers to configure tools like Microsoft Update client & SCCM to determine applicability of VS2017 updates hosted on Microsoft Update Catalog & WSUS.

Security Advisory Notices

24.Visual Studio 2017 15.9 منتشر شد
‫۴ سال و ۴ ماه قبل، جمعه ۲۳ خرداد ۱۳۹۹، ساعت ۱۷:۵۰
سعد سعد
اشتراک‌ها
Authentication بوسیله گوگل در ASP.NET Core 2.0

Sometimes, we want users to log in to our application using their existing credentials from third-party applications, such as Facebook, Twitter, Google, etc. In this article, we are going to look into the authentication of ASP.NET Core app using a Google account. 

Authentication بوسیله گوگل در ASP.NET Core 2.0
‫۶ سال و ۷ ماه قبل، چهارشنبه ۹ اسفند ۱۳۹۶، ساعت ۱۶:۴۹
وحید نصیری وحید نصیری
نظرات مطالب
اعتبارسنجی مبتنی بر JWT در ASP.NET Core 2.0 بدون استفاده از سیستم Identity
- راه حل عمومی برای jQuery، React و Angular و غیره این است که جائیکه if (xhr.status === 401) را از سمت سرور دریافت کردید (401، خروجی خودکار فیلتر Authorize، در صورت شکست اعتبارسنجی است)، می‌توانید پیام خاصی و یا هدایت به صفحه‌ی خاصی را با فراخوانی دستور "window.location.href  = "/new/page/path انجام دهید.
- چرا این راه حل عمومی است؟ چون قسمت
  $.ajax({
                headers: { 'Authorization': 'Bearer ' + jwtToken },
توسط مرورگرها توسط یک post-back ساده (مانند لاگین معمولی در صفحات مبتنی بر Razor)، به سمت سرور ارسال نمی‌شود. مرورگرها فقط کوکی‌ها را به صورت خودکار ارسال می‌کنند و نه توکن‌های سفارشی را. بنابراین اگر حتی از این روش JWT در برنامه‌های MVC هم استفاده کنید، مجبور به استفاده‌ی از Ajax خواهید بود تا هدرهای سفارشی را بتوانید به سمت سرور، جهت بررسی و اعتبارسنجی نهایی ارسال کنید. قسمتی از عملیات Ajax هم بررسی شکست عملیات و واکنش نشان دادن به status code دریافتی است.
‫۴ سال و ۵ ماه قبل، شنبه ۶ اردیبهشت ۱۳۹۹، ساعت ۱۵:۲۰
امین مصباحی امین مصباحی
اشتراک‌ها
عرضه‌ی اولین نسخه RC برای SQL Server 2017
  • Linux support for tier-1, mission-critical workloads – SQL Server 2017 support for Linux includes the same high availability solutions on Linux as Windows Server, including Always On availability groups integrated with Linux native clustering solutions like Pacemaker.
  • Graph data processing in SQL Server – With the graph data features available in SQL Server 2017and Azure SQL Database, customers can create nodes and edges, and discover complex and many-to-many relationships.
  • Adaptive query processing – Adaptive query processing is a family of features in SQL Server 2017 that automatically keeps database queries running as efficiently as possible without requiring additional tuning from database administrators. In addition to the capability to adjust batch mode memory grants, the feature set includes batch mode adaptive joins and interleaved execution capabilities.
  • Python integration for advanced analytics – Microsoft Machine Learning Services now brings you the ability to run in-database analytics using Python or R in a parallelized and scalable way. The ability to run advanced analytics in your operational store without ETL means faster time to insights for customers while easy deployment and rich extensibility make it fast to get up and running on the right model. 
عرضه‌ی اولین نسخه RC برای SQL Server 2017
‫۷ سال و ۳ ماه قبل، سه‌شنبه ۲۷ تیر ۱۳۹۶، ساعت ۰۱:۳۸
وحید نصیری وحید نصیری
اشتراک‌ها
بررسی 5 ویژگی جدید Angular v4

- if...else syntax in component HTML templates
- Stand alone animation module
- TypeScript's StrictNullChecks compliancy
- Angular Universal adoption by team to live in core
- Performance boost with FESM

بررسی 5 ویژگی جدید Angular v4
‫۷ سال و ۷ ماه قبل، سه‌شنبه ۲۴ اسفند ۱۳۹۵، ساعت ۰۴:۳۹
سیروان عفیفی سیروان عفیفی
مطالب
React component lifecycle
فرض کنید می‌خواهیم داده‌هایی را از دیتابیس بخوانیم و در نهایت درون UI نمایش دهیم. شاید فکر کنید که متد render مکان مناسبی برای اینکار باشد:
render() {
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(data => this.setState({ users: data }))
        
    return (
        <ul>
            {this.state.users.map(user => <li key={user.id}>{user.name}</li>)}
        </ul>
    );
}

اما قرار دادن فراخوانی AJAX درون متد render ایده‌ی خوبی نیست؛ زیرا متد render نباید side effectی ایجاد کند. هدف متد render همانطور از نامش پیداست، رندر کردن یک کامپوننت است. در نتیجه اینچنین فراخوانی‌هایی باید درون lifecycle events تعریف شوند که در واقع یکسری رخداد هستند و این امکان را در اختیارمان قرار میدهند که بتوانیم کارهایی از این قبیل را در طول چرخه‌ی حیات یک کامپوننت انجام دهیم. در React به فرآیند ایجاد یک کامپوننت و در نهایت render شدن محتوای آن برای اولین بار، mounting گفته میشود. در این فرآیند سه متد نقش دارند:
  • constructor
  • render
  • componentDidMount
سازنده یک کامپوننت زمانی فراخوانی میشود که React نیاز به ایجاد یک وهله از کامپوننت داشته باشد. در اینجا کامپوننت فرصت این را خواهد داشت تا props مورد نیازش را از والدینش دریافت کند، state dataیش را تعریف کند و یا یکسری کارهای آماده‌سازی را انجام دهد. در مرحله‌ی بعدی، متد render فراخوانی خواهد شد. در اینجا کامپوننت، محتوایی را که قرار است به DOM اضافه شود، در اختیار React قرار میدهد. در نهایت متد componentDidMount فراخوانی خواهد شد و به این معنا است که محتوا، به DOM اضافه شده‌است. در نتیجه متد componentDidMount محل مناسبی برای قرار دادن مثال ابتدای مطلب میباشد. به عنوان مثال در کد زیر هر بار که checkbox را فعال میکنیم، یک وهله از کامپوننت ایجاد خواهد شد. یعنی در واقع هر بار از فاز mounting عبور خواهد کرد.

  

//App.js
import React, { Component } from 'react';
import { Users } from "./Users";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toggle: false
    };
  }

  handleChange = () => {
    this.setState({ toggle: !this.state.toggle });
  }

  render() {
    return <div className="container text-center">
      <div className="row p-2">
        <div className="form-check">
          <input type="checkbox" className="form-check-input"
            checked={this.state.toggle}
            onChange={this.handleChange} />
          <label className="form-check-label">Toggle</label>
        </div>
        <div className="row p-2">
          {this.state.toggle && <Users />}
        </div>
      </div>
    </div>
  }
}

//Users
import React, { Component } from 'react';

export class Users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: []
        }
    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(data => {
                this.setState({ users: data });
                console.log(data)
            })
    }


    render() {
        return (
            <div className="bg-info text-white p-2">
                {this.state.users &&
                    <p>{JSON.stringify(this.state.users, null, 2)}</p>
                }
            </div>
        );
    }
}

Update phase
فرآیند پاسخگویی به تغییرات و طی شدن reconciliation،  به عنوان update phase شناخته میشود. در این فاز متد render جهت دریافت محتوا از کامپوننت، فراخوانی خواهد شد و سپس متد componentDidUpdate بعد از آن فراخوانی میشود:
import React, { Component } from 'react';

export class Users extends Component {
    constructor(props) {
        // as before
    }

    componentDidMount() {
        // as before
    }

    componentDidUpdate() {
        console.log("componentDidUpdate Users Component");
    }

    render() {
        // as before
    }
}
بعد از render اولیه کامپوننت، هر درخواست فراخوانی متد render بعد از آن، منجر به فراخوانی متد componentDidUpdate خواهد شد. 

Unmounting phase
در این فاز متد componentWillUnmount زمانی فراخوانی خواهد شد که کامپوننت در حال حذف از DOM است. طبیعتاً این متد میتواند محل خوبی برای آزاد کردن منابع، بستن اتصالات شبکه و یا متوقف کردن درخواست‌های asynchronous باشد؛ برای نمونه در مثال قبل در حین غیرفعال کردن checkbox فراخوانی خواهد شد:
import React, { Component } from 'react';

export class Users extends Component {
    constructor(props) {
        // as before
    }

    componentDidMount() {
        // as before
    }

    componentDidUpdate() {
        console.log("componentDidUpdate Users Component");
    }

    componentWillUnmount() {
        console.log("componentWillUnmount Users Component");
    }

    render() {
        // as before
    }
}


Effect Hook
چرخه‌ی فوق فقط مختص به کامپوننت‌هایی است که به صورت کلاس تعریف شده‌اند. کامپوننت‌هایی که به صورت تابع هستند، نمیتوانند به روش فوق باشند. با استفاده از effect hook میتوانیم مشابه متدهای componentDidMount, componentDidUpdate, componentWillUnmount را پیاده‌سازی کنیم:
import React, { useState, useEffect } from 'react';

export const Users = () => {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        console.log("Same as componentDidMount")
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(data => {
                setUsers({ users: data });
            })
    }, []);

    useEffect(() => {
        console.log("Same as componentDidUpdate")
    });

    useEffect(() => {
        return () => {
            console.log("Same as componentWillUnmount")
        }
    }, []);

    return (
        <div className="bg-info text-white p-2">
            {users &&
                <p>{JSON.stringify(users, null, 2)}</p>
            }
        </div>
    );
}

‫۵ سال قبل، دوشنبه ۱۵ مهر ۱۳۹۸، ساعت ۱۱:۳۵