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

Gestió de l'entrada de l'usuari

Següent ►
►

En aquest tema, aprendrem com gestionar l'entrada de l'usuari en aplicacions desenvolupades amb Apache Cordova. La interacció amb l'usuari és una part fonamental de qualsevol aplicació mòbil, i és crucial saber com capturar i processar aquesta entrada de manera eficient i segura.

Objectius del tema

  • Comprendre els diferents tipus d'entrada de l'usuari.
  • Aprendre a capturar i gestionar esdeveniments d'entrada.
  • Implementar validacions bàsiques d'entrada.
  • Utilitzar plugins de Cordova per millorar la gestió de l'entrada.

Tipus d'entrada de l'usuari

L'entrada de l'usuari pot provenir de diverses fonts, incloent:

  • Tacte: Interaccions tàctils com tocs, lliscaments i gestos.
  • Teclat: Entrada de text mitjançant el teclat virtual.
  • Sensors: Dades de sensors com l'acceleròmetre, giroscopi, etc.
  • Voz: Entrada de veu mitjançant reconeixement de veu.

Captura d'esdeveniments d'entrada

Esdeveniments tàctils

Els esdeveniments tàctils són una de les formes més comunes d'entrada en dispositius mòbils. A continuació es mostra com capturar esdeveniments tàctils bàsics:

<!DOCTYPE html>
<html>
<head>
    <title>Gestió d'entrada tàctil</title>
    <script>
        document.addEventListener('deviceready', function() {
            var element = document.getElementById('touchArea');
            element.addEventListener('touchstart', function(event) {
                console.log('Toc detectat!');
            });
        }, false);
    </script>
</head>
<body>
    <div id="touchArea" style="width: 100%; height: 100px; background-color: lightblue;">
        Toca aquí
    </div>
</body>
</html>

Esdeveniments de teclat

Per capturar l'entrada de teclat, podem utilitzar esdeveniments com input o keydown:

<!DOCTYPE html>
<html>
<head>
    <title>Gestió d'entrada de teclat</title>
    <script>
        document.addEventListener('deviceready', function() {
            var inputElement = document.getElementById('textInput');
            inputElement.addEventListener('input', function(event) {
                console.log('Text introduït: ' + event.target.value);
            });
        }, false);
    </script>
</head>
<body>
    <input type="text" id="textInput" placeholder="Escriu aquí">
</body>
</html>

Validació de l'entrada de l'usuari

La validació de l'entrada és crucial per assegurar que les dades introduïdes per l'usuari siguin correctes i segures. A continuació es mostra un exemple de validació bàsica d'un formulari:

<!DOCTYPE html>
<html>
<head>
    <title>Validació d'entrada</title>
    <script>
        function validateForm() {
            var name = document.getElementById('name').value;
            if (name === '') {
                alert('El nom no pot estar buit');
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return validateForm()">
        <label for="name">Nom:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Utilització de plugins de Cordova

Cordova ofereix diversos plugins que poden ajudar a gestionar l'entrada de l'usuari de manera més eficient. Alguns dels plugins més útils inclouen:

  • cordova-plugin-keyboard: Permet gestionar el comportament del teclat virtual.
  • cordova-plugin-geolocation: Permet obtenir la ubicació de l'usuari.
  • cordova-plugin-camera: Permet capturar imatges i vídeos.

Exemple d'ús del plugin de la càmera

A continuació es mostra com utilitzar el plugin de la càmera per capturar una imatge:

<!DOCTYPE html>
<html>
<head>
    <title>Captura d'imatge</title>
    <script src="cordova.js"></script>
    <script>
        document.addEventListener('deviceready', function() {
            document.getElementById('captureButton').addEventListener('click', function() {
                navigator.camera.getPicture(onSuccess, onFail, { 
                    quality: 50,
                    destinationType: Camera.DestinationType.DATA_URL
                });
            });

            function onSuccess(imageData) {
                var image = document.getElementById('capturedImage');
                image.src = "data:image/jpeg;base64," + imageData;
            }

            function onFail(message) {
                alert('Error: ' + message);
            }
        }, false);
    </script>
</head>
<body>
    <button id="captureButton">Captura Imatge</button>
    <img id="capturedImage" style="width: 100%; height: auto;">
</body>
</html>

Exercicis pràctics

Exercici 1: Captura d'esdeveniments tàctils

Crea una pàgina web que canviï el color d'un element div cada vegada que es detecti un toc.

Exercici 2: Validació de formulari

Crea un formulari amb camps per al nom, correu electrònic i número de telèfon. Implementa validacions per assegurar que tots els camps estiguin plens i que el correu electrònic tingui un format vàlid.

Exercici 3: Ús del plugin de la càmera

Utilitza el plugin de la càmera per capturar una imatge i mostrar-la en un element img a la pàgina.

Solucions

Solució a l'Exercici 1

<!DOCTYPE html>
<html>
<head>
    <title>Captura d'esdeveniments tàctils</title>
    <script>
        document.addEventListener('deviceready', function() {
            var element = document.getElementById('colorBox');
            element.addEventListener('touchstart', function(event) {
                element.style.backgroundColor = element.style.backgroundColor === 'lightblue' ? 'lightgreen' : 'lightblue';
            });
        }, false);
    </script>
</head>
<body>
    <div id="colorBox" style="width: 100%; height: 100px; background-color: lightblue;">
        Toca aquí
    </div>
</body>
</html>

Solució a l'Exercici 2

<!DOCTYPE html>
<html>
<head>
    <title>Validació de formulari</title>
    <script>
        function validateForm() {
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var phone = document.getElementById('phone').value;
            var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (name === '' || email === '' || phone === '') {
                alert('Tots els camps són obligatoris');
                return false;
            }

            if (!emailPattern.test(email)) {
                alert('El correu electrònic no és vàlid');
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return validateForm()">
        <label for="name">Nom:</label>
        <input type="text" id="name" name="name"><br>
        <label for="email">Correu electrònic:</label>
        <input type="text" id="email" name="email"><br>
        <label for="phone">Número de telèfon:</label>
        <input type="text" id="phone" name="phone"><br>
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Solució a l'Exercici 3

<!DOCTYPE html>
<html>
<head>
    <title>Captura d'imatge</title>
    <script src="cordova.js"></script>
    <script>
        document.addEventListener('deviceready', function() {
            document.getElementById('captureButton').addEventListener('click', function() {
                navigator.camera.getPicture(onSuccess, onFail, { 
                    quality: 50,
                    destinationType: Camera.DestinationType.DATA_URL
                });
            });

            function onSuccess(imageData) {
                var image = document.getElementById('capturedImage');
                image.src = "data:image/jpeg;base64," + imageData;
            }

            function onFail(message) {
                alert('Error: ' + message);
            }
        }, false);
    </script>
</head>
<body>
    <button id="captureButton">Captura Imatge</button>
    <img id="capturedImage" style="width: 100%; height: auto;">
</body>
</html>

Resum

En aquest tema, hem après com gestionar diferents tipus d'entrada de l'usuari en aplicacions Cordova. Hem vist com capturar esdeveniments tàctils i de teclat, com validar l'entrada de l'usuari i com utilitzar plugins de Cordova per millorar la gestió de l'entrada. A més, hem practicat aquests conceptes amb exercicis pràctics. En el proper tema, explorarem com implementar la navegació en aplicacions Cordova.

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