El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Dart per al Desenvolupament Web

Següent ►
►

En aquest tema, explorarem com utilitzar Dart per al desenvolupament web. Dart és un llenguatge de programació versàtil que es pot utilitzar tant per al desenvolupament de front-end com de back-end. En aquesta secció, ens centrarem en el desenvolupament de front-end amb Dart.

Continguts

  1. Introducció a Dart per al Web
  2. Configuració de l'Entorn de Desenvolupament
  3. Creació d'una Aplicació Web Simple
  4. Manipulació del DOM amb Dart
  5. Gestió d'Esdeveniments
  6. Comunicació amb el Backend
  7. Exercicis Pràctics

  1. Introducció a Dart per al Web

Dart es pot utilitzar per crear aplicacions web modernes i interactives. Amb el compilador Dart2js, el codi Dart es pot convertir a JavaScript, permetent que les aplicacions Dart s'executin en qualsevol navegador web.

Avantatges de Dart per al Desenvolupament Web

  • Tipatge Fort: Ajuda a detectar errors en temps de compilació.
  • Rendiment: El codi Dart compilat a JavaScript és altament optimitzat.
  • Productivitat: Eines com el Dart DevTools faciliten el desenvolupament i la depuració.

  1. Configuració de l'Entorn de Desenvolupament

Instal·lació de Dart SDK

  1. Descarrega i instal·la el Dart SDK des del lloc oficial: Dart SDK.
  2. Verifica la instal·lació executant dart --version en la línia de comandes.

Instal·lació de Webdev

Webdev és una eina que facilita el desenvolupament web amb Dart.

dart pub global activate webdev

Creació d'un Nou Projecte

Utilitza el següent comandament per crear un nou projecte web:

dart create -t web-simple my_web_app
cd my_web_app

  1. Creació d'una Aplicació Web Simple

Estructura del Projecte

my_web_app/
├── web/
│   └── index.html
│   └── main.dart
├── pubspec.yaml
└── ...

Contingut de index.html

<!DOCTYPE html>
<html>
<head>
  <title>My Web App</title>
</head>
<body>
  <h1>Hello, Dart!</h1>
  <script defer src="main.dart.js"></script>
</body>
</html>

Contingut de main.dart

void main() {
  querySelector('h1')?.text = 'Hello, Dart!';
}

Compilació i Execució

Utilitza el següent comandament per compilar i executar l'aplicació:

webdev serve

Accedeix a http://localhost:8080 en el teu navegador per veure l'aplicació en funcionament.

  1. Manipulació del DOM amb Dart

Dart proporciona una API rica per manipular el Document Object Model (DOM).

Exemple: Canviar el Contingut d'un Element

import 'dart:html';

void main() {
  querySelector('#output')?.text = 'Hello, Dart!';
}

Exemple: Afegir un Nou Element

import 'dart:html';

void main() {
  var newElement = ParagraphElement()..text = 'This is a new paragraph.';
  document.body?.append(newElement);
}

  1. Gestió d'Esdeveniments

Exemple: Afegir un Event Listener

import 'dart:html';

void main() {
  querySelector('#myButton')?.onClick.listen((event) {
    window.alert('Button clicked!');
  });
}

Contingut de index.html per a l'Exemple

<!DOCTYPE html>
<html>
<head>
  <title>Event Handling</title>
</head>
<body>
  <button id="myButton">Click me</button>
  <script defer src="main.dart.js"></script>
</body>
</html>

  1. Comunicació amb el Backend

Dart facilita la comunicació amb el backend mitjançant HTTP requests.

Exemple: Fer una Petició HTTP GET

import 'dart:html';

void main() {
  HttpRequest.getString('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) {
      querySelector('#output')?.text = response;
    });
}

Contingut de index.html per a l'Exemple

<!DOCTYPE html>
<html>
<head>
  <title>HTTP Request</title>
</head>
<body>
  <div id="output"></div>
  <script defer src="main.dart.js"></script>
</body>
</html>

  1. Exercicis Pràctics

Exercici 1: Crear una Llista Dinàmica

Crea una aplicació web que permeti als usuaris afegir elements a una llista dinàmica.

Pistes

  • Utilitza un InputElement per capturar el text de l'usuari.
  • Utilitza un ButtonElement per afegir l'element a la llista.
  • Utilitza un UListElement per mostrar la llista.

Exercici 2: Fer una Petició HTTP POST

Crea una aplicació web que enviï dades a un servidor mitjançant una petició HTTP POST.

Pistes

  • Utilitza HttpRequest per fer la petició POST.
  • Captura les dades de l'usuari amb un formulari.

Conclusió

En aquesta secció, hem après com utilitzar Dart per al desenvolupament web, des de la configuració de l'entorn fins a la creació d'aplicacions web interactives. Hem explorat com manipular el DOM, gestionar esdeveniments i comunicar-nos amb el backend. Els exercicis pràctics proporcionats t'ajudaran a consolidar els coneixements adquirits. En el següent mòdul, ens endinsarem en les millors pràctiques i patrons de disseny en Dart.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats