Introducción a DartPad

Clase 3 de 23 • Curso de Dart desde Cero

Abraham Magaña Glz.

student•

Recomiendo poner la velocidad del curso a 1.75, se puede entender sin problemas

Melvin Salas

teacher•

Excelente que puedas aprender a 2x :D

Jesus Mendoza Guerrero

student•

gracias por el dato, yo me quedo con el 1.5. Aunque tienes razon

Adrián Cárdenas Chiang

student•

DartPad es una herramienta que te deja programar de manera web y te ayuda a conocer el lenguaje de distintas maneras y te ayudara a dar los primeros pasos en este lenguaje de programación así también distintos módulos para crear en flutter entre otros también te ayudara a hacer un mejor código mediante distintos métodos y ciertas ayudas.

Cuando demos en click en el botón <New Pad> nos dará a elegir las dos opciones:

Dart sirve para hacer aplicaciones de consola o aplicaciones web
Flutter sirve para hacer aplicaciones móviles o web
- Como en este curso trabajaremos en consola únicamente daremos click a HTML
El botón “Reset” sirve para parar una secuencia o algo que se este corriendo o renovar la ejecución de la aplicación
El botón “Format” servirá para estilizar el texto, no tener un desastre y tener lineas de código en la forma que debe de ser,
El botón “Install SDK” sirve para instalar dart (la maquina virtual) en nuestra computadora en algún IDE o editor de texto tales como VSCODE, etc.. y crear aplicaciones con DART comunicándonos con la maquina virtual
El botón de “Samples” permite cargar ciertos proyectos ya hechos los cuales usan solamente Dart y cargar el código necesario para una app de Flutter y del lado derecho podremos verla correr esta misma app.
En el botón “tres puntos” nos servirá para ver enlaces externos o funciones adicionales como: Compartir, ver el código fuente de DartPad en github, ver la pagina de para ver información etc etc. y flutter.dev donde podremos ver información de flutter

Función Maine

Es en el momento cuando ejecutamos una app es el método en donde la maquina virtual buscara para ejecutar

Tiene tres partes :

Función “Void” la cual indica que esta función no retorna a nada.
Maine, palabra que solo puede usar en la parte inicial del código para que la maquina empieza a ejecutar él código desde esta linea
Paréntesis Curvos {}, esta indica donde comienza la función y donde termina.

Bullets

Al escribir texto en dart se pondrá comillas
Al finalizar cada linea de dart se pondrá “;” para indicar que la linea ha terminado.

Daniel Jussef Zamorano Silva

student•

wow gracias!

William Ruiz

student•

gracias por tu aporte adriam

Montserrat Peniche

student•

Wujuuu😊✨

Beyra Lapierre Tumalan

student•

Me agrada bastante que sea un lenguaje orientado a objetos y que además se parezca mucho a Java en cuanto a sintaxis. Ya he trabajado con Java, así que espero este curso se me dé bien.

Merly Veronica Loria Argaez

student•

Listo

Melvin Salas

teacher•

hola mundo!

Franklin Gil

student•

Que rápido aprendemos, xD

Andrés Felipe Arango Rocha

student•

Hay una herramienta más poderosa que el DartPad. Si no quieres instalar flutter en la computadora y quieres hacer un proyecto full desde el navegador: https://zapp.run/. Está en Early Access pero apuesto a que se tendrá acceso a todo el mundo después.

Maria Jesus Bellido

student•

Estupendo el aporte, muchísimas gracias. Solo conocía el propio dartpad y replit. Esta alternativa está genial. Muchas gracias.

William Ruiz

student•

gracias por el aporte andres

German Pinilla

student•

++Que es DartPad?++

DartPad es un editor de codigo web online que permite construir codigo de forma rapida y sencilla para Dart y Flutter sin necesidad de instalar la maquina virtual de Dart. DartPad cuenta con una serie de ayudas y herramientas que nos permiten escribir codigo mas eficiente y de calidad, ya que cuenta con la validacion del codigo en tiempo real (tiempo de ejecucion).

===> Link oficial DartPad: https://dartpad.dev/ Accediendo a este link podemos a crear proyecto en lo que se conoce como un sandbox o dicho de otra forma, un espacio de trabajo en donde podemos construir nuestro codigo en la nube de forma temporal

Una vez ingresemos al editor veremos unas opciones que nos ayudaran en el desarrollo.

++<> New Pad:++ Nos permite crear un nuevo espacio de trabajo o sandbox vacio. Cada vez que creamos un nuevo espacio de trabajo el identificador del sandbox cambia para inidicarnos que es un proyecto diferente y unico.Cuando clickeamos en "<> New Pad", nos aparece una ventana en la cual nos da dos opciones de codigo para desarrollar, estos son: Dart o Flutter.Con Dartad podemos generar proyectos de consola o web si seleccionamos Dart, y con Flutter podemos crear aplicaciones moviles o web.Para este caso crearemos una aplicacion de consola para ver los conceptos basicos del lenguaje.
++Reset++: Esta opcion nos permite detener un codigo en ejecucion si por algun motivo falla llegase a fallar nuestro codigo.
++Format++: Esta opcion nos ayuda a identar de forma automaticamente nuestro codigo con el fin de que se vea mas ordenado y mucho mas legible, aparte de enseñarnos a escribir codigo de forma adecuada.
++Install SDK++: Esta opcion nos permite descargar la maquina virtual de Dart para poder instalarla en nuestro computador y con ayuda de algun editor de codigo (VSCode), crear aplicaciones gracias con su maquina virtual en entorno local.
++identificador del sandbox++: Este nos indica numero o codigo con el cual se encuentra registrado nuestro sandbox de pruebas. Cada vez que creamos un nuevo Pad, creamos tambien un nuevo espacio de trabajo en los servidores de Dart y este codigo es el que lo identifica.
++Samples++: Esta opcion nos permite cargar proyectos creados por defecto para detallar el codigo y su funcionamiento a modo de aprendizaje. Podemos econtrar ejemplos de proyectos en Dart y Flutter. Estos proyectos nos ayudaran a entender mejor las mejores practicas de desarrollo con Dart y nos propone una logica en cada uno de sus ejemplo de forma sencilla. Es recomendable ver estos ejmplos para entender el lenguaje y su dinamica de uso.
++Icono de GitHub++: Esta opcion nos permite conectarnos con nuestra cuenta de GitHub para almacenar
nuestros proyectos de forma que podamos salvarlos en la nube y versionar cada proyecto desde DartPad sin perder la evolucion del mismo.
++Icono de los tres puntos++: Esta opcion nos despliega una lista en un popover entre las que econtramos:
- Share - Compartir el editor DartPad con otras personas.
- DartPad on GitHub - Permite ver, descargar y aportar en el codigo fuente del editor DartPad en su repositorio oficial en GitHub.
- dart.dev - Es un link que nos lleva directamente al sitio oficial de Dart en donde podremos encontrar la documentacion, ejemplos y otras carcteristicas para desarrollar en aplicaciones de consola o web.
- flutter.dev - Es un link que nos lleva directamente al sitio oficial de Flutter en donde podremos encontrar la documentacion, ejemplos y otras carcteristicas para desarrollar en moviles.

++FUNCION MAIN()++

La funcion main, es la funcion principal de mi aplicacion en la cual debemos poner todo el codigo que necesitamos desarrollar para que sea ejecutado de forma adecuada por el lenguaje. Solo puede existir una funcion main en toda mi aplicacion.

↠ Estructura:

void main() {
    
    // Codigo de mi aplicacion

}

++Componentes de la funcion main():++

void: Significa que la funcion no retorna ningun tipo de dato (vacio).
main: Nombe de la funcion principal
parentesis (): Es la forma de crear una funcion
llaves {}: Es donce comienza { y donde termina } mi funcion y son los simbolos dentro de los cuales debe ir nuestro codigo

NOTA: Siempre que escribamos una linea de codigo, debemos finalizarla con punto y coma ; para que nos nos marque un error y para que este correcta la sintaxis.

Luis Enrique Herrera Alvarado

student•

"The dart path.." jajjaja, en serio más chistes con Star Wars y Dart

Hazael Silva Rodriguez

student•

Me aparece" error compiling to Javascrip" cuando le doy clic en Run ¿que puedo hacer?

JAVIER SAAVEDRA

student•

Estimado, puedes compartir un pantallazo del error para poder ayudarte.

Melvin Salas

teacher•

Normalmente ese mensaje está acompañado con otro mensaje en la parte inferior. Puedes adjuntar la imagen completa del error para poder ayudarte?

Luisa Vargas

student•

el metodo main vendría siendo como el ngonInit de angular?? perdón la pregunta vengo de js con angular como framework

Melvin Salas

teacher•

Es similar, para este caso podríamos decir que es lo mismo, vas por buen camino,

Emmanuel Rodríguez

student•

DartPad

ℹ️ Definición DartPad es un editor para el lenguaje Dart.

. Además de ejecutar programas mediante Dart, DartPad puede lanzar aplicaciones Flutter, mostrando la salida como su representación en un dispositivo. . La razón de su existencia es el aprendizaje / pruebas de códigos (snippets), sin tener que configurar un entorno de desarrollo. . !DartPad .

Desarrollo de snippets con DartPad

✨ Concepto clave DartPad soporta librerías core (dart:*) o escritas con Flutter (package:flutter y dart:ui).

Yendo al sitio DartPad
Escoge el ejemplo a correr, el cual según el caso (Dart o Flutter) se mostrará como su salida.

❓ Debate ¿Sabías que DartPad puede ser embebido en un sitio web?

William Ruiz

student•

gracias por tu aporte emmanuel

Maria Jesus Bellido

student•

Además de dartpad y zapp.run que comenta un compañero en otro comentario, también podemos usar dart en Replit, por si a alguien le interesa. :-)

GIANCARLO ANDREE CHAVEZ PEREZ

student•

quisiera saber porque se demora en ejecutar el RUN tengo que darle dos veces

Sergio Camilo Castillo Nuñez

student•

Le di en sample en el ejemplo de counter de flutter y le di en run, y aparece la ventana en blanco, no se que podria ser

Melvin Salas

teacher•

Puedes probar con otro navegador?

Yamid Horacio Rodríguez

student•

Hola mundo dart

Gabriel José Solari Morales

student•

A fecha de 2024 se actualizó DarPad y ya no es posible conectar tan sencillo un con Github, lo que yo realicé fue acceder a : https://gist.github.com/{username} 

Codeen lo que quieran en DartPad.
Luego crean un archivo gist en el link que pasé más arriba. (Pueden ponerle cualquier nombre de proyecto, pero el archivo debe ser main.dart).
Antes de crear el gist, verifiquen que esta como public gist.
Luego para acceder al archivo que crearon cambian toda la parte que sigue después de "id="
Para obtener su id sólo acceden a su gist, siempre tendrá esta estructura:

https://gist.github.com/{username}/{id}

fuente:

David Fernando Sandoval Gomez

student•

Hola a todos, feliz año 2024, si quieren que los cursos sean actualizados deben botar en https://roadmap.platzi.com/roadmap

Para Flutter

https://roadmap.platzi.com/submissions/650e57ac660475556c028d94

Para Dart

https://roadmap.platzi.com/submissions/657a6de0970ee53abe34ff1e

Brayan Sanchez

student•

Estoy muy contento de ver que han sacado un curso de Dart más actualizado, le tengo mucha fe a este lenguaje y sé que es el futuro del desarrollo multiplataforma. ¡Estoy esperando con ansias el curso actualizado de Flutter!

Elvis Carreño

student•

Melvin, lo haces parecer muy fácil de hacer jeje!! y si, funcionó!!! La primera línea con DART!!! GRacias

Jaime Lara

student•

Dartpad

is an open source tool that lets you play with the Dart language in any modern browser.

https://dart.dev/tools/dartpad

Introducción a DartPad

Introducción

Bienvenida al curso

Introducción de Dart

Introducción a DartPad

Las bases de programación

Variables

Tipos de datos básicos

Tipos de datos avanzados

Manipulación de variables

String con Dart

Conversión de tipos

Ejercicio sobre las bases de programación

Flujo de datos

Operaciones

Condicionales

Ciclos

Enumeraciones

¡Construye una calculadora!

Colecciones

Introducción a las colecciones

Colección de tipo Lista

Colección de tipo Sets

Colección de tipo Mapa

Colección de colecciones

Flujos dentro de colecciones

Reto de colecciones

Conclusión

Sigue aprendiendo Dart