Construye una aplicación web con Dart

Esta página describe los pasos para comenzar a desarrollar aplicaciones únicamente web con Dart. Si deseas escribir una aplicación multiplataforma, entonces prueba Flutter.

Antes de comenzar, asegúrate de sentirte cómodo con los conceptos básicos de Dart leyendo la Introducción a Dart. Luego, sigue los pasos a continuación para crear una pequeña aplicación web con Dart.

Para desarrollar aplicaciones Dart, necesitas el SDK de Dart. Para continuar con esta guía, descarga el SDK de Dart o instala Flutter, el cual incluye el SDK de Dart completo.

terminal Si te gusta usar la línea de comandos, instala el paquete webdev:

$ dart pub global activate webdev

web Aunque el uso de un IDE es opcional, recomendamos encarecidamente utilizar uno. Para obtener una lista de los IDE disponibles, consulta la descripción general de editores y depuradores (overview of editors & debuggers).

terminal Para crear una aplicación web desde la línea de comandos, utiliza el comando dart create con la plantilla web:

$ dart create -t web quickstart

web Para crear la misma aplicación web desde un IDE que tenga integración con Dart, crea un proyecto utilizando la plantilla llamada Bare-bones Web App.

La plantilla de aplicación web importa package:web, la potente y concisa solución de interoperabilidad web de Dart diseñada para la web moderna. Para obtener más información al respecto, consulta la descripción general de interoperabilidad web (web interop overview).

terminal Para ejecutar la aplicación desde la línea de comandos, utiliza webdev para compilar y servir la aplicación:

$ cd quickstart
$ webdev serve

web O ejecuta la aplicación desde tu IDE.

To view your app, use the Chrome browser to visit the app's URL—for example, localhost:8080.

Tanto si utilizas un IDE como la línea de comandos, webdev serve compila y sirve tu aplicación utilizando el compilador de JavaScript de desarrollo. El inicio es más lento la primera vez que el compilador de desarrollo compila y sirve tu aplicación. Después de eso, los activos se almacenan en caché en el disco y las compilaciones incrementales son mucho más rápidas.

Una vez que tu aplicación se haya compilado, el navegador debería mostrar "Your Dart app is running."

Personalicemos la aplicación que acabas de crear.

1. Copia la función thingsToDo() del siguiente fragmento de código al archivo web/main.dart:

   dart

   Iterable<String> thingsToDo() sync* {
     const actions = ['Walk', 'Wash', 'Feed'];
     const pets = ['cats', 'dogs'];
   ​
     for (final action in actions) {
       for (final pet in pets) {
         if (pet != 'cats' || action == 'Feed') {
           yield '$action the $pet';
         }
       }
     }
   }
   

   content_copy

2. Agrega la función newLI() (como se muestra a continuación). Esta crea un nuevo LIElement que contiene el String especificado.

   dart

   Iterable<String> thingsToDo() sync* { /* ... */ }
   ​
   web.HTMLLIElement newLI(String itemText) =>
       (web.document.createElement('li') as web.HTMLLIElement)
         ..textContent = itemText;
   ​
   void main() { /* ... */ }
   

   content_copy

3. En la función main(), agrega contenido al elemento output utilizando appendChild y los valores de thingsToDo():

   dart

   Iterable<String> thingsToDo() sync* { /* ... */ }
   ​
   web.HTMLLIElement newLI(String itemText) =>
       (web.document.createElement('li') as web.HTMLLIElement)
         ..textContent = itemText;
   ​
   void main() {
     final output = web.document.querySelector('#output');
     for (final item in thingsToDo()) {
       output?.appendChild(newLI(item));
     }
   }
   

   content_copy

4. Guarda tus cambios.

5. La herramienta webdev recompila automáticamente tu aplicación. Actualiza la ventana del navegador de la aplicación. ¡Ahora tu sencilla aplicación de Dart tiene una lista de tareas pendientes! Debería verse algo como esto:
   

6. Opcionalmente, mejora el formato editando web/styles.css, luego vuelve a cargar la aplicación para verificar los cambios.

   css

   #output {
     padding: 20px;
     text-align: left;
   }
   

   content_copy

Utiliza Dart DevTools para establecer puntos de interrupción (breakpoints), ver valores y tipos, e ir paso a paso por el código Dart de tu aplicación. Para obtener detalles de configuración y un tutorial, consulta Depurar aplicaciones web de Dart.

Para ejecutar tu aplicación web fuera de tu entorno de desarrollo, deberás compilarla y desplegarla. Para obtener más información sobre el despliegue de aplicaciones web de Dart, consulta Despliegue web.

Consulta estos recursos:

• Dart language, libraries, and conventions
  • Tour del lenguaje
  • Tutorial de bibliotecas principales (Core library walkthrough)
  • Dart efectivo
• Web development
  • Interoperabilidad con JavaScript
  • Bibliotecas y paquetes web
  • Descripción general de package:web
  • Introducción al DOM

Si te quedas atascado, busca ayuda en Comunidad y soporte (Community and support).