Crear una Web desde el GUI de Google Dart Editor.

3 minuto(s)

En esta página:

    Dart es un lenguaje muy joven, quizás con algunos años encima pero relativamente joven.

    Muchos tenemos la duda de cómo diseñar una web en Google Dart.

    Les voy a mostrar en unos sencillos pasos la Estructura y los archivos que necesitamos para  la creación de nuestra primera página web en Google Dart.

    La Versión de Google Dart que use para este tutorial es Google Dart 1.8.3

     

    Paso 1:

    Primero nos Descargamos el  Dart Editor desde acá:

    https://www.dartlang.org/tools/download.html

    Lo Instalamos y ejecutamos.

     

    Paso 2:

    Ahora vamos a crear nuestra página Web, para esto dentro del entorno de nuestro Dart Editor, hacemos click en:    File > New Project

    a

     

     

    Paso 3:

    Ahora nos aparecerá una ventana en donde escribiremos el nombre de nuestro proyecto, la ruta  de la ubicación para nuestro proyecto y para el Project Template, Seleccionamos la opción: Web application Create a simple web application with Pub support.

    Finalizado todo le damos click en el botón Finish para crear nuestro Proyecto Web.

    b

     

     

    NOTA: El nombre de nuestro proyecto no debe contener las letras separadas. Es decir:

    Project name: Mi Web Dart (Bad)

    Project name: MiWebDart  (Ok)

    Project name: Mi_Web_Dart  (Ok)

    Listo ¡

     

    Ya tenemos creado nuestro proyecto web.

    Podemos ver en la parte izquierda dentro del entorno de Dart Editor, en el administrador de archivos que se ha creado nuestra estructura básica para nuestra primera pagina web.

    Vemos que tienes los clásicos archivos necesarios para una web que son:

    • .css
    • .html
    • .dart

    Adicionalmente se agrego un archivo .dart en donde escribiremos nuestros dart scripts.

    c

    Ahora para previsualizar o renderizar nuestro proyecto podemos usar los navegadores : Google Chromiun, Google Chrome  o Dartium.

    Yo use Google Chromiun el cual nos lo podemos bajar desde acá:

    https://www.chromium.org/getting-involved/download-chromium

    Cerramos nuestro Dart Editor y Procedemos a instalar el Google Chromiun.

    Luego Abrimos nuestro Dart Editor, ete detectara el nuevo navegador automáticamente.

    Ahora en nuestro barra de herramientas superior presionamos el  botón Run (Ctrl + R)

    Si nos sale el mensaje:

    “ Could not start pub serve or connect to pub “

    d

    Nos dirigimos al administrador de Aplicaciones para pre visualizar nuestro proyecto web.

    e

    y desactivamos la opción:

    “ Use pub serve to serve the application ”

    f

    Solo activaremos esta opción si es que tuviéramos configurado un servidor Público para pruebas con bases de datos y apps mas avanzadas.

    PUB Serve = Servidor Publico o Public Server

     

    Finalmente damos click en el botón Apply para aplicar los cambios y Pre visualizamos o Renderizamos  nuestro poryecto de nuevo.

    Veremos que nos trae un código una app de ejemplo:

    g

    Google Dart coge mi puerto 3030 para correr mi página web.

    Espero les haya servido de mucho este tutorial.

    Muchas Gracias ¡

     

    Sigueme en Twitter: @pepoflex