چطور java و spring boot را در 24 ubuntu نصب کنیم

برای نصب Java و Spring Boot در Ubuntu، مراحل زیر را دنبال کنید: بهتر است طی مراحل اجرای و نصب وابستگی ها در جاوا سرویس شکن یا … را فعال کنید

مرحله 1: نصب Java (JDK 21 یا نسخه مورد نیاز)

1. بروزرسانی مخازن

sudo apt update && sudo apt upgrade -y

2. نصب OpenJDK 21 (یا نسخه دیگر)

sudo apt install openjdk-21-jdk -y

بررسی نصب Java:

java -version

اگر نصب موفقیت‌آمیز باشد، باید نسخه جاوا را ببینید:

openjdk 21 2023-09-19

مرحله 2: نصب Maven

1. نصب Maven

sudo apt install maven -y

بررسی نصب Maven:

mvn -version

مرحله 3: نصب Spring Boot CLI

1. نصب SDKMAN برای مدیریت ابزارها

curl -s "https://get.sdkman.io" | bash

2. فعال‌سازی SDKMAN

source ~/.sdkman/bin/sdkman-init.sh

بررسی نصب:

sdk version

3. نصب Spring Boot با SDKMAN

sdk install springboot

بررسی نصب Spring Boot CLI:

spring --version

مرحله 4: ایجاد پروژه Spring Boot با Maven یا Spring Initializr

ایجاد پروژه با Spring Initializr

میتوانید پروژه را از Spring Initializr دانلود کنید. در تصویر زیر ساختار مورد نیاز برای شروع را نشان میدهد

در نهایت پس از دانلود آغازگر یا استارتر مورد نیاز خود از سایت Spring Initializr وارد root پروژه شوید و جهت شروع برنامه دستور زیر را وارد کنید. البته طی اولین اجرا شروع به دانلود و به روزرسانی وابستگی های پروژه خواهد کرد که کمی زمان خواهد برد.

mvn spring-boot:run

دسترسی به پروژه در مرورگر:

http://localhost:8080

جهت مدیریت بهتر و توسعه سریع تر در vs code دو افزونه رسمی زیر را نصب کنید

نصب افزونه‌های مربوط به Java و Spring Boot در VS Code:

  • Extension: Java Extension Pack
  • Extension: Spring Boot Tools

رفع اشکالات احتمالی

اگر خطایی در مورد نسخه جاوا وجود دارد، مطمئن شوید که Java به درستی نصب شده و مسیر آن تنظیم شده است:

sudo update-alternatives --config java

در صورت نیاز، مسیر Java را به PATH اضافه کنید:

echo 'export JAVA_HOME=/usr/lib/jvm/java-21-openjdk-amd64' >> ~/.bashrc
echo 'export PATH=$PATH:$JAVA_HOME/bin' >> ~/.bashrc
source ~/.bashrc

تشابهه زیاد php و جاوا در syntax و کلمات کلیدی

از نظر سینتکس (Syntax)، PHP و Java تفاوت‌های زیادی دارند، اگرچه برخی اصول پایه در هر دو زبان مشترک هستند. در اینجا مقایسه‌ای از سینتکس این دو زبان ارائه می‌دهیم: این مقاله بیشتر برای افرادی مناسب است که تمایل دارند زبان دیگری را هم بجز PHP یاد بگیرند و با توجه به بررسی که من بین C# و Java داشتم به دلیل تجربه ای که در برنامه نویسی PHP داشتم بخشی از تشابهه های بین PHP و جاوا را معرفی میکنم

1. تعریف متغیرها:

$name = "John";
$age = 25;

Java: در Java، برای تعریف متغیرها باید نوع داده (Type) مشخص شود.

String name = "John";
int age = 25;

2. تعریف تابع (Function/Method):

PHP: توابع با کلمه‌کلیدی function تعریف می‌شوند.

function greet($name) {
    return "Hello, " . $name;
}

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

public String greet(String name) {
    return "Hello, " + name;
}

3. کلاس‌ها و اشیاء:

  • PHP: PHP از کلاس‌ها و اشیاء پشتیبانی می‌کند. کلمه‌کلیدی class برای تعریف کلاس‌ها استفاده می‌شود.
class Person {
    public $name;
    public $age;
    
    public function __construct($name, $age) {
        $this->name = $name;
        $this->age = $age;
    }
}

$person = new Person("John", 25);

Java: Java نیز از کلاس‌ها و اشیاء پشتیبانی می‌کند و همه چیز باید داخل یک کلاس قرار گیرد.

class Person {
    String name;
    int age;
    
    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

Person person = new Person("John", 25);

4. ساختار شرطی (if/else):

  • PHP
if ($age > 18) {
    echo "Adult";
} else {
    echo "Minor";
}

Java:

if (age > 18) {
    System.out.println("Adult");
} else {
    System.out.println("Minor");
}

5. حلقه‌ها (Loops):

PHP:

for ($i = 0; $i < 5; $i++) {
    echo $i;
}

foreach ($array as $item) {
    echo $item;
}

Java:

for (int i = 0; i < 5; i++) {
    System.out.println(i);
}

for (String item : array) {
    System.out.println(item);
}

6. تعریف آرایه‌ها (Arrays):

  • PHP:
$array = [1, 2, 3, 4, 5];
echo $array[0];  // خروجی: 1

Java:

int[] array = {1, 2, 3, 4, 5};
System.out.println(array[0]);  // خروجی: 1

7. مدیریت خطا (Error Handling):

  • PHP: برای مدیریت خطا از try/catch استفاده می‌شود.
try {
    throw new Exception("An error occurred");
} catch (Exception $e) {
    echo $e->getMessage();
}

Java: Java برای مدیریت خطا از try/catch مشابه استفاده می‌کند، اما باید انواع مختلف خطا (Exception) را مشخص کنید.

try {
    throw new Exception("An error occurred");
} catch (Exception e) {
    System.out.println(e.getMessage());
}

8. وراثت (Inheritance):

PHP: در PHP از کلمه‌کلیدی extends برای وراثت استفاده می‌شود.

class Animal {
    public $name;
    
    public function speak() {
        echo "Animal sound";
    }
}

class Dog extends Animal {
    public function speak() {
        echo "Bark";
    }
}

$dog = new Dog();
$dog->speak();  // خروجی: Bark

Java: در Java نیز از کلمه‌کلیدی extends برای وراثت استفاده می‌شود.

class Animal {
    String name;
    
    public void speak() {
        System.out.println("Animal sound");
    }
}

class Dog extends Animal {
    @Override
    public void speak() {
        System.out.println("Bark");
    }
}

Dog dog = new Dog();
dog.speak();  // خروجی: Bark

9. کتابخانه‌ها (Libraries/Packages):

PHP: در PHP برای وارد کردن کتابخانه‌ها از require یا include استفاده می‌شود.

require 'library.php';

Java: در Java از import برای وارد کردن کلاس‌ها و بسته‌ها (packages) استفاده می‌شود.

import java.util.ArrayList;

نصب لاراول در ویندوز – لینوکس – مک

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

/bin/bash -c "$(curl -fsSL https://php.new/install/linux/8.4)"

نصب در لینوکس یا ubuntu

بعد از اجرای دستور فوق به سادگی php , composer و laravel installer نصب میگردد.

دستور نصب در ویندوز

Run as administrator…
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://php.new/install/windows/8.4'))

نصب در mac

/bin/bash -c "$(curl -fsSL https://php.new/install/mac/8.4)"

در نهایت پس از بازکردن پنجره جدید ترمینال متوجه نصب شدن php خواهید شد

مرحله آخر اجرای دستور

composer global require laravel/installer

و برای شروع یک پروژه جدید

laravel new example-app

رفع مشکل آپدیت نشدن Ubuntu

معمولا پیش می آید که در هنگام اجرای دستور sudo apt update یا sudo apt upgrade اتصال به مخزن ها انجام نمیشودو در سیستم ادامه اپدیت را نمی تواند انجام دهد برای حل این موضوع یک برنامه بسیار کاربردی وجود دارد که میتواند مخزن های معیوب را شناسایی و آنها را از لیست مخزن های آپدیت ابونتو حذف کند. من با اجرای این سه فرمان و در نهایت با تایید و زدن yes یا y مشکلات مربوط به آپدیت نشدن را برطرف میکنم

wget https://github.com/davidfoerster/aptsources-cleanup/releases/download/v0.1.7.5.2/aptsources-cleanup.pyz
sudo chmod a+x aptsources-cleanup.pyz
sudo ./aptsources-cleanup.pyz

آموزش تولید محتوا با هوش مصنوعی

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

استفاده از هوش مصنوعی در تولید محتوا به دو شیوه اصلی قابل انجام است:

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

در هر دو شیوه، شما می‌توانید از این ابزار قدرتمند به‌صورت رایگان یا با پرداخت هزینه استفاده کنید. به‌عنوان کسی که بیش از ۱۰ سال تجربه در تولید محتوا برای وب‌سایت‌ها دارم، معتقدم که صرفاً ایجاد محتوا یا کپی‌برداری برای مخاطبان جذاب نیست. روش دوم که به نویسندگان کمک می‌کند تا محتوای خود را بهبود دهند، واقعاً جالب و موثر است.

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

به کارگیری پرامپت و عملا پرامپت چیست؟

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

نوشتن پرامپت‌های اصولی می‌تواند خروجی‌های بسیار خوبی به همراه داشته باشد و تجربه شما از هوش مصنوعی را بهبود بخشد. برای تولید محتوای خوب، پرامپت‌های مؤثر نیز ضروری هستند.

دلیل توانایی هوش مصنوعی در تولید متن در همه زبان ها

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

نکات اساسی در نوشتن پرامپت هوش مصنوعی تصویری

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

جزئیات بیشتری به پرامپت خود اضافه کنید. هرچه اطلاعات بیشتری درباره متن مورد نظرتان ارائه دهید، خروجی نهایی بهتر خواهد بود. شما می‌توانید در پرامپت خود، کلیدواژه ها، مخاطب هدف، را مشخص کنید. همچنین نوع لهن مطلب را میتوانید ذکر کنید مانند ( خبری ، عاملیانه یا رسمی و…)

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

سوالات را به‌طور کامل مطرح کنید. اگر سوال یا درخواستی در پرامپت دارید، آن را به طور کامل بیان کنید و مشخص کنید که چه چیزی می‌خواهید. پرسیدن سوالات باز ممکن است به جواب‌های متنوع و گاهی بی‌ربط منجر شود.

چرا باید از هوش مصنوعی در تولید محتوا استفاده کرد؟

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

نمونه های متفاوت در تولید پرامپت

  • یک مقدمه مقاله برای مقاله‌ای در مورد (عنوان) با استفاده از کلمات کلیدی مشخص شده بده: (کلمات کلیدی)
  • یک توضیحات پنجاه کلمه‌ای درباره محصول (عنوان و اطلاعات محصول) بنویس
  • بهینه سازی یک نامه : متن زیر را با نگارش رسمی بازنویسی کن …..
  • چند ایده کاربردی برای معرفی محصول …. بهم بده

گفتگو خود را برای رسیدن به پاسخ مطلوب ادامه دهید

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

اجرای دستور sum روی ۱۰۰ رکورد اول در SQL

احتمالا اگر بخواهید از یک روش ساده برای دریافت ۱۰۰ رکورد اول استفاده کنید دستور زیر را وارد میکنید

select sum(amount) from orders limit 100

اما متاسفانه این دستور به درستی عمل نمیکند و ستون amount را در کل رکورد ها جمع میزند . راه حل این است که از sub query استفاده شود. به طور مثال

select sum(tmp.amount) from (
select * from orders limit 100
) as tmp

انواع روش های نامگذاری در کدنویسی

یکی از اصولی که باید در کدنویسی رعایت کرد نحوه تعریف متغییرها و کلاس ها و … است. با رعایت این اصول کدنویسی از یک شکل مشخصی تبعیت میکند به این صورت که اگر قرار است یک کلاس برای مدیریت کتاب داشت به چند شکل میتوان آن را تعریف کرد BookManager یا book-manager یا bookManager و چندین حالت دیگر به طور کلی هفت روش نامگذاری به صورت استاندارد تعریف شده که به شرح ذیل است.

پرکاربرد ترین آنها SNAKE و PASCAL و CAMEL می باشد.

TransformerEffect
SNAKEgo_sdk
KEBABgo-sdk
CAMELgoSdk
PASCALGoSdk
LOWERgo-sdk
UPPERGO-SDK
TITLEGo-Sdk

بدون یادگیری داکر پروژه های خود را داکرایز کنید

اگر شما توسعه دهنده یکی از پلتفرم های Laravel, Symfony, Next, Nuxt, WordPress باشید برای مرحله Devops نیاز به یادگیری خیلی چیزها دارید که چطور بتونید پروژه خود را با کمک Docker راه اندازی کنید معمولا شاید در گوگل سرچ میزنید و یک نمونه آماده را پیدا میکنید و با کمی تغییر آن را اجرا میکنید و ممکن است انواع مشکلات امنیتی و خطاهای سطح دسترسی را هم داشته باشید و از طرفی هم گوشه ای از ذهنتان درگیر نگهداری آن باشد.

اما امروز من با یک ابزار جدید آشنا شدم که خیلی کار شما را در بخش داکر راحت میکند این ابزار میتواند برای شما در حالت های توسعه یا حالت عملیاتی به شکل کاملا بهینه و اصولی اجرا کنید. کافی است وارد سایت https://kool.dev شوید و دستور نصب آن را وارد کنید.

curl -fsSL https://kool.dev/install | bash

با اجرای این دستور ابزار kool برای شما نصب میشود و زین پس میتوانید زیرساخت و کدهای مربوط به داکر را برای انواع پروژه های خود به سرعت و دقت بالا اجرا کنید.

مثلا شما میخواهید پروژه لاراولی خود را داکرایز کنید البته یک نکته را هم بگم که خود لاراول یک پکیج برای داکر دارد که به laravel sail معرفی شده اما متاسفانه فقط برای وضعیت توسعه روی سیستم توسعه دهنده است و هیچ راهکاری را برای حالت production نمیدهد یعنی حتی ngnix را هم ندارد و کلیه تنظیمات بر اساس وضعیت تست و برنامه نویسی ساخته شده .

برای شروع البته باید قبلا این پست را خوانده باشید اگر در ایران و سرورهای ایران کار میکنید

$ kool create laravel my-project

سپس بعد از pull شدن میتوانید ساختار مورد نظر خود را مشابهه نمونه زیر کانفیگ کنید

در نهایت با وارد شدن به پروژه

cd my-project

مشاهده خواهید کرد که دو فایل docker-compose.yml و kool.yml به پروژه اضافه شده تا اینجا زیر ساخت ساخته شده و بعد باید تنظیمات .env پروژه را بر اساس داکر قرار دهید که به طور کامل در لینک زیر قابل دسترس است. البته داخل فایل kool.yml دستوراتی درج شده که در پایین توضیح دادم و شما میتوانید دستورات بیشتری را هم به آن اضافه کنید.

https://kool.dev/docs/presets/laravel#2-update-envexample

ضمنا kool به شما یکسری دستورات هم میده که دیگه نیاز به وارد شدن به shell container نداشته باشید چون وقتی شما اگر داکر استفاده میکنید مثل حالت عادی نمی تونید دستورات php artisan migrate را اجرا کنید حتما باید وارد container بشید و بعد اونجا واردش کنید اما با کمک kool دستورات به شکل زیر قابل استفاده هستند

kool run artisan migrate:fresh --seed

توضیحات بیشتر هم در ادامه لینک بالا قرار دارد اما دقیقا اینجاست

https://kool.dev/docs/presets/laravel#3-run-kool-run-setup

بازیابی رمز ورود وردپرس بدون دسترسی به ایمیل ریست پسورد

معمولا به دلیل عدم کانفیگ بودن سرور ایمیل بعضا در هنگام ریست رمز ورود شما ایملیی دریافت نمیکنید! اگر شما نتوانید ایمیل را دریافت کنید باید چه کار کرد ؟ شما باید وارد phpMyadmin شود و در جدول wp_users کاربر مورد نظر را که مثلا admin است را ویرایش کنید و در ستون password معادل پسورد موقت ۱۲۳۴۵۶۷۸ را وارد کنید و بعد از اینکه وارد ادمین شدید مجددا آن را به یک رمز قوی تغییر دهید.

نکته ای که وجود دارد شما نمیتوانید مقدار ۱۲۳۴۵۶۷۸ را وارد فیلد password کنید و باید معادل hash شده را جایگزین کنید این معادل عینا برابر پسورد ۱۲۳۴۵۶۷۸ است در غیراینصورت وردپرس رمز را نمیتواند تطلبق دهد

مقدار hash زیر را جایگزین فیلد password با مقدار قبلی کنید . توجه کنید که حتی یک فاصله خالی هم میتواند hash را نامعتبر کند.

$2y$12$7GZgHNnnMStUUgsUkG4KC.MswaKH2yq8.N0wM/B.vfr6F5/SoPteC

روش ساخت hero در صفحه نخست سایت

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

<header class="hero">
  <div class="center-content">
    <h1>An Article Title</h1>
    <h3>A longer subtitle but still important</h3>
    <a href="#" class="button">Some Action Here</a>
  </div>
</header>
.hero {
  background-image: url("https://unsplash.it/1500?random");
  background-size: cover;
  background-position: center;
  width: 100wh;
  height: 100vh;
  display: flex;
}

.center-content {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}
.center-content h1, .center-content h3 {
  color: white;
  line-height: 1;
}
.center-content h1 {
  text-transform: uppercase;
  font-size: 3em;
  margin-bottom: 0;
  text-align: center;
}
.center-content h3 {
  margin-bottom: 40px;
  font-size: 1.5em;
  font-weight: normal;
}

.button {
  text-transform: uppercase;
  color: white;
  padding: 20px;
  border: 1px solid white;
  text-decoration: none;
}
.button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
}

جهت نمایش نسخه لایو

تغییر سورس های هاست در vs code

سلام احتمالا برای تغییر در سورس های سایت خود مجبورید وارد direct admin بشید و از طریف file manager فایل سورس سایت را تغییر میدید . این یک روش سریع است اما اگر مجبورید سورس هایی که در لوکال نیستند را توسعه بدید باید از قابلیت SFTP در vs code استفاده کنید با این پلاگین شما به پورت 22 (ممکنه از طریق هاست تغییر کرده باشه که باید از فروشنده هاست آن را سوال کنید) وصل بشید . طبق مراحل زیر ابتدا پلاگین Natizyskunk.sftp را نصب کنید.

ext install Natizyskunk.sftp

بعد با اجرای دستور CTRL + shift + p کامند پالت را باز کنید و دستور SFTP: config را وارد کنید و enter

در صفحه باز شده باید به نسبت هر سایت تنظیمات هاست را قرار بدید

{
    "name": "My Site",
    "host": "000.000.000.000",
    "protocol": "sftp",
    "port": 22,
    "username": "siteusername",
    "remotePath": "/home/mysite/domains/mysite.com/public_html",
    "uploadOnSave": true
}

در صورتی که مقدار remotePath را برابر اسلش / قرار بدید root را در نظر میگیرد و باید وارد مسیری که پروژه نصب شده وارد بشید ولی طبق مدل نمونه به صورت پیش فرض در مسیری که پروژه نصب شده وارد میشوید (مثال دایرکت ادمین است )

طبق تصویر زیر هم از منو سمت چپ روی ایکن SFTP کلیک کنید و با زدن روی نام سایت و وارد کردن پسورد هاست میتوانید دایرکتوری هاست را مشاهده کنید . البته برای ویرایش فایل ها باید با کلیک روی نام فایل و انتخاب گزینه Edit in local از این به بعد خیلی ساده با تغییر کد و ذخیره به صورت آنی روی هاست به روز میشود