دوره ساخت وب سایت مشابه Virgool.io با Vue.js و Laravel به صورت spa -جلسه اپدیت لاراول به 7.8 و ارسال درخواست به سرور
دسته بندی: طراحی و برنامه نویسی وب
- تعداد شرکت کننده گان: 235 نفر
- جلسات منتشر شده: 219 جلسه
- مدت زمان دوره: 52:13:00
- قیمت دوره: 150000 تومان
- وضعیت دوره: تکمیل شده
- درصد تکمیل شده: 100%
توفیق حمزه ئی
712
دانشجو دارد4
دوره دارد644
جلسه منتشر کردهباز تولید دوره وبلاگ - ساخت وب سایت مشابه Virgool.io با Vue.js و Laravel به صورت spa
پیشنیاز این دوره اشنایی با لاراول و ویو هستش
در صورت ارائه نسخه جدید لاراول نسخه پروژه این دوره هم اپدیت میشه
این دوره به صورت فولستک تدریس میشه از طراحی قالب الی انتقال بر روی سرور.
قالب با استفاده از vuetify در دوره ایجاد میکنیم که یک ui Library زیبا برای vue.js هست.
همچنین از composition api که یک شکل جدید نوشتن vue در ورژن 3 هست استفاده شده کدای vuejs از ورژن 2(optianal api) به ورژن (composition api) ریفکتور میشه ولی همچنان روش قدیمی قابل استفاده هست.
همچنین برای احراز هویت کاربران از laravel sanctum استفاده شده که به جای توکن از سشن استفاده میکنیم که برای SPAها ایمن‌تر هست.
بخش نظرات به صورت realtime و با استفاده socket.io میسازیم که نیازی به پوشر نداشته باشیم.
همچنین بخش محبوبترین نوشته های سایت از ردیس استفاده میکنیم تا بهینه تر باشه و نیازی به دیتابیس mysql نباشه.
ایمیل ها با استفاده از جاب ها به کاربر ارسال میشه تا اگر ارسال ایمیل به مشکل خورد لاراول برای ارسال دوباره تلاش کنه و همچنین بهینه تر باشه.
همچنین بخش ادمین برای مدیریت بخش های محتلف که از data table مربوط به vuetify استفاده کردیم تا حد ممکن شخصی سازی کرده و همچنین قابلیت مرتب کردن و صفحه بندی با استفاده از لارول رو به data tableمون اضافه میکنیم.
در اخر میپردازیم به لاگین با استفاده از گوگل که کاربر با حساب گوگلش هم قادر به لاگین در سایت باشه.
بقیه فیچر ها:
- پروفایل کاربر
- تایید حساب کاربری
- tiptap text editor
- ساخت پیش نویس قبل ایجاد نوشته
- نظرات تودرتو(مانند reddit)
- ذخیره و لایک نوشته ها
- دنبال کردن کاربران(follow)
- ارسال نوتیفیکشن هنگام لایک شدن یا ارسال یک نظر در نوشته کاربر
- ارسال ایمیل هنگام لایک شدن یا ارسال یک نظر در نوشته کاربر در صورت فعال بودن فیلدها
- نمایش جدید ترین نوشته های دوستان
- جستجو در بین نوشته ها
میتوان اشاره کرد.
همچنین در این دوره به روش های مختلف ریفکتور کردن کد ها هم در قسمت بک اند هم بخش فرانت اند گفته میشه و کدامون رو تا حد ممکن خوانا و بهینه میکنیم :)
تا اکنون 135 دیدگاه ارسال شده است. شما نیز دیدگاه تان را بنویسید. ارسال دیدگاه
alireza
سلام ببخشید یه سوال داشتم من هر کاری می کنم این vuetify راستچین نمیشه با rtl: true ولی توی سورسی که دادید rtl میشه. میشه منو راهنمایی کنید من با لاراول 8 و "vue": "^2.5.17" کار می کنم و دقیقا هم مثل شما رفتم ولی نمیدونم چرا اینطوری میشه. ممنون میشم منو راهنمایی کنید.
سجاد عوض پور
سلام استاد وقت بخیر ببخشید بنده فونت رو به پروژه اضافه کردم اما متاسفانه اعمال نمیشه هیچ ارروری هم از npm دریافت نکردم امکانش هست راهنمایی بفرمایید؟!
توفیق حمزه ئی
با اقای نیکو Nikoo_Mohammad@ در تلگرام در ارتباط باشیدتا به من وصلتون کنن ببینم مشکلتون چیه
حمیدرضا خسروی
سلام خسته نباشید استاد فایل قالب پروژه باید از کجا دانلود کنم؟
توفیق حمزه ئی
سلام قالب داخل خود پروژه هست و ما هرچی که نیاز داشتیم رو از اول ساختیم و از قالب اماده استفاده نشده.
علی کرم نیا
اتصال به درگاه بانگ توضیح داده میشه به صورت عملی
توفیق حمزه ئی
دوره وبلاگ هست برای همین درگاه بانکی نداریم. میتونین دوره فروشگاه فایل رو چک کنین.
ممد
سلام آقای حمزه ئی عزیز خوب هستید؟ من 3 ماهه 4 ماهه لاراول رو شروع کردم و تا حدود زیادی باهاش کار کردم و اینکه این دوره مناسب من هس ک میخوام خیلی پیشرفته با لاراول کد بزنم ؟ ممنون میشم توضیح مختصری بدین ممنون
توفیق حمزه ئی
سلام دوست عزیز، اولا شما پیش نیاز این دوره رو یعنی لاراول و ویوجی اس رو باید رعایت کنین برای vue.js دوره خود من فصل اولش رایگان هست که تا حدود زیادی پیش نیاز رو پوشش میده هر چند composition api در ورژن 3 ویو تغییراتی داشته که اونا در دوره ویو بررسیش کردیم. اما برای کد نویسی پیشرفته لاراول این رو باید خودتون تصمیم بگیرین چون ما در اینجا از لاراول تقریبا به صورت api استفاده میکنیم و شاید تعریف شما از کدنویسی پیشرفته لاراول فرق کنه ولی به نظر خودم حل کردن مسایل مختلف در لاراول مهم تر از کدنوشتن پیشرفته هست. چرا؟ چون وقتی خیلی از مسائل رو حل کنین طبیعتا کم کم کدنویسی پیشرفته رو در این میان یاد میگیرید.
امیر
سلام وقت به خیر یه سوال داشتم شما در controller برای لایک پست از sync استفاده کردید و برای فالو کردن از toggle می خواستنم بپرسم چون فالو کردن فقط داره روی مدل یوزر اعمال میشه از toogle استفاده کردید یا در لایک کردن هم میشه از toggle استفاده کرد ؟ ممنون
توفیق حمزه ئی
سلام نحوه کار این دو متود فرق میکنه برای sync وقتی بهش یک لیست از id بهش بدین برای رابطه بین این دو مدل فقط اونا رو نگه میداره هرچی بین اونا نباشه حذف میشه و فقط این ایدی ها باقی میمونن البته این رفتار پیش فرض این متد هستش. و نحوه کار toggle اینه که لیست ایدی هایی که بهش پاس داده شده اگه توی رابطه نباشه، به دیتابیس اضافه میکنه و اگه توی رابطه باشه از دیتابیس حذف میکنه. toggle برای جایی به درد میخوره که برای اضافه یا حذف فقط یک api درست کنیم.
علیرضا
من تقریبا دو ساله با لاراول پروژه های مختلفی رو زده ام و این رو قاطعانه میگم که تدریس آقای حمزه ئی ، اصولی و دقیقا همه اون چیزی بود که بهش نیاز داشتم.
توفیق حمزه ئی
اگه این دوره ها کمترین کمک رو هم بهتون کرده باشن باز هم خیلی خوشحال میشم و بازم سعی میکنم کیفیت دوره‌ها رو بالاتر ببرم D:
امیر
سلام وقت به خیر من تنظیمات laravel-echo رو مطابق آموزش انجام دادم و سرورم میتونه event ها رو listen کنه ولی تو فرانت callback متد listen اصلا اجرا نمیشه و حتی یه رشته رو هم console نمی کنه توی تلسکوپ هم همه چی اوکیه و هم event و هم redis با موفقیت اجرا میشند ممنون میشم کمکم کنید
توفیق حمزه ئی
سلام دوست عزیز خیلی خوب شد این کامنت رو گذاشتین چون بقیه هم میتونن متوجه بشن چرا این کار نمیکنه. در حال حاضر laravel/echo با ورژن جدید socket.io-client یعنی ورژن 3 سازگار نیست اگه به فایل package.json پروژه من هم نگاه بندازین میبینین ورژنش برابره با 2 هست در حال حاظر باید داونگرید کنین به یه ورژن پایین تر و همچنین به این لینک هم نیم نگاهی داشته باشین https://github.com/laravel/echo/issues/290 که اگه این مشکل برطرف شد میتونین با خیال راحت از جدیدترین نسخه هم استفاده کنین.
امیر
سلام تو قسمت 80 موقع ریفکتورینگ به ویو3 تو کامپوننت tiptapEditor کامپوننت drop-zone-modal رو ایمپورت شده بهش یه ref دادید تا بتونید متد های داخلش رو کال کنید سوال من اینه چرا ref ، dropzone رو به عنوان reactive دیتا تعریف کردید ؟ من خودم از به setup پارامتر refs رو پاس دادم و refs.dropzone.showModal(imageCommand) ولی undefined می گیرم ولی با روش شما درسته
توفیق حمزه ئی
سلام تنها این روشی که نوشتم در vue 3 وجود خواهد داشت کمی فرق میکنه با نحوه استفاده از ref در ورژن قبلی برای همین اگه refs رو از setupContext دریافت کردم بدونین برای اشنایی بهتر شما بوده و در نظر بگیرین همچنین روشی در vue 3 در بخش composition api وجود نخواهد داشت.
امیر
سلام وقت به خیر می خواستم بپرسم تفاوت this.$store و این که store رو ایمپورت کنیم و بعد استفاده کنیم در چیه ؟
توفیق حمزه ئی
سلام. فرق خاصی وجود نداره با this.$store میتونین مستقیم از vue با vuex ارتباط برقرار کنین اما این ماله Option api هست توی composition api باید از طریق context با store ارتباط برقرار کرد که توی ویدیو ها هم هردو رو پوشش دادم. اما حتی توی ورژن های قبلی هم میشد که vuex رو ایمپورت کرد و توی جایی که لازم داریم با vuex خیلی راحت میتونیم ارتباط داشته باشیم
امیر
سلام وقت به خیر شما تو آموزش استیت یوزر رو به صورت یه ماژول نوشتید البته تا قسمت هایی که من دیدم می خواستم بپرسم ایا میشه تو ویو خود این استیت ها رو Lazy کرد چون وقتی ما store رو تو یه کامپوننت ایمپورت می کنیم تمام ماژول های استیت رو هم به کامپوننت ایمپورت می کنیم ممنون
توفیق حمزه ئی
سلام اقای حیدری سوال خوبی بود. بله میشه ولی نه به صورت lazy اگه به صورت فایل بود میشد lazy کرد که خود وبپک تشخیص بده فایل نیاز هست یا نه اما اینجا باید ویو و vuex تشخیص بده که به اون ماژول نیاز داره یا نه. در واقع روش کارم به این صورت هست که توی فایل ماژول رو ثبت میکنیم اینا رو توی دوره ویوجی‌اس کامل پوشش خواهم داد ایشالله. اما در واقع ماژول کاربرم نباید lazy بشه:) چون توی همه کامپوننت ها بهش نیاز دارین اما برای بقیه ماژول سوالتون کاملا به جاست.
مسعود ابراهیمی
سلام اقای حمزه ای خیلی ممنونم از اموزش های خوبتون اگر امکانش هست لطفا یه دوره برای اموزش ناکس بزارید خیلی جاش خالیه ممنونم
توفیق حمزه ئی
سلام اقای ابراهیمی، دوره فروشگاه فایل قرار هست که بازتولید بشه و پروژه رو به صورت فرانت و بک جدا و همچنین قراره که ناکست هم پوشش داده بشه. اما چون مباحث پیشرفته میشه برای vue اول دوره ویوجی‌اس رو قرار میدیم که دوستان بتونن همراهی کنن.
Sajad
سلام میخواستم بپرسم که در این دوره چطور با استفاده از ویو با بک اند ارتباط برقرار می کنید؟ از طریق api؟ ممنون
توفیق حمزه ئی
سلام دوست عزیز درخواست ها به صورت api هستن اما اگه منظورتون که فرانت و بک جدا هست باید بگم خیر این دوره به صورت fullstack و هردو بخش فرانت و بک با هم گفته شده
Arman Amiri
سلام . جای دوره لاراول و ویو ب صورت api خیلی خالیه . ممنون میشم اگ ی دوره شروع کنید
توفیق حمزه ئی
سلام اقای امیری. دوره فایل با ناکست به صورت api خواهد بود ایشالله :)
سید محمود
سلام. ممنون از دوره مفیدتون. یه مشکلی داشتم و اینکه در اضافه کردن فونت sans فقط استفاده کردین و نگفتین وقتی فونت رو خریدیم چطور باید اضافه کنیم به پروژه؟
توفیق حمزه ئی
سلام دوست عزیز از این لینک میتونین استفاده کنین https://mrcode.ir/?p=4670 این فونت css ساده هست و احتمالا بر طبق پیش نیاز های این دوره نباید براتون خیلی سخت باشه اما اگه مشکلی براتون پیش اومده میتونین با من تماس بگیرین
Amir
سلام ببخشید میخواستم بپرسم که آیا میشه این دوره رو تو لاراول 8 هم پیاده سازی کنم؟ مشکلی نداره؟
توفیق حمزه ئی
سلام بله میتونید این دوره در اخر به لاراول هشت هم تغییر کرده و اپدیت شده اگر مشکلی بود به من پ یام بدید یا همینجا مشکلتونو بپرسید حتما جواب میدم
امیر
سلام یه سوال داشتم تو پروژه چون فرانت و بک روی یه هاست هست سنکتام اوکیه حالا فرض کنید فرانت و بک من سواست و فرانت روی localhost:4200 هست اینجا برای اینکه از سنکتام استفاده کنم باید پروکسی بنویسیم ؟ و حالا فرض کنید فرانتم رو بیلد گرفتم و میخوام پبلیش کنم اگه url سایتم با بک اندم یکی نباشه مثلا api ها رو از virgool.me کال می کنم و url م هست myDomain.com اینجا سنکتام کار میکنه ؟
توفیق حمزه ئی
سلام برای پروژه ای که بک و فرانتش جداست میشه از سنکتم استفاده کرد هرچند توی این دوره پوشش داده نشده ولی اگه مشکلی داشتین با من تماس بگیرین. اما برای دو دومین کاملا جدا سنکتم به این صورت کار نمیکنه چون براوزر کوکی رو بررسی میکنه و ستش نمیکنه. هرچند میشه این مشکل رو دور زد ولی برای تقریبا همه پروژه این دور زدن کاملا اضافی هست.
masood
درود بر شما با این دوره و مباحثی که تدریس میکنید تمرین کنیم میتونیم بعدش یه پروژه فروشگاهی و یا پروژه های بزرگ تر رو هم با همین تکنولوژی ها ایجاد کنیم؟ تا این حد رو پوشش میده این دوره؟
توفیق حمزه ئی
سلام اقا مسعود اگه منظورتون استفاده از تکنولوژی های این دوره توی پروژه فروشگاهی تون هست بله کاملا میتونین و اتفاقا خیلی از دوستان رو دیدم اینکار رو میکنن و بنظرم یادگیری‌تون رو عمیق میکنه برای اون بخش. تنها باید بدونین سایت فروشگاهی چی لازم داره یا اینکه اپلیکشن رو انالیز کنین چون کاربرد اونها کاملا با وبلاگ فرق داره.
پرهام تهرانی
سلام وقت بخیر بعد از استفاده از compositionApi برای رجیستر ارور CSRF token mismatch ldni میده مشکل از کجاست؟
توفیق حمزه ئی
سلام دوست عزیز. این اررور به دلیل ست نشدن کوکی نمایش میده براتون که میتونه از cors یا درست نبودن سشن دومین باشه. موردی که خیلی دیدم دوستان از localhost:8000 به جای یک دومین مجازی استفاده میکنن که کار رو سخت میکنه هرچند با درست ست کردن دومین میشه با همین دستور serve کار رو پیش برد ولی پیشنهاد میشه که از یک دومین مجازی استفاده کنین. این موارد برسی کنین توی دوره هم هست ولی اگه نتونستین درست کنین اررور رو با من در تماس باشین تا دقیقا بدونم اررور از کجاست و با هم حلش کنیم.
امیر
سلام وقت به خیر شما موقعی که دارید تو صفحه ثبت نام با استفاده از vuetify و compositionapi روی فیلد ها ولیدیشن می نویسید اگر console رو نگاه کنید این خطا رو دارید [Vuetify] Rules should return a string or boolean, received 'function' instead found in ---> at resources/js/view/Auth/Register.vue
توفیق حمزه ئی
سلام اقای حیدری عزیز. ویدیو رو برسی کردم همچین ارروری ندیدم اگه توی ویدیو دیدین بگین کجا و اگه خودتون به این مشکل خوردین در تلگرام با من در تماس باشین تا حلش کنیم.