رفتن به مطلب
جامعه‌ی برنامه‌نویسان مُدرن ایران
veria.kurdish

درخواست مجموعه آموزش حرفه ای ++C و ارتباط با QML

پست های پیشنهاد شده

با درود و خسته نباشید خدمت اساتید.

به عنوان یه برنامه نویس مشتاق به c++ خیلی علاقه دارم اگر امکانش باشه اساتید یه دوره حرفه ای آموزش ارتباط c++  با qml در زمینه های مختلف رو استارت بزنند. آموزش هایی که واقعا درک ما کسانی که مشتاق به برنامه نویسی c++ در qml هست رو بالا ببره. qml  توانایی خاصی در خلق رابط کاربری داره ولی این c++ هست که به این مساله قابلیت - انعطاف پذیری و سرعت میبخشه. اگر ملاک ما اسناد خود qt باشه میتونیم این مساله رو پیش ببریم اما با سرعت بسیار کم. پس اگر اساتید علاقه ای در این زمینه داشته باشند چه بهتر با زبان فارسی بشه حرکتی کرد تا فصل جدیدی از برنامه نویسی مدرن رقم بخوره. 

 

ممنون

نقل قول

i love BlackBerry & iOS OS

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

سلام

خب برای دوره مقدماتی من یک دوره رو آماده کردم قبلا که می‌تونید از لینک زیر به سرفصل ها و لینک ویدئو های آموزشی به صورت رایگان دسترسی داشته باشید.

اینک دوره آموزش مقدماتی Qt Qml  ویدئویی و رایگان

ولی اگر دنبال یک آموزش منسجم و کامل میگردید باید هزینه کنید و کتاب آموزش پیشرفته ++C همراه Qt (پیشرفته) نسخهٔ  رو تهیه کنید که از صفر شروع کرده و تا حد پیشرفته پیش رفته و به نظر من کتاب پر محتوای هست برای دوستانی که می‌خواند کیو ام ال یاد بگیرند.

  • تشکر شده 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

  • مطالب مشابه

    • توسط کامبیز اسدزاده
      همانطور که می‌دانید در سال ۹۵ نسخه اول ومقدماتی اولین کتاب برنامه نویسی سی پلاس پلاس همراه با کتابخانه کیوت انتشار یافت، طبق بازخورد‌هایی که از علاقه مندان و خوانندگان کتاب چه در نسخه رایگان و چه در نسخه تجاری به این نتیجه رسیدیم که محتوایی فراتر از محتوای مقدماتی که تحت برنامه نویسی سنتی بود در اختیار شما قرار دهیم.

      این کتاب به مناسبت عید قربان تا پایان ۳۱ مرداد با تخفیف ۳۰٪ قابل سفارش می‌باشد. (پایان یافت)
      قیمت پایه ۶۵٬۰۰۰ تومان است.
       
      * تمامی حقوق مادی و معنوی این کتاب متعلق به مولف و ناشر مولف (کامبیز اسدزاده) می‌باشد و هرگونه کپی برداری از آن پیگرد قانونی خواهد داشت.
      توجه : در داشتن هر گونه انتقاد و پیشنهاد در رابطه با این کتاب با آدرس شخصی نویسنده (kambiz.ceo@gmail.com) مکاتبه نمایید. نکته : این کتاب در روز‌های خاص ممکن است شامل تخفیف قرار بگیرد. نکته دوم : کسانی که این کتاب را یک بار خریداری می‌کنند نسخه‌ی به روز رسانی شده آن را به صورت رایگان می‌توانند دریافت کنند. برخی از درخواست‌ها در کتاب مقدماتی به صورت زیر بودند:
      آموزش پیشرفته در رابطه با QML و آشنایی با آن آموزش برقراری ارتباط بین ++C و QML به صورت بک اند و فرانت اند آموزش کار با کنترل‌ها و نحوه سفارشی سازی پروژه آموزش برقراری ارتباط با پایگاه داده و فناوری های مرتبط با آن آموزش نحوه پیکربندی کیت‌ها٬ کامپایلر و ... آموزش نحوه توسعه برنامه بر روی پلتفرم های مختلف از حمله اندروید٬ آی او اس و ... و درخواست‌های دیگر... بنابراین بر اساس این درخواست‌ها و محتوایی که نیاز می باشد بعد از جلد مقدماتی با آن‌ها آشنا باشید را در این نسخه فراهم کرده ایم.
      نکته از نظر من در رابطه با محتوا:
       کتابخانه کیوت شامل مباحث بسیار زیادی است که می‌توان از هزاران صفحه محتوای آموزشی تولید کرد. اما در این محتوای آموزشی من تنها به مواردی اشاره کرده ام که لازمه کار هستند و در پروژه‌ها می‌بایست اطلاعات لازم در رابطه با آن‌ها داشته باشید.
      هزینه این کتاب چطور و بر چه اساسی خواهد بود؟
      همانطور که می‌دانید هزینه مقدماتی کتاب در ویرایش اول و دوم با قیمت ۱۰.۰۰۰ تومان و در ویرایش سوم با قیمت ۲۰.۰۰۰ هزار تومان در اختیار علاقه مندان قرار گرفته است که شامل بهبود و توسعه قالب و محتوای آن بر اساس بازخورد ها بوده است.
      قیمت این جلد در حال حاضر۶۵.۰۰۰ تومان در نظر گرفته شده است که در قالب A4 با تعداد حداقل فعلی۴۴۶ صفحه‌ی (به‌روز شده) توسعه یافته است و در مرحله اول در قالب PDF منتشر خواهد شد.
      نسخه چاپی این کتاب چطور خواهد بود؟ آیا برنامه ای برای آن خواهید داشت؟ 
      بر اساس بازخورد‌هایی که داشته ایم بیش از ۸۵ درصد علاقه مندان مایل به دریافت نسخه الکترونیکی کتاب بودند که در آن می‌توانند به راحتی کد‌های نوشته شده را در محیط توسعه خود کپی کنند بنابراین نسخه الکترونیکی در اولویت اول قرار گرفته است که می‌توان در کمترین زمان ممکن آن را آماده کرد.
      اما در رابطه با نسخه چاپی باید طبق مراحل مورد نیاز زمانی را صرف عقد قرارداد و توافق با ناشر در نظر بگیریم که ممکن است چند ماه بعد از نسخه الکترونیکی به تصویب رسیده و منتشر شود. (فعلا تصمیم قطعی در رابطه با این موضوع گرفته نشده است) این بستگی به استقبال علاقه مندان خواهد داشت و هزینه آن با نسخه الکترونیکی مجزا خواهد بود.
      سرفصل ها و محتوا چه چیز‌هایی هستند؟
      محتوای کتاب طبق آخرین استاندارد کتابخانه بر پایه نسخه ۵.۸ به بالا می‌باشد. محتوای آن به نسخه ۵.۹ و حتی ۵.۱۰ به صورت پیش نویسه به روز رسانی شده است. همچنین ویژگی های و موارد مهمی که در نسخه ۵.۹ و ۵.۱۰ موجود هستند در این کتاب به آن‌ها اشاره شده است.
      سر فصل‌های نهایی و تایید شده کتاب: 
      فصل اول مقدمه بر زبان ++C برخی از قابلیت‌ها ساختار برنامه در ++C کتابخانه‌ها فرق بین C و ++C ویژگی‌های معرفی شده در ++C ویرایش‌های ۱۱ ٬ ۱۴ و ۱۷ کامپایلر‌های ++C و وضعیت آن‌ها ساختار اسناد ++C در پروژه‌ کاربرد این زبان در کجاست؟ استاندارد‌های زبان مقدمه کیوت (Qt) معرفی کیوت (Qt) ۵.۹ آشنایی با محیط توسعه، نصب و راه اندازی همراه با پیکربندی کیت (Kit) در آن نصب و راه اندازی محیط Qt پیکربندی کیت‌ها در macOS پیکربندی کیت‌ها در Linux پیکربندی کیت‌ها در Windows معرفی محیط توسعه کیوت کرِیتور (Qt Creator) نسخه 4 پیکربندی و تنظیمات مربوط به ساخت برای پلتفرم‌های مختلف معرفی مجوز های Qt و نحوه استفاده از مناسبترین مجوز لوگو‌های نشانگر ساخته شده با Qt پشتیبانی از انواع پلتفرم‌ها پشتیبانی از انواع معماری ها شرایط و قوانین لازم جهت انتشار اپلیکیشن در فروشگاه iTunes یا همان (Apple Store) شرایط و قوانین لازم جهت انتشار اپلیکیشن در فروشگاهWindows Store شرایط و قوانین لازم جهت انتشار اپلیکیشن در فروشگاه Google Play شرایط و قوانین اختصاصی برنامه تحت Qt جهت انتشار و پذیرش در فروشگاه های مرتبط فصل دوم معرفی فناوری Qt Quick ویرایش 2 معرفی زبان کیو اِم اِل (QML) ویرایش 2 آشنایی با سبک - سینتَکس (Syntax) زبان QML روش اعلام یا اظهار یک شیء در QML اشیاء فرزند (Child-Object) در QML سبک و روش اعمال اظهار نظر (Comment) در QML صفت های اشیاء در QML پشتیبانی از جاوا اسکریپت (JavaScript) و ترکیب آن با QML روش استفاده از جاوا اسکریپت در سند QML روش های ترکیب ++C و استفاده از آن در سند QML فصل سوم معرفی انواع پروژه ها تحت فناوری کیوت کوئیک (Qt Quick) معرفی پروژه از نوع Qt Widget Application معرفی پروژه از نوع Qt Console Application معرفی پروژه از نوع Qt Quick Application معرفی پروژه از نوع Qt Quick Controls 2 Application معرفی پروژه از نوع Qt Quick Controls Application معرفی پروژه از نوع Qt Quick Canvas 3D Application معرفی پروژه از نوع Qt Quick Labs Controls Application آغاز ایجاد پروژه تحت C++ و Qt Quick ساده ترین برنامه معرفی کلاس QGuiApplication معرفی کلاس QQmlApplicationEngine معرفی کلاس QCoreApplication معرفی تابع exect در پروژه فصل چهارم انواع کنترل ها، منو ها و دیگر آبجکت ها معرفی انواع QML پایه در فناوری Qt Quick نوع date نوع color نوع font نوع matrix4x4 نوع point نوع quaternion نوع rect نوع size نوع vector2d نوع vector3d نوع vector4d معرفی انواع اشیاء QML در فناوری Qt Quick معرفی Accessible معرفی AnchorAnimation معرفی AnchorChanges معرفی AnchorImage معرفی AnimatedSprite معرفی Animation معرفی AnimationController معرفی Animator معرفی Behavior معرفی BorderImage معرفی Contex2D معرفی Canvas معرفی CanvasGradient معرفی CanvasImageData معرفی CanvasPixelArray معرفی CanvasColorAnimation معرفی Column معرفی DoubleValidator معرفی Drag معرفی DragEvent معرفی DropArea معرفی EnterKey معرفی Flickable معرفی Flipable معرفی Flow معرفی FocusScope معرفی FontLoader معرفی FontMeteric معرفی Gradient معرفی GridMesh معرفی GridView معرفی Image معرفی IntValidator معرفی Item معرفی ItemGraResult معرفی KeyEvent معرفی KeyNavigation معرفی Keys معرفی LayoutMirror معرفی ListView معرفی Loader معرفی MouseArea معرفی MouseEvent معرفی MultiPointTouchArea معرفی NumberAnimation معرفی OpacityAnimator معرفی ParallelAnimation معرفی GraphicInfo معرفی ParentAnimation معرفی ParentChange معرفی Path معرفی PathAnimation معرفی PathView معرفی PauseAnimation معرفی PropertyAction معرفی PropertyChanges معرفی Rectangle معرفی RegExpValidator معرفی Repeater معرفی Rotation معرفی RotationAnimation معرفی RotationAnimator معرفی Row معرفی Scale معرفی ScaleAnimator معرفی SecuentialAnimation معرفی ShaderEffect معرفی ShaderEffectSource معرفی Shortcut معرفی SmoothedAnimation معرفی SpringAnimation فصل پنجم معرفی انواع کنترل های 2 Qt Quick Controls کنترل AbstractButton کنترل ApplicationWindow کنترل BusyIndicator کنترل Button کنترل ButtonGroup کنترل CheckBox کنترل CheckDelegate کنترل ComboBox کنترل Container کنترل Control کنترل Dial کنترل Drawer کنترل Frame کنترل GroupBox کنترل ItemDelegate کنترل Label کنترل Menu کنترل MenuItem کنترل Page کنترل PageIndicator کنترل Pane کنترل Popup کنترل ProgressBar کنترل RadioButton کنترل RadioDelegate کنترل RangeSlider کنترل ScrollBar کنترل ScrollIndigator کنترل Slider کنترل SprinBox کنترل StackView کنترل SwipeDelegate کنترل SwipeView کنترل Switch کنترل SwitchDelegate کنترل TabBar کنترل TabButton کنترل TextArea کنترل TextField کنترل ToolBar کنترل ToolButton کنترل ToolTip کنترل Thumbler فصل ششم معرفی Qt Quick Dialog (دیالوگ های انتخاب رنگ، فایل، فونت و پیغام) معرفی Color Dialog معرفی Font Dialog معرفی File Dialog معرفی Message Dialog معرفی Qt Quick Layouts معرفی Column Layout معرفی Grid Layout معرفی Row Layout معرفی Stack Layout معرفی Qt Quick Control Styles (سبک و استایل نویسی کنترل ها – سفارشی سازی) واکنش گرایی و پاسخ دهی محتوای وب در اپلیکیشن با Qt WebEngine محتوای چند رسانه ای در کیوت QMultimedia محتوای چند رسانه ای در کیوت QMultimedia پخش صوت ظبط صدا در فایل پخش ویدیو کار با دوربین فصل هفتم معرفی و پیکربندی کار با بانک اطلاعاتی (دیتابیس) کار با بانک اطلاعاتی و ارتباط آن بین C++ و QML معرفی و کار با XML معرفی و کار با JSON معرفی و کار با QSetting سفارشی سازی فایل .pro  پروژه فصل هشتم مقایسه انواع حالت های کامپایل Debug و Release نحوه افزودن دیگر کتابخانه های C++‎‎ در محیط Qt Creator و استفاده همراه با کتابخانه Qt فرق بین کامپایل استاتیک و داینامیک نحوه خروجی گرفتن / گسترش (Deployment) در Qt پیکربندی و انتشار برنامه در پلتفرم ویندوز (Windows) پیکربندی و انتشار برنامه در پلتفرم مک (macOS) پیکربندی و انتشار برنامه در پلتفرم لینوکس (Linux) پیکربندی و انتشار برنامه در پلتفرم‌های iPhone و iPad (iOS) پیکربندی و انتشار برنامه در پلتفرم اندروید (Android) معرفی ابزار کیوبس (QBS) به روز رسانی کیوت بدون دریافت فایل نصبی آفلاین اهداف نسخه‌های ۵.۱۰ و ۶ پیشنهادات و ملاحظات در عملکرد و کارآیی (جدید)
    • توسط veria.kurdish
      با سلام و خسته نباشید. اگر امکانش باشه یه آموزش به صورت پروژه محور در مورد QThread در GUI تهیه کنید. آموزش های سطح اینترنت بسیار ساده هستش و از سیگنال و اسلات بسیار کم استفاده شده.  ممنون بابت سایت خوبتون
    • توسط کامبیز اسدزاده
      در این پست قصد داریم در رابطه با نحوه‌ی نصب و راه‌اندازی محیط کیوت جهت توسعه‌ی نرم‌افزار توضیح دهیم. بنابراین مراحل آن به ترتیب به صورت زیر خواهد بود.
      انتخاب پلتفرم توسعه (ویندوز، مک یا لینوکس) انتخاب و دانلود نسخه‌ی مورد نظر برای محیط توسعه نصب و راه اندازی محیط توسعه پیکربندی و اجرای اولین برنامه ساخت و استقرار برنامه طبق توضیحات بالا، ابتدا وارد بخش مرکز دریافت در مرجع شده و نسخه‌ی Qt مربوط به پلتفرم مورد نظر خود را دریافت کنید. برای این منظور از این بخش وارد شوید (دقت کنید که حتما وارد حساب کاربری خود شده باشید).
      نکته : نسخه‌ی موجود در این مرجع به‌روز‌ترین نسخه‌ی ممکن خواهد بود.
      نکته‌ ۲ : در محیط ویندوز حتماً توجه داشته باشید که باید Visual Studio نصب باشد. اگر به خاطر حجم آن قادر به نصب نیستید سعی کنید نسخه‌ی Build Tools را نصب نمایید. این بسته شامل کامپایلر‌ها و SDK های ویندوز است که برای کار با سی++ به آن‌ها نیاز خواهید داشت. در صورتی که یکی از این دو پیشنهاد را نصب نکنید ممکن نیست که بتوانید برنامه‌ای را کامپایل کنید.
      نکته ۲ : در محیط لینوکس مطمئن باشید که GCC نصب است. همچنین دستورات زیر را قبل از نصب کیوت اعمال کنید تا پکیج‌های مورد نیاز نصب شود.
      sudo apt-get install build-essential libgl1-mesa-dev نکته ۳ : در محیط macOS حتماً باید Xcode نصب باشد.
      جهت نصب کیوت فایل نصبی آن را در محیطی که هستید اجرا کنید تا برنامه نصبی اطلاعات مربوطه را بررسی نماید.

      در ادامه گزینه‌ی Next را بزنید، در صورتی که مایل هستید اطلاعات ثبت‌نام (جهت ثبت اطلاعات در سرور Qt) را وارد کنید. در غیر این صورت گزینه‌ی Skip را بزنید و ادامه دهید.

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

      مهمترین بخشی که بسیاری از کاربران در مورد آن سوال می‌کنند این مرحله است که چه گزینه‌هایی را باید برای نصب انتخاب کنیم. در این بخش تمامی گزینه‌ها را انتخاب کنید به جز گزینه‌هایی که منسوخ شده اند و با واژه‌ی (Deprecated) مشخص شده اند و قرار است در نسخه‌های بعدی حذف شوند. همچنین گزینه‌هایی که مقابل آن‌ها TP نوشته شده است مخفف Technology Preview است به معنی اینکه این ماژول یا پلاگین به صورت آزمایشی فعلاً در این پکیج قرار گرفته اما نهایی نشده است. در بخش Tools تمامی گزینه‌ها را انتخاب کنید همه‌ی آن‌ها نیاز است. همچنین برای اینکه بتوانید از دیتابیس و پلاگین‌هایی مانند QMySQL استفاده کنید باید گزینه‌ی Source را انتخاب کنید تا بعداً امکان ساخت این ماژول فراهم شود. توجه کنید که در این مثال گزینه‌های MSVC 2015 انتخاب نشده است. دلیل آن است که ما روی سیستم از نسخه‌ی ۲۰۱۷ ویژوال استودیو استفاده می‌کنیم و ابزار‌های ساخت ویرایش ۲۰۱۷ تعبیه شده اند. بنابراین با توجه به نسخه‌ی VS آن‌ها را انتخاب کنید. مواردی که شامل گزینه‌های UWP هستند به خاطر آن است که شما بتوانید تحت کیوت برنامه‌های Universal Windows Platform را استقرار و اجرا کنید. همچنین جهت امکان تولید برنامه‌های اندروید و ویندوز فون گزینه‌های Android ARMv7 و UWP ARMv7 نیاز هستند. دقت کنید که گزینه‌ی x86 برای اندروید معمولاً برای نسخه‌ی مجازی دسکتاپ مورد استفاده قرار می‌گیرد.

      در پلتفرم‌های لینوکس و مک‌او‌اس گزینه‌های مرتبط با MSVC وجود ندارد. تنها با این تفاوت که در پلتفرم مک گزینه‌ی Android و iOS نیز موجود هستند و شما می‌توانید با انتخاب گزینه‌ی iOS آن را به محیط توسعه خود اضافه کنید. در نهایت شرایط و مجوز‌های کیوت را تایید کنید که در ادامه آمده است:

      توجه داشته باشید که بر اساس انتخاب‌هایی که کرده‌اید فضای لازم برای نصب Qt به صورت زیر به اطلاع شما رسانده می‌شود که در این بخش چیزی حدود ۱۰ گیگابایت است.

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

      در ادامه برای ساخت و اجرای برنامه نوع کامپایلر را انتخاب و کامپایل کنید.

      در نهایت برنامه بدون مشکلی اجرا خواهد شد.

      همچنین مرحله‌ی آخر، جهت بررسی نحوه‌ی استقرار و اجرای برنامه این بخش را مطالعه کنید.
    • توسط کامبیز اسدزاده
      معمولاً برای بازنشر مطالب، سوال و پرسش‌های خود در شبکه‌های اجتماعی یا گروه‌ها و کانال‌های پیام‌رسان نیاز است تا لینک آن را قرار دهیم.اما به صورت پیشفرض لینک مطالب کوتاه نیستند و برای حل این مشکل بهتر است از سیستم کوتاه کننده‌ی لینک استفاده شود که مثالی برای دریافت آن آمده است:
      فرض کنید سوالی پرسیده‌اید، برای دریافت لینک کوتاه و مفید آن بر روی دکمه‌ی بازنشر در بالای پُست کلیک کنید:

      برای دریافت لینک کوتاه و مناسب بر روی آن کلیک کرده و آدرس کوتاه شده را جهت بازنشر کپی کنید:

      * نکته، ممکن است شما نیاز داشته باشید تا آدرس پاسخ به سوالی را بازنشر کنید، در این صورت به پایینترین قسمت پاسخ خود رفته و بر روی گزینه‌ها کلیک کنید و سپس گزینه‌ی بازنشر را انتخاب و لینک مورد نظر خود را دریافت کنید.

    • توسط سید معین حسینی
      ساخت یک کامپوننت آپلود در انگولار(Uploader Component) می‌تواند کار سختی باشد. به این دلیل که با فایل ها در جاوا اسکریپت سر و کار داریم. در این آموزش یک روش خوب را برای آپلود فایل‌ها آموزش می‌دهم. به علاوه این که چطور از روند آپلود در لحظه خبر داشته باشیم و با نمایش درصد داده‌های آپلود شده تجربه‌ی خوبی را برای کاربران فراهم کنیم.
      نکته: در این آموزش من به مباحث سمت سرور و دریافت فایل توسط آن نمی‌پردازم و به این شکل در نظر میگیرم که شما سروری آماده‌ی دریافت فایل دارید. حالا در سمت کلاینت که انگولار 6 یا بالاتر است، می‌خواهیم این فایل را با یک درخواست از نوع POST به سمت سرور بفرستیم و در حین آپلود گزارشی از روند آپلود در انگولار را نمایش دهیم. در این مورد من از کامپوننتی (Component) از انگولار متریال به نام نوار پیشرفت (Progress Bar) استفاده می‌کنم. می‌توانید نمونه نهایی این پروژه که برای آموزش ساخته شده را در مخزن گیت‌هاب مشاهده کنید.
      ساخت پروژه انگولار
      برای شروع، در دایرکتوری (Directory) مد نظر، پروژه‌ی انگولار خود را با استفاده از رابط خط فرمان انگولار (Angular CLI) به نام آپلودر می‌سازیم. پس دستور زیر را وارد می‌کنیم:
      ng new uploader وابستگی‌های خارجی
      از آنجایی که ما نیاز به عناصر پیچیده‌ی رابط کاربری (UI)، مثل نوار پیشرفت داریم؛ تصمیم گرفتم تا از کتابخانه‌ی انگولار متریال استفاده کنیم. برای نصب این کتابخانه همچنین انیمیشن‌ها از دو دستور زیر استفاده کنید:
      npm install --save @angular/material @angular/cdk npm install --save @angular/animations برای این که بتوانیم از سی‌اس‌اس (CSS) این ماژول استفاده کنیم، لازم است که آن را در فایل استایل سراسری خود وارد (Import) کنیم:
      @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; ساخت ماژول (Module) امکانات
      برای این که کامپوننت خوب ما تا حد ممکن قابلیت استفاده‌ی دوباره را داشته باشد، تصمیم گرفتم آن را در یک ماژول جدا بسته‌بندی کنم. برای ساخت این ماژول دستور زیر را استفاده کنید:
      ng generate module upload ساخت کامپوننت آپلود در انگولار
      برای ساخت کامپوننت آپلود کافی است از دستور زیر استفاده کنید. همانطور که از نام این کامپوننت مشخص است، برای آپلود فایل‌های (File) خود از یک دیالوگ استفاده خواهیم کرد.
      ng generate component upload/dialog افزودن ماژول‌های خارجی
      بعد، نیاز خواهیم داشت که تعداد زیادی ماژول خارجی را در ماژول جدید خود یعنی upload.module.ts وارد کنیم. برای مثال، نیاز داریم تا تمام عناصر رابط کاربری‌ای که استفاده خواهیم کرد را به این شکل وارد کنیم:
      import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { DialogComponent } from './dialog/dialog.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule } from '@angular/material'; @NgModule({ imports: [ CommonModule, HttpClientModule, BrowserAnimationsModule, MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule ], declarations: [DialogComponent], exports: [DialogComponent], entryComponents: [DialogComponent] }) export class UploadModule { } توجه کنید در صورتی که دقیقاً دستور‌های گفته شده را وارد کردید، کامپوننت شما توسط CLI در ماژول upload تعریف خواهد شد. درصورتی که شما از ماژولی استفاده نمی‌کنید، کامپوننت جدید شما در فایل app.module.ts تعریف می‌شود.
      همچنین برای این که کامپوننت دیالوگ ما به خوبی کار کند لازم است تا آن را به عنوان EntryComponent در ماژول خود اضافه کنیم. این کار در ماژول نمونه بالا انجام شده است.
      حالا برای این که بتوانیم از کامپوننت جدید خود استفاده کنیم باید ماژول تعریف شده را در app.module.ts وارد کنیم تا به  AppComponent اضافه شود.
      سرویس آپلود در انگولار
      قبل از ساخت محتوای نمایشی کامپوننت آپلودر، لازم است ابتدا منطق آپلود را پیاده‌سازی کنیم. این منطق در سرویس آپلود قرار خواهد گرفت. آن سرویس را با استفاده از دستور زیر ایجاد می‌کنیم:
      ng generate service upload/upload داخل این سرویس نیاز داریم تا از HttpClient استفاده کنیم. این سرویس تنها دارای یک تابع به نام upload خواهد بود و برای هر فایل یک Observable برمی‌گرداند. این Observable ها حاوی روند آپلود و درصد آن خواهد بود.
      /** * @description A Http request to upload files * @param file */ upload(file: File): Observable<any> { const formData: FormData = new FormData(); let url = ''; formData.append('video', file, file.name); url = 'http://localhost:1500/api/upload/videos'; const req = new HttpRequest('POST', url, formData, { reportProgress: true, responseType: 'text' }); const progress = new Subject<any>(); this.http.request(req).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { const percentDone = Math.round(100 * event.loaded / event.total); progress.next({ percent: percentDone, loaded: event.loaded }); } else if (event instanceof HttpResponse) { progress.complete(); } }); return progress.asObservable(); } توجه داشته باشید که برای استفاده از این تابع باید موارد زیر را وارد کنید:
      import { HttpClient, HttpEventType, HttpResponse, HttpRequest } from '@angular/common/http'; import { Observable, Subject } from 'rxjs'; همچنین نمونه‌ای از HttpClient را در سازنده (Constructor) کلاس تعریف می‌کنیم تا بتوانیم درخواست http ارسال کنیم:
      constructor(private http: HttpClient) { } در تابع آپلود، فایل دریافتی را در یک فرم بسته بندی کرده، یک درخواست http از نوع POST ساخته و آن درخواست را همراه با فرم به عنوان داده‌ی همراه درخواست ارسال می‌کنیم. سپس به روند آپلود فایل گوش می‌دهیم، درصد آپلود را محاسبه می‌کنیم و مقدار آن را به جریان داده پاس می‌دهیم. حالا برای فایل مورد نظر observable ای از روند آپلود را در اختیار داریم.
      سرانجام نیاز داریم تا آن سرویس را به عنوان provider در ماژول خود اضافه کنیم. برای این کار کافی است سرویس خود را در فایل ماژول وارد (Import) کنیم (اگر توسط CLI وارد نشده بود) و آن را به این صورت در قسمت providers ماژول معرفی کنیم:
      @NgModule({ imports: [ CommonModule, HttpClientModule, BrowserAnimationsModule, MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule ], declarations: [DialogComponent], exports: [DialogComponent], entryComponents: [DialogComponent], providers: [UploadService] }) export class UploadModule { } نکته: در پروژه نمونه برای این که در App Component از دکمه‌های متریال استفاده می‌شود، MatButtonModule را در قسمت exports هم قرار دادم.
      باز کردن دیالوگ آپلودر
      برای باز کردن دیالوگ در فایل .ts کامپوننت اصلی یعنی App ماژول دیالوگ و کامپوننت دیالوگ خود را وارد ( import) می‌کنیم:
      import { MatDialog } from '@angular/material'; import { DialogComponent } from './upload/dialog/dialog.component'; حالا در سازنده کلاس (constructor) نمونهٰ‌ای از MatDialog تعریف می‌کنیم:
      constructor(public dialog: MatDialog) { } با استفاده از تابع زیر می‌توانید دیالوگ ساخته شده توسط خود را باز کنید. این تابع را در کلاس کامپوننت App قرار می‌دهیم:
      openDialog() { this.dialog.open(DialogComponent, { width: '720px' }); } برای استفاده از این تابع تنها کافی است آن را به رویداد (event) کلیک روی دکمه بایند (Bind) کنیم. پس عبارت زیر را روی تگ دکمه‌ای که برای باز کردن دیالوگ در نظر گرفته‌ایم قرار می‌دهیم:
      (click)="openDialog()" اضافه کردن فایل‌ها
      اولین کاری که باید در این قسمت انجام دهیم اضافه کردن یک عنصر input از نوع فایل به دیالوگ است. این عنصر input تنها راه تحریک منوی انتخاب فایل سیستم عامل برای باز شدن است.
      <input type="file" #file style="display: none" (change)="onFilesAdded()" multiple /> اما برای این که ظاهر زشتی دارد قرار است که آن را با استفاده از CSS مخفی کنیم. سپس آن را با استفاده از رویداد کلیک، از طریق منطق کامپوننت باز می‌کنیم. برای این کار در فایل ts کامپوننت یک ارجاع به آن عنصر نیاز داریم. برای این کار از دایرکتیوی (directive) به نام ViewChild استفاده می‌کنیم. همچنین متغیری نیاز داریم تا فایل را در آن ذخیره کنیم.  همانطور که می‌بینید برای استفاده از سرویس آپلود نمونه‌ای از آن را در سازنده کلاس تعریف کرده‌ام.
      import { Component, OnInit, ViewChild } from '@angular/core'; import { UploadService } from '../upload.service'; @Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', styleUrls: ['./dialog.component.scss'] }) export class DialogComponent implements OnInit { @ViewChild('file') file; addedFile; constructor(private uploadService: UploadService) { } ngOnInit() { } } حالا با شبیه‌سازی یک کلیک منوی انتخاب فایل سیستم عامل را باز می‌کنیم.
      addFiles() { this.file.nativeElement.click(); } طبق عنصر input که بالاتر نوشته‌ام، هنگامی که انتخاب فایل توسط کاربر انجام شد تابعی به نام onFilesAdded صدا زده می‌شود که شکل زیر را دارد:
      onFilesAdded() { this.addedFile = this.file.nativeElement.files[0]; console.log('Added File:', this.addedFile); } حالا فایل ذخیره شده را داریم که آماده‌ی آپلود است برای آپلود تابعی را تعریف کرده و از سرویسی که قبلا تهیه کردیم استفاده می‌کنیم. برای آن که درصد فایل آپلود شده و مقدار داده‌ی آپلود شده را داشته باشیم دو متغیر جدید تعریف می‌کنیم و به شکل زیر درصد آپلود و مقدار داده آپلود شده را بدست می‌آوریم:
      upload() { const progress = this.uploadService.upload(this.addedFile); progress.subscribe((result) => { this.percent = result.percent; this.loaded = result.loaded; }); } حالا برای مثال می‌توانیم روند پیشرفت آپلود را به شکل زیر به نمایش بگذاریم:
      <mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar> نمونه‌ی پروژه‌ی آماده شده برای این آموزش را می‌توانید از اینجا دریافت کنید.
      امیدوارم آموزش مفیدی بوده باشه. خوشحال می‌شوم نظرات شما را درباره این آموزش بدانم.
×