معرفی GitPod: یک محیط توسعه ابری

GitPod یک محیط توسعه کامل مانند VS Code است، اما می توانید از هر مرورگر وب به آن دسترسی داشته باشید. بیا یک نگاهی بیندازیم.

• با GitPod یک برنامه React بسازید
• ایجاد فضاهای کاری و پروژه‌ها
• تنظیم نقاط شکست در کد جاوا
• نتیجه‌گیری

فناوری ابری بسیاری از جنبه های توسعه نرم افزار را متحول کرده است. یکی از جالب‌ترین ابزارهایی که از ابر بیرون می‌آید، محیط توسعه ابر یا CDE است. مانند یک IDE، یک CDE به شما امکان دسترسی به یک محیط توسعه کامل را می دهد، اما در یک مرورگر. در میان گزینه های CDE قفسه بالا، یکی از قانع کننده ترین گزینه ها GitPod.io است. بیایید نگاهی عملی به این ابزار نوآورانه توسعه مبتنی بر ابر داشته باشیم.

یک برنامه React با GitPod بسازید

توسعه دهندگان همیشه در آرزوی سادگی بیشتر در ابزارهای ما هستند. GitPod در واقع شروع یک پروژه را ساده می کند. برای شروع، به یک حساب GitPod نیاز داریم که برای مخازن عمومی رایگان است. در مورد من، من قبلاً یک حساب GitHub داشتم و GitPod از SSO فدرال (تک ورود) با GitHub پشتیبانی می کند، بنابراین من فقط از این طریق وارد شدم.

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

شکل ۱. صفحه خوش آمدگویی GitPod

بیایید یک برنامه React موجود را در GitPod باز کنیم و آن را آزمایش کنیم.

دکمه New Workspace را کلیک کنید، که پنجره‌ای را باز می‌کند که به شما امکان می‌دهد مخازن GitHub را مرور کنید یا یک URL برای یک آدرس خاص وارد کنید. ما از پروژه React الگو GitHub برای این مثال استفاده خواهیم کرد. GitPod URL شبیه سازی Git را می خواهد که می توانید آن را در پروژه با کلیک کردن روی دکمه Code در جزئیات پروژه، همانطور که در شکل ۲ نشان داده شده است، پیدا کنید.

شکل ۲. URL کلون Git را پیدا کنید

نشانی اینترنتی که باز می گردد این است: https://github.com/cruip/open -react-template.git. در رابط کاربری GitPod، آن URL را در گفتگوی import وارد کنید و روی پروژه ای که باز می گردد کلیک کنید. می توانید پیش فرض ها را بپذیرید و ایجاد پروژه را به پایان برسانید. این کار به طور خودکار مخزن را به GitPod وارد می کند، نمای محیط توسعه را باز می کند و پروژه را در حالت dev اجرا می کند. همه اینها را می توانید در شکل ۳ ببینید.

شکل ۳. پروژه React در حال اجرا در حالت توسعه دهنده

GitPod اساساً مانند یک نسخه درون مرورگر Visual Studio Code (VS Code) عمل می کند. در قسمت پایین ترمینال پوسته قرار دارد که در آن پروژه در حال ساخت را مشاهده خواهید کرد. بیایید نگاهی به خروجی پروژه بیندازیم. روی برگه PORTS در پنجره پایین کلیک کنید. این لیستی از همه برنامه ها و جایی که آنها در حال گوش دادن هستند را برمی گرداند. در این حالت، برنامه جدید React در پورت ۳۰۰۰ گوش می‌دهد. در ستون آدرس، نشانی اینترنتی را می‌بینید که در آن می‌توانید برنامه زنده را مشاهده کنید. می‌توانید روی دکمه مشاهده در مرورگر کلیک کنید (یا URL را کپی و جای‌گذاری کنید)، که به شما نمایی از الگوی در حال اجرا React را می‌دهد، همانطور که در شکل ۴ نشان داده شده است.

شکل ۴. برنامه React در حال اجرا در مرورگر

این آسان بود. GitPod در مورد پروژه نمونه بدون هیچ گونه پشتیبانی از ما چیزهای زیادی دریافت کرده است، از جمله اینکه از چه نوع ماشین مجازی استفاده کنیم، چه خدماتی (مانند Node.js و NPM) مورد نیاز است و چگونه پروژه را در حالت توسعه دهنده با استفاده از دستور شروع کنیم: npm شروع اجرا.

همچنین توجه داشته باشید که GitPod یک فایل .gitpod.yaml ایجاد کرده است تا آنچه را که در مورد پروژه آموخته است، ثبت کند. این فایل نمونه خوبی از نحوه توصیف متادیتای پروژه از جمله تصویر پایه داکر برای استفاده توسط GitPod است. اگر روی برگه Terminal پروژه در حال اجرا خود کلیک کنید و آن را با Ctrl-c متوقف کنید، سپس به دایرکتوری با ls نگاه کنید، فایل .gitpod.yaml را ببینید و می توانید نگاهی به آن بیندازید. چیزی شبیه نشانه گذاری را در فهرست ۱ خواهید دید.

gitpod /workspace/open-react-template (master) $ cat .gitpod.yml 
# This configuration file was automatically generated by Gitpod.
# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
# and commit this file to your remote git repository to share the goodness with others.

# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart

tasks:
  - init: npm install && npm run build
    command: npm run start

به‌طور پیش‌فرض، GitPod از یک تصویر Docker به نام فضای کاری پر استفاده می‌کند که شامل زبان ها و ابزارهای زیادی است. در مورد ما، ما به نصب Node و NPM متکی هستیم. ما می‌توانیم با مشخص کردن یک تصویر هدفمندتر که فقط ابزارهای مورد نیاز ما را شامل می‌شود، چیزها را به‌خوبی تنظیم کنیم، و در صورت لزوم، می‌توانیم تصویری متناسب با نیاز خود تعریف یا پیدا کنیم. می‌توانید به gitpod.yaml بگویید که از یک URL تصویر Docker یا یک Dockerfile با پیکربندی تصویر استفاده کند. GitPod بسیاری از تصاویر مورد استفاده رایج را در Docker Hub خود میزبانی می کند.

برای اطلاعات بیشتر در مورد فضاهای کاری و gitpod.yaml اسناد GitPod را ببینید. .

ایجاد فضاهای کاری و پروژه ها

هنگام ایجاد یک فضای کاری جدید، در حال حاضر راهی برای ایجاد یک پروژه خالی از GitPod وجود ندارد، اگرچه وجود دارد بحث هایی در مورد آن بوده است. اساساً باید با یک مخزن Git موجود شروع کنید. بنابراین می‌توانید به حساب GitHub خود بروید، یک پروژه خالی جدید ایجاد کنید و آن را به GitPod وارد کنید.

GitPod مفاهیم فضاهای کاری و پروژه ها را دارد. فضای کاری یک موجودیت زودگذر است که برای کارهای توسعه استفاده می شود، در حالی که پروژه یک ظرف دائمی برای فضاهای کاری است. هنگام استفاده از یک فضای کاری، مخزن Git پشتیبان آن، ماندگاری طولانی مدت است. یک پروژه برای مدیریت مشترک محصولات مفید است.

محیط های کاری پس از ۲۴ ساعت عدم فعالیت به طور خودکار خاموش می شوند و در نهایت پس از ۱۴ روز حذف می شوند. پروژه‌ها ذخیره می‌شوند و می‌توانند به‌طور نامحدود دوباره مورد استفاده قرار گیرند.

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

مثل VS Code با امکانات اضافی است

GitPod بسیار شبیه به VS Code است و رابط تقریباً یکسان است. CDE از شما می خواهد پسوندهایی را اضافه کنید که به نظرش مفید است، مانند پسوند جاوا اگر از جاوا استفاده می کنید. کل کاتالوگ افزونه های VS Code از منوی افزونه ها در دسترس است. به طور کلی، دقیقاً مانند دسکتاپ VS Code است، با چند مورد اضافه مانند تب پورت‌ها که به سمت یک محیط مدیریت شده و میزبانی شده است. تقریباً می‌توانید همه کارهایی را که در پوسته سیستم عامل خود انجام می‌دهید در صفحه ترمینال انجام دهید.

تنظیم نقاط شکست در کد جاوا

اکنون اجازه دهید یک نقطه شکست در کد جاوا تنظیم کنیم. با رفتن به منوی گوشه سمت چپ بالای صفحه و انتخاب Stop Workspace می‌توانیم فضای کاری فعلی React را ببندیم. این ما را به داشبورد می‌برد و می‌توانیم روی فضای کاری جدید کلیک کنیم. برای این مثال، اجازه دهید از مخزن github.com/gitpod-samples/spring-petclinic استفاده کنیم.

هنگامی که ما اینجا هستیم، توجه داشته باشید که گزینه تنظیم ویرایشگر و انواع ماشین مجازی را نیز دارید. ما در حال حاضر از ویرایشگر پیش‌فرض استفاده می‌کنیم، پس بیایید به آن ادامه دهیم. گزینه‌های دیگر IDE‌های دسکتاپ هستند، مانند Eclipse، VS Code، و IntelliJ، که GitPod می‌تواند با گزینه‌هایی که مشخص می‌کنید، برای شما راه‌اندازی کند. گزینه‌های VM مشابه مواردی هستند که در هر منوی پلتفرم رایانش ابری پیدا می‌کنید.

پس از راه‌اندازی فضای کاری جدید، مجموعه برنامه نمایشی Spring PetClinic را خواهد داشت. در داخل آن این اپلیکیشن قابلیت های زیادی از جمله نحوه اجرای چندین سرویس را نشان می دهد. هنگامی که GitPod برنامه را راه اندازی کرد، می توانید برگه پورت ها را بررسی کنید و ببینید که در هر دو پورت ۸۰۸۰ و ۳۵۷۲۹ در حال گوش دادن است. صفحه نمایش باید مشابه چیزی باشد که در شکل ۵ نشان داده شده است.

شکل ۵. برنامه PetClinic در حال گوش دادن به دو پورت

پورت ۸۰۸۰ برنامه اصلی و پورت ۳۵۲۷۹ سرویس Spring Actuator است که برای نظارت بر برنامه استفاده می شود. با رفتن به URL اصلی در /manage، می‌توانید ببینید که این چه چیزی را تولید می‌کند.

شکل ۵ همچنین برنامه را در صفحه پیش نمایش نشان می دهد (به گوشه سمت راست بالا مراجعه کنید). همچنین می توانید با کلیک کردن روی URL، برنامه را در برگه دیگری باز کنید. در هر صورت، بیایید یک نقطه شکست تعیین کنیم و آن را راه اندازی کنیم. می‌توانیم با کلیک روی Explorer در منوی سمت چپ، یا با زدن Ctrl/Cmd-p، فایلی را در Explorer باز کنیم. ما می‌خواهیم فایل OwnerController.java را در مسیر src/main/java/org/springframework/samples/petclinic/owner/OwnerController.java باز کنیم. سپس، همانطور که در شکل ۶ انجام دادم، یک نقطه شکست تعیین کنید.

شکل ۶. تنظیم نقطه شکست در برنامه جاوا

ما اکنون در روش processCreationForm() هستیم، که در آن فراخوانی‌ها برای ایجاد صاحب حیوان خانگی جدید توسط نگاشت نقطه پایانی Spring Rest هدایت می‌شوند: @PostMapping("/owners/new" ).

اکنون که نقطه شکست تنظیم شده است، باید برنامه را در حالت اشکال زدایی مجدد راه اندازی کنیم. در پنجره ترمینال، C>trl/⌘-c را فشار دهید تا شکسته شود. اکنون به فایل PetClinicApplication.java بروید و در روش main() متوجه Run و Debug خواهید شد. پیوندهای قوی> موجود (نشان داده شده در شکل ۷). روی Debug کلیک کنید.

شکل ۷. اجرا و اشکال زدایی در GitPod

پس از راه‌اندازی، برنامه را باز کنید (در URL برگه پورت‌ها یا در قسمت پیش‌نمایش) و روی یافتن مالکان و سپس مالک جدید کلیک کنید. این فرم را برای ایجاد یک مالک جدید باز می کند. برخی از اطلاعات را پر کنید و افزودن مالک را فشار دهید.

شکل ۸. فعال کردن نقطه شکست

این به کنترلر PetOwner و نقطه شکستی که تعیین کردیم ضربه می‌زند، و در GitPod، CDE را می‌بینید که در انتظار شماست با تمام تجهیزات عادی یک اشکال‌زدای متوقف شده، همانطور که در شکل نشان داده شده است. ۹.

شکل ۹. اشکال زدا متوقف شده

نتیجه گیری

GitPod به شما یک IDE و دسترسی پوسته مبتنی بر مرورگر با ویژگی‌های کامل را در بسته‌ای با مدیریت آسان به شما می‌دهد. این نیاز به کمی تغییر ذهن از استفاده از یک IDE محلی دارد، به این صورت که شما باید به جای اینکه بدانید همه چیز در درایو محلی شما نوشته شده است، به وضعیت ماندگاری فکر کنید. همچنین فکر کردن در مورد پیکربندی دستگاهی که روی آن از طریق پوسته قرار دارید، از نظر نصب وسایل و اطمینان از ذخیره و استفاده مجدد از VM مورد نظر در جلسات مختلف، می‌تواند کمی متفاوت باشد. این ملاحظات برای همه محیط های ابری توزیع شده مشترک هستند.

در پایان، اما، این ملاحظات نیز مزایایی هستند، زیرا یکی از امیدهای اصلی در CDE این است که یک توسعه‌دهنده در حال ایجاد محیط‌های تکرارپذیر و پیکربندی‌شده است که می‌توانند به اشتراک گذاشته شوند، نه فقط چیزی که “روی دستگاه من کار می کند.” 

توسعه‌دهندگان احتمالاً برای همیشه از IDE‌های محلی استفاده خواهند کرد، اما برای هر دو جا وجود دارد. هنگامی که به درستی درک و به کار گرفته شود، CDE می تواند یک مکمل عالی برای رویکرد کلی تیم توسعه شما باشد.