🚀 خداحافظی با کندی لود
دادهها در Next.js! 🚀
آیا تا به حال با مشکل دریافت مرحلهبهمرحله و کند (Waterfall) دادهها در برنامههای Next.js مواجه شدید؟ ⏳
در این آموزش جذاب میبینیم که چطور با ترکیب قدرتمند ۳ مفهوم، هم سرعت اپلیکیشن رو بالا ببریم و هم در برابر خطاها مقاومش کنیم:
1️⃣ React Suspense:
نمایش حرفهای وضعیت Loading ⏳
2️⃣ Promise.all:
دریافت موازی دادههای ضروری با هم ⚡
3️⃣ Promise.allSettled:
دریافت موازی دادهها، اما بدون ترس از کِرَش کردن کل صفحه (تحمل خطا) 🛡️
یاد بگیرید چطور کاری کنید که اگر یکی از درخواستهای سرور با مشکل مواجه شد، بقیه بخشهای صفحه همچنان به درستی کار کنن!
😎💻
👇 برای مطالعه کامل این مقاله و دیدن نمونه کدها به سایت زیر مراجعه کنید:
🔗 Mastering Parallel Data Fetching in Next.js
دادهها در Next.js! 🚀
آیا تا به حال با مشکل دریافت مرحلهبهمرحله و کند (Waterfall) دادهها در برنامههای Next.js مواجه شدید؟ ⏳
در این آموزش جذاب میبینیم که چطور با ترکیب قدرتمند ۳ مفهوم، هم سرعت اپلیکیشن رو بالا ببریم و هم در برابر خطاها مقاومش کنیم:
1️⃣ React Suspense:
نمایش حرفهای وضعیت Loading ⏳
2️⃣ Promise.all:
دریافت موازی دادههای ضروری با هم ⚡
3️⃣ Promise.allSettled:
دریافت موازی دادهها، اما بدون ترس از کِرَش کردن کل صفحه (تحمل خطا) 🛡️
یاد بگیرید چطور کاری کنید که اگر یکی از درخواستهای سرور با مشکل مواجه شد، بقیه بخشهای صفحه همچنان به درستی کار کنن!
😎💻
👇 برای مطالعه کامل این مقاله و دیدن نمونه کدها به سایت زیر مراجعه کنید:
🔗 Mastering Parallel Data Fetching in Next.js
❤3👏1
</homeCode>
Photo
.
.
.
تصور کن سهشنبه ظهره. یه داشبورد وب خیلی تمیز با ریکت زدی، تحویل دادی و داری قهوهتو میخوری که کارفرما زنگ میزنه: «عالی شد! اپلیکیشن موبایلش رو میتونی تا آخر ماه تحویل بدی؟» قلبت میآد تو دهنت. تو که زبانهای نیتیو مثل جاوا یا سوییفت بلد نیستی!
اینجاست که دو تا ابزار نجاتبخش وارد میشن: فلاتر (Flutter) و ریکتنیتیو (React Native). اما کدومش به درد تو میخوره؟ بیا کالبدشکافیشون کنیم.
اصلا اینا چی هستن و خروجیشون چیه؟
جفتشون فریمورکهایی برای ساخت اپلیکیشن به روش "کراسپلتفرم" هستن. یعنی چی؟ یعنی تو یک بار کد مینویسی، اما هم خروجی اندروید میگیری هم iOS.
خروجیشون یه وبسایت نیست که تو قاب گوشی باز بشه (مثل وبویوهای قدیمی)؛ بلکه یک اپلیکیشن کاملا واقعیه که کاربر از بازار یا اپاستور دانلود و نصب میکنه.
زیر کاپوت چه خبره؟ کدهامون چطوری ترجمه میشن؟
اینجا تفاوت اصلی این دو تا غول مشخص میشه:
ریکتنیتیو:
کدهای تو با جاوااسکریپت نوشته میشن. این کدها برای اینکه با گوشی حرف بزنن، از یه واسطه به اسم "پل" (Bridge) استفاده میکنن. کدهای JS از روی این پل به سیستمعامل گوشی پیام میدن که: «یه دکمه استاندارد اندروید یا iOS به من بده». (البته اخیرا با موتور Hermes این ارتباط خیلی مستقیمتر و سریعتر شده).
فلاتر:
فلاتر اصلا اعتقادی به پل نداره! کدهایی که تو با زبان دارت (Dart) مینویسی، مستقیما به زبان ماشین (کدهای صفر و یک مخصوص پردازنده گوشی) تبدیل میشن. فلاتر منتظر سیستمعامل نمیمونه تا بهش دکمه بده، بلکه خودش با موتور گرافیکی قدرتمندش تکتک پیکسلهای دکمه رو روی صفحه نقاشی میکنه!
یکی از اون یکی سرتره؟
جواب کوتاه: نه. جواب بلند: بستگی به نیازت داره.
فلاتر به خاطر همون نقاشی مستقیم و حذف پل ارتباطی، پرفورمنس بالاتری داره و انیمیشنها توش خیلی نرمتر اجرا میشن. بهعلاوه، ظاهر اپلیکیشن تو همه گوشیها دقیقا یکشکل درمیاد.
اما ریکتنیتیو تو اکوسیستم پادشاهه. کتابخونههای آماده براش بینهایت زیاده و چون از خانواده ریکت هست، حسابی بین توسعهدهندهها محبوبه.
پیشنیاز یادگیریشون چیه؟
برای ریکتنیتیو: HTML, CSS, JavaScript و البته React. (یعنی شما فرانتاند کارها عملا نصف بیشتر راه رو رفتید!).
برای فلاتر: آشنایی با مفاهیم شیگرایی و یادگیری زبان Dart. (زبان دارت ترکیب تمیزی از جاوااسکریپت و C هست و یادگیریش اصلا سخت نیست).
بازار کار تو عصر هوش مصنوعی
الان که هوش مصنوعی میتونه کدهای تکراری رو تو چند ثانیه بنویسه، بازار کار موبایل از بین نرفته؛ فقط تغییر شکل داده. شرکتها دنبال آدمایی هستن که منطق برنامه رو بفهمن، بتونن باگهای پیچیده رو حل کنن و سریع ایده رو به محصول تبدیل کنن. استارتاپها عاشق فلاتر و ریکتنیتیو هستن چون هزینه و زمان توسعه رو نصف میکنه. پس بازار هر دو به شدت داغه و هوش مصنوعی فقط بهت کمک میکنه سریعتر کد بزنی، نه اینکه جات رو بگیره.
💡 نتیجهگیری: کدوم رو یاد بگیریم که بینیاز بشیم؟
ببین، مخاطب این متن تویی که فرانتاند کار هستی. برای تو، ریکتنیتیو یک میانبر به شدت منطقیه. با همون دانشی که از جاوااسکریپت و ریکت داری، میتونی تو کمتر از یک ماه اولین اپلیکیشن موبایلت رو بالا بیاری و عملا تو بازار کار بینیاز بشی.
اما اگر دلت میخواد یه ماجراجویی جدید رو شروع کنی، با پرفورمنس خام کار کنی و یه روزی بتونی علاوه بر موبایل، برای دسکتاپ (ویندوز و مک) هم خروجیهای بینقص بگیری، فلاتر تو رو برای سالهای آینده کاملا بیمه و بینیاز میکنه.
برگردیم به اون سهشنبه ظهر. تو یکی از این دو تا مسیر رو انتخاب کردی و آخر ماه، اپلیکیشن رو میذاری روی میز کارفرما. اون با تعجب به گوشیش نگاه میکنه و میپرسه: «چطوری تنهایی هم اندروید زدی هم آیاواس؟» تو هم یه لبخند ملیح میزنی، هیچی نمیگی و به قهوهت که حالا دیگه سرد شده، یه نگاه رضایتبخش میندازی. رسما به دنیای موبایل خوش اومدی! ☕️📱
#article
@h0meCode
❤3
</homeCode>
Photo
تصور کن کلهسحر بیدار شدی، چای شیرینت رو هم میزنی و با خیال راحت سایتت رو باز میکنی تا چک کنی دیشب چقدر فروش داشتی.
یهو میبینی جای محصولاتت، عکس یه اسکلت خندان گذاشتن و یه آهنگ عجیبغریب هم داره پخش میشه! اون لحظه سایتت دقیقاً شبیه پرایدی شده که تو یه کوچه خلوت و تاریک پارکش کرده بودی؛ ضبط و باند که هیچ، دزدا قالپاقاشم بردن!
خب، این دزدهای دیجیتال یا همون هکرها، چطوری اون پراید بینوا (سایت شما) رو لخت میکنن؟ راستش روشهاشون تنوع زیادی داره، ولی سه تا از معروفترین ترفندهاشون که باید بشناسی ایناست:
* ترفند اول:
ترافیک ساختگی (DDoS):
فرض کن هزار نفر آدم الاف رو اجیر کردن که همزمان بیان جلوی در مغازهت و هیچی هم نخرن. نتیجه؟ مشتری واقعی اصلاً نمیتونه بیاد تو و کرکره مغازه از فشار جمعیت میاد پایین! هکرها هم با فرستادن رباتهای بیشمار، سرور سایتت رو اونقدر خسته میکنن که سایت از دسترس خارج میشه.
* ترفند دوم: گول زدن نگهبان (SQL Injection):
اینجا هکره میاد جای اینکه تو بخش ورود سایت نام کاربری و رمز عبور وارد کنه، یه سری کُد و دستور عجیب مینویسه. اگه سایتت سادهلوح باشه، این کدها رو به عنوان دستور میخونه و یهو میبینی کل اطلاعات مشتریهات رو دوستیدستی تقدیم هکر کرده!
* ترفند سوم: تلهگذاری برای مشتری (XSS):
تو این روش، هکر با خود سایتِ تو کاری نداره، بلکه یه کد مخرب رو یه جایی تو سایت (مثلاً تو بخش کامنتها) قایم میکنه. مشتری بیچاره میاد کامنت بخونه، کد اجرا میشه و اطلاعات و حساب کاربریِ مشتری دزدیده میشه.
🛡️ حالا کی باید جلوی این فاجعه رو بگیره؟
تو دنیای برنامهنویسی، ما دو تا تیم داریم: «فرانتاند» (Frontend) که ویترین و ظاهر مغازه رو میسازه، و «بکاند» (Backend) که انبار، گاوصندوق و مغز متفکر کار رو دستش داره.
برای اینکه جلوی این دزدیها گرفته بشه، هر کدوم یه وظیفهای دارن:
* وظیفه فرانتاند: باید یه بازرسی بدنی اولیه جلوی در مغازه انجام بده! یعنی حواسش باشه کسی تو فرم ثبتنام جای اسمش، کد مخرب ننویسه. فرانتاند باید جلوی اشتباهات سهوی یا حملات ساده رو همون اول کار بگیره.
* وظیفه بکاند: کارش خیلی سنگینتره. بکاند همون نگهبان مسلحی هست که جلوی گاوصندوق ایستاده. قانون اول بکاند اینه: به هیچکس اعتماد نکن، حتی به فرانتاند! بکاند باید تکتک اطلاعاتی که میاد رو دوباره با دقت چک کنه، رمزها رو به شکل غیرقابلخواندن دربیاره (رمزنگاری) و جلوی هر دسترسیِ مشکوکی رو سد کنه.
🚨 وقت بحران: کی باید آستین بالا بزنه؟
خدای نکرده اگه همین الان آژیر خطر به صدا دربیاد و یه حمله سایبری شکل بگیره، کی باید دستبهکار بشه؟ فرانت یا بکاند؟
جواب قاطعانه بکاند است!
چرا؟ چون هکرهای حرفهای معمولاً ظاهر سایت (فرانت) رو اصلاً دور میزنن و مستقیم به مغز سایت یعنی سرور حمله میکنن. اینجا برنامهنویس بکاند باید سریع وارد عمل بشه، آیپیهای مهاجم رو مسدود کنه و سپر دفاعی سرور رو بکشه بالا. فرانتاند تو لحظه حمله کار خاصی از دستش برنمیاد، چون خط مقدم شکسته شده.
🧱 برای بالا بردن امنیت، کدومشون مهمتره؟
برای اینکه از همون اول امنیت بره بالا و خیالمون راحت باشه، بازم بار اصلی رو دوش بکاند عزیزه. درسته که فرانتاند با بستن راههای نفوذ ظاهری کمک میکنه که کار تمیزتر دربیاد، اما قلعه اصلی تو بکاند ساخته میشه. اگه گاوصندوق شما (بکاند) فولادی و ضدسرقت باشه، حتی اگه شیشه ویترین (فرانت) رو بشکنن، بازم دزد نمیتونه پولها رو ببره.
💡 نتیجهگیری
امنیت تو دنیای وب، یه دکمه نیست که بزنیش و بری با خیال راحت بخوابی؛ یه فرآیند همیشگیه. همونطور که شبها قبل خواب در خونه رو قفل میکنی و دزدگیر ماشینت رو چک میکنی، باید حواست به قفلهای دیجیتال سایتت هم باشه. دفعه بعد که خواستی سایتی بالا بیاری، فقط محو قشنگی و رنگولعاب ویترینش نشو؛ حتماً مطمئن شو که گاوصندوقش از جنس حلب نباشه! 🔒💻
#article
@h0meCode
🔥6⚡1
</homeCode>
Photo
آقا قضیه از این قراره که کامبیز ما، توهم گرگ والاستریت برداشته بود.
یه شب که داشت تخمه میشکست و چاییش رو هورت میکشید، یه پیام تو تلگرام براش اومد: "ایلان ماسک داره بیتکوین مفتی پخش میکنه! رو این لینک کلیک کن!"
کامبیزِ طمعکار هم با سر رفت تو لینک، کیف پولش رو وصل کرد و برای اینکه ثابت کنه ربات نیست، اون ۱۲ کلمه امنیتی (Seed Phrase) کیف پولش رو دو دستی تقدیم سایت کرد! یهو رفرش کرد دید... ای دل غافل! موجودی از ۵۰۰۰ دلار رسید به صفر مطلق! جیب خالی، پز عالی!
حالا اینجا چند تا سوال پیش میاد که میخوایم با هم بررسیشون کنیم:
🕵️♂️ اصلا این کیف پول چطوری هک شد؟
ببینید رفقا، تو دنیای کریپتو کسی نمیتونه خود سیستم بلاکچین رو هک کنه. هکرها در واقع «شما» رو هک میکنن! یعنی چی؟ یعنی با گول زدن (مثل همین لینک فیک ایلان ماسک) کاری میکنن که خودت کلید گاوصندوقت رو بدی بهشون. یا یه بدافزار میفرستن رو گوشیت، یا به اسم پشتیبانی صرافی ازت اطلاعات میگیرن. به همین راحتی، به همین خوشمزگی!
🚓 خب حالا پولا رو بردن! زنگ بزنیم CIA یا FBI؟
کامبیز همون شب با زیرپوش و چشمای اشکی داد میزد: "الان زنگ میزنم سازمان سیا (CIA) پدرشون رو در بیاره!"
ولی اشتباه میزد! چرا؟ بیاید فرق این دو تا رو به زبون آدمیزاد بگیم:
سازمان سیا (CIA): اینا کارشون جاسوسیه! یعنی مامور مخفی میفرستن تو کشورهای دیگه ببینن کی داره چیکار میکنه. اصلا قدرت پلیسی برای دستگیری دزد و کلاهبردار ندارن. CIA اصلا براش مهم نیست که ۵۰ تا دوجکوین کامبیز رو کی دزدیده!
پلیس فدرال (FBI): اینا دقیقا همون اداره آگاهی خودمونن ولی تو سایز آمریکا! کارشون جرایم داخلی، کلاهبرداریهای مالی، سایبری و اینجور چیزاست.
پس نتیجه چی شد؟ پیگیری دزدیهای ارز دیجیتال دقیقا کار FBI هست (یه بخش مخصوص جرایم اینترنتی دارن به اسم IC3).
🔍 مامورای FBI از کجا میفهمن پول کامبیز تو کدوم سوراخ موشی رفته؟
کامبیز میگفت: "داداش پول دیجیتاله، دود شد رفت تو هوا، مگه اینا رمالن؟!"
نه کامبیز جان، رمال نیستن! تو دنیای ارز دیجیتال یه چیزی داریم به اسم «دفتر کل شفاف» یا همون بلاکچین. یعنی چی؟ یعنی وقتی هکر پول تو رو میزنه و میریزه تو کیف پول خودش، همه دنیا میتونن این انتقال رو ببینن!
مامورای FBI میان آدرس کیف پول هکر رو تو سایتها (مثل اکسپلوررها) سرچ میکنن و مثل یه نخ، رد پول رو میگیرن. هکر پول رو از کیف پول A میده به B، از B میده به C. مامورا هم قدم به قدم باهاش میان.
نقطه ضعف هکر کجاست؟ هکر بالاخره یه روزی میخواد این ارزها رو تبدیل کنه به دلار که بره باهاش لامبورگینی (یا پراید!) بخره دیگه؟ برای این کار مجبوره پول رو بفرسته تو یه صرافی (مثل بایننس).
اینجاست که مامورای FBI مچش رو میگیرن! به صرافی نامه میزنن میگن: "آقا این کیف پولی که الان پول اومد توش، مال کیه؟" صرافی هم که قبلا از کاربرهاش احراز هویت (کارت ملی و عکس) گرفته، میگه: "بفرمایید، اینم اسم و آدرسش!" و تمام! دستبند به دست هکر زده میشه.
🛑 درس عبرت (حکایت کامبیز و گاوصندوق بیدر و پیکر)
کامبیز ما اون شب تا صبح زل زد به سقف و یه چیز خیلی مهم رو فهمید: تو دنیای کریپتو، هر آدمی بانکِ خودشه!
وقتی تو رئیس بانک خودت هستی، دیگه نمیتونی کلید گاوصندوق (همون ۱۲ کلمه امنیتی) رو بدی دست یه غریبه تو تلگرام و انتظار داشته باشی FBI با هلیکوپتر بیاد پولت رو پس بگیره! ردیابی کردن هکرها ماهها زمان میبره و خیلی وقتها هم هکر اونقدر حرفهایه که پول رو تو صرافیهای بینامونشون آب میکنه و دست هیچکس بهش نمیرسه.
درس عبرتی که کامبیز با ۵۰۰۰ دلار ضرر یاد گرفت اینه: تو دنیای دیجیتال، هیچ پنیری مجانی نیست مگه تو تله موش! امنیت کیف پولت فقط و فقط دست خودته. ۱۲ کلمه امنیتیت رو روی یه تیکه کاغذ بنویس، جای امن قایم کن و به هیچ بشری (حتی اگه خود ایلان ماسک اومد در خونهت) نده!
وگرنه شما هم مثل کامبیز باید بشینید تو افق محو بشید و با حسرت به چارت بیتکوین نگاه کنید! 📉🚶♂️
❤3
❤2👍2
بنام یزدان پاک
ساخت ربات تلگرام با جاوااسکریپت
در قدم اول nodejs رو نصب کنید
(اگه از قبل نصب داشتید که چ خوب).
از سایت رسمی خودش ،nodejs رو دانلود کنید و نصبش انقدر ها هم سخت نیست فقط چند تا next میزنی تمام.
بعد اینکه نصب شد
CMD
یا ترمینال خودتون رو باز کنید و این دستور رو بزنید:
این دستور بهتون نسخه nodejs که نصب کردین رو بهتون میده اگه ورژن رو بهتون داد یعنی درست نصب شده.
بریم سراغ دستور بعدی
این روهم زدید و ورژن رو بهتون نشون داد
یعنی اینکه nodejs شما ب صورت صحیح نصب شده و تمام.
قدم دوم یه پوشه با اسم دلخواه رو وارد کنید
و همون پوشه رو داخل vscode بازش کنید.
تا همینجا انجامش بدید
اگه درست انجامش دادید یه ریکشن بزنین
#bot_tel
ساخت ربات تلگرام با جاوااسکریپت
در قدم اول nodejs رو نصب کنید
(اگه از قبل نصب داشتید که چ خوب).
از سایت رسمی خودش ،nodejs رو دانلود کنید و نصبش انقدر ها هم سخت نیست فقط چند تا next میزنی تمام.
بعد اینکه نصب شد
CMD
یا ترمینال خودتون رو باز کنید و این دستور رو بزنید:
node -v
این دستور بهتون نسخه nodejs که نصب کردین رو بهتون میده اگه ورژن رو بهتون داد یعنی درست نصب شده.
بریم سراغ دستور بعدی
npm -v
این روهم زدید و ورژن رو بهتون نشون داد
یعنی اینکه nodejs شما ب صورت صحیح نصب شده و تمام.
قدم دوم یه پوشه با اسم دلخواه رو وارد کنید
و همون پوشه رو داخل vscode بازش کنید.
تا همینجا انجامش بدید
اگه درست انجامش دادید یه ریکشن بزنین
#bot_tel
قسمت اول
❤5👍3👏2
</homeCode>
بنام یزدان پاک ساخت ربات تلگرام با جاوااسکریپت در قدم اول nodejs رو نصب کنید (اگه از قبل نصب داشتید که چ خوب). از سایت رسمی خودش ،nodejs رو دانلود کنید و نصبش انقدر ها هم سخت نیست فقط چند تا next میزنی تمام. بعد اینکه نصب شد CMD یا ترمینال خودتون رو…
بریم مرحله بعدی:
یادتون هست که بهتون گفتم اون پوشه یی که به اسم دلخواتون درست کنید داخل vscode بازش کنید.
باریکلا که یادتون هست.
ترمینال vscode تون رو بازش کنید و این درستور زیر رو وارد کنید:
این دستوری که وارد کردید یه فایل به نام : package.json براتون ساخته میشه و بعد وارد اون فایل بشید و ما فقط با یک بخش ازین فایل کار داریم و تمام٬ موقعی که فایل باز میکنید باید دنبال
بگردید و پیداش کنید و مقدار type یعنی commonjs رو پاک کنید و بجاش اینو بنویسید module
که باید اینطوری باشه:
و تمام شما مقدار دهی اولیه رو انجام دادید.
اگه نمیدونید که فرق بین module و commonjs چیه یه سرچ کوچیک یا از ai بپرسید قطعا به دانشتون یه چیزی اضافه میشه .
#bot_tel
یادتون هست که بهتون گفتم اون پوشه یی که به اسم دلخواتون درست کنید داخل vscode بازش کنید.
باریکلا که یادتون هست.
ترمینال vscode تون رو بازش کنید و این درستور زیر رو وارد کنید:
npm init -y
این دستوری که وارد کردید یه فایل به نام : package.json براتون ساخته میشه و بعد وارد اون فایل بشید و ما فقط با یک بخش ازین فایل کار داریم و تمام٬ موقعی که فایل باز میکنید باید دنبال
"type":"commonjs"
بگردید و پیداش کنید و مقدار type یعنی commonjs رو پاک کنید و بجاش اینو بنویسید module
که باید اینطوری باشه:
"type":"module"
و تمام شما مقدار دهی اولیه رو انجام دادید.
اگه نمیدونید که فرق بین module و commonjs چیه یه سرچ کوچیک یا از ai بپرسید قطعا به دانشتون یه چیزی اضافه میشه .
قسمت دوم
#bot_tel
❤5
</homeCode>
بریم مرحله بعدی: یادتون هست که بهتون گفتم اون پوشه یی که به اسم دلخواتون درست کنید داخل vscode بازش کنید. باریکلا که یادتون هست. ترمینال vscode تون رو بازش کنید و این درستور زیر رو وارد کنید: npm init -y این دستوری که وارد کردید یه فایل به نام : package.json…
بریم برای مرحله بعدی:
در کنار فایل package.json یه فایلی ب نام index.js درست کنید و کارش ندین بزار بمونه.
ترمینال vscode تون رو باز کنید و اگه از قبل باز هست که چه خوب ٬
در این قسمت ما نیاز به یکسری ابزار داریم که باید نصب بشن بواسطه npm که الان خدمتتون میگم چطوری نصب کنید:
انشاالله که ترمینال که بازه درسته؟
پس داخل ترمینال این دستور رو بنویس و بعد اینتر بزن و منتظر بمون که تا نصب بشه این ابزار ها٬
((و حتما به انترنت متصل باشید و اینم بگم اگه نصبش خیلی طول کشید متوقفش کنید دوباره اقدام به نصب کنید یا اینکه vpn خودتون رو روشن یا اینکه از یه میرور های داخلی استفاده کنید .))
بعد اینکه اینتر زدید منتظر بمونید تا نصب بشه و بعد اینکه نصب شد یه پیغام نشون میده که نصب شده و ی فایلی ب نام :package-lock.json
ایجاد میشه و در عین حال یه پوشه دیگه یی ب نام node_modules ساخته میشه.
یه توضیح کوتاه بدم در مورد telegraf nodemon:
telegraf :
این همون ابزاریه که ما برای برقراری با ربات تلگرام بهش نیاز داریم.
nodemon:
این ابزار میاد پروژه رو ترک یا نگاه میکنه که اگه کوچیک ترین تغییر ایجاد شد در جا بیاد خودش فایل هارو ران بکنه
و در ادامه کار کردشو خواهی فهمید اگه چیزی نفهمیدید نگران نباشید.
تا همینجا انجام بدید
و ریکشن یاتون نره و اگه مشکلی بود بهم بگین.
#bot_tel
در کنار فایل package.json یه فایلی ب نام index.js درست کنید و کارش ندین بزار بمونه.
ترمینال vscode تون رو باز کنید و اگه از قبل باز هست که چه خوب ٬
در این قسمت ما نیاز به یکسری ابزار داریم که باید نصب بشن بواسطه npm که الان خدمتتون میگم چطوری نصب کنید:
انشاالله که ترمینال که بازه درسته؟
پس داخل ترمینال این دستور رو بنویس و بعد اینتر بزن و منتظر بمون که تا نصب بشه این ابزار ها٬
((و حتما به انترنت متصل باشید و اینم بگم اگه نصبش خیلی طول کشید متوقفش کنید دوباره اقدام به نصب کنید یا اینکه vpn خودتون رو روشن یا اینکه از یه میرور های داخلی استفاده کنید .))
npm i telegraf nodemon
بعد اینکه اینتر زدید منتظر بمونید تا نصب بشه و بعد اینکه نصب شد یه پیغام نشون میده که نصب شده و ی فایلی ب نام :package-lock.json
ایجاد میشه و در عین حال یه پوشه دیگه یی ب نام node_modules ساخته میشه.
یه توضیح کوتاه بدم در مورد telegraf nodemon:
telegraf :
این همون ابزاریه که ما برای برقراری با ربات تلگرام بهش نیاز داریم.
nodemon:
این ابزار میاد پروژه رو ترک یا نگاه میکنه که اگه کوچیک ترین تغییر ایجاد شد در جا بیاد خودش فایل هارو ران بکنه
و در ادامه کار کردشو خواهی فهمید اگه چیزی نفهمیدید نگران نباشید.
تا همینجا انجام بدید
و ریکشن یاتون نره و اگه مشکلی بود بهم بگین.
قسمت سوم
#bot_tel
❤3👏3
</homeCode>
بریم برای مرحله بعدی: در کنار فایل package.json یه فایلی ب نام index.js درست کنید و کارش ندین بزار بمونه. ترمینال vscode تون رو باز کنید و اگه از قبل باز هست که چه خوب ٬ در این قسمت ما نیاز به یکسری ابزار داریم که باید نصب بشن بواسطه npm که الان خدمتتون میگم…
بریم برای مرحله بعد:
ای بابا دوباره مسیرمون به فایل package.json افتاد خوب اشکال نداره
ولی به دانشتون اضافه میشه
خوب فایل package.json رو باز کن و دنبال این بگرد:
پیداش کردی بیا یه اسکریپت جدید بهش اضافه کنیم
اونم اینه:
این دستور رو داخل اون اسکریپت اضافه کن مثل این :
اضافه کردی دمت گرم عالی شد.
الان نوبت دست به کد شدنه:
فایل index.js رو باز کن و بعد اینهارو داخل بنویس:
این هارو که نوشتی یه ۱۲ بار اینتر بزن که فضای خالی ایجاد بشه
و موقعی که ایجاد شده اینو بنویس:
قبل از همه چیز وارد @BotFather بشید و یه ربات برا خودتون درست کنید و موقعی که درست کردین بهتون یه توکن میده و اون توکن رو کپی کنید و تو متغیر token که قبلا تعریف کردیم بریزید که نتیجه بشه مثل این:
یاتون باشه هر رباتی که میسازید یه توکن منحصر به فرد داره و اون توکن رو در دسترس هیچکس قرار ندید.
#bot_tel
ای بابا دوباره مسیرمون به فایل package.json افتاد خوب اشکال نداره
ولی به دانشتون اضافه میشه
خوب فایل package.json رو باز کن و دنبال این بگرد:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
پیداش کردی بیا یه اسکریپت جدید بهش اضافه کنیم
اونم اینه:
"start": "nodemon index.js"
این دستور رو داخل اون اسکریپت اضافه کن مثل این :
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
}
اضافه کردی دمت گرم عالی شد.
الان نوبت دست به کد شدنه:
فایل index.js رو باز کن و بعد اینهارو داخل بنویس:
import { Telegraf } from "telegraf";
const token=<botToken>
const bot = new Telegraf(token);این هارو که نوشتی یه ۱۲ بار اینتر بزن که فضای خالی ایجاد بشه
و موقعی که ایجاد شده اینو بنویس:
bot.launch().
قبل از همه چیز وارد @BotFather بشید و یه ربات برا خودتون درست کنید و موقعی که درست کردین بهتون یه توکن میده و اون توکن رو کپی کنید و تو متغیر token که قبلا تعریف کردیم بریزید که نتیجه بشه مثل این:
const token="8893587436:AAG12dkencG4zh7uLBLCsd07fayEOBVD5Njs"
یاتون باشه هر رباتی که میسازید یه توکن منحصر به فرد داره و اون توکن رو در دسترس هیچکس قرار ندید.
قسمت چهارم
#bot_tel
❤5👏1
</homeCode>
بریم برای مرحله بعد: ای بابا دوباره مسیرمون به فایل package.json افتاد خوب اشکال نداره ولی به دانشتون اضافه میشه خوب فایل package.json رو باز کن و دنبال این بگرد: "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } پیداش کردی بیا یه اسکریپت…
خوب بریم سراغ اخرین قسمت:
انشاالله که همه چی رو درست انجام داده باشید.
همونطور که میدونی ما داخل جاوا اسکریپت یکسری event ها یا همون رویداد ها داریم به عنوان مثال ایوینت onClick موقعی اجرا میشه که روی یه دکمه کلیک شده باشه.
همینطور ما در ربات تلگرام هم ایوینت داریم اما یکمی فرق داره
ایوینت استارت داریم برا موقعی که کاربر ربات مارو استارت کرد اجرا میشه
ایوینت مسیج داریم که موقعی که کاربر پیام داد اجرا میشه
حالا اینهارو گقتیم چطوری میشه باهاشون کار کرد؟!
بعد اینکه ربات خودتون رو ساختید مثل این مثال پایین
بعد اینها مینویسید
اگه داخل ایرانید که شوربختانه باید فلترشکن روشن کنید اگه خارج از ایرانید بستگی به منطقتون داره اگه فیلتره که نیازه که از فلترشکن استفاده کنید اگه نیست که هیچ (خوشبحالتون)
حالا ترمینال vscode تون رو باز کنید و این دستور زیر رو وارد کنید
و تمام .
|اما یه نکته یی هم هست اگه توکن ربات تلگرام نتونه به سرور های تلگرام وصل بشه بهتون ارور میده داخل ترمینال
اگه ارور نداد یعنی با موفقیت وصل شده به سرور های تلگرام.
حالا وقتشه به رباتتون مراجعه کنید و استارت رو بزنید
ببینید ایا همون پیامی که نوشتید براتون ارسال میشه یا نه
اگه نشد میتونید کد هاتون برام بفرستید راهنماییتون کنم.
انشاالله که همه چی رو درست انجام داده باشید.
همونطور که میدونی ما داخل جاوا اسکریپت یکسری event ها یا همون رویداد ها داریم به عنوان مثال ایوینت onClick موقعی اجرا میشه که روی یه دکمه کلیک شده باشه.
همینطور ما در ربات تلگرام هم ایوینت داریم اما یکمی فرق داره
ایوینت استارت داریم برا موقعی که کاربر ربات مارو استارت کرد اجرا میشه
ایوینت مسیج داریم که موقعی که کاربر پیام داد اجرا میشه
حالا اینهارو گقتیم چطوری میشه باهاشون کار کرد؟!
بعد اینکه ربات خودتون رو ساختید مثل این مثال پایین
const token="8893587436:AAG12dkencG4zh7uLBLCsd07fayEOBVD5Njs"
const bot = new Telegraf(token);
بعد اینها مینویسید
bot.start(async (ctx)=>{
await ctx.reply("سلام کاربر عزیز خوش امادید به ربات تستی")
})
اگه داخل ایرانید که شوربختانه باید فلترشکن روشن کنید اگه خارج از ایرانید بستگی به منطقتون داره اگه فیلتره که نیازه که از فلترشکن استفاده کنید اگه نیست که هیچ (خوشبحالتون)
حالا ترمینال vscode تون رو باز کنید و این دستور زیر رو وارد کنید
npm start
و تمام .
|اما یه نکته یی هم هست اگه توکن ربات تلگرام نتونه به سرور های تلگرام وصل بشه بهتون ارور میده داخل ترمینال
اگه ارور نداد یعنی با موفقیت وصل شده به سرور های تلگرام.
حالا وقتشه به رباتتون مراجعه کنید و استارت رو بزنید
ببینید ایا همون پیامی که نوشتید براتون ارسال میشه یا نه
اگه نشد میتونید کد هاتون برام بفرستید راهنماییتون کنم.
قسمت اخر
1❤3👏2
</homeCode>
خوب بریم سراغ اخرین قسمت: انشاالله که همه چی رو درست انجام داده باشید. همونطور که میدونی ما داخل جاوا اسکریپت یکسری event ها یا همون رویداد ها داریم به عنوان مثال ایوینت onClick موقعی اجرا میشه که روی یه دکمه کلیک شده باشه. همینطور ما در ربات تلگرام هم…
بهم بگید تونیستید درست کنید یا نه
👎1😱1
This media is not supported in your browser
VIEW IN TELEGRAM
ازین بدبخت تر مگه داریم؟
ببین دنبال هدفت که باشی
تو همه جور حالت دنبالش میری
ببین دنبال هدفت که باشی
تو همه جور حالت دنبالش میری
🔥7
فرض کنید برای انتقال تمام پساندازتان به یک بانک، یک ماشین زرهپوشِ ضدگلوله با دهها نگهبان مسلح کرایه میکنید. ماشین از خطرناکترین جادهها و از میان راهزنها به سلامت عبور میکند و به بانک میرسد. شما با خیال راحت پولها را تحویل میدهید و برمیگردید.
اما فردا صبح میفهمید پولهایتان سرقت شده! چرا؟ چون ماشین زرهپوش کارش را درست انجام داد، اما درِ گاوصندوق بانک خراب بود، نگهبان خوابیده بود و دزدها به راحتی از پنجرهی پشتی وارد بانک شدند!
در دنیای اینترنت، آن ماشین زرهپوش همان HTTPS (یا همان علامت قفل کنار آدرس سایت) است و آن بانک بیدر و پیکر، خودِ سایت (وباپلیکیشن) است.
🛡️ توهم امنیت: چرا قفلِ کنار سایت گولزنک است؟
خیلی از ما فکر میکنیم وقتی کنار آدرس یک سایت علامت «قفل» میبینیم، یعنی آن سایت مثل یک دژ نفوذناپذیر است. اما بیایید با کلمات ساده و منطقی، این توهم را بشکنیم:
وظیفه HTTPS فقط و فقط محافظت از مسیر است؛ یعنی تونلی امن بین گوشی شما و سرور سایت میسازد تا کسی نتواند بین راه (مثلاً وقتی به وایفای کافه وصل هستید) پیامهای شما، رمز عبور یا اطلاعات بانکیتان را بو بکشد یا بدزدد.
اما وقتی اطلاعات شما از این تونل امن رد شد و به مقصد (یعنی کدهای خود سایت) رسید، وظیفه HTTPS تمام میشود. حالا امنیتِ اطلاعات شما، دستِ برنامهنویسِ آن سایت است. اگر برنامهنویس کدهای سایت را پر از سوراخ نوشته باشد، هکر نیازی ندارد تونل شما را منفجر کند؛ او مستقیماً به خود سایت حمله میکند.
👾 هکرها چطور یک سایتِ دارای HTTPS را دور میزنند؟
وقتی مسیر امن است، هکرها باهوشتر عمل میکنند و از ضعفهای خود اپلیکیشن استفاده میکنند. چند نمونه از این حقههای زیرکانه:
زبانبازی با نگهبان (SQL Injection): سایتها یک اتاق بایگانی دارند به اسم «دیتابیس». هکر به جای وارد کردن نام کاربری در فرم ورود، یک سری دستورات عجیب مینویسد. کدهای سایتِ ضعیف، گیج میشوند و فکر میکنند این دستورات از طرف مدیر صادر شده؛ پس درِ دیتابیس را باز میکنند و تمام اطلاعات کاربران را دوستی تقدیم هکر میکنند!
دزدیدن کارت دعوت (XSS): هکر یک لینک آلوده به شما میدهد یا کدی را در بخش کامنتهای سایت جا میگذارد. وقتی شما کامنت را میخوانید، آن کدِ مخفی، «کارت شناسایی» شما در آن سایت (کوکیها) را میدزدد. حالا هکر بدون نیاز به رمز عبور شما، با کارت شناسایی شما وارد سایت میشود.
کلیدهای زیر پادری (باگهای ساده): استفاده از افزونههای قدیمی در وردپرس، رمزهای عبور ساده مثل123456برای پنل مدیریت، یا باز گذاشتن دسترسی به فایلهای حساس. اینها نیازی به هک کردن ندارند؛ خودمان کلید را زیر پادری گذاشتهایم!
🚧 چطور این سوراخها را ببندیم؟
برای اینکه هم ماشین زرهپوش داشته باشیم و هم گاوصندوقمان امن باشد، صاحبان سایتها باید این چند قدم منطقی را بردارند:
به هیچکس اعتماد نکن (Input Validation): سایت نباید هر چیزی که کاربر تایپ میکند را دربست قبول کند. هر کلمهای که وارد فرمها میشود باید قبل از رسیدن به هسته سایت، چک و فیلتر شود.
استخدام یک بادیگاردِ نامرئی (WAF): استفاده از «فایروال وباپلیکیشن». این سیستم مثل یک بانسِر (نگهبان درِ کلوب) عمل میکند؛ رفتارها و کدهای مشکوک را قبل از اینکه وارد سایت شوند، شناسایی و بیرون میاندازد.
تعویض مداوم قفلها (Update): زبانهای برنامهنویسی، افزونهها و سیستمهای مدیریت محتوا باید همیشه به آخرین نسخه آپدیت شوند تا سوراخهای امنیتیِ کشفشده، وصله شوند.
تست نفوذ (Pen-Test): قبل از اینکه هکر واقعی به سایت حمله کند، باید به یک هکر کلاهسفید (اخلاقی) پول بدهید تا به سایتتان حمله کند و به شما بگوید از کجاها ضربهپذیر هستید.
حرف آخر: HTTPS برای امنیت «ارتباط» ضروری است، اما برای امنیت «سایت» کافی نیست. حتی سایتهای کلاهبرداری (فیشینگ) هم این روزها میتوانند در کمتر از ۵ دقیقه برای سایتشان قفل سبزِ HTTPS بگیرند!
❤4