نرم افزار تک صفحه ای
SPA: Single Page Application

خیلی دیدین روی فیسبوک یا سایت های معروف بیشتر کارها بدون رفرش کل صفحه انجام میشه. حالا گاهی اون بالا هم کلک میزنن و آدرس تغییر میکنه ولی صفحه خیلی سریع به شما جواب میده و مثل قدیم با زدن روی هر دکمه یا لینک مجبور نیستی چند ثانیه صبر کنی تا اطلاعات جدید بیاد. این کارها رو قبل از اینا فقط برنامه نویس های فوق حرفه ای بلد بودن و تکنولوژی خیلی سخت و لج آور ajax لازم بود.

حالا فریم ورک Vue.js که شبیه معجزه عمل میکنه و در واقع خودش یازده هزار خط جاوااسکریپت هست، از سال ۲۰۱۴ پیداش شده و یادگیریش از همزادهای دیگه اش مثل Angular یا React بسیار سریع تره.

تنها کتاب فارسی اون رو به صورت پروژه محور بخونین و از توانایی هایی که بعدش به دست میارین لذت ببرین! و البته قبلش لازمه جزوه ی جاوااسکریپت رو هم نگاهی انداخته باشین.

#javascript #vue #spa #book

نمونه اپ تک صفحه یا SPA

در اینجا یک نمونه ی جالب از اپ تحت وب تک صفحه یا سینگل پیج رو ملاحظه می کنید. در واقع همون طور که بعد از اجرا خواهید دید با اشاره روی لینک ها صفحه رفرش نشده و فقط محتوا عوض می شود! اگر دنبال یادگیری سریع و ارزان این تکنیک هستین کافیست کتاب پروژه محور Vue.js رو که مثالهای فارسی داره نگاهی بندازین.

#vue #javascript #spa

تکنیک ساخت دوزبانه
با همین دو صفحه و چند خط به راحتی یک پیج دو زبانه نوشتم. همون جور که در خط سوم فایل سمت چپ معلومه، فریمورک Vue.js رو که کمتر از صد کیلوبایت هست باید بقلش دانلود و کپی کنید. با کلیک روی لینک زبان در جا پیج ها ترجمه میشن و حتا راست چین یا چپ چین هم میشن. کافیه بدون دونستن Vue فقط از روش ساختی که اینجا رفتیم تبعیت کنید و به کلمات اضافه یا کم کنید و گرافیک صفحه رو پیشرفته تر کنید.
اگه از ترکیب کدهای تک صفحه SPA و این کد هم استفاده کنید عالی میشه و دیگه با تغییر صفحات رفرش کل پیج انجام نمیشه و سایت به زبانی که تغییر دادین هم باقی میمونه.

#javascript #vue #spa

تعریف ساده ی کتابخانه ی کد و فریم ورک

اهمیت یک سری کد آماده زمانی روشن میشه که بخواهیم به صورت تیمی کاری رو پیش ببریم و سرعت و دقت در تحویل پروژه مد نظر باشه.
معلومه کدهایی که هرکس با سلیقه ی شخصیش نوشته برای بقیه به راحتی قابل فهم نیست ولی توافق بر سر یک استاندارد همیشه خطاها رو کم کرده و پشتیبانی و توسعه های بعدی رو خیلی بسیار روان تر میکنه.
در این ویدیو یک توضیح ساده در مورد کتابخانه ی کد و نوع پیشرفته اش فریم ورک رو خواهید دید.

#vue #javascript #framework

برنامه ی To-Do List با Vue.js

داریم میریم هایپراستار یا حتا سوپرمارکت سر کوچه. کمترین ابزاری که برای یه خرید خوب داشتیم، یه قلم و کاغذ بود که قبلش لیست اقلام رو نوشته بودیم و با برداشتن و گذاشتن توی سبد روی هر کدوم یه خط میکشیدیم.

حالا با همین چند خط میشه گوشی رو به یه وسیله ی کارآمدتر از اون کاغذ تبدیل کرد. هر چند تا که بخواهیم اقلام خرید رو اضافه می کنیم و با برداشتن و گذاشتن توی سبد دکمه حذف مقابلش رو میزنیم.

غیر از این دو تا فایل همون طور که در معرفی ویو قبل از این گفتم، فایل min.vue.js رو هم باید دانلود کنید بذارید بقل پروژه تون.
با ایده پردازی بیشتر و مطالعه ی کتاب آموزش سریع Vue می تونین بخش ویرایش رو هم به این اپ اضافه کنید.

#javascript #vue #spa #webdesign

چهار فرآیند اصلی کار با دیتا CRUD

اول اینکه اگر این ویدیو رو با ویدیوی قبلی در مورد جاوااسکریپت مقایسه کنیم، متوجه ی اهمیت فریمورک Vue خواهیم شد. بعد لازمه برای تکمیل فرآیندی که در این فیلم شرح داده میشه کتاب آموزش سریع ویو رو یه نگاه بندازین.
همینطور ویرایشگر کدی که توی این فیلم باهاش کار میکنم یعنی icode-go رو با تمام پلاگین ها برای دانلود براتون گذاشته بودم.

#javascript #vue #code #crud

الگوریتم بر زدن کارت Vue.js

اگر زمانی برای ساخت بازی داشتین و به ذهنتون رسید چطور میشه کارتها رو قاطی کرد، این نمونه کد یه راه حل خوبه. در حال حاضر پنج تا کارت به آرایه اش داده شده و کافیه تعداد کارت ها رو بدون تغییر کد زیاد کنید تا همون جوری بر بزنه و قاطی کنه!

پیش از این هم در ارتباط با ایجاد ارقام تصادفی و کاربردش مطلب و ویدیو قرار داده بودم.

#vue #javascript

نحوه ی اتصال به بانک اطلاعات از Vue

در این کد نمونه که توضیح روش راه اندازی هم داخل فایل قرار داده شده، یک فرآیند کامل کار با بانک اطلاعاتی از طریق صفحاتی که رفرش نمی شوند موسوم به SPA آموزش داده شده که با تغییر متغیرها و بانک می توان در هر نمونه ی دیگر از آن استفاده کرد.

#vue #spa #database #api #php

دسترسی به مطالب کانال:
مبتدی #beginner
گرافیک #graphics
بانک #database
کدها #code
محیط #ide
ابزارها #tools
بازی #game
کتاب #book
آندروید #android
وب #webdesign
کدساز #codegenerator
راهنما #skill

همینطور زبان و تکنولوژی های کدنویسی:
#csharp #php #javascript #vue
#sql #access #asp #server #spa
#typescript #html #css #nodejs
#xampp #mysql #wordpress

توضیحات کد بُر زدن کارت

توابع تصادفی مبنای تولید رفتارهای هوش مصنوعی و بازی ها هستن. قبلش یه کد در مورد بُر زدن کارت براتون توی کانال گذاشته بودن که میخوام توضیحش بدم. در مورد توابع تصادفی هم توضیحاتی فرستاده بودم.

#vue #javascript #game

فرق کدنویسی قدیم و کد تمیز Clean code

در یک مثال عملی و ساده نمونه ی کدنویسی تمیز رو نشون میدم. شاید همین توضیح کوچیک اهمیت روش مندی های جدید رو به خوبی نشون بده و شما رو تشویق کنه تا اگر هنوز به سمت یادگیری این اصول نرفتین، علاقه مند بشین.

#skill #vue #beginner

آشنایی کامل با تک صفحه ها یا SPA

اگه روی هشتگ های انتهای این شرح در کانال کلیک کنید، به مطالب زیادی در این ارتباط می رسید. اما در این فیلم توضیح صفر تا صد از این برنامه ها و روش یادگیری ساخت اونها رو بررسی می کنیم.

#spa #vue #webdesign

لینکهای فراگیری Javascript

   علاوه بر اینکه در یک پُست هشتگ های کانال رو معرفی کرده ام، حالا لینکهایی از مطالب مربوط جاوااسکریپت رو هم براتون میذارم که دوره کنید:

- کار با Local storage دیتابیس داخلی
- مشکلات محاسباتی در جاوااسکریپت
- روش ساخت برنامه تست چند جوابی
- چهار فرآیند CRUD در جاوااسکریپت
- آموزش Typescript یا جاوااسکریپت۶
- یک برنامه ی محاسباتی جاوااسکریپت
- جزوه ی مدرن جاوااسکریپت فارسی
- قفل گذاری روی برنامه ی تحت وب
- جزوه ی نصب و آموزش Node.js
- روش ساخت اَپ تک صفحه در Vue.js
- روش ساخت تاس با ۵ خط کدنویسی

علاوه بر اینها روی هشتگ زیر بزنید:
#javascript

ساخت نرم افزار تک صفحه یا SPA

    ضمن نوشتن یک کد بسیار ساده و توضیح نحوه ی کار اون، به تاریخچه ی لزوم استفاده از این تکنولوژی و تمام انواع کتابخانه های رایج ساخت اون خواهیم پرداخت.

   در همین ارتباط در کانال مطالعه کنید:
- تغییر صفحات بدون رفرش سایت
- دوزبانه کردن صفحه ی سایت با ویو
- ساخت فرآیند CRUD به کمک Vue
- کد نمونه ی بُر زدن کارت های بازی
- نمایش روش کدنویسی تمیز با Vue

#spa #vue #javascript

افزودن هوش مصنوعی به
  بازی سنگ کاغذ قیچی

   در این ویدیوی متفاوت و جالب روش ساخت یک بازی معروف را این بار با استفاده از سناریو و الگوریتم های هوش مصنوعی تمرین می کنیم. کد برنامه نیز در کانال است.

اینجا در ارتباط با بازی سازی باز داریم:
- ساخت تاس بازی با یک خط کدنویسی
- دوره ی ویدیویی فارسی آموزش Unity
- ساخت حرفه ای بازی با Construct 2
- آموزش ساخت بازی با Game maker
- ساخت ساز بلز با کمک App inventor
- کد بازی هیجان انگیز و فارسی بارچین

#javascript  #game  #vue

کد بازی  سنگ کاغذ قیچی

   که در ویدیویی در مورد تکنیک متفاوت هوش مصنوعی به کار رفته در آن صحبت شده است.
#javascript  #game   #vue