Introducció

El deep linking és una tècnica que permet als usuaris navegar directament a una pàgina específica dins d'una aplicació mòbil o web, utilitzant un enllaç URL. Aquesta funcionalitat és especialment útil per a millorar l'experiència de l'usuari, ja que permet accedir a continguts específics de manera ràpida i directa.

Objectius

En aquesta secció, aprendràs:

Què és el deep linking i per què és important.
Com configurar deep linking en una aplicació Flutter.
Com gestionar els enllaços profunds dins de la teva aplicació.

Què és el Deep Linking?

El deep linking permet que un enllaç URL porti l'usuari directament a una pàgina específica dins de l'aplicació, en lloc de simplement obrir l'aplicació a la seva pàgina principal. Hi ha dos tipus principals de deep linking:

Deep Linking Tradicional: Utilitza URL estàndard per obrir una aplicació i navegar a una pàgina específica.
Deep Linking Universal/App Links: Utilitza URL que funcionen tant en aplicacions mòbils com en navegadors web.

Configuració de Deep Linking en Flutter

Pas 1: Configuració del Projecte

Afegir Dependències: Afegeix les dependències necessàries al fitxer pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  uni_links: ^0.5.1

Configuració d'Android: Afegeix la configuració necessària al fitxer AndroidManifest.xml.

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:theme="@style/LaunchTheme"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="https" android:host="example.com"/>
    </intent-filter>
</activity>

Configuració d'iOS: Afegeix la configuració necessària al fitxer Info.plist.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>https</string>
        </array>
        <key>CFBundleURLName</key>
        <string>example.com</string>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>https</string>
</array>

Pas 2: Implementació del Deep Linking

Inicialització: Inicialitza el deep linking en el fitxer principal de la teva aplicació.

import 'package:flutter/material.dart';
import 'package:uni_links/uni_links.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  StreamSubscription _sub;

  @override
  void initState() {
    super.initState();
    initUniLinks();
  }

  Future<void> initUniLinks() async {
    _sub = getLinksStream().listen((String link) {
      if (!mounted) return;
      // Gestiona l'enllaç aquí
      print('Enllaç rebut: $link');
    }, onError: (err) {
      // Gestiona l'error aquí
    });
  }

  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Deep Linking Example'),
        ),
        body: Center(
          child: Text('Esperant enllaç...'),
        ),
      ),
    );
  }
}

Gestió de l'Enllaç: Gestiona l'enllaç rebut per navegar a la pàgina corresponent.

Future<void> initUniLinks() async {
  _sub = getLinksStream().listen((String link) {
    if (!mounted) return;
    // Gestiona l'enllaç aquí
    if (link != null) {
      Uri uri = Uri.parse(link);
      if (uri.pathSegments.contains('product')) {
        String productId = uri.queryParameters['id'];
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ProductPage(id: productId),
          ),
        );
      }
    }
  }, onError: (err) {
    // Gestiona l'error aquí
  });
}

Exercici Pràctic

Objectiu

Implementar deep linking en una aplicació Flutter que permeti navegar a una pàgina de producte específica.

Passos

Configura el projecte seguint els passos anteriors.
Crea una pàgina de producte (ProductPage) que mostri informació basada en l'ID del producte.
Implementa la gestió de l'enllaç per navegar a la ProductPage quan es rebi un enllaç amb el camí /product i un paràmetre id.

Solució

import 'package:flutter/material.dart';
import 'package:uni_links/uni_links.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  StreamSubscription _sub;

  @override
  void initState() {
    super.initState();
    initUniLinks();
  }

  Future<void> initUniLinks() async {
    _sub = getLinksStream().listen((String link) {
      if (!mounted) return;
      if (link != null) {
        Uri uri = Uri.parse(link);
        if (uri.pathSegments.contains('product')) {
          String productId = uri.queryParameters['id'];
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => ProductPage(id: productId),
            ),
          );
        }
      }
    }, onError: (err) {
      // Gestiona l'error aquí
    });
  }

  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Deep Linking Example'),
        ),
        body: Center(
          child: Text('Esperant enllaç...'),
        ),
      ),
    );
  }
}

class ProductPage extends StatelessWidget {
  final String id;

  ProductPage({this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Product Page'),
      ),
      body: Center(
        child: Text('Product ID: $id'),
      ),
    );
  }
}

Conclusió

El deep linking és una funcionalitat poderosa que millora l'experiència de l'usuari permetent accedir directament a continguts específics dins de l'aplicació. En aquesta secció, has après a configurar i implementar deep linking en una aplicació Flutter, així com a gestionar els enllaços per navegar a pàgines específiques. Amb aquesta base, pots explorar més opcions avançades de deep linking per adaptar-les a les necessitats de la teva aplicació.

Deep Linking

Introducció

Objectius

Què és el Deep Linking?

Configuració de Deep Linking en Flutter

Pas 1: Configuració del Projecte

Pas 2: Implementació del Deep Linking

Exercici Pràctic

Objectiu

Passos

Solució

Conclusió

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori