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

Implementació de la navegació

Següent ►
►

En aquest tema, aprendrem com implementar la navegació en una aplicació Apache Cordova. La navegació és una part essencial de qualsevol aplicació mòbil, ja que permet als usuaris moure's entre diferents pantalles i funcionalitats de manera fluida.

Objectius del tema

  • Comprendre els conceptes bàsics de la navegació en aplicacions mòbils.
  • Aprendre a implementar la navegació utilitzant HTML, CSS i JavaScript.
  • Integrar la navegació amb frameworks populars com Angular i React.
  • Gestionar l'historial de navegació i la navegació entre pàgines.

Conceptes bàsics de la navegació

Tipus de navegació

  1. Navegació lineal: Els usuaris es mouen d'una pantalla a la següent en una seqüència predeterminada.
  2. Navegació jeràrquica: Els usuaris es mouen entre pantalles que tenen una relació de pare-fill.
  3. Navegació per pestanyes: Els usuaris poden canviar entre diferents seccions de l'aplicació mitjançant pestanyes.
  4. Navegació per menú: Els usuaris poden accedir a diferents seccions de l'aplicació mitjançant un menú lateral o desplegable.

Implementació de la navegació amb HTML, CSS i JavaScript

Exemple pràctic: Navegació bàsica amb HTML i JavaScript

Estructura HTML

<!DOCTYPE html>
<html>
<head>
    <title>Navegació Cordova</title>
    <style>
        .page {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
    <div id="home" class="page active">
        <h1>Home</h1>
        <button onclick="navigate('about')">Go to About</button>
    </div>
    <div id="about" class="page">
        <h1>About</h1>
        <button onclick="navigate('home')">Go to Home</button>
    </div>

    <script>
        function navigate(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(pageId).classList.add('active');
        }
    </script>
</body>
</html>

Explicació del codi

  • HTML: Definim dues pàgines (home i about) amb botons per navegar entre elles.
  • CSS: Utilitzem classes per mostrar i amagar les pàgines.
  • JavaScript: La funció navigate canvia la classe activa per mostrar la pàgina corresponent.

Integració amb frameworks populars

Navegació amb Angular

Angular proporciona un sistema de rutes robust que facilita la navegació entre components.

Exemple pràctic: Navegació amb Angular

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Explicació del codi

  • Angular: Definim les rutes en app-routing.module.ts per navegar entre HomeComponent i AboutComponent.

Navegació amb React

React utilitza la llibreria react-router-dom per gestionar la navegació.

Exemple pràctic: Navegació amb React

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Explicació del codi

  • React: Utilitzem react-router-dom per definir les rutes i els enllaços de navegació.

Gestió de l'historial de navegació

Exemple pràctic: Gestió de l'historial amb JavaScript

function navigate(pageId) {
    history.pushState({ page: pageId }, '', `#${pageId}`);
    document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('active');
    });
    document.getElementById(pageId).classList.add('active');
}

window.addEventListener('popstate', (event) => {
    if (event.state && event.state.page) {
        document.querySelectorAll('.page').forEach(page => {
            page.classList.remove('active');
        });
        document.getElementById(event.state.page).classList.add('active');
    }
});

Explicació del codi

  • JavaScript: Utilitzem history.pushState per gestionar l'historial de navegació i popstate per gestionar la navegació enrere.

Exercicis pràctics

Exercici 1: Navegació bàsica

Crea una aplicació Cordova amb tres pàgines: Home, About i Contact. Implementa la navegació entre aquestes pàgines utilitzant HTML, CSS i JavaScript.

Exercici 2: Navegació amb Angular

Crea una aplicació Cordova amb Angular i implementa la navegació entre tres components: HomeComponent, AboutComponent i ContactComponent.

Exercici 3: Navegació amb React

Crea una aplicació Cordova amb React i implementa la navegació entre tres components: Home, About i Contact.

Solucions dels exercicis

Solució de l'Exercici 1

<!DOCTYPE html>
<html>
<head>
    <title>Navegació Cordova</title>
    <style>
        .page {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
    <div id="home" class="page active">
        <h1>Home</h1>
        <button onclick="navigate('about')">Go to About</button>
        <button onclick="navigate('contact')">Go to Contact</button>
    </div>
    <div id="about" class="page">
        <h1>About</h1>
        <button onclick="navigate('home')">Go to Home</button>
        <button onclick="navigate('contact')">Go to Contact</button>
    </div>
    <div id="contact" class="page">
        <h1>Contact</h1>
        <button onclick="navigate('home')">Go to Home</button>
        <button onclick="navigate('about')">Go to About</button>
    </div>

    <script>
        function navigate(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(pageId).classList.add('active');
        }
    </script>
</body>
</html>

Solució de l'Exercici 2

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Solució de l'Exercici 3

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Resum

En aquest tema, hem après a implementar la navegació en una aplicació Apache Cordova utilitzant HTML, CSS i JavaScript. També hem vist com integrar la navegació amb frameworks populars com Angular i React. Finalment, hem après a gestionar l'historial de navegació per proporcionar una experiència d'usuari fluida. Amb aquests coneixements, estàs preparat per crear aplicacions mòbils amb una navegació eficient i intuïtiva.

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