Tutorial de Dart: primeros pasos prácticos
El lenguaje de programación Dart es joven, pero ya se ha consolidado, especialmente en el ámbito de la programación de aplicaciones móviles. Google ha creado Flutter, un kit de desarrollo de software (SDK) que utiliza Dart, promoviendo así la utilización y divulgación de este lenguaje de programación. Una ventaja importante es que con él se pueden programar aplicaciones para todos los sistemas operativos móviles: Apple iOS, Google Android o Microsoft Windows Phone.
¡Aprende el lenguaje Dart! Nuestro tutorial de Dart te guía en los primeros pasos en el mundo del lenguaje de programación de Google. Verás que no es tan difícil. Para más información sobre el lenguaje en sí, consulta nuestro artículo “¿Qué es Dart?”, con información detallada sobre él, y el artículo sobre Flutter para descubrir más sobre el kit de desarrollo de software de Google.
Los orígenes de Dart
Dart se presentó originalmente para solventar las deficiencias de JavaScript que, desde el punto de vista de los desarrolladores, ya no podían mejorarse dentro del propio lenguaje de programación. De esta manera, se comenzó a buscar la forma de simplificar o reunir ciertas lógicas internas sin tener que renunciar al abanico de posibilidades del lenguaje. A modo de ejemplo, el código de JavaScript sería como se muestra a continuación:
getElementsById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
document.links
document.images
document.forms
document.scripts
formElement.elements
selectElement.optionsEn cambio, en código en Dart sería así:
elem.query('#foo');
elem.queryAll('.foo');Primeros pasos para aprender Dart
Un lenguaje de programación está compuesto por una gran variedad de “vocabulario” con el que se estructuran datos y se desarrollan operaciones (algoritmos). Para ello, el lenguaje se sirve de un número determinado de conceptos: las variables, que solo tienen un propósito. Algunos ejemplos en Dart son “var”, “int” “if”, “else” o “while”. En nuestro artículo sobre los lenguajes de programación de internet, descubrirás más sobre la arquitectura de los lenguajes de programación. Mediante la combinación de variables, operadores, condicionales, funciones y otros tantos elementos, nace la secuencia del programa al final de la cual se obtiene un resultado.
Dart en la práctica
Te presentamos los primeros ejemplos, sencillos y fáciles de comprender, para aprender Dart. Puedes modificarlos a tu antojo y experimentar con ellos. Todas las rutinas de programación comienzan con la llamada a la función principal. Como ejemplo, tomamos el clásico código “Hola, mundo”:
void main () {
print("Hola, mundo");
}Delante de la función “main”, se encuentra la función sin tipo de retorno “void”, que no devuelve ningún valor. Los paréntesis “()” indican una función, y dentro de las llaves “{ … }” se ejecuta el código Dart (en este ejemplo, el comando es imprimir algo en la pantalla). Detrás de las barras diagonales “//” hay un comentario que permanece invisible; también representado con “/* este es un comentario de varias líneas...*/” (ejemplo conocido en PHP). De esta manera, se puede comentar de manera estructurada el propio código o el de otros desarrolladores, lo que facilita enormemente el trabajo en equipo en los proyectos existentes.
Al igual que en Java, C o PHP, todos los enunciados en Dart se cierran con punto y coma.
Anímate y prueba los siguientes ejemplos utilizando la plataforma gratuita de código abierto DartPad. Una de las ventajas de esta herramienta es que numera las líneas del programa e indica si hay errores. Además, algunos ejemplos de programación están disponibles en un menú desplegable.
En los ejemplos de código que se detallan a continuación, ya no se incluye “void main() {…}”.
Definir y utilizar variables
Con las variables, se determinan los espacios del programa. Comenzamos con las cifras.
var mySize = 174;Aquí se ha determinado una nueva variable “mi espacio” a la que se le ha asignado el valor “174”. Esta variable mantiene este valor en la secuencia de programación hasta que sea modificada activamente por operadores o funciones. Para obtener el valor de las variables, utilizamos el comando “print”.
var mySize = 174;
print(mySize);
int yourSize = 174;
print(yourSize);
double thisSize = 1.74;
print(thisSize);
dynamic oneSize = 'Onehundredseventyfor' + ': ' + '174';
print(oneSize);Con el comando “print” en DartPad, se obtienen los siguientes resultados de las líneas 3, 6, 9 y 12 en la consola:
Las variables en Dart admiten determinados tipos, que pueden ser números enteros (“int”) o números decimales (“double”). El tipo de variable “dynamic” puede admitir diferentes valores y expresiones en la secuencia de programación. En cambio, no se tienen en cuenta las líneas en blanco, los tabuladores ni los párrafos durante la ejecución de la rutina. Por eso, los valores se encuentran directamente unos debajo de otros a la derecha en la consola.
Al intentar asignar un valor erróneo a un determinado tipo de variable, se genera un aviso de error con la descripción correspondiente en DartPad:
int mySize = 1.74; // integer is expected, but double comes
print(mySize);
Las denominaciones (identificadores) para las variables utilizadas no pueden contener palabras reservadas. Tampoco están permitidas las cifras al inicio ni los caracteres en blanco o especiales, a excepción del guion bajo “_” y el símbolo de dólar “$”. Los identificadores tienen en cuenta las mayúsculas y las minúsculas, y deben ser únicos.
Cadena de caracteres en el tutorial de Dart
Mediante cadenas de caracteres, con el tipo de dato “String” (cuidado: con S mayúscula), se pueden procesar diferentes caracteres en el lenguaje Dart. Aquí te enseñamos a programar varias líneas en Dart.
String text1 = 'this is a single line string';
String text2 = '''this is a multiline
line string with a break''';
print(text1);
print(text2);
Mediante la función String, el texto se reproduce encerrando el contenido deseado entre comillas simples o dobles: ' o ". Pero si el texto se abre y cierra con el triple de cualquiera de los dos tipos de comillas (''' o """), Dart imprime el texto con saltos de línea en la posición donde se hayan insertado. De esta forma, es posible formatear el resultado.
Las comillas tipográficas (por lo general, las comillas inglesas) se pueden insertar fácilmente en el texto en Windows con la combinación de teclas [Alt] + 0147 (comilla de apertura) y [Alt] + 0148 (comilla de cierre), y aparecen así en una cadena de Dart. En macOS, las comillas se insertan con [Alt] +[Shift] + [W] y [Alt] + [2].
Malabarismos de cifras con Dart
No existe una gran diferencia entre la declaración de variables y los cálculos de variables en los cuales se pueden sumar tanto cifras como expresiones. Para calcular resultados, Dart emplea operadores aritméticos. Por ejemplo, una tarea podría consistir en que el cliente seleccionara un artículo de una tienda en línea del que desea comprar tres unidades. En la función de carrito habría que multiplicar el precio unitario por “3”, y una vez hecho el cálculo, mostrar el precio total. En el siguiente código se puede ver la utilización de diferentes métodos para el conjunto de datos, además de los comentarios en las líneas relevantes:
String product = 'calendar';
String curr = 'EUR';
String isFor = 'for'; // 3 strings for later print use
double singlePrice = 7.96; // floating comma for single price
int amount = 3; // number of ordered calendars
var totalPrice = (amount*singlePrice); // calculation of the total price with multiplier *
var invTotal = '$totalPrice $curr'; /* Merging of two variables in a new one by adding a $ sign before the old variables.*/
var result = '$amount $product\s'; //also plus adding a letter “s” for plural
print (invTotal); // creating the screen output
print (isFor);
print (result);
En esta imagen visualizamos cadenas, valores enteros y decimales, y el conjunto de elementos de programación de nuevas variables. Hay que prestar especial atención a la hora de combinar dos variables existentes en una nueva variable para asegurarnos de obtener el resultado correcto en la pantalla. En este caso, por ejemplo, se antepone un símbolo de dólar “$” a las variables ya definidas (líneas 8 y 9 en la imagen superior del DartPad).
Establecer enunciados condicionales
Los enunciados condicionales desempeñan un papel esencial en la programación. Aquí te enseñamos a programar una condicional con Dart. Una condicional siempre lleva a una decisión en este sentido: si se da el caso A (if), aparece X en la pantalla; si se da el caso B (elseif), entonces se muestra Y; si no se da ninguno de los dos casos (else), entonces el resultado es Z. Con los comandos Dart entre paréntesis, se obtiene el siguiente código:
var tOol = 'Glove';
if (tOol == 'Pliers' || tOol == 'Ruler')
{ print('That is a tool.');
} else if (tOol == 'brush')
{ print('That is a tool.');
} else { print('That is not a tool.');
}
}Así se ve en DartPad:
Si quieres aprender más sobre el lenguaje Dart, sustituye en DartPad la palabra “guante” por “pinzas”, “regla” o “pincel” y observa los cambios del resultado programado en la consola. Puedes modificarlo a tu gusto y aplicarlo a distintos casos. Aquí aparece por primera vez el operador “||” que representa la denominación lógica “o”. En Dart no se puede aplicar con “OR”.
Uno más y uno menos también con Dart
Para programar el siguiente apartado, tenemos que aprender las llamadas funciones de incremento y decremento en Dart, que agregan y sustraen gradualmente un resultado. En el ejemplo, se modifica el valor 50 con los operadores “++” y “—“.
var upAndDown = 50;
print (upAndDown);
print('----');
++upAndDown;
print (upAndDown);
print('----');
upAndDown++;
print (upAndDown);
print('----');
--upAndDown;
print (upAndDown);
print('----');
upAndDown--;
print (upAndDown);
Aquí observamos que es posible obtener como resultado una cadena sencilla de caracteres sin definición previa añadiéndola entre paréntesis con comillas mediante la función “print” en el código de programa. Esto sirve únicamente para la estructuración óptica del resultado. Con estos conocimientos, ya estás preparado/a para programar bucles.
Dar vueltas en Dart: bucles
Los bucles son también una parte importante del día a día de la programación. Nos referimos, por ejemplo, a las comparaciones con espacios ya existentes. Para ello, hay que servirse de la siguiente “expresión”: tenemos el valor A que se modifica continuamente hasta alcanzar el espacio (estado) B. Así se representa en el código Dart:
String myLabel = ' pieces';
var piece = 3;
while (piece < 12) {
var allThisStuff = '$piece $myLabel';
print(allThisStuff);
piece++;
}¿Qué hace DartPad con esto?
En este ejemplo, también podrían volverse a incluir enunciados condicionales si, por ejemplo, se diferencian palabras en singular o plural:
int amount = 1;
var itemSing = 'blouse';
var itemPlural = 'blouses';
if (amount == 1)
{ print(itemSing);
} else { print(itemPlural);
}Para aprender Dart, copia este ejemplo de código en DartPad y modifica la variable entera “cantidad” para que se imprima el artículo “blusa” en singular o en plural.
Resumen de los operadores Dart
Acabas de aprender algunos operadores para programar con Dart. En la siguiente tabla, encontrarás un resumen de los operadores más importantes.
En la tabla se ha aplicado el valor 35 a la variable “muster”.
var muster = 35;| Tipo de operador | Denominación | Símbolo | Ejemplo | Resultado | ||||
|---|---|---|---|---|---|---|---|---|
| Aritmético | Suma | + | var muster + 2; | 37 | ||||
| Resta | - | var muster - 2; | 33 | |||||
| Multiplicación | * | var muster * 3; | 105 | |||||
| División | / | var muster / 7; | 5 | |||||
| Divide y retorna un resultado entero | ~/ | var muster ~/ 7; | 11 | |||||
| Asigna suma | += | var muster += 6; | 41 | |||||
| Asigna resta | -= | var muster -= 7; | 28 | |||||
| Asigna producto | *= | var muster *= 2; | 70 | |||||
| Asigna división | /= | var muster /= 7; | 5 | |||||
| De igualdad y relacionales | Es igual | == | var muster == 35; | True | ||||
| No es igual | != | var muster != 44; | True | |||||
| Menor que | < | var muster < 44; | true | |||||
| Menor o igual que | <= | var muster <= 33; | False | |||||
| Mayor que | > | 44 > var muster; | True | |||||
| Mayor o igual que | >= | var muster>=23; | false | |||||
| Incremento y decremento | Incrementa | ++ | ++var muster; | 36 | ||||
| Incrementa | ++ | var muster++; | 36 | |||||
| Decrementa | -- | --var muster; | 34 | |||||
| Decrementa | -- | var muster--; | 34 | |||||
| Valor restante | % | %var muster%3; | 2 | |||||
| Lógicos | y | && | muster1 && muster2 | … and | ||||
| o | muster1 | muster2 | … or | |||||
| Negación | ! | muster1 ! muster2 | … not | |||||
| Condicionales | If-else | ? … : | var y = muster < 34 ? 15 : 10; | 10 | ||||
| If-else | ? … : | var y = muster < 36 ? 15 : 10; | 15 | |||||
| Verificar si es Null | ?? | var y = muster ?? 9; | 35 | |||||
| Verificar si es Null | ?? | var z = 0 ?? muster; | 35 |
Con estos conocimientos básicos, ya puedes adentrarte en la programación con Dart y estarás un paso más cerca de programar tu propia aplicación.
Artículos similares
Tutorial de Flutter: aprende a desarrollar aplicaciones con el SDK de Google
En los últimos años, Google no solo ha lanzado varios servicios de enorme utilidad como Gmail, Maps o el GSuite, sino también varias herramientas de software de programación. Una de ellas es el SDK Flutter, que resulta particularmente útil para los desarrolladores de aplicaciones móviles. En este tutorial de Flutter en español, te enseñamos a crear una aplicación sencilla con este marco.
Billion PhotosShutterstock Publicar una app para Android: cómo crear una app - parte 5.1
Una vez el desarrollo de una aplicación ha alcanzado el estado definitivo y previo al lanzamiento, falta muy poco para poder publicar una aplicación Android en la tienda de Google. Lo único necesario, eso sí, es algo de tiempo y paciencia para cumplimentar todos los pasos y rellenar la información necesaria, además de cumplir con ciertos requisitos, como contar con una cuenta en Google.…
Billion PhotosShutterstock Cómo crear una app nativa (III): diseño de aplicaciones móviles
El diseño de apps no se limita en ningún modo a las formas y los colores. Aspectos como la colocación de los contenidos o la usabilidad son, como mínimo, igual de relevantes. El esfuerzo que se invierte en esta fase es el que decide al final si la nueva aplicación encontrará uso entre los consumidores o será desinstalada poco tiempo después de su descarga.
Billion PhotosShutterstock Cómo crear una app nativa (II): el desarrollo técnico de la idea
Si quieres crear tu propia app móvil nativa, tendrás que pensar en el entorno de desarrollo. Los programadores experimentados utilizan normalmente un entorno de desarrollo integrado. Sin embargo, los usuarios sin experiencia pueden recurrir a creadores de apps o app builders que, además de ser muy fáciles de usar, no requieren dominar lenguajes de programación y puntúan con una variedad de…
REDPIXEL.PLShutterstock Tutorial de Lua
Quizá hayas oído hablar alguna vez de Lua, el lenguaje de scripting desarrollado en Brasil que se usa en motores de videojuego y en servidores web. Puesto que se trata de un lenguaje embebido, Lua permite programar en un formato común, sin importar cuál sea el entorno en cuestión. Lua es, por lo tanto, una interfaz muy útil entre sistemas más complejos.
