نوشته های Amir Farahbakhsh

19. پروژه دوم : سایت نظرسنجی

Amir Farahbakhsh — Wed, 07 Sep 2022 18:21:01 +0430

قرار نبود این بخش رو بنویسم. ولی چون خیلی اذیتم کرد، لازم دونستم دربارش مطلبی بذارم.فایل .env رو قبلا اشاره کرده بودیم که برای یکسری تنظیمات اصلی استفاده میشه. ما فعلا فقط پورت مورد استفاده رو ذخیره کردیم اونجا. APP_PORT = 5000نکته مهم : در اخر سطرهای این فایل از سمی کالون استفاده نکنید که اسیر می شید. این عادت سمی کالون گذاشتم رو ما از زبان های خانواده سی به ارث بردیم و ترکش سخته.فایل gitignore برای این هست که نشون بده کدوم فایل ها رو در هنگام push کردن به github ارسال نکنه. حتما باید پوشه node_module رو قرار بدید در این فایل ، وگرنه برای هربار push کردن لازمه کل ماژول ها هم ارسال بشه که حجم رو الکی می بره بالا. در واقع با وجود فایل package.json هر کسی بخواد از پروژه استفاده کنه به راحتی با استفاده از npm ماژول های موردنظر رو ذخیره میکنه.ما اولین صفحه html رو هم داخل پوشه views اضافه کردیم و با اضافه کردن خط زیر در فایل index.js(app) میتونیم به درخواست root پاسخ دادیم و فایل html رو برای مرورگر ارسال کردیم://Routing app.get('/' , (req,res) => { res.sendFile(path.join(__dirname,'views/HomePage.html')); })

پروژه دوم : سایت نظرسنجی

Amir Farahbakhsh — Thu, 01 Sep 2022 19:54:54 +0430

باز هم در کار ما تاخیر افتاد! زندگی کارمندی اونم وقتی توی صنعت مشغول هستی همین جوریه که یهو میری تو دل کار و میای بیرون می بینی دو هفته است زندگی نکردی. سلام. بعد از زخمه زدن به بخش های مختلف ، با دانشی که الان به دست آوردم ، میخوام اولین پروژه تقریبا واقعی رو کدنویسی کنم و اگر بتونم توی جایی که کار میکنم ازش استفاده کنم. هدف طراحی یک سایتی هست به منظور نظرسنجی درباره بخش های مختلف شرکت ، همینطور پیام به مدیریت ، انتقادات و پیشنهادات و ... قاعدتا نیاز به دو بخش مدیریت و کاربران دارن. کاربران در نظرسنجی ها شرکت میکنن و مدیریت به داده های نظرسنجی و نمودارها و نتایج به دست اومده دسترسی دارد. قبل از هر چیزی من ساختار پروژه ای که دارم رو درست کردم.پروژه رو هم توی گیت هاب آپلود کردم که هر نتیجه نهایی هر بخش رو می تونید اونجا هم کلون و استفاده نمایید. https://github.com/AmirFrb/Survey ساختار پروژه به این صورت هست که در عکس زیر مشاهده می کنید، یه تعدادی از پوشه ها خالی هستند و به وقتش کدهای مربوطه رو می نویسم. ولی به صورت پراکنده در روزهای قبل باهاشون کار کردیم( مسیر کار با routeها).در حال حاضر تنها فایل server.js و index.js(app) محتویاتی دارند که فقط جهت ایجاد یک وب سرور روی پورت 5000 استفاده می شوند. ( از dotenv هم برای ایجاد کانفیک های پروژه استفاده شده ) index.js (app)const express = require('express'); const app = express(); module.exports = () => { const port = process.env.APP_PORT; app.listen(port , () => { console.log('app running on 5000') })}server.js : const startApp = require('./app') startApp();برای ایجاد پروژه هم نیاز بود در ابتدا این ماژول ها رو نصب کنیدnpm init -ynpm i -s express, mysql2 , body-parser, express-session, dotenvو سپس ایجاد فایل های Server.js , .env و index.js در مسیر app

17. مدیریت پکیج ها در Node.js

Amir Farahbakhsh — Sun, 07 Aug 2022 12:59:56 +0430

در نوشته های قبلی با ماژول ها و کامپوننت ها آشنا شدیم و گفتیم:ماژول : یک فایل JS که شامل تعدادی تابع می باشد.کامپوننت : هر تابع داخل ماژول یک کامپوننت می باشد.پکیج : به مجموعه ای از یک یا چند ماژول ها که کار به خصوصی رو انجام می دهند یک پکیج گفته می شود.توضیح کامل تر و دقیق تر در لینک زیر: https://docs.npmjs.com/about-packages-and-modules در واقع پکیج یک دایرکتوری ، شامل یک یا تعدادی ماژول می باشد ، به همراه یک فایل Package.JSON. یکی از مشخصه های اصلی پکیج همین فایل Package.json هست. اما در مقابل ماژول یک فایل JS مجزا می باشد که می تواند در سایر ماژول ها require شود و مورد استفاده قرار گیرد.نکته ای درباره require کردن ماژول : اگر ماژول را در پوشته node_modules قرار دهید موقع require کردن کافیه فقط اسم فایل رو ذکر کنیدvar req = require('request')اما اگر در مسیر دیگری قرار دارد باید مسیر را نیز ذکر کنید:var req = require('./request')در طول پروژه شما نیاز به استفاده از پکیج های متنوعی خواهید داشت. در هنگام نصب node.js برنامه node.js package manager نیز نصب شده است (یا همون NPM) که برای نصب ، حذف ، اپدیت و کلا مدیریت پکیج های برنامه ازش استفاده خواهیم کرد. قبلا هم در همین آموزش ها با دستوراتی مثل npm install mysqlبرخورد کرده بودیم که برای نصب پکیج mysql استفاده می شد. اما لازم هست کمی توی مبحث مدیریت پکیج ها عمیق تر شویم. نصب پکیج ها :فرض بفرمایید در برنامه ی خود نیاز به استفاده از یک پکیج داریم. بعد از پیدا کردن اسم پکیج با دستوری که قبلا هم نیز با آن مواجه شده ایم ، برنامه را نصب میکنیم:npm install mysqlبا اجرای این کد ، فایل های مربوط به پکیج ، دانلود شده و در پوشه node_modules ذخیره می شود و شما قادر خواهید بود از این پس با require کردن پکیج مورد نظر ، از امکانات آن استفاده کنید. اگر دستور بالا را در هنگام نصب اجرا کنید ، پکیج نصب خواهد شد ، اما اطلاعات آن در فایل package.json برنامه شما ثبت نخواهد شد. کاربرد اصلی این فایل چیست؟ به این موضوع در ادامه پرداخته خواهد شد. برای ثبت اطلاعات پکیج نصب شده در فایل package.json باید در هنگام نصب از یکی از دستورات زیر استفاده کنید:npm install mysql --savenpm install mysql --save -devدستور اول برای پکیج هایی که در حالت production مورد نیاز می باشند.دستور دوم فقط برای پکیج هایی که در زمان develop به آن ها نیاز خواهیم داشت.نکته : ممکن است اگر برای اولین بار از دستور save استفاده میکنید ، با خطایی مبتنی بر عدم وجود فایل package.json مواجه شوید ، لازم است قبل از استفاده از دستور save با دستور زیر فایل package.json را ایجاد کنید:npm initوقتی در هنگام نصب پکیج از دستور save استفاده کنید ، فایل package.json به شکل زیر تغییر شکل خواهد داد:همانطور که مشاهده می کنید ، در بخش dependencies تمام پکیج های مورد استفاده به همراه ورژن آن ها در این فایل ثبت شده است. اما کاربرد این فایل چیست؟وقتی شما قصد دارید برنامه خود را به سرور دیگری منتقل کنید ، نیازی به انتقال پوشه node_modules ندارید( این پوشه شامل تعداد زیادی پکیج می باشد و حجم بالایی دارد). در عوض فقط کافی است فایل package.json را به سرور منتقل کنید و سپس با استفاده از دستور npm install ، تمام پکیج های موردنیاز ثبت شده در فایل package.json با ورژن مناسب ذکر شده نصب خواهند شد. همچنین در صورت نیاز با دستور npm update قادر به اپدیت پکیج ها خواهید بود. شاید سوالی پیش بیاید که ما فقط چهار پکیج نصب کرده ایم ، اما چرا پوشه node_module بیش از چهار پوشه دارد و اینقدر شلوغ است؟ وقتی شما برای مثال پکیج mysql را نصب میکنید ، خود این پکیج (مانند برنامه شما) یک فایل package.json دارد. که در آن ذکر شده است پکیج mysql چه وابستگی هایی دارد و برای کار کردن نیاز به کدام پکیج ها دارد. که نیاز می باشد آن پکیج ها نیز همراه mysql نصب شوند. تمام وابستگی های mysql نیز به نوبه خود دارای فایل package.json و وابستگی های خاص خود می باشند.به این ترتیب ساختار وابستگی های پکیج ها به هم به صورت درختواره ای می باشد و می توانید با دستور npm list --depth =2 این ساختار را تا عمق دو یا بیشتر مشاهده کنید.نکته آخر اینکه در فایل package.json در ابتدای ورژن ها عبارت ^ ذکر شده است که به معنی این است که : در مجاز به اپدیت patch و minor ورژن ها می باشد. اگر به جای آن از علامت ~ استفاده شود تنها patch را اپدیت می کند.

16. ماژول ها در Node.js

Amir Farahbakhsh — Sat, 06 Aug 2022 22:57:11 +0430

بعد از یه غیبت دو هفته ای برگشتم. بی مقدمه : به هر فایلی که در Node.js داریم یک ماژول گفته میشه.دو مدل ماژول داریم: User - DefineBuilt - Inممکنه شما یک فایل به اسم Data.js درست کنید ، که یک ماژول به حساب میاد. یا از ماژول های نوشته شده توسط خود Node.js استفاده کنید. اگر خواستید از ماژول های Built - In استفاده کنید ، کافیه به شکل زیر اون رو به فایلتون اضافه کنید:const fs = require ( ' fs ' );پ.ن : fs از ماژول های Node.js می باشد.اما اگر خواستید از ماژول هایی که خودتون نوشتید استفاده کنید ، باید به یکی از دو روش زیر اقدام کنید:روش اول : // data.js const person = [ name = 'Amir', age = '28', gender = 'male' ] module.exports = person;نحوه export کردن در خط سوم کد مشخص می باشد. به این معنی که شی یا تابع export شده در سایر ماژول ها قابل دسترسی خواهد بود. به این صورت می تونید توی ماژول های دیگه ازش استفاده کنیم:const user = require('./data'); console.log(user);ذکر دوتا نکته رو لازم می دونیم.نکته یک : اول چیزی که توی پرانتز جلوی require می نویسید در واقع آدرس نسبی همون ماژول تون هست( البته نیاز به پسوند .js ندارد. نکته دو : محتویات user ، شامل همان چیزی می باشد که در ماژول Data ، به عنوان خروجی Export شده است که میتونه یک شی یا تابع باشد.روش دوم :exports.person = [ nam = 'Amir', age = '28', gender = 'male' ]در روش دیگه از module.exports در انتهای ماژول استفاده نمی کنید و همون موقع تعریف کردن شی یا تابع با استفاده به کلمه کلیدی exports مشخص میکنید که این شی یا تابع در دسترس سایر ماژول ها نیز قرار دارد. به این طریق ازش استفاده می کنید:const user = require('./data'); console.log(user);دقیقا به همون شکل :)))اماااااااااااا یه فرقی داره اینجا ، قبلش یک چیزی بگم درباره تفاوت روش اول و دوم بعد میگیم این user که در روش دوم داریم چه فرقی با user در روش اول دارد.در روش اول از هر ماژول فقط یک شی یا تابع را می توانید export کنید ، اما در روش دوم می توانید تعدادی شی یا تابع را export کنید.درباره این قضیه یه مثال میزنم که موضوع شفاف بشه. اما فعلا بریم سراغ فرق اون دوتا user.ببینید در روش اول ، خب فقط یک شی رو میتونیم export کنیم. پس وقتی در یک فایل دیگه اون ماژول رو require میکنیم ، کاملا مشخص هست که user شامل کدوم شی یا تابع می شه . چون فقط یک شی export شده که در مثال ما person هست. اما در روش دوم شما ممکنه چندین شی رو export کنید. در این user یک شی شامل تمام اشیا و توابعی هست که در ماژول شما export شدن. برای درک بهتر موضوع فرض کنید در ماژول دو شی داریم و قصد داریم هر دو رو export کنیم( پس مجبوریم از روش دوم استفاده کنیم)//data.js exports.person = [ nam = 'Amir', age = '28', gender = 'male' ] exports.phone = [ brand = 'apple', model = '13 pro max' ]در ماژول دیگه به همون صورتی که گفتیم این ماژول date رو require می کنیم:const user = require('./data'); console.log(user);اگر برنامه رو ران کنید خروجی به این صورت هست:{ person: [ 'Amir', '28', 'male' ], phone: [ 'apple', '13 pro max' ] }مشاهده میکنید که user در اینجا یک شی هست خودش که شامل تمام موارد export شده می باشد. حالا اگر شما قصد دارید فقط یکی از شی ها رو require کنید توی فایلتون به این صورت:const user = require('./data').person; console.log(user);یا اگر کل ماژول data رو require کردید و در جای خاص نیاز به دسترسی به یکی از اشیا بود به صورت زیر :const user = require('./data'); console.log(user.person); console.log(user.phone);خسته نباشید.

15. استفاده از template engineها در Express

Amir Farahbakhsh — Fri, 22 Jul 2022 20:12:28 +0430

ما قبلا یک فایل html درست کردیم در مسیر view که شامل یک فرم بود. Template Engine ها به ما این امکان رو میدن که یک صفحه داینامیک درست کنیم. اینجا با pug کار میکنیم. ابتدا به این طریق نصبش میکنیم:npm i -s pugحالا توی برنامه pug رو به عنوان template engine به اکسپرس معرفی می کنیم. (توی فایل app.js)app.set ('views','./views'); app.set ('view engine','pug');به این ترتیب امکان استفاده از pug فراهم میشه. کافیه یک فایل template توی پوشه views درست کنید. (به اسم errors) ساختار پیش فرض فایل به این صورت است:doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Document bodyساختارش ما رو یاد html میندازه ولی خب اون نیست و فرق داره باهاش. برای استفاده کردن از این فایلی که داریم مثلا توی میان افزار error که دیروز ساختیم میام و به عنوان پاسخ این فایل pug رو میفرستیم. فقط توجه کنید مثل فایل html لاگین نمیتونیم اون رو sendfile کنیم. چون اگر فایل pug رو بفرستیم به مرورگر متوجه اش نمیشه . پس باید این فایل pug رو رندر کنیم و ازش یه html بسازیم بعد اماده ارسال به مرورگر میشه. پس میان افزار error به شکل زیر میشه:app.use((error,req,res,next)=>{ res.render('error'); console.log('Error code:' + error.message); next(); })برنامه رو اجرا کنید ، اگر یادتون باشه ما خودمون توی مسیر /main/signin یک خطا ایجاد کرده بودیم. و الان اگر خطایی رخ بده توی برنامه ( مثلا به همین مسیر signin که برید) میان افزار error اجرا خواهد شد و صفحه رندر شده error.pug را به شما نمایش خواهد داد ، البته الان چیزی داخلش نیست و فقط tilte صفحه نوشته شده Document. حالا اصلا به چند درد میخوره استفاده از این temp. engin ها. گفتیم که امکان ایجاد صفحات داینامیک رو فراهم میکنند برامون. به چه صورت؟اونجایی که درخواست رندر کردن error رو دادیم ، یک متغییر هم میفرستیم براش به این شکل:res.render('error' , {message:'There is an error on this page'});حالا تو فایل pug میتونید از این متغییر استفاده کنید. شما حتی می تونید شی یا ارایه ای از متغییرها هم به فایل template ارسال کنید. body h1= messageتوی قسمت body ازش استفاده میکنیم. توجه کنید حتما = باید به h1 چسبیده باشه. حالا صفحه Error داریم و کدی که دیروز نوشتیم رو کامل کردیم امروز.

14. مدیریت خطاها در Express

Amir Farahbakhsh — Fri, 22 Jul 2022 02:30:21 +0430

در طول برنامه ای که می نویسیم ، احتمال داره خطاهای ناخواسته ای رخ بده ، مثلا خطاهایی مربوط به دیتاهای ورودی یا اشکال در ارتباط با دیتابیس و ...امروز ( روز چهاردهم) میخوایم یک میان افزار بنویسیم که همه خطاها رو دریافت و هندل کنه. اون رو به صورت یک میان افزار تعریف میکنیم ، با این تفاوت که چهار متغییر ورودی داره( خطا رو هم به عنوان متغییر دریافت می کنه)app.use((error,req,res,next)=>{ console.log('Error code:' + error.message); next(); })من این کد رو در فایل app.js نوشتم در کنار بقیه میان افزارها تعریف کردم.حالا برای تست برنامه میرم توی فایل mainRouter و در مسیر زیر یک خطا ایجاد میکنم:mainRouter.get('/signin',(req,res)=>{ throw new Error('sign in error'); console.log(__dirname); res.sendFile(path.resolve('./views/login.html')); });برای اینکه در صورت وقوع خطا بتونیم برنامه رو پاس بدیم به error handler یه تغییری در این مسیر باید بدیم به صورت زیر:mainRouter.get('/signin',(req,res,next)=>{ try{ throw new Error('sign in error'); console.log(__dirname); res.sendFile(path.resolve('./views/login.html')); } catch(error){ next(error) }اون بخشی از برنامه رو که احتمال میدیم خطایی ایجاد کنه در داخل بلاک try-catch قرار میدهیم. اگر بخش try با خطا اجرا شد برنامه کراش نمیشود و بخش catch اجرا می شود که در اینجا نیز ما برنامه رو مستقیما به میان افزار خطاها ارسال میکنیم. در حال حاضر فقط یک کنسول لاگ نمایش میدهیم. در روز بعدی یک صفحه مخصوص خطاها ایجاد می کنیم تا در صورت بروز خطا آن صفحه به نمایش در بیاید.

13. کار با Routerها در Express

Amir Farahbakhsh — Wed, 20 Jul 2022 20:19:25 +0430

در روز های قبل ادرس دهی صفحات مختلف رو توی همون فایل App انجام دادیم. همین الانشم خیلی هرج و مرج ایجاد شده توی اون فایل ، حالا فرض کنید قرار باشه کدهای بیشتری توی این فایل نوشته بشه. با توجه به اولین اصل از اصولsolid که میشه ( single-responsibility principle) ما یک پوشه خاص برای مسیردهی به برنامه درست میکنیم. این کار دوتا فایده داره:اولا : کلا بحث مسیردهی از برنامه اصلی جدا میشه.دوما : خیلی راحت میتونید مسیر ها رو دسته بندی کنید و مسیرهای مربوط به هر بخش رو توی یک فایل جداگانه تعریف کنید.این چیزی هست که در روزهای قبل درست کردیم.ابتدا یک پوشته به اسم Routes درست میکنیم و در اون فایل mainRouter.js رو می سازیم و کل مسیرهامون از فایل اصلی میارم به این فایل اضافه میکنیم. نکته ای که داره فقط طریقه معرفی این Router به فایل اصلی می باشد که خیلی شبیه Middelware ها می باشد.const mainRouter = require('./Routes/mainRouter'); app.use('/main',mainRouter);یه نکته جانبی هم بگیم: قبلا از path.join استفاده کردیم که می اومد چند تیکه متن رو به هم وصل میکرد و یک ادرس درست میکرد. ممکنه لازم باشه از path.resolve هم استفاده کنید. به این صورت هست که یک قسمت از آدرس مورد نظر رو بهش میدید و خودش با اضافه کردن پوشه های بالاسری ، ادرس Absolute رو برامون می سازه.

12. کار با Middleware در Node.js

Amir Farahbakhsh — Mon, 18 Jul 2022 21:46:10 +0430

اگر به روز هشتم نگاهی بندازید ، می بینید که درآخر ما به برنامه ای رسیدیم که Route ها رو مدیریت می کرد. یعنی با متد ( ) app.get براساس Route دریافتی و همچنین Request دریافت شده یک Response رو به مرورگر بر میگردوند.گاهی نیاز هست عملیاتی مابین دریافت req از مرورگر و ارسال res به اون انجام شود. برای مثال ثبت اطلاعاتی در پایگاه داده ، اعتبارسنجی تقاضا ، یا بررسی دسترسی کاربر به تقاضایی که داره. تمام کارهایی که قرار هست در این بین و قبل ارسال پاسخ انجام بشه ، توسط میان افزارها یا Middleware ها اجرا خواهد شد.یک فایل درست میکنیم به اسم Middleware.js و در اینجا کاری که میخوایم انجام بدیم فقط log کردن .... در کنسول می باشد ، پس محتویات فایلمون به صورت زیر می باشد:const logger = ( req , res , next ) => { console.log( 'Path is :'+ req.path); next( ); } module.exports = {logger}یک تابع معمولی هست ، که به جای log کردن ممکنه هر کار دیگه ای انجام بده. یک تابع next استفاده شده که به معنی تمام شدن کار middleware هست و برنامه رو به قسمت بعدی می فرسته. قسمت بعدی می تونه یک middleware دیگه باشه ، ادامه ی برنامه اصلی. برای استفاده از این middleware در برنامه اصلی باید به این طریق به برنامه معرفی بشه:const {logger} = require('./middleware'); app.use(logger);یادته برای ارتباط بین React و Express اومدیم از یه چیزی به اسم cors استفاده کردیم. دقیقا اون رو هم به همین صورت تعریف کردیم( پس اونم یه middleware بوده). با تعریفی که انجام دادیم با هر تقاضایی که وارد وب سرویس میشه ، قبل از ارسال پاسخ میاد و میان افزار logger رو اجرا میکنه. برای اینکه یکم بیشتر با middleware ها کار کنیم ، اول بیایم و یک پیش زمینه هایی درست کنیم و بعد کار رو ادامه ، یک فولدر به اسم views درست کنید و فایل login.html رو درست کنید. توی این فایل یک فرم ساده درست میکنیم: Login

و یک تغییری هم توی مسیر signin میدیم که به جای یه تکس ، فایل login.html رو به مرورگر بفرسته:app.get('/signin',( req , res ) => { res.sendFile (path.join (__dirname,'/views/login.html'))});تا اینجای کار اگر ادرس signin رو بزنید توی مرورگر فرم رو بهتون نشون میده اما اگر فرم رو سابمیت کنید ، خطا میگیرید چون برای اون مسیر پاسخی مشخص نکردید.app.post('/api/views/login.html',(req,res)=>{res.redirect('/signin');});توجه کنید که این خط پاسخ به تقاضای post هست که فرم میفرسته و فقط در صورتی هست که فرم سابمیت میشه. چون خودمون پاسخ فرم رو به صورت post ارسال بشه. در اینجا لازم هست کمی با بخش body تقاضاهایی که به سمت وب سرویس ارسال میشه هم آشنا بشیم. برای استفاده بهتر از اون ها ابتدا ماژول زیر رو نصب میکنیم:npm i -s body-parser app.use(bodyParse.urlencoded({extended:false}));حالا می تونید توی کدتون به req.body دسترسی داشتید ، مثلا:app.post('/api/views/login.html',(req,res)=>{res.send(req.body)});نکته ای که هست شما الان می تونید توی middleware که نوشتید به req.body هم دسترسی داشته باشید( به شرطی که در بخش app.use حتما logger رو بعد از body-parser نوشته باشید.const logger = (req,res,next) =>{ console.log('Username is :'+ req.body.user); console.log('Password is :'+ req.body.user); next(); } module.exports={logger};

11. دریافت اطلاعات از Form و ذخیره سازی در SQL

Amir Farahbakhsh — Wed, 13 Jul 2022 19:20:27 +0430

دیروز اومدیم و یه متغییر تعریف کردیم و اون ها رو به دیتابیس وارد کردیم. که برای تمرین و ساده شدن کار بود و عملا کاربردی نیست. حالا میخوایم اطلاعات رو از یک فرم دریافت کنیم و سپس وارد دیتابیس کنیم.اینجا نیاز به Middleware ها داریم ، پس مجبور هستید یه مطالعه ای روی روز دوازدهم داشته باشید و بعد این متن رو بخونید ، اکثر کارها اونجا انجام میشه. https://virgool.io/@AmirFrb/%D8%B1%D9%88%D8%B2-%D8%AF%D9%88%D8%A7%D8%B2%D8%AF%D9%87%D9%85-middleware-%D8%AF%D8%B1-nodejs-zbaghjbkxgjo خب ، سلام دوباره . امیدوارم مطالب روز دوازدهم رو خونده باشید. احتمالا متوجه شدید که با کارهای انجام شده در اونجا تقریبا کار تمام هست. فقط کافیه ارتباطی داشته باشیم بین اون فایل sql که در روز 10 ام نوشتیم با برنامه ای که توی روز 12 ام نوشتیم و تونستیم با استفاده از req.body و میان افزار body-parser به اطلاعات فرم ها دست پیدا کنیم.میخوایم از فایل sql.js به صورت یک تابع در فایل app.js استفاده کنیم و اطلاعات فرم رو به صورت متغییر ارسال کنیم به سمت sql.js . پس ابتدا فایل sql.js رو معرفی کنید به برنامه app.js:const sql=require('./sql');بعد داخل router مربوط به signin میایم و sql رو فراخوانی میکنیم:app.post('/api/views/login.html',(req,res)=>{ res.send(req.body); sql(req.body.user,req.body.pass); } );پس نیاز هست تغییری توی فایل sql هم بدیم. اولا اینکه متغییر ورودی براش تعریف کنیم و دوما اینکه از اون متغییرها به عنوان value برای query دستور insert استفاده کنیم

10. استفاده از MySql در Node.JS

Amir Farahbakhsh — Tue, 12 Jul 2022 22:02:33 +0430

خب بنظرم یکم گنگ بود دو روز قبلی و خیلی یهویی از React وارد Node شدیم. حالا چند قدمی میریم عقب تر ، اگر حس کردید دو روز قبلی رو کامل متوجه نشدید ، اشکالی نداری بعد از خوندن این درس میتونید اونا رو مجددا بخونید.اول کار که با Express یه پروژه Node ساختیم ، یک فایل به اسم App.js درست کردیم و از پورت 8000.خب امروز میخوایم بیایم و یک دیتابیس درست کنیم و باهاش ارتباط بگیریم. نمیدونم چرا این آموزش های توی اینترنت اینقدر قضیه رو پیچیده میکنن! مطلب به این سادگی رو .قدم اول : نصب mysql در ترمینال با دستور زیر mysql رو نصب کنید:(توجه کنید این کارهای توی API هست)npm install mysqlقدم دوم : تعریف کردن Connection با دیتابیس var mysql = require('mysql'); var con = mysql.createConnection({ host: 'localhost', user: 'root', password: '123456', database: 'clients' })گفتم ارتباط با دیتابیس؟ ولی ما که هنوز دیتابیسی نساختیم :))) راستش قرار نیست در این باره زیاد بحث کنم ، فقط محض کامل بود سریع میگم و رد میشم ( مشکلی بود دیگه زحمت سرچ در اون زمینه رو باید بکشید)قدم یک و نیم: اول نرم افزار Xampp رو نصب میکنید( یه سرور لوکال هست) . بعد سرویس Apach و MySql رو ران میکنید و بعد وارد Admin بخش mySql میشید( که در واقع برنامه phpmyadmin هست).یک Table می سازم به اسم siteusers با چهارتا ستون دلخواهبعد میرم تو بخش UserAccount و رمز Root رو عوض میکنیم. یه نکته اینکه رمز رو که عوض کردید بعد باید برید توی مسیر نصب phpmyadmin و فایل config رو پیدا کنید و رمز رو توی اون فایل وارد کنید.قدم سوم: برقراری ارتباط با دیتابیس:con.connect(function(err){ if(err) throw err; console.log('Connected!'); })بعد از ران کردن برنامه باید ارتباط به درستی برقرار بشه و مشکلی نداشته باشید.قدم چهارم: حالا نوبت این میشه که عملیات های مورد نظرمون رو در دیتابس انجام بدیم. شامل Insert و Select و... برای اینکار نیاز به Query یا همون دستورالعمل های دیتابیس داریم که چهارتا هستند و تعریفشون میکنیم:var insertSql="INSERT INTO `siteusers`(`Name`, `Email`, `Age`, `Password`) VALUES (?)"قدم پنجم: اجرای Query:const values = [ ['amir' , '12345'] ] con.query( insertSql , values , function ( err , result ) { if ( err ) throw err ; console.log ( result ); })حالا ما اینجا به صورت دستی اطلاعات رو وارد کردیم ، اما بعدا این اطلاعات رو از فرمی جایی دریافت میکنیم. با ران کردن برنامه اطلاعات متغییر Var توی دیتابیس ذخیره میشه و نتیجه برگشتی از دیتابیس هم برامون به نمایش گذاشته میشه.خب Query بعدی که Select باشه رو هم انتخاب میکنیم که کل دیتابیس رو بهمون نشون بده.var selectSql="SELECT `Name`, `Email`, `Age`, `Password` FROM `siteusers` WHERE 1" con.query(insertSql,values,function(err,result){ if(err) throw err; console.log(result); con.query(selectSql,function(err,result){ if(err) throw err; console.log(result); }) })اجرای کوئیری Select رو داخل کال بک نوشتم که دیگه وقتی بدون خطا کار Insert رو انجام داد بیاد سراغ نمایش دیتابیس.خب خسته نباشید ، با موفقیت اطلاعات رو توی دیتابیس ذخیره کردید و نمایش هم دادیم. تو قسمت بعدی بریم یک فرم درست کنیم و اطلاعات رو از مرورگر Post کنیم به API و از اونجا هم به دیتابیس.

9. ارتباط برنامه React با Express

Amir Farahbakhsh — Sat, 09 Jul 2022 12:33:53 +0430

یه قضیه رو روشن کنیم اینجا. شما وقتی با npm create react app یک پروژه می سازید ، یک سری فایل و این ها درست میکنه. که درواقع Front-end پروژتون هست. برنامه Reactتون هست.و هنگامی که فایل های پروژه Express رو درست میکنید در واقع دارید Back-end رو می سازید. حالا امروز میخوایم با هم ساختار یک برنامه رو ایجاد کنیم که پروژه Front و Back رو پیکربندی کرده باشه به بدرسته. ابتدا پروژه React رو در پوشه Client می سازیم.پروژه Express رو هم در پوشه ی در کنارش به اسم API می سازیم. به صورتی که دیروز انجام دادم: https://virgool.io/ReactForSemiBeginner/%D8%B1%D9%88%D8%B2-%D9%87%D8%B4%D8%AA%D9%85-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D8%B3%D8%B1%D9%88%D8%B1-%D8%A8%D8%A7-express-orbyaxxlxkoi میریم سمت Client وارد فایل app بشیم . اول یک State تعریف میکنیم (برای ذخیره اطلاعات دریافتی از Api )const [ data , setData ] = useState(" ");حالا با استفاده از UseEffect تعریف میکنیم که در هربار رندر شدن صفحه ، اطلاعات رو از API دریافت کنه.useEffect(() => { fetch("http://localhost:8000/signin") .then((res) => res.text()) .then((data) => setData(data)); } , [ ] ); return (

{ data }

)در آخر هم گفتیم اطلاعات دریافت شده از API رو داخل تگ P نشون بده به کاربر.یه نکته میمونه که زیاد وارد جزییاتش نمیشم. برای اینکه از پورت 3000 بتونیم به پورت 9000 دسترسی پیدا کنیم یه ماژولی باید نصب کنید به اسم cors (داحل API) و در فایل app.js هم معرفیش کنی:var cors = require ( " cors " ); app.use ( cors( ) );حالا می تونید برنامه React رو اجرا کنید و با وارد کردن آدرس signin/ نتیجه رو مشاهده بفرمایید.

8. راه اندازی سرور با Express

Amir Farahbakhsh — Tue, 05 Jul 2022 19:43:30 +0430

خیلی یهویی تصمیم گرفتم که از Front-end به برنامه نویسی Back-end سرکی بکشم. چون پروژه بعدی که میخوام بنوسیم یک صفحه ثبت نام کاربر هست و برای اون نیاز هست کمی با دیتابیس کار کرده باشیم.اینجا جایی هست که نیاز پیدا میکنیم یک سری کدها رو برای انجام عملیات Back-end بنویسیم. که قراره با استفاده از Node.js و Express.js پیاده سازی کنیم. عملیات نصب اکسپرس رو با دستور زیر انجام میدیم:npm init -y npm i -S expressیک فایل app.js می سازیم و که شامل : const express = require('express'); const app = express( ); app.listen(8000,( )=>{ console.log('server is runing on 8000'); } )حالا با اجرای این فایل با دستور node app.js عبارت ما در کنسول نمایش داده می شود. این ساده ترین برنامه Express هست که در واقع وب سرویس http یا همون http handler هست.فایل app.js رو فقط مخصوص اکسپرس و بخش های مربوط به اکسپرس در نظر میگیریم و با ساخت یک فایل دیگه به اسم server.js سایر کارهای مربوط به سرور رو در اونجا انجام میدیم. پس لازم هست که بتونیم فایل app رو در سایر فایل ها فراخوانی کنیم. پس برای اینکه ExportAble باشه میایم و کد رو به این صورت تغییر میدیم:const express = require('express'); const app = express(); const mainApp = () => { app.listen(8000,()=>{ console.log('server is runing on 8000'); } ) } module.exports = mainApp;برای مثال یک فایل Server.js هم میسازیم و فایل app رو فراخوانی و اجرا می کنیم:const mainApp = require('./app') mainApp();و با اجرای node server.js همان نتیجه قبل حاصل خواهد شد.Routing:تا اینجا برنامه ما هیچ کاری انجام نمیده اما به درستی اجرا شده. در فایل App.js مسیریابی رو به صورت زیر انجام میدهیم:const express = require('express'); const app = express(); app.get('/',(req,res)=>{ res.send('Home page'); } ) const mainApp = ( ) => { app.listen(8000,( )=>{ console.log('server is runing on 8000'); } ) } module.exports = mainApp;حالا با اجرای برنامه و رفتن به مسیر زیر عبارت Home page نمایش داده می شود.http://localhost:8000/به این کاری که کردیم میگن Routing ، حالا میام و یک سری Route دیگه هم براش تعریف میکنیم:const express = require('express'); const app = express(); app.get('/',(req,res)=>{res.send('Home page');}) app.get('/signin',(req,res)=>{res.send('Sign In Page');}) app.get('/signup',(req,res)=>{res.send('Sign Up Page');}) const mainApp = ( ) => { app.listen(8000,( )=>{ console.log('server is runing on 8000'); } ) } module.exports = mainApp;حالا مرورگر ما به آدرس های زیر پاسخی خواهد داد.http://localhost:8000/signuphttp://localhost:8000/signinدریافت اطلاعات به شیوه Get از مرورگر:اطلاعاتی که به صورت get در یک درخواست به سرور ارسال میکنیم از طریق پارامتر req به آن دسترسی خواهیم داشت. app.get('/signup',(req,res)=>{ res.send('Sign Up Page'); var username = req.query.user; var password = req.query.pass; console.log('User:' + username + ' Pass:' + password); })در برنامه ی کاربردی که بعدا می نویسیم اطلاعات رو از یک فرم میگیریم و در یک دیتابیس ذخیره می کنیم. اما الان فقط اطلاعات دریافتی رو در کنسول نشون میدیم. ارسال متغییرها به صورت Get هم به صورت زیر خواهد بود:http://localhost:8000/signup?user=amir&pass=123خب چیزی که از Express یاد گرفتیم امروز شامل:راه اندازی سرورRoutingGet Method

7. پروژه اول : ساخت تایمر (اپیزود سه)

Amir Farahbakhsh — Mon, 04 Jul 2022 15:57:35 +0430

خب توی روز قبلی ، ما برنامه رو نوشتیم و تمام اما ظاهر خوبی برای ارائه نداشت. امروز با اضافه کردن کمی کد CSS صفحه کاربری رو یکم خوشکل تر و قابل استفاده تر میکنیم.اول از همه توضیح بدم چطوری یک فایل CSS رو به پروژمون وصل کنیم. فرض کنید یک فایل به نام app.css ساختید.شما کافیه توی فایل جاواتون این css رو import کنید. مثل کاری که قبلا برای هوک ها میکردیم.import './App.css';داخل فایل css برای سه بخش مختلف که شامل body ، شمارنده و کلیدها بود استایل دهی رو به طریق زیر انجام دادیم:body { background-color: #011A27; }.text { background-color: #063852; color: white; text-align: center; width:70%; position: absolute; top: 30%; left: 15%; font-size: 40px; border-radius: 30px; outline-width:5px; outline-color: #F0810F;}.bg { background-color:#F0810F ; width: 100px; height: 100px; margin: 5px; margin-bottom: 20px; border-color: white; font-weight: bold; font-size: 20px; border-radius: 20px; }که خروجی برنامه با این استایل دهی به صورت زیر میشه:درباره css دیگه من زیاد توضیح نمیدم که هر کدام از این گزاره ها چه کاری انجام میدن ، که با یکم جستجو به مطالب فراوان و کاملی دسترسی خواهید داشت خودتون.الان برنامه به چیزی تبدیل شد که میتونیم ادعا کنیم قابل استفاده توسط کاربر نهایی می باشد.

6. پروژه اول : ساخت تایمر (اپیزود دو)

Amir Farahbakhsh — Sun, 03 Jul 2022 17:40:23 +0430

بازم سلام :) میدونم که همین امروز پست روز پنجم رو گذاشتم و در عرض چند ساعت رسیدم به روز ششم. نگران نباشید با فیلم های کریستوفر نولان روبرو نیستید ، فقط اینکه یک هفته ای مرخصی گرفتم. بله درست حدس زدی من از اون آدمایی هستم که مرخصی میگیرم و می شینم درس میخونم ، به جای سفر رفتن و....خب بریم سر اصل مطلب. ما پروژه رو به 4 فاز تقسیم کردیم. فاز اول ساخت یک تایمر ساده که با اجرا شدن برنامه شروع به شمردن میکنه بود. این چیزی هست که توی روزهای قبل نوشتیمش و کدش رو یادمون هست:import React,{useState,useEffect} from "react" export function Counter( ){ const initialState = 0; const [ counter , setCounter ] = useState (initialState); useEffect( ( ) => { setTimeout(() => {setCounter(counter+1)}, 1000); } , [counter] ) return (

{counter}

); } //20کد شماره 20 چیزی هست که توی روز 5 ام نوشته بودیم و در اون از یک UseEffect برای به روزرسانی State استفاده کردیم. برنامه رو اجرا کنید ، اگر موردی نداشت وارد فاز بعدی می شیم.فاز دو: اضافه کردن دکمه Resetقصد داریم با زدن دکمه ریست ، مقدار counter صفر بشه. خب این بخش هم خیلی راحتته ، کافیه یک دکمه تعریف کنیم و با استفاده از تابع SetCounter مقدار صفر رو به counter بدیم. به این صورت انجام میدیم: (فقط بخش return رو میذارم ، باقی کد مثل کد 20 هست.return (

{counter}

); //21بعد از اجرا کردن می بینیم که نشد آنچه باید می شد. با کلیک کردن روی ریست ، ترتیب نمایش اعداد قاطی میشه و اعداد پرت نشون میده. علت چیه؟علت اینه که شما در هندلر میای مقدار counter رو تغییر میدیم. از طرفی توی هوک UseEffect گفتی هر موقع کانتر تغییر کرد بیا هوک رو اجرا کن و بازم از طرفی قرار بود این اجرای هوک فقط ثانیه ای یک بار رخ بده! حالا یه عامل دیگه فارق از زمان پیدا شده و داره هوک رو اجرا میکنه ! خب انگار به اون سادگی هم که فکر میکردیم نیست این فاز دوم :)))راه حلی که من به ذهنم رسیده اینه : ( شاید شما راه حل های بهتری به ذهنتون برسه ، تمرین جالبی میتونه باشه ، قبل از نگاه کردن به کد من یکم درباره ش فکر کنید)من اومدم یک State دیگه به اسم clockPulse تعریف کردم که هر یک ثانیه مقدارش زیاد میشه( و هیچ چیز دیگه ای هم روش تاثیر نمیذاره) و تغییر مقدار این State رو به عنوان موقعیت خاص هوک UseEffect تعریف کردم. چون مطمئن هستم که هر یک ثانیه اجرا میشه و هیچ چیز دیگه ای روش تاثیر نداره. عملیات خاص هوک همچنان همون تغییر مقدار counter هست. این کار چه فایده ای داره؟با اینکار وقتی ما ریست رو میزنیم و مقدار state رو تغییر میدیم دیگه موجب اجرای ناخواسته ی هوک نمیشه. کد شبیه همچین چیزی خواهد شد:export function Counter(){ const initialState =0; const [ counter , setCounter ] = useState (initialState); const [ clockPulse , setclockPulse] = useState (0); useEffect( ( ) => { setCounter ( counter+1 ) ; } , [ clockPulse ] ); setTimeout ( ( ) => { setclockPulse ( clockPulse + 1 ) }, 1000); return (

{ counter }

); } //22فاز سه و چهار : اضافه کردن دکمه Stop و Startخب الان که خوب فکرشو کردم دیدم فاز سه و چهار عین همدیگه اند. تایمر رو که نوشتیم و تونستیم مقدارش رو هم ریست کنیم. حالا چطور زمان رو متوقف کنیم؟ ( بازم رفتیم سراغ کریستوفر نولان :) من نظرم اینه که یک متغییر تعریف کنم به اسم timmerEnable و داخل هوک UseEffect فقط وقتی کانتر رو اضافه کنم که تایمر فعال بشه. کلید های استاپ و استارت هم فقط مقدار timmerEnable رو تغییر میده به این صورت:var timmerEnable = 1; export function Counter(){ const initialState =0; const [ counter , setCounter ] = useState (initialState); const [ clockPulse , setclockPulse] = useState (0); useEffect( ( ) => { if (timmerEnable == 1) { setCounter(counter+1); } } , [clockPulse]); setTimeout(( ) => {setclockPulse(clockPulse+1)}, 1000); return (

{counter}

); } //23رواله؟دوتا نکته: شما می تونستید به جای اینکه if رو داخل هوک بذارید بیاید و تابع setTimeout رو توی همچین if ای قرار بدید. اما کار جذابی که ما تو فاز قبل کردیم این بود که متغییر زمان رو از متغییر شمارنده جدا کردیم. پس حالا هم بهتره با متغییر زمان مثل خود زمان رفتار کنیم. زمانی که هیچ وقت متوقف نمیشه. ** این بخش توضیح اضافه است ، اگر پیچیده شد براتون رد بشید ازش:البته شاید اینجا اهمیتش رو درک نکنید ، من کاری که کردم اینجا رو الگو برداری کردم از مسایلی که توی مهندسی یاد گرفتیم. ببینید توی کامپیوترها یک سیگنال پالس ساعت وجود داره که مثل نبض میزنه ( یا مثل یک طبل بزرگ با ریتم ثابت) . این سیگنال فرکانس ثابت هست که میاد همه چیز رو مرتب میکنه و اصلا خبر نداره کیا دارن از سیگنالش استفاده میکنن و شایدم کسی نکنه اصلا ولی ایشون با ریتم ثابت طبل خودشو میزنه. منم سیگنال clockpulse رو از همچین چیزی الگو برداری کردم. فردا روز شاید شما توی برنامتون از این پالس ده جای دیگه هم استفاده کرده بودید ، پس معقول تر اینه که این پالس همیشه فعال باشه و timmerEnable رو داخل همون هوک چک کنیم.نکته بعد اینکه ، توجه داشته باشید که متغییر timmerEnable باید به صورت Global تعریف بشه وگرنه اگر داخل بدنه ی کامپوننت تعریف بشه با هر بار Render دوباره مقدارش ریست میشه و عملکرد مورد انتظار ما رو نخواهد داشت( چون این متغییر فقط باید توسط کلیدهای استاپ و استارت تغییر بشه)خب کار ما به عنوان برنامه نویس تمام شد ، همه جنبه ها هم در نظر گرفتیم و تاماااام. این هم خروجی برنامه::| :|واقعا اینو میشه منتشر کرد؟ میشه فروختش یا دست کاربر داد؟ رسیدیم به همون بحث برنامه نویس و توسعه دهنده. برنامه ما به درستی کار میده ، اما زشته :) توی اپیزود آخر ، برنامه رو آماده ی انتشار می کنیم.

5. پروژه اول : ساخت تایمر (اپیزود یک)

Amir Farahbakhsh — Sun, 03 Jul 2022 13:00:41 +0430

خب تا الان مطالب خوبی یاد گرفتیم درباره ری اکت و به نظرم وقتش هست تا اولین پروژه واقعیمون رو استارت کنیم تا با چالش هایی که تا الان کاری نداشتیم بهشون رو به رو بشیم. تا حالا فقط برنامه نویس بودید. الان وقت اینه مثل یک توسعه دهنده رفتار کنید.یک Programmer فقط به کد کار داره و با توابع سر و کله میزنه. اما یک Developer به شکل ظاهری برنامه ، راحتی کار باهاش و پیاده سازی عملی کد برای قابل استفاده بودن توسط کابرنهایی هم توجه میکنه. اپیزود اول زیاد کاری به کد نداریم و می خواهیم پروژه رو تعریف کنیم برای خودمون. اگر قصد دارید به متد من کد زدن رو دنبال کنید ، به این مراحل هم توجه کنید ، چون برنامه ریزی درست قبل از کد نویسی بسیار در انجام مراحل کدنویسی کار ما رو راحت می کنه.تعریف کردن پروژه :یک تایمر باید بنویسیم که از 0 شروع کنه به شمردن و هر یک ثانیه یک واحد بهش اضافه بشه. برنامه نیاز به سه کلید Start و Stop و Reset داره. پ.ن : توجه کنید شما به عنوان برنامه نویس باید کاملا بدونید کارفرما از شما چی میخواد. کاملا باید توجیه شده باشید. کارفرما باید بگه میخواد چیکار بکنه ، و تصمیم گیری اینکه اون کار رو به چه طریقی انجام بدید بر عهده شماست و بهتره کارفرما رو با مسایل تخصصی گیج نکنید.2. طراحی UI :یک طرح اولیه از قسمت های ظاهری برنامه ای که می خواید طراحی کنید روی کاغذ بکشید تا بدونید قراره در نهایت چی داشته باشید توی برنامه . یه همچین چیزی:3. مشخص کردن Component ها:یک شمارنده ، یک دکمه استارت ، یک دکمه استاپ ، یک دکمه ریست چون اساس ری اکت کامپوننت ها هست ، شما باید براساس UI که طراحی کردید مشخص کنی چه کامپوننت هایی نیاز داری. در اینجا این 4 تا کامپوننت به ذهن من میرسه ( نگران این نباشید که چیزی از قلم بیفته ، بعدا اینا ممکنه تغییر کنن )4. پروژه رو به چند فاز تقسیم کنید:اگر قرار باشه شما یه هفته کد بزنید بشه 1000 خط و بعد دکمه ران رو بزنید و با کوله باری Error روبرو بشید که نتیجه نمیگیرد اصلا. راه حل بهتر اینه که پروژه به فاز های کوچیکتر بشکونید( به قول استاد جزایری : + یک فیل رو چطوری میخورن؟ - لقمه لقمه) ( به فازهایی که در آخر فاز یک برنامه داشته باشید که بخش هایی از برنامه اصلی رو به درستی اجرا کنه). برای این پروژه من این فاز ها رو در نظر گرفتم:فاز یک : یا تایمر ساده که با اجرا شدن برنامه شروع به شمردن میکنه (در این مرحله CSS هم باید درست کنی)فاز دو: اضافه کردن دکمه Resetفاز سه : اضافه کردن دکمه Stopفاز چهار : اضافه کردن دکمه Start5. حالا وقتش رسیده شروع به نوشتن کد کنید. :)

4. آشنایی با UseEffect در React

Amir Farahbakhsh — Sat, 02 Jul 2022 11:10:50 +0430

در روز سوم با نوعی از متغییرها که در طول زمان قابلیت تغییر دارند صحبت کردیم(State) . در واقع ما داشتیم از UseState برای تعریف کردن State و تابع به روزرسان اون استفاده می کردیم. در جاوا اسکریپت به UseState یک Hook گفته می شود.( من دیگه کاری ندارم در ورژن های قبلی فلان جور بود و الان هوک ها اومدن به جای فلان چیز و... ، چون ما با هم بستیم که کامپوننت هامون رو به صورت فانکشن می نویسیم و کاری به ورژن های قبلی نداریم که اوضاع چطور بوده) هوک ها یک سری توابع از پیش تعریف شده هستند که هرکدوم برای انجام کاری ساخته شدند. یکی دیگه از هوک هایی که امروز باهاش آشنا می شیم UseEffect می باشد. این هوک میاد یک سری عملیات خاص رو در موقعیت های خاص اجرا میکنه. مثال یک : ارسال آلارم خوشم آمد گویی(عملیات خاص این هوک) ، فقط در اولین بار اجرا شدن صفحه(موقعیت خاص این هوک). کدی که برای این کار باید نوشته شود به صورت زیر است:useEffect( ( ) => {alert('WellCome to this page') } , [ ] )این نحوه ی استفاده از هوک UseEffect هست. اگر توجه کنید این هوک از سه بخش تشکیل شده.useEffect( ( ) => { } , [ ] )قسمت اول ( ) : هنوز به مورد استفاده اش برخورد نکردم ، اگر یافتم اپدیت می کنم پست رو.قسمت دوم { } : این جا همون عملیات خاصی که انتظار داریم هوک انجام بده رو توش می نویسیم. قسمت سوم [ ] : این جا برای هوک تعریف میکنید که اون موقعیت خاصی که می خواهید عملیات خاص (قسمت دوم هوک) اجرا بشه ، چی هست؟ پ.ن: اگر این قسمت رو خالی بذارید هوک فقط در مرتبه ی اول اجرا خواهد شد. پس با این حساب هوکی که ما نوشتیم فقط در مرتبه ی اول یک پیغام خوش آمد گویی نمایش میده و تامام.مثال دوم : افزایش عدد نمایش داده شده در Title(عملیات خاص) ، هر یک ثانیه (موقعیت های خاص) export function Counter( ) { const [ counter , setCounter ] = useState( 0 ); useEffect( ( ) => { document.title = counter; } , [counter] ) setTimeout(() => {setCounter(counter+1)}, 1000); }در خط دوم یک State تعریف کردیم. حالا بیاید سه بخش مربوط به هوک UseEffect رو بررسی کنیم.بخش اول پرانتزی : که خالیه و نمی دونم هم برای چی هست!بخش دوم آکولادی : همون عملیات خاص رو ذکر کردیم که در واقع نمایش مقدار State در Title صفحه هست.بخش سوم براکتی: تعریف کردن موقعیت خاصی که میخواهیم هوک برامون اجرا بشه ، وقتی که فقط یه متغیر رو گذاشتیم اونجا، یعنی هر موقع که مقدار این متغیر تغییر کرد ، هوک رو برامون اجرا کن . در آخر هم یک تایمر گذاشتیم که هر یک ثانیه یک بار مقدار State رو افزایش بده ( و تغییر این State موجب اجرا شدن هوک و آپدیت شدن مقدار Title میشه).مثال سوم: همون تایمری که در مثال دوم نوشتیم رو به صورت کاربردی در صفحه وب نمایش بدیم:export function Counter(){ const [ counter , setCounter ] = useState ( 0 ); useEffect( ( ) => { setTimeout(() => {setCounter(counter+1)}, 1000); } , [counter] ) return (

The timer is {counter}

); }خب دیگه زیاد شلوغش نمیکنم. فقط یادتون باشه به همون نکته که برای Use Effect فقط عملیات خاص و موقعیت خاص رو به درستی تعریف کنید.مطالعه آزاد:باید درباره LifeCycle و Render کردن هم مطالعاتی بکنیم توی روزهای بعدی. درباره LifeCycle این پست کمک میکنه. رندر کردن هم ظاهرا یکی از متدهای چرخه حیات هست که توی همون پست بهشون اشاره شده.احتمالا درباره DOM هم شنیدید. وقتشه کمی با اونم آشنا بشید: از اینجا بخونید.

3. آشنایی با State در React

Amir Farahbakhsh — Wed, 15 Jun 2022 01:01:47 +0430

تا اونجا رسیده بودیم که با Props اطلاعاتی (متغییرها یا توابع Handler) رو به کامپوننت ها ارسال کردیم. و اشاره کردیم که مقدار Props داخل کامپوننت ها قابل تغییر نمی باشد. برای متغییرهایی که قرار هست داخل کامپوننت تغییر کنند باید از State ها استفاده کنیم.در ابتدا لازم است یک فایل Counter در مسیر پوشه کامپوننت ها ایجاد کنیم.در فایل ایجاد شده یک کامپوننت به اسم Counter ایجاد می کنیم و دارای یک متن و یک کلید است که با فشردن آن یک Alert به نمایش در خواهد آمد.import React from "react" export function Counter( ) { return (

you have clicked N times

); } /19یادتون نره در فایل APP (برنامه شماره 18) باید این کامپوننت رو import کنید. نیازی هم به کامپوننت wellcome ندارید. میتونید اون ها رو توی فایل app کامنت یا حذف کنید( این برنامه ها در روزهای قبل آموزش داده شده اند). خب حالا میخوایم بخش های جدید رو به برنامه 19 اضافه کنیم. در قسمت import باید{useState} رو اضافه کنید. بعد یک state به نام کانتر تعریف میکنیم.import React , {useState} from "react" export function Counter(){ const[counter,setCounter]=useState(0); return (

you have clicked {counter} times

) ; } /20در هنگام تعریف کردن یک state به این صورت عمل می شود. اول یک state تعریف میشود (در اینجا counter) بعد یک state updater (در اینجا setCounter) و مقدار اولیه state (در اینجا 0). بعد از تعریف کردن state به شکل بالا ، هرجا نیاز بود مقدار state فراخوانی شود از نام آن داخل { } و هرجا نیاز بود مقدار آن به روز رسانی شود از setCounter استفاده می شود و مقدار جدید state به آن تابع ارسال می شود.به همین سادگی به همین خوشمزگی!شیوه اصولی تر به جای اینکه بیایم داخل همون تگ از setCounter استفاده کنیم باید یک تابع Handler نوشته بشه و اپدیت کردن و سایر کارها رو داخل اون Handler انجام بدیم.import React,{useState} from "react" export function Counter(){ const[counter,setCounter]=useState(0); const changeHandler = ( ) => { setCounter(counter+1) ; } return (

you have clicked {counter} times

); } 21خلاص.

2. آشنایی با Props در React

Amir Farahbakhsh — Thu, 09 Jun 2022 09:37:23 +0430

تا اینجای اکثر کامپوننت ها و کدهایی که نوشتیم ، صرفا یک حالت ثابت داشتند و از متغییر خاصی استفاده نمیکردند. با استفاده از props می تونیم متغییرهای موردنظرمون رو به کامپوننت ها انتقال بدیم .در ابتدا من یه تغییراتی در پست قبل دادم و تمام متن هایی که میخوایم نمایش داده بشه رو به کامپوننت Wellcome انتقال دادم و دو کامپونتت دیگر رو که استفاده ای ازشون نشده بود رو حذف کردم.import {Wellcome} from "./Components/Wellcome" function App() { return ( ) ; } export default App; //11و فایل Wellcome هم به شکل زیر:export function Wellcome() { return(

Hello My Friend

Wellcome to my WebSite

) ; } //12خب حالا می خوایم به جای My Friend از اسم کاربر استفاده کنیم. اول کدهاش رو ببینیم ، بعد توضیحش میدم:import {Wellcome} from "./Components/Wellcome" function App() { return (

) ; }export default App; //12export function Wellcome(props) { return(

Hello {props.fName} {props.lName}

Wellcome to my WebSite

) ; } //13در فایل اول props ها رو تعریف و مقداردهی میکنیم. دوبار از کامپوننت ولکام استفاده شده است. پراپز های fName و lName برای هر کامپوننت تعریف شده(این کار داخل تگ در هنگام فراخوانی کامپوننت انجام می شود). به این ترتیب تمام متغییرهایی که دارید به عنوان پراپز ارسال می کنید در کامپوننت از طریق شی پراپز قابل دریافت خواهند بود. تا اینجا متغییر رو به عنوان پراپز ارسال کردیم به کامپوننت ، حالا میخوایم یک تابع رو به عنوان پراپز ارسال کنیم ، اول خود تابع رو در فایل App تعریف می کنیم:function clickHandler(){ return ( alert ( " you have cliked") ); } //14یه تابع ساده تعریف می کنیم که یک آلارم رو بهمون نمایش بده. حالا برای ارسال این تابع به کامپوننت شبیه به ارسال متغییرهای معمولی عمل میکنیم ، با این تفاوت که باید به شکل Arrow Function ارسال بشه.function App() { return (

clickHandler() } /> clickHandler() } />

) ; } //15اسمش پراپز رو گذاشتیم Handler و این ساختاری که استفاده کردیم رو فعلا حفظ کنید. خب بریم سراغ کامپوننت و ببینیم چطوری باید از این تابعی که ارسال کردیم استفاده کنیم:export function Wellcome(props) { return(

Hello {props.fName} {props.lName}

Wellcome to my WebSite

) ; } /16برای تگ h1 یک ویژگی وجود داره به اسم . کلیک کردن در واقع یه event هست. و برای تعریف کردن event handler مربوط به کلیک استفاده می شود. همین جا یه کوچولو درباره event و event handler ها صحبت کنیم:خیلی ساده بخوام توضیح بدم ، event اتفاق هایی هست که ممکنه در صفحه وب و برای یک المنت رخ بده. مثلا کلیک کردن روی اون المنت ، مثلا قرار گرفتن موس روی المنت ، مثلا تغییر محتویات یک تکست باکس و... این event ها برای سیستم تعریف شده از قبل . یه چیز دیگه داریم به اسم event Handler ، یعنی وقتی فلان اتفاق رخ داد ، در جواب میخوای چه اتفاقی بیفته؟مثلا وقتی روی این متن کلیک شد( وقتی event کلیک رخ داد) ، میخوام یک آلارم نمایش داده بشه( این event handler کلیک کردن هست)خب ما تو خط چهارم از برنامه 16 داریم چی میگیم؟ میگم اگر روی تگ h1 کلیک شد من میخوام تابع handler (که به صورت پراپز به این کامپوننت ارسال شده ) اجرا بشه. در این مرحله میتونید برنامه رو اجرا کنید . بریم قلق آخر ارسال تابع رو هم یاد بگیریم و دیگه این جلسه رو تمام کنیم. شما یک تابع ارسال کردید ولی روی هر کدوم از h1 ها که کلیک بشه یه آلارم نمایش داده میشه. میخوایم متن آلارمی که نمایش داده میشه برای هر تگ فرق کنه. پس لازمه برای خود تابع clickHandler یک متغییر ورودی تعریف کنیم و از اون برای نمایش متن استفاده کنیم.function clickHandler(user){ return ( alert("you have cliked on " + user) ) ; } //17پس برای تابعمون یک پارامتر user تعریف کردیم ، پس در هنگام فراخوانی لازم هست براش مقدار user رو با آرگومانش بفرستیم. در متن آلارم هم از پارامتر user استفاده کردیم.function App() { return (

clickHandler("Ali")}/ clickHandler("Ahmad")}/

) ; } //18برای امروز کافیه. دوتا مطلب رو دنبال کردیم. چطوری یک سری اطلاعات رو به صورت متغییر ارسال کنیم به کامپوننت ها. و اینکه چطوری یک تابع رو به عنوان پراپز ارسال کنیم. همچنین اولین event handler هم نوشته ایم. درآینده با event های بیشتر و handler های پیچیده تر آشنا می شیم. تعطیلات خوبی داشته باشید :)راستی یه نکته یادم رفت : پراپز ها اطلاعاتی هستند که به کامپوننت ارسال می شوند و کامپوننت فقط از اون ها استفاده میکنه و نمی تواند تغییری در آن ها ایجاد کند. حالا اگر خواستیم تغییرش بدیم چی؟ باید به جای props از state ها استفاده کنیم که درس های آیندمون هست. پیگیرم هستی؟

1. آشنایی با Component در React

Amir Farahbakhsh — Tue, 07 Jun 2022 20:32:52 +0430

سلام ، صدامو داری؟اگر وب سایت React رو یک دیوار در نظر بگیریم ، کامپوننت ها نقش آجر های اون رو دارن. واقعا هم چیز خاصی نیست ، به همین تابع هایی که در React درست میکنیم یک کامپوننت گفته میشه. شما فکر کن اسم دیگه ی تابع هست. ( البته کامپوننت ها می تونن تابع (Function) باشن یا از نوع (Class). که فعلا فقط نوع تابعش رو دیدید. پ.ن : در پست قبلی ، App یک کامپوننت از نوع تابعی بود). دوباره برمیگردیم به کد شماره یک:function App() { return (

Hello My Friend

);} export default App; //1Components in Reactحالا قصد داریم یک کامپوننت دیگه به برنامه اضافه کنیم به اسم Wellcome که فقط یک پیام خوش آمد گویی رو چاپ میکنه. به این صورت:function App() { return (

Hello My Friend

); } function Wellcome() {

Wellcome to my WebSite

} export default App; //6 در حال حاضر اگر برنامه رو اجرا کنید در خروجی نسبت به کد شماره یک تفاوتی وجود ندارد. حالا میخوایم از کامپوننتی که نوشتیم توی کامپوننت اصلی که App باشه استفاده کنیم. شما از کامپوننت ها شبیه به تگ های HTML می تونید استفاده کنید ، به این صورت:function App() { return (

Hello My Friend

);} function Wellcome() { return(

Wellcome to my WebSite

); } export default App; //7خب شما اولین کامپوننت رو نوشتید و تونستید به درستی اجراش کنید. مهمترین فایده ای کامپوننت ها اینه که "یک بار بنویس ، چند بار استفاده کن". شما هرجا نیاز داشته باشید میتونید از این کامپوننت استفاده کنید ، بدون اینکه دیگه نیازی باشه به کدهای داخلی کامپوننت توجه کنید.function App() { return (

Hello My Friend

);} function Wellcome() { return(

Wellcome to my WebSite

); } export default App; //7بعدا یاد خواهیم گرفت که چطوری کامپوننت های پویاتری بنویسیم ( با استفاده از Props) . اما اینجا بحث رو فقط با این مورد تمام میکنم که بعد از اینکه تعداد کامپوننت هاتون رفت بالا بهتره هر چندتا کامپوننتی که به هم مربوط هستند رو داخل یک فایل JS جداگانه نوشت. اول یک پوشه به اسم Components می سازیم و داخل فایل Wellcome.JS رو ایجاد میکنیم. حالا قسمت های مربوط به کامپوننت Wellcome رو توی فایل خودش کپی می کنیم :function Wellcome() { return(

Wellcome to my WebSite

);} export default Wellcome; //8کد مربوط به App بعد از جدا کردن کامپوننت بالا رو هم ببینیم و بریم برای توضیحات این دوتا کد:import Wellcome from "./Components/Wellcome" function App() { return (

Hello My Friend

) ; } export default App; // 9از کد شماره هشت شروع میکنیم ، چیز جدیدی نداره جز خط آخرش. ببینید در یک فایل JS ممکنه چندین کامپوننت داشته باشیم. بقیه ی فایل ها فقط به توابعی از یک کامپوننت دسترسی دارن که خود فایل این دسترسی رو داده باشه بهش. (به این حالت میگن encapsulation ،یعنی کل کامپوننت ها توی یک کپسول محافظت شدن و کسی از درونشون خبر نداره ، فقط هرچی رو ما خودمون دلمون بخواد به بیرون از کامپوننت نشر میدیم) به زبان ساده تر ، برای اینکه بتونید توی فایل App به کامپوننت Wellcome دسترسی داشته باشید نیاز هست یک عملیات Export - Import انجام بشه ، به این صورت که : در فایل مبدا اون کامپوننت رو Export کردیم و در فایل مقصد اون رو Import میکنیم (خط اول کد شماره 9).حالا اگر توی فایل مبدا بیشتر از یک کامپوننت بود چطوری به همشون دسترسی بیرونی بدیم ؟(چون با استفاده از Export default فقط یک کامپوننت رو میشه فرستاد) در اون حالت باید در هنگام تعریف کردن کامپوننت تعیین کنیم که قراره Export بشه یا نه.export function Wellcome() { return(

Wellcome to my WebSite

);} function Greeting() { return(

Have a nice day

);} export function Contact() { return(

Send Email

);} //10به این صورت در هنگام تعریف کردن هر کامپوننت مشخص میکنیم که قراره Export بشه یا نه. در کد شماره 10 به دوتا کامپوننت Wellcome و Contact دسترسی بیرون از این فایل رو هم دادیم اما برای کامپوننت Greeting نه. وقتی به این صورت کامپونتت ها رو اکسپورت می کنید لازمه در هنگام Import کردنشون اون ها رو توی { } قرار بدیم. به این صورت:import {Wellcome,Contact} from "./Components/Wellcome"مطالعه بیشتر : گفته شد که کامپوننت ها یک نوع دیگر هم دارن (Class Component) ، من دربارشون حرف نمیزنم چون با معرفی شدن Hook ها به نظرم استفاده از Function ها و Arrow Function ها بهتر هست.درباره Arrow Function می تونید بخونید ، یه نکته هم توجه کنید که هنوز ما درباره Props صحبتی نکردیم.خوش باشید :)

0. آشنایی با JSX در React

Amir Farahbakhsh — Sun, 05 Jun 2022 13:35:05 +0430

سلام. صدامو داری؟شاید در روز صفرم انتظار می رفت که بیام بگم اصلا React چی هست! چرا باید ازش استفاده کنیم! چه مزیت هایی داره؟ و... به دو دلیل از این مباحث پرهیز میکنم. اول اینکه به اندازه کافی توی نت درباره ی این مسائل صحبت شده. دوم اینکه اگر اینجا هستی احتمالا این موارد رو میدونی خودت. آشنایی با JSX در Reactپس ما به شیوه "شیرجه زدن وسط کد" کارمون رو از اولین برنامه یعنی Hello My Friend شروع میکنیم( من دنبال جهانی شدن نیستم ، فقط میخوام با کدها دوست بشم). احتمالا اولین برنامه رو با Create-react-app ساختید. بعد از پاک کردن قسمت های اضافی در فایل App.js با همچین کدی مواجه خواهید بود.function App() { return (

Hello My Friend

);} export default App; //1میخوایم به خط دوم توجه کنیم. خیلی شبیه به یه کد HTML هست. اما در واقع یه مدل پیشرفته تر از اون هست که یه جورایی اومده JavaScript رو با HTML قاطی کرده. چرا مهمل میبافی امیر!! این که هیچ علائمی از جاوااسکریپ نداره! خب الان می بینیم این چیزی که من میگم HTML نیست(خط دوم) چطوری با جاوااسکریپت غنی شده!function App() { const user = "Amir" return (

Hello {user}

);} export default App; //2توی خط دوم یک متغییر تعریف کردیم به اسم user. و توی خط چهارم اومدیم اون متغییر رو با استفاده از { } فراخوانی کردیم. خب این چیزیه که توی HTML نداشتیم. به این حالت ترکیب شده ی HTML با JS میگن:JSXکه خیلی کار کردن رو برای ما راحت میکنه و میتونیم مستقیما داخل کدهای HTML بیایم و کد JS هم بزنیم. اونم خیلی ساده ، فقط کافیه کدهای JS رو داخل براکت قرار بدیم. به مثال زیر دقت کنید:function App() { const num1 =3; const num2 =2; return (

The result is: {num1+num2}

);} export default App; //3در ابتدا دوتا متغییر عددی تعریف کردیم و توی خط چهارم داخل براکت اون دو عدد رو با هم جمع کردیم( جمع کردن دو متغییر یک عمل JS ای هست برای همین داخل براکت گذاشتیم).حالا همین کد آخر رو یکم بهینه میکنیم و برای عملیات جمع یک تابع تعریف میکنیم.function App() { const num1 =3; const num2 =2; return (

The result is: { Plus(num1,num2) }

); } function Plus(Int1,Int2){ return Int1+Int2; } export default App; //4به این ترتیب ما تابع Plus رو ایجاد کردیم که دو پارامتر ورودی داره (Int 1 , Int 2) و مقدار برگشتی این تابع هم حاصل جمع دو پارامتر می باشد. به این ترتیب در خط چهارم ما تابع رو فراخوانی کردیم و دو مقدار عددی رو به عنوان آرگومان به تابع ارسال کردیم( در JS به این متغییر ها Props گفته میشود ، اصطلاح پارامتر و آرگومان بیشتر در زبان های بر پایه ی C استفاده می شود). خروجی این کد با قبلی فرقی نخواهد داشت. پس به این ترتیب فراخوانی کردن یک تابع رو در JSX و ارسال Props به اون رو یاد گرفتیم).همین کار ( یعنی استفاده از یک تابع به جای استفاده مستقیم از متغییرها رو برای مثال 2 هم میشه استفاده کرد، به این صورت که:function App() { const user ={ fname : "Amir", lname : "Abadani" }; return (

Hello { UserInfo( user.fname , user.lname ) }

) ; } function UserInfo( firstName , lastName ) { return firstName + " " +lastName; } export default App; //5تابع UserInfo رو تعریف کردیم که دو پارامتر ورودی داره (firstname , lastName) و مقدار برگشتی تابع هم ترکیب همین دو پارامتر هست به اضافه ی یه فاصله بینشون. فراخوانی تابع هم که مثل همون حالت قبل انجام شده.پ.ن : در کدهایی که میذارم ، بخش جدید یا مهمش رو بولد و مورب میکنم که بدونید در هر مثال شاه بیتش چیه! ( کد نوشتن مثل شعر نوشتنه برام :) ) - - هر کد هم یه شماره میزنم (به صورت کامنت در خط آخر) که توی قسمت های بعدی اگر خواستم رفرنس بدم به مثال ها راحت باشیم.مطالعه ی بیشتر: در مثال شماره 5 ، USER رو به صورت یک شی (Objetc) تعریف کردم. میتونید درباره ی برنامه نویسی شی گرایی (object oriented programming) مطالعه کنید . اگر بحثش سنیگین بود براتون فعلا واردش نشید. فقط در همین حد نحوه تعریف کردن شی و استفاده کردن ازش رو یاد بگیرید در مثال آخر. منبع پیشنهادی: https://www.w3schools.com/js/js_objects.aspیک سری اصطلاحات استفاده شد مثل پارامتر(Parameter) ، آرگومان (arguments) ، فراخوانی (Call) ، مقدار برگشتی(Return Value) . لازم هست مفهوم دقیق و تفاوت هاشون رو بلد باشید. پیگیرم باش!