Use Cloud Studio y Flutter para completar la construcción de un sitio web de blog de plataforma completa

Use Cloud Studio y Flutter para completar la construcción de un sitio web de blog de plataforma completa

prefacio

En este artículo, usaré Cloud Studio y Flutter para completar la construcción de una plataforma de blog propia. Y este proyecto se usará como una plantilla para que todos la usen.

Echemos un vistazo al efecto primero.

1. Estudio en la nube

Cloud Studio es un entorno de desarrollo integrado (IDE) basado en navegador que proporciona a los desarrolladores una estación de trabajo basada en la nube siempre activa. Los usuarios no necesitan instalar CloudStudio cuando lo usan
, y pueden programar en línea en cualquier momento y en cualquier lugar abriendo un navegador.

También ha visto que se proporcionan muchas plantillas y entornos, y todos saben que solía trabajar en Flutter, así que primero probé la plantilla de Flutter, y al principio, puede que no sea muy bueno en eso, pero después de familiarizarme con por un tiempo, descubriré sus beneficios.

Como un IDE en línea, Cloud Studio incluye funciones básicas de IDE como resaltado de código, finalización automática, integración de Git y terminal. También admite depuración en tiempo real, extensiones de complementos, etc., que pueden ayudar a los desarrolladores a completar rápidamente el desarrollo. , compilación y despliegue de diversas aplicaciones. Envié este sitio de blog a Gitee usando Cloud Studio, y todos pueden visitarlo.

2. Escenarios de aplicación

La herramienta de programación en línea Cloud Studio es adecuada para los siguientes escenarios:

2.1 Proyecto de inicio rápido

Usando el entorno preestablecido de Cloud Studio, puede crear directamente el tipo de espacio de trabajo correspondiente, iniciar rápidamente el proyecto e ingresar al estado de desarrollo, sin una configuración de entorno engorrosa.

El siguiente es el espacio de trabajo del que tengo miedo. Cuando lo use la próxima vez, puede ingresar al espacio de trabajo correspondiente y continuar escribiendo el código, lo cual es muy conveniente.

2.2 Depurar páginas web en tiempo real

Cloud Studio tiene un complemento de vista previa incorporado que puede mostrar aplicaciones web en tiempo real. Cuando se cambia su código, la ventana de vista previa se actualizará automáticamente, para que pueda desarrollar y depurar páginas web en tiempo real en Cloud Studio.

El siguiente es el primer proyecto de plantilla que creé, le resultará muy conveniente.

2.3 Acceso remoto al servidor en la nube

Cloud Studio lo ayuda a conectarse a su propio servidor en la nube, para que pueda ver archivos en el servidor en la nube en el editor y realizar programación e implementación en línea.

Siempre que tenga su propio servidor en la nube, puede comenzar a desarrollar fácilmente a través de la configuración aquí.

3. Inicio de sesión y registro

La plataforma de programación en línea Cloud Studio admite el uso de la cuenta CODING (se abre en una ventana nueva) , la cuenta de GitHub y el inicio de sesión de WeChat. Puede ingresar la cuenta correspondiente en la interfaz de inicio de sesión (se abre en una ventana nueva) para iniciar sesión en el IDE web. Aquí use el inicio de sesión de WeChat.

4. Creación y uso del espacio de trabajo

Un espacio de trabajo es una unidad informática virtual que contiene almacenamiento independiente, recursos informáticos y entornos de desarrollo. Cloud Studio está organizado por espacio de trabajo, este artículo presenta cómo crear un espacio de trabajo.

4.1 Crear un espacio de trabajo

Ingrese al IDE en la nube de Cloud Studio, puede crear un espacio de trabajo de dos maneras, la primera forma : haga clic en la plantilla para crear un espacio de trabajo directamente, la segunda forma : haga clic en [Nuevo espacio de trabajo] para ingresar a la página de creación de espacio de trabajo

4.1.1 Complete la información del espacio de trabajo

La primera forma es hacer clic en la plantilla para crear un espacio de trabajo, que puede generar automáticamente el nombre del espacio de trabajo y ejecutar el entorno preestablecido y el código de muestra de la plantilla. Aquí estoy usando Flutter.

En el segundo método , elija crear un espacio de trabajo, luego seleccione un entorno preestablecido, complete el nombre del espacio de trabajo, la descripción y seleccione el entorno operativo y la fuente del código.

• Nombre del espacio de trabajo : el identificador único de su espacio de trabajo, que solo puede constar de letras, números, guiones bajos (_), guiones (-) y puntos (.), y no puede contener espacios ni otros caracteres.
• Descripción : una descripción de lo que hace este espacio de trabajo.
• Entorno operativo : el entorno en el que se ejecuta el código en el espacio de trabajo, puede elegir un entorno preestablecido, incluidos Ubuntu, Python, Java y Node.js; también puede elegir conectarlo a su propio servidor en la nube,
• Fuente del código : la fuente del código en el espacio de trabajo, aquí seleccionamos "vacío", es decir, no se agrega ningún código.

Haga clic en el botón [Crear] para completar la creación del espacio de trabajo. También puede crear un espacio de trabajo donde el código provenga del repositorio de Git y el código se clonará automáticamente en el espacio de trabajo.

4.2 Uso del espacio de trabajo

Puede almacenar su propio código de proyecto en el espacio de trabajo del IDE en la nube de Cloud Studio, instalar el entorno de software requerido y ejecutar o compilar el proyecto. Este artículo presenta cómo usar el espacio de trabajo.

Aviso:

• Límite de cantidad : Actualmente, cada usuario puede crear hasta 10 espacios de trabajo, y solo se puede ejecutar un espacio de trabajo al mismo tiempo. Si necesita abrir otro espacio de trabajo, primero debe cerrar el espacio de trabajo que se está ejecutando actualmente.
• Límite de tiempo : cada usuario puede usar el espacio de trabajo de forma gratuita durante un total de 1000 minutos por mes, y se deducirán los cargos si se excede el tiempo (no existe tal límite para el espacio de trabajo conectado al host de la nube).

4.2.1 Introducción a la interfaz del espacio de trabajo

El espacio de trabajo es nuestra principal área de trabajo, que se compone principalmente de la barra de menú superior, el panel de operaciones izquierdo, el área de edición de código derecha y la barra de estado inferior.

Puede configurar la apariencia y las preferencias de la interfaz según sus propios hábitos e instalar los complementos que necesite.

Cabe señalar que sus preferencias y complementos están aislados entre sí en cada espacio de trabajo , lo que significa que puede establecer diferentes preferencias e instalar diferentes complementos para diferentes espacios de trabajo. La mayor parte es lo mismo que usa vscode localmente.

Podemos realizar estas operaciones a través de la terminal, haga clic en la barra de menú – terminal – nueva terminal, se abrirá un panel en la parte inferior, haga clic en [terminal] para cambiar a la terminal.

4.2.2 Administrar espacios de trabajo

En la página de la lista de espacios de trabajo del IDE en la nube de Cloud Studio, puede ejecutar, detener, eliminar y restaurar el espacio de trabajo.

correr

Haga clic en la tarjeta del espacio de trabajo correspondiente, y el espacio se abrirá y se ejecutará en una nueva página, y el estado de "En ejecución" se mostrará en la tarjeta del espacio de trabajo.

detener

Para un espacio de trabajo en el estado "En ejecución", haga clic en [Detener] en el lado derecho de la tarjeta para detener la ejecución del espacio de trabajo.

borrar

Puede eliminar un espacio de trabajo que no se está ejecutando haciendo clic en [Eliminar] en la esquina inferior derecha de la tarjeta del espacio de trabajo para eliminarlo.

recuperar

Para evitar una eliminación accidental, el espacio de trabajo eliminado se mostrará en la lista "Área de trabajo eliminada" a continuación y se mantendrá durante 24 horas. Antes de eso, puede hacer clic en [Restaurar] en cualquier momento para restaurar su espacio de trabajo, y el espacio de trabajo que no se haya restaurado durante más de 24 horas se destruirá para siempre.

5. Usa Git para el control de versiones

El espacio de trabajo del IDE en la nube de Cloud Studio admite la creación desde el almacén de código, pero antes de eso, debe agregar la clave SSH del espacio de trabajo a la lista de claves públicas personales de la plataforma de alojamiento de código correspondiente.

5.1 Cloud Studio ver clave pública SSH

Aquí hacemos clic en el avatar personal, abrimos la configuración del sistema, hay una clave pública SSH, luego copiamos la clave y la agregamos a Gitee

5.2 Gitee agrega clave pública SSH

En la figura a continuación, agregue la clave pública SSH, complemente el título y la clave pública

5.3 Crear un nuevo almacén en Gitee

En el espacio de trabajo de nuestro IDE en la nube, abra una terminal.

5.4 Cloud Studio configurar correo electrónico y contraseña

git config --global user.name "坚果"    

git config --global user.email "[email protected]"                                                            

5.5 Código de envío de Cloud Studio

Luego inicialice el almacén, envíe la modificación, agregue información de compromiso y presione

git init
git remote add origin [email protected]:jianguo888/flutter_bloc_super.git
git add .
git commit -s -m '初始化'
git push origin master

6. Desarrollo del sitio web del blog Flutter

FlutterEs el marco de la interfaz de usuario móvil de Google. Flutter lanzó recientemente Flutter V3.10.6, que puede crear rápidamente interfaces de usuario nativas de alta calidad en múltiples plataformas, como iOS, Android, etc. Puede trabajar con el código existente. Está siendo utilizado por más y más desarrolladores y organizaciones de todo el mundo , y es completamente gratuito y de código abierto. Actualmente admite el desarrollo de aplicaciones web. Es por eso que hoy creamos temas de blog receptivos con flutter que se ejecutan en la web, la aplicación macOS, las aplicaciones Android e iOS.WebFlutterFlutterFlutterCloud Studio 云端 IDEFlutter

6.1 Crear un proyecto

Después de abrir el IDE en la nube, cree un proyecto de Flutter.Actualmente, estoy usandoFlutter 3.0.1

Una vez completada la creación, podemos escribir el código.

Primero abra el IDE de la nube y elija crear un proyecto

Entonces aquí le ponemos nombre a nuestro proyecto

Espere a que se cargue el proyecto

Luego ejecute la siguiente línea de comando

cd ./ && flutter pub get && flutter run -d web-server --web-port 9000  --web-hostname 0.0.0.0 && echo success

Podemos optar por abrir el navegador incorporado o navegador

Aquí elijo llamar al navegador, y pueden ver que el proyecto se ejecuta con éxito.

En este momento, significa que nuestro entorno está bien. podemos trabajar más tarde

6.2 Abra el panel del puerto para obtener una vista previa y depurar en tiempo real

Haga clic en el botón en el extremo derecho para abrir la página de vista previa.

Ver estos textos en rojo To hot restart changes while running, press "r" or "R".significa que el proyecto ha sido compilado.

Modificar el código y volver a compilar

Haga clic en el terminal, presione rla tecla para volver a compilar y luego presione el botón Actualizar en la página de vista previa para ver el efecto modificado en tiempo real.

1. Actualmente, Flutter Webla aplicación no admite actualizaciones en caliente y la página debe actualizarse manualmente.
2. La página de vista previa del código solo se puede mostrar después de compilar el proyecto; de lo contrario, siempre se bloqueará en la interfaz de carga.
3. Si se ha quedado atascado en la interfaz de carga, puede intentar actualizar la interfaz de vista previa.

6.3 Publicar la versión web

Queremos que lo publique lo antes posible después de completar la migración, como una vista previa:

Artículo de referencia:
https://dart.cn/null-safety/migration-guide

Los amigos cuidadosos pueden encontrar que Android tiene una carpeta de Android e iOS tiene una carpeta de ios, pero la estructura de directorios actual no tiene una carpeta web.

6.3.1 Crear carpeta web

Ingrese el siguiente comando para crear el archivo web

flutter create .

Luego, se creará una serie de archivos relacionados con la web, como se muestra en la figura a continuación, y la estructura de directorios también tendrá una carpeta web adicional, como se muestra en la figura a continuación.

6.3.2 Empaquetado de la versión web

Sabemos que si desea usarlo para teléfonos Android, debe empaquetar apk, y si desea usarlo para iPhone, debe empaquetarlo fuera de ipa; por la misma razón, debe empaquetar contenido relacionado con la web. códigos si desea utilizarlo para los navegadores.

flutter build web --web-renderer html

flutter build web 

flutter build web --web-renderer canvaskit

Esto generará la aplicación, incluidos los recursos, y colocará los archivos en el /build/webdirectorio del proyecto.

Una versión de lanzamiento típica de una aplicación tiene la siguiente estructura:

copia_de_contenido

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

Inicie el servidor web (por ejemplo, python -m SimpleHTTPServer 8000o use el paquete dhttpd ), luego abra el directorio /build/web. localhost:8000Visite (el servidor comenzó antes con Python) en su navegador para ver la versión de lanzamiento de la aplicación.

Después de la prueba, los tres métodos anteriores pueden empaquetar la versión web, el primero de los cuales es el método de empaque para el terminal móvil, el segundo es el método de empaque general y el tercero es el método de empaque para el terminal de PC.

Entonces, ¿cuál es la diferencia entre estas tres formas cuando se empaquetan y ejecutan?

flutter build web --web-renderer html tiene la velocidad de apertura más rápida y una buena compatibilidad (es decir, Chrome, Safari y otros navegadores son compatibles)

La web flutter build tiene una velocidad de apertura promedio y buena compatibilidad

flutter build web --web-renderer canvaskit tiene la velocidad de apertura más lenta y buena compatibilidad

6.3.3 Conclusión

Es mejor utilizar el primer método de embalaje.

flutter build web --web-renderer html

6.4 Preguntas frecuentes

Hoyo 1: Encontrado index.html, abra un espacio en blanco con un navegador

Esto es normal. A diferencia del front-end web, html css js, puede acceder a él haciendo clic en index.html. No se puede acceder directamente en flutter. Debe colocarse en el contenedor para acceder a él, como: tomcat, etc. .

Hoyo 2: se ha utilizado el proxy nginx, pero todavía está en blanco cuando se abre con un navegador

Eso es porque la referencia de la ruta del archivo es incorrecta. Hay dos soluciones.
Método 1:
Abra index.html con un editor, puede ver el archivo fuente, cambie el a

Método 2:
abra index.html con un editor, puede ver el archivo fuente y cambiarlo a la ruta de su servidor. Por ejemplo:

Entonces proxy nginx

  #flutter
    server {
    
    
       listen       251 ;
       server_name  flutterblog;
       location / {
    
    
           root   /root/study/flutter/web/;
           index  index.html index.htm;
        #    proxy_pass   http://127.0.0.1:12345;
        #    access_log  /usr/local/nginx/logs/go.101.log ;

       }
    }

espolvorear flores

7. Personaliza la plantilla

Las plantillas personalizadas son una capacidad de plantilla orientada al equipo lanzada por el IDE en la nube de Cloud Studio. Esta función admite el uso del proyecto actual como una plantilla personalizada, que puede cubrir proyectos en el repositorio de Git, proyectos comunes, proyectos de muestra, etc., lo que mejora en gran medida las principales demandas del equipo de un entorno de desarrollo de código estandarizado.

7.1 Introducción a las funciones de plantillas personalizadas

Hay cuatro funciones principales implementadas por la plantilla personalizada actual: crear, publicar, compartir y administrar plantillas personalizadas.

7.2 Crear una plantilla personalizada

Cuando esté en el IDE del proyecto actual, puede crear plantillas personalizadas:

Aquí publico mi sitio de blog Flutter como plantilla.

(1) Haga clic en "Archivo" en la barra de funciones y seleccione "Publicar plantilla personalizada" en las opciones desplegables;

(2) Se abrirá automáticamente una nueva pestaña en la ventana de diseño a la derecha, donde puede seleccionar su icono y etiqueta favoritos, y completar la descripción de su plantilla.

haga clic en finalizar

7.3 Publicar plantillas personalizadas

Una vez que haya completado con éxito la información de la plantilla personalizada, puede publicar la plantilla personalizada:

(1) Haga clic en "Finalizar" para publicar su plantilla personalizada;

(2) Haga clic en "Volver a publicar" antes de compartir, puede modificar su información de publicación y compartir nuevamente, el enlace para compartir no cambiará y la instancia IDE creada de acuerdo con la plantilla original no se verá afectada;

7.4 Compartir plantillas personalizadas

Una vez que su plantilla se haya publicado correctamente, puede compartir su plantilla personalizada de dos maneras:

(1) Ingrese a la página para compartir, copie el enlace de su plantilla personalizada y compártalo con sus socios;

Nut (personal) compartió la plantilla "Flutter Blog" https://cloudstudio.net/templates/r9IAX1JuTF2

(2) Comparta insertando la insignia de Markdown e inserte la insignia de plantilla en el archivo README o blog, y sus socios pueden hacer clic en la insignia para obtener la plantilla;

En este punto, todo nuestro proceso está completo.

Resumir

A través de un proceso de experiencia esta vez, he resumido varias ventajas:

Como IDE web/IDE en línea/IDE en la nube, Cloud Studio tiene las siguientes ventajas sobre los IDE locales:

• No es necesario instalar, multiplataforma : se puede usar siempre que haya un navegador; el entorno común está preestablecido, no se requiere instalación manual; admite la creación de vistas previas de páginas web, desarrollo en línea y depuración.
• Con todas las funciones : no es necesario descargar e instalar, desarrollar y codificar en cualquier momento y en cualquier lugar, y tenga una experiencia de codificación fluida comparable a los IDE locales.
• Múltiples entornos : se integran entornos comunes como Node.js, Java y Python, y también se pueden conectar a servidores en la nube para la administración de recursos.
• Compatible con complementos de VS Code : si la configuración predeterminada no satisface sus necesidades, puede instalar complementos de VS Code en línea para mejorar su experiencia.
• Persistencia y carga rápida : escribe mientras abres, guarda en cualquier momento, ya no tendrás que preocuparte por cortes de energía y no guardados, y no desperdicies cada parte de tu inspiración.

Según mi experiencia, en pocas palabras, Cloud Studio es la mejor opción para desarrollar proyectos pequeños y medianos, modificar código en línea o conectarse a servidores en la nube para su implementación. Realmente logra la apertura con un solo clic, la persistencia total, el entorno preestablecido y las herramientas de desarrollo integradas, la copia y el uso compartido sin problemas entre los equipos, y simplifica el desarrollo.