نوشته های masood shaterabadi

آموزش ساخت یک وبلاگ با Strapi و React JS (قسمت اول)

masood shaterabadi — Tue, 01 Sep 2020 11:38:44 +0430

خب سلام دوستان عزیزتر از جان قسمت های قبلی :آموزش ساخت یک وبلاگ با Strapi و React JSامروز میخایم جلسه اول دوره آموزش ساخت یک وبلاگ با Strapi و React JS رو با همدیگه شروع کنیم .این دوره رو سعی میکنیم جوری پیش ببریم که دوستانی که آشنایی زیادی با ری اکت و استرپی ندارند هم بتونن کار رو یادبگیرن بهتره کمتر حرف بزنم و زودتر شروع کنم !!!خب بریم سراغ نصب استرپی و استفاده از اون:شما برای استفاده از این سیستم مدیریت محتوا و ری اکت جی اس قبل از همه چی Node JS روی سیستمتون نصب کرده باشین و حتما مطمعن شید که npm براتون فعال شده باشه.نصب استرپی به دو صورت نصب میشه و میتونین ازش استفاده کنین که اونها رو براتون تک به تک توضیح میدم:روش اول : ( روش توصیه شده )اول از همه باید CMD ویندوز یا ترمینال لینوکس رو باز کنید . بعد دستور زیر رو وارد کنید: npm install -g strapi@alphaاین کد رو باید توی CMD ویندوز یا ترمینال لینوکس وارد کنید نصب استرپیدقیقا مثل شکل بالا کدارو وارد کنید بعداز چند دقیقه نصب استرپی تموم میشه ( البته نسبت به سرعت فیلترنت و سیستمون ممکنه کمتر از چند دقیقه و یا بیشتر از چند دقیقه بشه)اتمام نصب استرپی خب وقتی پیام بالا مطابق تصویر رو دیدین بدونید که آخرین ورژن استرپی براتون نصب شده و آماده استفاده اس ( همون که دورش خط قرمز کشیدم )نصبش کردیم اما چطور میشه ازش استفاده کرد ؟؟؟توی این روش استرپی رو مثل نود جی اس روی کل سیستم نصب و پیاده سازی میکنیم اما برای اینکه بتونیم ازش استفاده کنیم نیازه که یک خط کد دیگه بزنیم تا بشه ازش استفاده کرد که اونم بعد روش دوم براتون میگم .روش دوم :روش دوم روش ساده تریه اما یکم اذیت کننده اس توی این روش باید برای هر پروژه جدیدی که دارین یک بار استرپی رو نصب کنین (که البته این روش برای localhost اذیت کننده اس اما روی سرور باید برای هر سرور جداگانه نصب کنین ) برای اینکه پروژه رو استارت بزنیم کد زیر رو توی CMD ویندوز یا ترمینال لینوکس وارد کنید:اگر از npm استفاده میکنید کد زیر :npx create-strapi-app my-project --quickstartو اگر از yarn استفاده میکنید کد زیر رو وارد کنید :yarn create strapi-app my-project --quickstartبه این خط تیره ها خیلی دقت کنید ونکته هایی راجب این دو کد هست باید بهتون بگم اینه که به جای اون my-project اسم پروژتونو باید بزنین . اون quickstart آخرش رو نزدید هم مشکلی پیش نمیاد ولی برای سرعت بیشتر تو روند نصب بزنیدشخب اینم از دو روش نصب استرپی بریم سراغ ساخت اولین پروژه استرپیمون:خب من از روش اول استفاده میکنم چون ساده تر و راحت تره دیگه هر دفه نیاز نیست صبر کنم هم پروژه رو برام بسازه هم استرپی رو توی پوشه برام نصب کنه .اما اینم بگم که جلوتر گیج نشین ادامه روش اول دقیقا کد هاش شبیه به روش دومه با این تفاوت که سرعت ساخت پروژه بالاتر میره خب بعد از اینکه استرپی رو نصب کردیم توی هر جایی که دلتون خواست ی پوشه برای پروژه تون بسازید برای اینکار میتونید از طریق CMD یا ترمینال هم پیش برین که هم حرفه ای تره D: هم راحت تراز طریق CMD یا ترمینال وارد درایو مورد نظر بشین با دستور زیر cd Desktop با این کد من وارد دسکتاپ سیستمم شدم mkdir weblog با این کد یک پوشه جدید با نام وبلاگ ساختمcd weblog و با این کد وارد پوشه ای که ساختم شدم خب حالا کد زیر رو میزنیم تا پروژه برامون ایجاد شه :اگر از npm استفاده میکنید کد زیر :npx create-strapi-app backend --quickstartو اگر از yarn استفاده میکنید کد زیر رو وارد کنید :yarn create strapi-app backend --quickstartمن اسم پوشه استرپی رو گذاشتم backend که با پوشه ری اکتم قاطی نشه خب بعد از اینکه پروژه به صورت کامل ایجاد شد با کد زیر وارد پوشه استرپی میشیم : cd backendاینجا وارد پوشه استرپی شدیم و حالا نیازه که اون رو اجرا کنیم هموجا تو خط کامند سیستم کد strapi develop برای اینکه شما بتونید کانفیگ استرپی رو تغیر بدید strapi start توی این حالت شما فقط میتونید دیتا ها رو تغییر بدید رو باید بزنید تا پروژه اجرا بشه خب این قسمت خیلی طولانی شد و یاد گرفتیم که استرپی رو نصب کنیم ، پروژه ایجاد کنیم و اون رو اجرا کنیم توی جلسه بعدی میایم با استرپی دیتابیس هامونو میسازیم و مجوز دسترسی ها رو ایجاد میکنیم.اگر از این آموزش خوشتون اومده لایک و کامنت و فالو رو فراموش نکنید تا جلسه بعدی خدا نگهدار

آموزش ساخت یک وبلاگ با Strapi و React JS

masood shaterabadi — Tue, 11 Aug 2020 08:15:25 +0430

آموزش ساخت یک وبلاگ با Strapi و React JSسلام به همه دوستانی که مارو دنبال میکنن.یه مدت بخاطر مشغله کاری نتونستم که براتون پست آماده کنم ولی از امروز میخوایم یه آموزش خیلی خفن و کاربردی رو شروع کنیم .خب بریم سراغ پیش نیاز های این دوره ای که میخوایم شروع کنیم :1 - داشتن دانش کد نویسی با React JS2 - داشتن اطلاعاتی در مورد چگونگی ذخیره سازی اطلاعات در دیتابیس3 - توانایی استفاده از API ها چه چیزی اینجا یاد میگیریم ؟اینجا ما با استرپی یک بک اند برای سایتمون طراحی میکنیم دیتابیس رو جدول بندی میکنیم و میریم سراغ React که ما به ظاهر سایتمون میپردازیم و یک وبسایت ساده مثل ویرگول رو تولید میکنیم.اگر هنوز با استرپی آشنا نشدین و نمیدونید Headless CMS ها چه چیزایی هستن ازتون خواهش میکنم اول این پست ها رو بخونید بعد بیاید سراغ این آموزش: مدیریت محتوای بدون سر (Headless cms) چیست؟بهترین سیستم های مدیریت محتوای بدون سر رایگانآخر این دوره شما یک وبلاگ داینامیک ( تقریبا شبیه ویرگول ) ساختین و سعی میکنم آموزش آپلود این پروژه رو روی هاست یا سرور رو هم براتون بزارم پس همه با هم برو که رفتیم . تا جلسه اول دوره خدا یار و یاورتون.

بهترین سیستم های مدیریت محتوای بدون سر رایگان

masood shaterabadi — Mon, 20 Apr 2020 12:30:55 +0430

بهترین سیستم های مدیریت محتوای بدون سر رایگانسلام به همه دوستان گل گلابامروز طبق قولی که بهتون دادم اومدم که بهترین سیستم های مدیریت محتوای بدون سر رو بهتون معرفی کنم و کمی راجبشون صحبت کنیم .طبق توضیحاتی که جلسه قبل دادم امروز بدون مقدمه میریم سر اصل مطلب.من این سیستم ها رو به دو دسته کاملا رایگان و اوپن سورس و دسته دوم سیستم هایی که حالت رایگان دارن اما امکانات بیشتری بخواین باید پول بدید .خب میریم سراغ دسته اولی که قراره باهاشون آشنا شیم :DOTCMS : dotcmsاین سیستم کاملا رایگان و متن بازه (OPEN SOURCE) که در سال 2003 در میامی فلوریدا تولید و عرضه شد سیستم DOTCMS علاوه بر مدیریت محتوا قدرت بالایی برای بکار بردن در پروژه های IOT داره .از مهم ترین امکاناتش در حوزه مدیریت محتوا داشتن ویرایشگر متن WYSIWYG ، قابلیت درگ اند دراپ و تنها سیستم مدیریت محتوا بدون سر رایگان که میشه باهاش فروشگاه اینترنتی راه اندازی کرد که این قابلیت رو توی هیچکدوم از سیستم های بعدی که معرفی میکنم وجود نداره. این سیستم کلی قالبه که دیگه در صورت تنبلی بیش از حد میتونین از اونا استفاده کنین .STRAPI:STRAPI a headless cmsاسترپی اسم بامزه ای داره و کار کردن باهاش مثلاسمش لذت بخشه این سیستم توی فرانسه متولد شده و یک نرم افزار متن بازه که با زبان nodeJS نوشته شده .اون به شما این اجازه رو میده که از API چندگانه یا اینی خارجکیا میگن multiple APIs به راحتی آب خوردن استفاده کنین.شما میتونید با بیشتر زبان ها براش ظاهر بسازید.با استرپی میتونین پنل ادمین رو شخصی سازی کنین ، افزونه براش تعریف کنین . تازه کلی هم لایه های امنیتی داره مثل : CSFR , CORS , P3P و XSSNetlifyCMS:NETLIFY CMS این سیستم رو یه تعداد از افراد انجمن متن باز با REACT JS نوشتن و رایگان در اختیار ما قرار دادنخود سایت NETLIFY رایگان براتون سرور آماده کرده که میتونید برنامه هایی که با REACT , VUE و angular نوشتین رو به راحتی اونجا آپلود کنین و خیلی راحت ازش استفاده کنین اما تنها مشکلی که این وسط اذیت میکنه اینه که این سایت برای ایران تحریمه .این سیستم جوری طراحی شده که نوسنده محتوا و حتی ما برنامه نویسا اذیت نشیم.کلا این گروه خیلی به فکر ما هستن :)WEBINY: webiny a headless and serverless cmsآقا این سیستم اومده ی کاری کرده تو دیگه نیازی به سرور برای سیستم مدیریت محتوات نخوای وبینی کل موارد موردنیاز رو طراحی کرده رو سرور های خودش بارگزاری کرده شما فقط کافیه که از API هایی که بهتون میده استفاده کنید . این سرویس با NODE JS , REACTJS و GraphQL API نوشته و آماده استفاده من و شما شده این سیستم هم مث بقیه رایگان رایگانه فقط منبع باز نیسسسست.Wordpress REST API :wordpress rest apiبا وردپرس که دیگه همتون آشنایید.با این REST API ها شما میتونید به راحتی برای وردپرستون قالب طراحی کنین .COCKPIT :COCKPIT CMSخب خب خب اینم مثل اونیکیا کاملا رایگانه و متن بازه و توی ی شهری که اسمش خیلی سخته (Wulmstorf) توی آلمان به دنیا اومد . اونا خودشونو یک " اراِِئه دهنده محتوا " میدونن نه یه سایت ساز که درستم فکر میکنن .این سیستم نسبت به سیستم های قبلی خیلی خیلی خیلی ساده س و فقط شما میتئنید محتواتونو توش مدیریت کنین نه هیچ چیز دیگه ای .DIRECTUS : Directus headless cmsاین سیستم توی بروکلین به دنیا اومده (بچه پولداره) و متن باز و کاملا رایگانه که با VUE JS نوشته شده .اون با یه متد سفارشی و مستقیم پایگاه داده های SQL رو مدیریت میکنه .ایده اصلی اون این بوده که برنامه نویسان چه مبتدی چه حرفه ای بتونن بدون نیاز ب دانش فنی و یا یادگرفتن یه چهارچوب خاص قادر به ساخت دیتابیس و استفاده از اون باشن . وقتی پایگاه داده آماده شد ، API یا SDK های Directus می تونن به هم متصل شن ، در نتیجه یه رابطه قابل تنظیم ایجاد می شه که کاربران تجاری می تونن از اون برای مدیریت محتوای دیتابیس برای وب سایت ها و برنامه های خودشون استفاده کنن.خب دیگه بهترین سیستم های مدیریت محتوای بدون سر رایگان رو معرفی کردم براتوناونایی که حالت پرمیوم طوری دارن رو هم براتون این پایین لیست میکنم :FlameLinkkontentPrisemic.ioSANITYStoryblokTakeshapeCraftCMSAgilityهمه اسم های بالا لینک به سایتاشونه میتونین برین اونجا بیشتر باهاشون آشنا بشین.خب اینم از جلسه امروز ، فردا قرار شد که با REACT JS و یکی از این سیستم های مدیریت محتوا یه وبلاگ ساده بنویسیم .پس با ما باشین.از خودتون مراقبت کنین .تا جلسه بعد به درود.

مدیریت محتوای بدون سر (Headless cms) چیست؟

masood shaterabadi — Sun, 19 Apr 2020 10:33:38 +0430

سیستم مدیریت محتوای بدون سر (HEADLESS CMS)سلام به همه دوستان امیدوارم همتون سالم و سرحال باشید امروز یه آموزش سریالی براتون آوردم که هر روز یک قسمت از اونو براتون میزارم و سعیمو میکنم که برای فهم بهتر پروژه محور پیش بریم .خب بریم سر اصل مطلب ، CMS چیه ؟؟؟ به نرم افزاری که بتونیم از طریق اون محتوایی که تولید میکنیم و میخوایم منتشرش کنیم رو مدیریت کنه رو سیستم مدیریت محتوا میگن . معمولا نرم افزار هایی که برای مدیریت وبسایت ها استفاده میشن رو CMS میگن مثل وردپرس ، جوملا ، دروپال و ...خب حتما میپرسید حالا که چی ؟؟ چه ربطی به مدیریت محتوای بدون سر داشت ؟؟من تا اینجا با سیستم مدیریت محتوا با سر رو بهتون معرفی کردم که توی این سیستم ها شما علاوه بر مدیریت محتوا میتونید شکل ظاهری وبسایت و نحوه قرارگیری اطلاعات رو توی ظاهر وبسایت طبق الگو های پیشفرض تعیین کنید .بریم سراغ مدیریت محتوای بدون سر !! حالا میپرسی چرا بدون سر ؟؟چون توی این مدل سیستم های مدیریت محتوا ، سیستم فقط وظیفه ذخیره اطلاعاتی که بهش میدی به صورت کاملا استاندارد و ایمن رو داره و هیچ دخالتی نمیکنه که اطلاعات کی ؟ کجا؟ چرا؟ و چگونه نمایش داده میشه به کاربر.این سیستم ها عملا نقش یک برنامه نویس حرفه ای سمت سرور (BACK-END) رو برای شما بازی میکنه .اطلاعات رو ذخیره میکنه و هرجا بخواین بهتون اطلاعات رو میده و این کاملا به شما بستگی داره که کجا و چطوری اونو نمایش بدید به کاربران.شاید این سوال براتون پیش اومده باشه که چه وقتی از این سیستم بدون سر استفاده کنیم؟؟زمانی که دسترسی به برنامه نویس سمت سرور ندارید زمانی که نمیتونید هزینه یک برنامه نویس دیگه رو بدیدزمانی که میخواید کل پروژه رو خودتون به تنهایی انجام بدیدزمانی که از تکنولوژی هایی مانند REACTJS , VUE JS , ANGULAR استفاده میکنیدخب تا اینجا تونستیم بفهمیم که این سیستم چیه و چطوری کار میکنه وچه وقت باید ازش استفاده کرد توی جلسه بعدی چند تا از سیستم های مدیریت محتوای بدون سر ( HEADLESS CMS) قوی رو بهتون معرفی میکنم و در جلسات بعدی با هم به کمک React JS و یکی از این سیستم ها یه وبلاگ ساده با همدیگه مینویسیم و لیست لینک جلسات بعد رو توی این پست آپدیت میکنم.امیدوارم مطالب رو به خوبی بهتون انتقال داده باشم .تا جلسه بعدی به درود ; )لینک جلسه بعد : https://vrgl.ir/x9b43

ترفند های Css قسمت دوم

masood shaterabadi — Wed, 01 Apr 2020 15:40:24 +0430

ترفند های Css قسمت دومسلام به همه دوستان .امیدوارم تا الان سیزده خوبی بدر کرده باشین البته توی خونه هاتون.امروز هم طبق روال همیشه یه ترفند باحال آوردم که میتونید توی طراحیاتون ازش استفاده کنید آماده اید بریم سراغ کد ها ؟کد های HTML : دکمه نئون خب فک میکنم کدای HTMLش راحت بوده باشه براتون .اما اصل کار توی کد های CSS اونه .کد های CSS :@font-face{ font-family: "IYMed" font-weight: 400; font-style: normal; src: url('./IYMed.woff') format('woff')/* Safari, Android, iOS */ } // برای فونت میتونید اینجا هر فونتی که مد نظر خودتونه استفاده کنید body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #031321; font-family: 'IYMed'; } a{ position: relative; display: inline-block; padding: 15px 30px; color: #2196f3; text-transform: uppercase; text-decoration: none; font-size: 34px; overflow: hidden; transform: 0.2s; } a:hover{ color: #255784; background-color: #2196f3; box-shadow: 0 0 10px #2196f3 , 0 0 40px #2196f3 , 0 0 80px #2196f3; transition-delay: 1s; } a span{ position: absolute; display: block; } a span:nth-child(1){ top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg , transparent , #2196f3); } a:hover span:nth-child(1){ left: 100%; transition: 1s; } a span:nth-child(3){ bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg , transparent , #2196f3); } a:hover span:nth-child(3){ right: 100%; transition: 1s; transition-delay: 0.5s; } a span:nth-child(2){ top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg , transparent , #2196f3); } a:hover span:nth-child(2){ top: 100%; transition: 1s; transition-delay: 0.25s; } a span:nth-child(4){ bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg , transparent , #2196f3); } a:hover span:nth-child(4){ bottom: 100%; transition: 1s; transition-delay: 0.75s; }خب اینم از ترفند امروز امیدوارم خوشال و سرحال باشید از خونه هم بیرون نرید تا اینکه کرونا تموم شه اگر سوالی داشتید بهم پیام بدید خوشحال میشم کمکتون کنم ..تا ترفندی دیگه خدانگهدار

ترفند های css

masood shaterabadi — Tue, 31 Mar 2020 13:57:28 +0430

css tricksسلام به همه دوستانی که این روز ها توی قرنطینه حوصلشون سر رفته . امروز براتون تیکه کد html و css آوردم شاید بدردتون بخوره و با اون میتونید کارای خلاقانه خفن بکنین .با این ترفند میتونین موس رو در جای های مختلف به شکل های متفاوتی در بیارین :اول کد های html `

happy

sad

poker

به همین سادگی htmlش تموم شد آماده اید بریم css هم انجام بدیم ؟؟؟سعی کن کپی پیست نکنی تا تو ذهنت بمونه همش حالا کد های css : .cursor{ width: 186px; height: 186px; position: relative; border-radius: 12px; background-color: #881238; box-shadow: 0px 4px 12px rgba(105, 6, 38, 0.25); display: inline-block; margin-left: 24px; transition: 200ms ease; } .cursor:hover{ background-color: #BC144A; } .cursor:first-of-type{ margin-left: 0; } .cursor p { width: 100%; text-align: center; margin-top: 0px; margin-bottom: 0px; line-height: 186px; color: white; pointer-events: none; } #poker{ cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/meh.png"),auto; } #sad{ cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"),auto; } #happy{ cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"),auto; }اگر سوالی داشتید بهم پیام بدید خوشحال میشم کمکتون کنم ..تا ترفندی دیگه خدانگهدار