Comienza a editar documentos en tu aplicación web usando ONLYOFFICE Create App

¿Quieres ver cómo podría funcionar la edición de documentos en línea en tu propia aplicación? Un ejemplo funcional facilita los primeros pasos. ONLYOFFICE Create App te proporciona ese punto de partida. Genera una pequeña aplicación web con un gestor de archivos y el código necesario para conectar ONLYOFFICE Docs. Una vez que configures el acceso a una instancia de Docs en funcionamiento, puedes probar el editor en tu navegador y explorar el proyecto a tu propio ritmo.

Conoce ONLYOFFICE Create App

Disponible en npm, ONLYOFFICE Create App es una herramienta de línea de comandos que crea un proyecto de integración de muestra.

La aplicación generada utiliza Next.js y React. Incluye un gestor de archivos donde puedes subir archivos o crear nuevos documentos, hojas de cálculo, presentaciones y formularios PDF. También proporciona una página de editor y el código del servidor que maneja las descargas y el guardado de documentos.

Hay dos componentes cruciales de la aplicación:

• Create App prepara el sitio web.
• ONLYOFFICE Docs proporciona los editores de documentos.

¡Ojo! ONLYOFFICE Docs se instala y conecta por separado. El comando npm no instala el Document Server ni lanza Docker para ti.

Requisitos previos

• Node.js 20.12 o posterior
• ONLYOFFICE Docs 8.2 o posterior
• Gestor de paquetes npm y conexión a Internet estable

Para el tutorial a continuación, utilizamos Windows PowerShell y asumimos que ONLYOFFICE Docs ya se está ejecutando en Docker Desktop en el puerto 80. Si aún no has instalado Docs, sigue primero la guía de instalación de Docker.

Docker es una forma de ejecutar Docs de manera local. No es necesario en tu ordenador cuando te conectas a un servidor existente en otro lugar.

Crea tu primera aplicación

1. Abre PowerShell en la carpeta donde quieres mantener el proyecto. Luego ejecuta:

   npx @onlyoffice/create-app mi-aplicacion-docs
   

   Si npm pregunta si debe instalar el generador, confirma con y. El comando crea una carpeta llamada mi-aplicacion-docs e instala las dependencias de la aplicación.

2. Espera a que termine la instalación, luego entra en la nueva carpeta:

   cd mi-aplicacion-docs
   

   ¡Ojo! Los comandos que inician la aplicación deben ejecutarse en su carpeta de proyecto, donde se encuentra package.json. Ejecutar npm install en una carpeta vacía no relacionada no creará una integración de ONLYOFFICE.

Conecta la aplicación a ONLYOFFICE Docs

Para esta configuración local de Docker Desktop, edita estas entradas en env y deja los otros ajustes generados sin cambios:

DOCUMENT_SERVER_URL=http://localhost:80
DOCUMENT_SERVER_JWT_SECRET=tu_secreto_docs_real
APP_URL=http://tu_direccion_ip_local:3000

DOCUMENT_SERVER_URL le indica al navegador dónde encontrar los editores. APP_URL le dice a Docs dónde descargar tus archivos y enviar cambios guardados. Aquí, host.docker.internal permite que el contenedor acceda a la aplicación que se ejecuta en Windows. Usamos el puerto 3000 para la aplicación para que pueda ejecutarse junto a otro ejemplo en el puerto 3000.

DOCUMENT_SERVER_JWT_SECRET es un secreto compartido utilizado para verificar solicitudes entre los dos componentes. Reemplaza el texto de ejemplo con el secreto real configurado para tu instancia de Docs. Cuando edites .env manualmente, pega el valor en sí. Para las instalaciones de Docker, establece el secreto con la variable de entorno del contenedor JWT_SECRET y usa el mismo valor para DOCUMENT_SERVER_JWT_SECRET en la aplicación.

APP_URL: Reemplaza tu_direccion_ip_local con la dirección IP local de tu computadora, accesible desde el contenedor de Docs.

Para esta configuración de Docker, Docs también debe poder solicitar archivos desde la dirección privada del host. Nuestro contenedor de prueba utilizó ALLOW_PRIVATE_IP_ADDRESS=true, una opción descrita en la documentación oficial de la imagen de Docker.

Abre la aplicación en tu navegador

Guarda el archivo .env y comienza la aplicación:

npm start 

En esta plantilla, el comando de inicio descarga las plantillas de documentos en blanco, construye la aplicación e inicia el servidor web. No necesitas un comando de construcción separado para esta primera ejecución.

Una vez que el servidor esté listo, abre http:///tu_direccion_ip_local:3000. Mantén la terminal en ejecución mientras usas la aplicación.

Verás un gestor de archivos con un ejemplo de README. Puedes crear otros documentos. ONLYOFFICE Docs se cargará dentro de la aplicación, listo para que pruebes a editar.

Prueba tu propia integración

Create App te ofrece una forma práctica de familiarizarte con la integración de ONLYOFFICE Docs. Puedes comenzar con un pequeño ejemplo funcional, ver cómo un documento se desplaza por el proceso de edición y guardado, y usar ese entendimiento al construir tu propia aplicación.

Explora el repositorio de Create App en GitHub, genera tu primer proyecto y abre un documento en tu navegador. Para un vistazo más cercano a las opciones de integración, continúa con la documentación de la API de ONLYOFFICE Docs. ¿Tienes una idea o sugerencia? Abre una incidencia en GitHub o envíanos un correo.

Preguntas frecuentes: ONLYOFFICE Create App

¿Create App instala ONLYOFFICE Docs?

No. Crea una pequeña aplicación web con un gestor de archivos y el código que facilita la conexión a ONLYOFFICE Docs. Instala ONLYOFFICE Docs por separado o conecta una instancia existente.

¿Se requiere Docker?

Solo si decides ejecutar Docs en Docker. Hay varias opciones para implementar ONLYOFFICE Docs, incluidas Ubuntu, CentOS, Windows Server y Amazon Machine Images. También puedes usar un servidor Docs existente.

¿Puedo adaptar la aplicación para mi propio proyecto?

Sí. Puedes modificar el código generado. Consulta la documentación de la API de ONLYOFFICE Docs para detalles sobre la integración.