Docs: Add app build introduction

docs/.vitepress/en.mts

@@ -78,6 +78,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         { text: 'Frontend', link: 'frontend-development' },
         { text: 'Backend', link: 'backend-development' },
         { text: 'Desktop', link: 'desktop-development' },
+        { text: 'Android', link: 'android-development' },
       ],
     },
     {
@@ -97,11 +98,6 @@ function sidebarReference(): DefaultTheme.SidebarItem[] {
           text: 'Overview',
           link: 'overview',
         },
-        {
-          text: 'Apis',
-          base: '/reference/api-',
-          items: [{ text: 'Login', link: 'login' }],
-        },
       ],
     },
   ];

docs/.vitepress/zh.mts

@@ -92,6 +92,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         { text: '前端开发', link: 'frontend-development' },
         { text: '后端开发', link: 'backend-development' },
         { text: '桌面端开发', link: 'desktop-development' },
+        { text: '安卓端开发', link: 'android-development' },
       ],
     },
     {
@@ -111,11 +112,6 @@ function sidebarReference(): DefaultTheme.SidebarItem[] {
           text: '概述',
           link: 'overview',
         },
-        {
-          text: 'Apis',
-          base: '/zh/reference/api-',
-          items: [{ text: '登录', link: 'login' }],
-        },
       ],
     },
   ];

docs/components/HomeHeroImage.vue

@@ -11,8 +11,9 @@ import 'swiper/css/navigation';
 import 'viewerjs/dist/viewer.css';
 
 let viewerRef = ref<Viewer>();
+let appViewerRef = ref<Viewer>();
 const isDark = ref(false);
-let darkEl;
+let darkEl: HTMLElement;
 
 function vPSwitchAppearanceFn() {
   isDark.value = !isDark.value;
@@ -22,11 +23,16 @@ function onClickImage() {
   viewerRef.value?.show();
 }
 
+function onClickAppImage() {
+  appViewerRef.value?.show();
+}
+
 onMounted(() => {
   isDark.value = document.documentElement.classList.contains('dark');
   darkEl = document.querySelector('.VPSwitchAppearance');
   darkEl?.addEventListener('click', vPSwitchAppearanceFn);
 
+  // web
   viewerRef.value = new Viewer(document.getElementById('images'), {
     toolbar: false,
     navbar: false,
@@ -36,6 +42,17 @@ onMounted(() => {
       viewerRef.value.zoomTo(1);
     },
   });
+
+  // app
+  appViewerRef.value = new Viewer(document.getElementById('app-images'), {
+    toolbar: false,
+    navbar: false,
+    title: false,
+    initialCoverage: 1,
+    viewed() {
+      appViewerRef.value.zoomTo(1);
+    },
+  });
 });
 
 onUnmounted(() => {
@@ -57,14 +74,28 @@ const images = [
   'register',
 ];
 
+const appImages = [
+  'index',
+  'post-id',
+  'post-id-2',
+  'post-id-comment',
+  'post-edit',
+  'post-edit-2',
+  'sections',
+  'section-id',
+  'messages',
+  'user',
+];
+
 const modules = [Navigation, Pagination, Scrollbar, A11y];
 </script>
 
 <template>
-  <div id="images" class="text-center shadow user-select-none">
+  <div id="images" class="text-center shadow-sm user-select-none">
+    <!-- web -->
     <swiper
       :modules="modules"
-      navigation
+      :navigation="true as any"
       :pagination="{ clickable: true } as any"
       :space-between="50"
       class="swiper"
@@ -76,7 +107,7 @@ const modules = [Navigation, Pagination, Scrollbar, A11y];
           class="image img-fluid"
           style="cursor: zoom-in"
           :src="withBase(`/images/${image}-dark.png`)"
-          alt="index"
+          alt="web"
         />
 
         <img
@@ -85,11 +116,48 @@ const modules = [Navigation, Pagination, Scrollbar, A11y];
           class="image img-fluid"
           style="cursor: zoom-in"
           :src="withBase(`/images/${image}.png`)"
-          alt="index"
+          alt="web"
         />
       </swiper-slide>
     </swiper>
   </div>
+
+  <div class="my-5"></div>
+
+  <!-- app -->
+  <div id="app-images" class="text-center user-select-none">
+    <swiper
+      :modules="modules"
+      :navigation="true as any"
+      :pagination="{ clickable: true } as any"
+      :space-between="50"
+      class="swiper"
+    >
+      <swiper-slide v-for="(image, i) in appImages" :key="i" class="d-flex justify-content-center">
+        <img
+          v-if="isDark"
+          v-on:click="onClickAppImage"
+          class="image img-fluid"
+          style="cursor: zoom-in"
+          :src="withBase(`/images/app/${image}-dark.png`)"
+          alt="app"
+        />
+
+        <img
+          v-else
+          v-on:click="onClickAppImage"
+          class="image img-fluid"
+          style="cursor: zoom-in"
+          :src="withBase(`/images/app/${image}.png`)"
+          alt="app"
+        />
+      </swiper-slide>
+    </swiper>
+  </div>
+
+  <p class="small text-center text-secondary" style="margin-top: 4rem;">
+    Tip: You can switch to dark mode using the top right corner to view images in dark mode.
+  </p>
 </template>
 
 <style lang="scss" scoped>

docs/guide/android-development.md

@@ -0,0 +1,87 @@
+# Android Development
+
+::: info
+
+The following guide explains how to set up a secondary development environment, assuming you have the relevant programming background.
+
+:::
+
+The Youdeyiwu Android application is primarily developed using [Flutter 3](https://flutter.dev).
+
+You can choose your preferred development editor, though [Android Studio](https://developer.android.com/studio) is recommended.
+
+## Clone the Repository
+
+Clone the repository and open the project directory ```app``` with your editor.
+
+```sh
+git clone https://github.com/dafengzhen/youdeyiwu
+```
+
+## Development Configuration
+
+**1. Install Dependencies**
+
+Install the dependencies.
+
+```sh
+flutter pub get
+```
+
+**2. Configure the API Service**
+
+Open the file ```lib/configs/configs.dart```.
+
+Modify the backend request URL accordingly.
+
+```text
+const appApiServer = 'http://10.0.2.2:8080';
+```
+
+**3. Launch the Application**
+
+Using Android Studio as an example, start an Android emulator (Device Manager) and run the application (Run 'main.dart').
+
+## Build the APK
+
+### Generate a Key
+
+**1. For Windows Systems**
+
+```USERPROFILE``` represents the directory where the key will be stored.
+
+Run the following command to generate a key, and follow the prompts to complete the process:
+
+```sh
+keytool -genkey -v -keystore $env:USERPROFILE\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload
+```
+
+**2. For Other Systems or Methods**
+
+Please refer to the [official documentation](https://docs.flutter.dev/deployment/android#create-an-upload-keystore) for guidance.
+
+### Build the Application
+
+**1. Run the Command**
+
+```sh
+flutter build apk
+```
+
+**2. Check the Output**
+
+The output file can be found in the ```build/app/outputs/flutter-apk``` directory of the project.
+
+## Other
+
+**What if I want to build for iOS?**
+
+As I don't have the necessary equipment, I cannot test the build process for iOS.
+
+You might need to make some adjustments to the app for iOS compatibility.
+
+## Conclusion
+
+By customizing the development process, you can add various features to the application as needed.
+
+This concludes the Android development and build process.

docs/guide/desktop-development.md

@@ -92,6 +92,14 @@ npm run build
 
 The files will be output in the ```out``` directory of the project.
 
+## Other
+
+**What if I want to build for Apple desktop?**
+
+Due to the lack of relevant devices, I am unable to test the build on Apple desktop.
+
+You may need to adapt certain parts of the project for the desktop version.
+
 ## Completion
 
 Through custom development, you can add various functionalities to the application as needed.

docs/guide/fqa.md

@@ -6,8 +6,12 @@ Documenting common questions in the hope that they may be of assistance to you.
 
 By default, you can use the pre-built Docker image to experience or deploy the project.
 
-If you want to add more features, you will need to develop the project further through customization.
+If you want to add custom features or implement functionality that suits your business logic, it is recommended to use secondary development methods.
 
-## Is the project currently under development?
+## Is there an online demo available for the project?
 
-Yes, the project is currently under development, and efforts are being made to continuously improve it.
+Due to various reasons, we are unable to provide an online demo.
+
+However, you can follow the steps in the [Quick Start](./getting-started.md#installation-steps) guide to deploy and experience it in one click.
+
+Alternatively, you can browse the example images on the [Documentation Home](../index.md) page for a basic understanding.

docs/guide/what-is-youdeyiwu.md

@@ -25,11 +25,3 @@ In addition to basic functionality and backend management, it also has the follo
 Youdeyiwu consists of both frontend and backend components.
 
 The backend is developed using [Spring Boot 3](https://spring.io/projects/spring-boot), the frontend is developed using [Next.js 14](https://nextjs.org), and the database used is [MySQL 8](https://www.mysql.com).
-
-::: info Side Note
-
-If there is spare time in the future, desktop and app development may be considered. The idea is to expand on the backend API utilization and frontend browsing.
-
-However, developing other platforms is not the main focus. The main focus is still on frontend and backend development.
-
-:::

docs/reference/overview.md

@@ -4,4 +4,4 @@ The interface definition uses the OpenAPI specification, which can be found at t
 
 You can import this file into API testing tools that support this specification, such as: [Insomnia](https://insomnia.rest), [Apifox](https://apifox.com), etc.
 
-The document also includes API definitions for reference, which can be used in conjunction with the OpenAPI specification.
+If you don't know which APIs to use, you can refer to the API calls on the web side.