develop: add dev guide playground gitpod

TOC.md

@@ -76,6 +76,8 @@
     - Guidelines
       - [Object Naming Convention](/develop/dev-guide-object-naming-guidelines.md)
       - [SQL Development Specifications](/develop/dev-guide-sql-development-specification.md)
+  - Cloud Native Development Environment
+    - [Gitpod](/develop/dev-guide-playground-gitpod.md)
     - Archived Docs
       - [For Hibernate ORM](/develop/dev-guide-outdated-for-hibernate-orm.md)
       - [For Django](/develop/dev-guide-outdated-for-django.md)

develop/dev-guide-playground-gitpod.md

@@ -0,0 +1,169 @@
+---
+title: Gitpod
+---
+
+<!-- markdownlint-disable MD029 -->
+
+# Gitpod
+
+With [Gitpod](https://www.gitpod.io/), you can get a full development environment in your browser with the click of a button or link, and you can write code right away.
+
+Gitpod is an open-source Kubernetes application (GitHub repository address: <https://github.com/gitpod-io/gitpod>) for direct-to-code development environments, which spins up fresh, automated development environments for each task, in the cloud, in seconds. It enables you to describe your development environment as code and start instant, remote and cloud-based development environments directly from your browser or your Desktop IDE.
+
+## Quick start
+
+1. Fork the example code repository [pingcap-inc/tidb-example-java](https://github.com/pingcap-inc/tidb-example-java) for TiDB application development .
+
+2. Start your Gitpod workspace by prefixing the URL of the sample code repository with `https://gitpod.io/#` in the address bar of your browser.
+
+   - For example, `https://gitpod.io/#https://github.com/pingcap-inc/tidb-example-java`。
+
+   - You can configure environment variables in the URL. For example, `https://gitpod.io/#targetFile=spring-jpa-hibernate_Makefile,targetMode=spring-jpa-hibernate/https://github.com/pingcap-inc/tidb-example-java`.
+
+3. Log in and start the workspace using one of the providers listed. For example, `Github`.
+
+## Use the default Gitpod configuration and environment
+
+After completing the [quick-start](#quick-start) steps, it will take a while for Gitpod to set up your workspace.
+
+Take the [Spring Boot Web](/develop/dev-guide-sample-application-spring-boot.md) application as an example. You can create a new workspace by the `https://gitpod.io/#targetFile=spring-jpa-hibernate_Makefile,targetMode=spring-jpa-hibernate/https://github.com/pingcap-inc/tidb-example-java` URL.
+
+After that, you will see a page similar to the following:
+
+![playground gitpod workspace init](/media/develop/playground-gitpod-workspace-init.png)
+
+This scenario in the page uses [TiUP](https://docs.pingcap.com/zh/tidb/stable/tiup-overview) to build a TiDB Playground. You can check the progress on the left side of the terminal area.
+
+Once the TiDB Playground is ready, another `Spring JPA Hibernate` task will run. You can check the progress on the right side of the terminal area.
+
+After all these tasks are finished, you will see a page similar to the following. On this page, check the `REMOTE EXPLORER` area in the left navigation pane (Gitpod supports URL-based port forwarding) and find the URL of your port `8080`.
+
+![playground gitpod workspace ready](/media/develop/playground-gitpod-workspace-ready.png)
+
+You can test the API by [sending an HTTP request](/develop/dev-guide-sample-application-spring-boot.md#step-6-http-requests). Make sure to replace the `http://localhost:8080` URL with the one you found in the `REMOTE EXPLORER` area.
+
+## Using custom Gitpod configuration and Docker image
+
+### Customize Gitpod configurations
+
+Referring to [example.gitpod.yml](https://github.com/pingcap-inc/tidb-example-java/blob/main/.gitpod.yml), create a `.gitpod. yml` file in the root directory of your project to configure the Gitpod workspace.
+
+```yml
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# image:
+#   file: .gitpod.Dockerfile
+
+tasks:
+  - name: Open Target File
+    command: |
+      if [ -n "$targetFile" ]; then code ${targetFile//[_]//};  fi
+  - name: TiUP init playground
+    command: |
+      $HOME/.tiup/bin/tiup playground
+  - name: Test Case
+    openMode: split-right
+    init: echo "*** Waiting for TiUP Playground Ready! ***"
+    command: |
+      gp await-port 3930
+      if [ "$targetMode" == "plain-java-jdbc" ]
+      then
+        cd plain-java-jdbc
+        code src/main/resources/dbinit.sql
+        code src/main/java/com/pingcap/JDBCExample.java
+        make mysql
+      elif [ "$targetMode" == "plain-java-hibernate" ]
+      then
+        cd plain-java-hibernate
+        make
+      elif [ "$targetMode" == "spring-jpa-hibernate" ]
+      then
+        cd spring-jpa-hibernate
+        make
+      fi
+ports:
+  - port: 8080
+    visibility: public
+  - port: 4000
+    visibility: public
+  - port: 2379-36663
+    onOpen: ignore
+```
+
+### Customize Gitpod Docker images
+
+By default, Gitpod uses a standard Docker image named Workspace-Full as the basis for the workspace. Workspaces launched from this default image are pre-installed with Docker, Go, Java, Node.js, C/C++, Python, Ruby, Rust, PHP, and tools such as Homebrew, Tailscale, and Nginx.
+
+You can use a public Docker image or a Dockerfile and also install any required dependencies for your project.
+
+For example, you can use a Dockerfile (see also [Example `.gitpod.Dockerfile`](https://github.com/pingcap-inc/tidb-example-java/blob/main/.gitpod.Dockerfile)) as follows:
+
+```dockerfile
+FROM gitpod/workspace-java-17
+
+RUN sudo apt install mysql-client -y
+RUN curl --proto '=https' --tlsv1.2 -sSf https://tiup-mirrors.pingcap.com/install.sh | sh
+```
+
+Then, you need to update `.gitpod.yml`:
+
+```yml
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+image:
+  # Import your Dockerfile here.
+  file: .gitpod.Dockerfile
+
+tasks:
+  - name: Open Target File
+    command: |
+      if [ -n "$targetFile" ]; then code ${targetFile//[_]//};  fi
+  - name: TiUP init playground
+    command: |
+      $HOME/.tiup/bin/tiup playground
+  - name: Test Case
+    openMode: split-right
+    init: echo "*** Waiting for TiUP Playground Ready! ***"
+    command: |
+      gp await-port 3930
+      if [ "$targetMode" == "plain-java-jdbc" ]
+      then
+        cd plain-java-jdbc
+        code src/main/resources/dbinit.sql
+        code src/main/java/com/pingcap/JDBCExample.java
+        make mysql
+      elif [ "$targetMode" == "plain-java-hibernate" ]
+      then
+        cd plain-java-hibernate
+        make
+      elif [ "$targetMode" == "spring-jpa-hibernate" ]
+      then
+        cd spring-jpa-hibernate
+        make
+      fi
+ports:
+  - port: 8080
+    visibility: public
+  - port: 4000
+    visibility: public
+  - port: 2379-36663
+    onOpen: ignore
+```
+
+### Apply changes
+
+After completing the configuration of the `.gitpod.yml` file, make sure that the latest code is available in your corresponding GitHub repository.
+
+Visit `https://gitpod.io/#<YOUR_REPO_URL>` to create a new Gitpod workspace with the latest code applied.
+
+Visit `https://gitpod.io/workspaces` for all established workspaces.
+
+## Summary
+
+Gitpod provides a complete, automated, and pre-configured cloud-native development environment. You can develop, run, and test code directly in the browser without any local configurations.
+
+![playground gitpod summary](/media/develop/playground-gitpod-summary.png)