آموزش وردپرس قالب وردپرس قالب رايگان وردپرس درس وردپرس
شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت - گروه ساقه

شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت

SharePointFramework
شیرپوینت فریمورک (قسمت دوم) پیکربندی محیط توسعه
شهریور ۲۷, ۱۳۹۷
SharePointFramework
شیرپوینت فریمورک (قسمت چهارم) ساختار پروژه وب پارت
مهر ۲, ۱۳۹۷

شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت

SharePointFramework

SharePointFramework

توجه: پیش از خواندن این بخش، مقاله قبلی یعنی “شیرپوینت فریمورک (قسمت دوم) پیکربندی محیط توسعه” را بخوانید.
وب پارت های کلاینت شیرپیونت کامپوننت های کلاینتی هستند که در دردرون Context یک صفحه شیرپوینت اجرا می شود. برای ساخت آن ها می توانید از ابزارها و کتابخانه های جاوااسکریپت مدرن استفاده کنید.وب پارت های سمت کلاینت از موارد زیر پشتیبانی می کنند:

  • HTML و جاوااسکریپت.
  • هم برای شیرپوینت آنلاین و هم برای محیط های on-premises به کار برده می شود.

ساخت یک پروژه وب پارت:

برای ساخت یک پروژه وب پارت جدید:

  1. در هر کجایی که مایل باشید یک دایرکتوری پروژه جدید ایجاد نمایید:Md helloworld-webpart
  2. به دایرکتوری پروژه بروید:cd helloworld-webpart
  3. یک وب پارت جدید به نام HellowWorld با اجرای Yeoman SharePoint Generator ایجاد کنید.
    yo @microsoft/sharepoint
  4. هرگاه درخواست شد:
    • نام پیش گزیده helloworld-webpart را برای نام راهکار قبول کنید و دکمه اینتر صفحه کلید را فشار دهید.
    • گزینه SharePoint Online only (latest) را انتخاب نمایید و دکمه اینتر صفحه کلید را فشار دهید.
    • رای قرارگرفتن فایل ها گزینه Use the current folder را انتخاب نمایید.
    • برای این که extension هایی که می خواهید بر روی هر سایت به صورت جداگانه نصب شود، N را انتخاب نمایید.
    • در این مرحله webpart را به عنوان کامپوننت سمت کلاینتی که می خواهید بسازید انتخاب نمایید.
  5. پیغام های بعدی از شما اطلاعات خاصی را وب پارت شما درخواست می کند:
    • نام پیش گزیده وب پارت HelloWorld را قبول کنید و بر روی دکمه اینتر کیبورد فشار دهید.
    • توضیحات پیش گزیده وب پارت HelloWorld description را قبول کنید و بر روی دکمه اینتر صفحه کلید فشار
      دهید.
    • برای فریمورکی که مایل هستید به کارببرید No javascript web framework را قبول کنید و بر روی دکمه اینتر
      صفحه کلید فشار دهید.

در این مرحله Yeoman تمام وابستگی های مورد نیاز پروژه و همچنین فریمورک ها را در کنار وب پارت HelloWorld نصب می کند. این مرحله چند ممکن است که دقیقه به طول می انجامد.

برای دریافت اطلاعات بیستر درباره اشکال زدایی و خطاها، این صفحه را ببینید Known issues .

استفاده از ویرایشگر کد محبوب شما:

چون راهکار سمت کلاینت شیرپوینت بر اساس HTML/TypeScript است، شما می توانید از هر ویرایشگر کدی که از توسعه سمت کلاینت پشتیبانی کند برای ساخت وب پارتتان استفاده نمایید، مانند:

مستندات آموزشی شیرپوینت در مراحل و مثال ها از Visual Studio Code استفاده می کند. Visual Studio Code بسیار سبک است ولی در ضمن کد ادیتور قدرتمندی است از شرکت مایکروسافت که بر روی کامپیوتر دسکتاپ شما اجرا می شود و برای ویندوز، مک، و لینوکس در دسترس است. این کد ادیتور به صورت درونی جاوااسکریپت، تایپ اسکریپت، و Node.js را پشتیبانی می کند، و اکوسیستم غنی دارد از افزونه هایی برای زبان های دیگر(مانند سی پلاس پلاس، سی شارپ، پایتون، پی ایچ پی).

برای پیش نمایش وب پارتتان، آن را بر روی یک وب سرور لوکال اجرا نمایید. Toolchain سمت کلاینت به صورت پیش گزیده از HTTPS استفاده می کنند. این تنظیمات بر روی serve.json که در فولدر config قرار دارد پیکربندی می شود، اما توصیه می کنیم از مقادیر پیش گزیده استفاده نمایید.

به کنسول بروید و اطمینان یابید که هنوز در دایرکتوری helloworld-webpart هستید، سپس دستور زیر را وارد نمایید:

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

gulp trust-dev-cert

 

حال که سرتیفیکیت توسعه را نصب کرده ایم، دستور زیر را در کنسول وارد نمایید تا وب پارت خود را بسازید و پیش نمایش دهید:
gulp serve
این دستور یک سری وظایف گالپ را اجرا می کند، تا HTTPS لوکال  و node-based را بر localhost:4321 ایجاد نماید و مرورگر پیش گزیده تان را برای پیش نمایش وب پارت بر روی محیط توسعه لوکالتان باز کند.

توجه: اگر مشکلاتی درباره سرتیفیکیت در مرورگرتان می بینید، لطفا جزییات نصب سرتیفیکیت توسعه را از این مسیر Set up your development environment مطالعه فرمایید.


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

  • باندل کردن و کوچک کردن فایل های جاوااسکریپت و سی اس اس.
  • اجرای ابزاری که وظایف باندل کردن و کوچک کردن را پیش از هر ساخت پروژه فراخوانی می کند.
  • ترجمه فایل های SASS به CSS.
  • ترجمه فایل های TypeScript به جاوااسکریپت.

ویرایشگر کد Visual Studio Code به صورت داخلی از گالپ و دیگر task runner ها پشتیبانی می کند. بر روی صفحه کلید دکمه های Ctrl+Shift+B برای ویندوز یا Cmd+Shift+B  برای مک را فشار دهید وب پارتتان را دیباگ کنید و یا پیش نمایش دهید.

SharePoint Workbench یک نمای طرحی برای توسعه دهندگان است که در آن می توانید به صورت پیش نمایش وب پارت ها را ببینید و آنها تست نمایید بدون آن که آن ها را بر روی شیرپوینت دیپلوی نمایید. SharePoint Workbench شامل صفحه ای سمت کلاینت است که می توانید با کمک آن وب پارت ها را اضافه، حذف، و تست نمایید.

بکارگیری Workbench شیرپوینت برای پیش نمایش و تست وب پارت شما

  1. برای اضافه کردن وب پارت HelloWorld، آیکون اضافه کردن را انتخاب نمایید( این آیکون هنگامی که بر روی یک
    قسمت با ماوس هاور می کنید همانند شکل قبل ظاهر می شود). این امر یک toolbox را باز می کند که درون آن می
    توانید وب پارت های در دسترس را برای اضافه کردن مشاهده نمایید.
  2. وب پارت HelloWorld را انتخاب کنید تا به صفحه اضافه شود.
  3. به شما تبریک می گوییم، شما اولین وب پارت سمت کلاینت خود را بر روی یک صفحه سمت کلاینت قرار داده اید.

  4. آیکون قلم را در سمت چپ وب پارت انتخاب کنید تا پنجره خصیصه ها آشکار شود.

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

  6. متن داخل Description را به Client-side web parts are awesome! تغییر دهید.
  7. توجه کنید که با آنچه که شما تایپ می کنید متن داخل وب پارت نیز همزمان تغییر می یابد.

    یکی از امکانات جدید صفحه خصیصه ها در پیکربندی رفتار به روز رسانی است، که می تواند به صورت reactive یا non-reactive تنظیم شده باشد. به صورت پیش گزیده رفتار به روز رسانی به صورت reactive تنظیم شده است که اجازه می دهد هر آنچه در خصیصه ها ویرایش می کنید را ببینید. تغییرات همزمان ذخیره می شود هنگامی که رفتار به روز رسانی به صورت reactive قرار داده شده باشد.

این مقاله ترجمه ای است از Build your first SharePoint client-side web part

قسمت های دیگر این مقاله:
شیرپوینت فریمورک (قسمت اول) مقدمه
شیرپوینت فریمورک (قسمت دوم) پیکربندی محیط توسعه
شیرپوینت فریمورک (قسمت چهارم) ساختار پروژه وب پارت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *