os comento, estoy haciendo una aplicación híbrida con JavaScript, HTML y CSS, y ahora mismo tengo desarrollado un cliente web, y estoy en proceso de desarrollar un cliente móvil, en concreto para Android. La intención es hacerlo de igual forma con Javascript, HTML y CSS, por ello estoy utilizando Cordova de framework.
Para el cliente móvil necesito utilizar NFC para responder una serie de huecos con respuesta, es decir, utilizaré tags con contenido, y dicho contenido pretendo que se visualice en los inputs (huecos) donde se responde. Por ejemplo:
El perro come @ comida @ pero no está en casa @
Las "@" se corresponderían con los inputs, puede haber varios inputs, no necesariamente tres. Actualmente puedo responder por teclado, pero no sé como hacerlo para NFC. Además me he descargado un plugin que permite el uso de eventos NFC, cordova plugin add phonegap-nfc
, explico a continuación el código (la parte de NFC sacada del libro "Beginning NFC"), y si podéis ayudarme os lo agradecería mucho.
var rest=new ClienteRest();
var app = {
//this.rest=new ClienteRest();
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function(rest) {
this.receivedEvent('deviceready');
//rest.obtenerEjercicios();
// Escucha de eventos NFC
nfc.addMimeTypeListener(
"text/plain", // listen for plain text messages
app.onNfc, // tag successfully scanned
function (status) { // listener successfully initialized
//app.display("Tap an NFC tag to begin");
},
function (error) { // listener fails to initialize
//app.display("NFC reader failed to initialize " +
JSON.stringify(error));
}
);
},
onNfc: function(nfcEvent) {
var tag = nfcEvent.tag,
text = "",
payload;
payload = tag.ndefMessage[0].payload;
if (payload[0] < 5) {
var languageCodeLength = payload[0];
text = nfc.bytesToString(payload.slice(languageCodeLength + 1));
} else {
text = nfc.bytesToString(payload); //Contenido del Tag
}
//app.display("Message: " + text);
},
mostrarEjercicio:function (textoEjercicio){
$('#mostrarTextoAlumno').remove();
if (window.localStorage.getItem('alu')){
var text=textoEjercicio;
var textSeparado=textoEjercicio.split("@");
var nInput=textSeparado.length-1;
var idInput=0;
for (var i=0;i<text.length;i++){
if(text.charAt(i)=="@"){
var inputN='<input id="'+idInput+'" type="text" style="width:20px; color:black">'
text = text.replace("@", inputN);
idInput++;
}
}
var cadena = '<div id="mostrarTextoAlumno"><div class="box-blue" ><h4 style="color:white;">'+ text + '</h4></div>';
cadena=cadena+'<div align="center" id="mostrarSolucion"><button style="color:white" type="button" class="btn btn-link" data-toggle="modal" data-target="#myModalInstruccionesAlumno">Instrucciones</button>'
cadena=cadena+'<button type="button" id="verBorradorBtn" class="btn btn-primary btn-md">Ver borrador</button></div></div>';
$('#messageDiv').append(cadena);
var respuestaAlumno=[];
var respuestaAlumnoC;
$('#verBorradorBtn').on('click',function(){
respuestaAlumno=[];
for (let i=0; i<idInput;i++) {
respuestaAlumno.push($(`#${i}`).val());
}
console.log('Los valores son',respuestaAlumno.toString());
respuestaAlumnoC=respuestaAlumno[0];
for (var j=1;j<respuestaAlumno.length;j++){
respuestaAlumnoC=respuestaAlumnoC.concat(" ");
respuestaAlumnoC=respuestaAlumnoC.concat(respuestaAlumno[j]);
}
console.log('Los valores son',respuestaAlumnoC);
app.mostrarBorrador(textoEjercicio,respuestaAlumnoC);
});
}
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize(rest);
El contenido del tag sería la línea text = nfc.bytesToString(payload);
en la funcion onNFC, y donde respondo a los inputs (por teclado actualmente), en la línea respuestaAlumno.push($(
#${i}).val());
en la función mostrarEjercicio
En el clienteRest, tengo lo siguiente, destacar que en alu se almacena un usuario, previo login. Se puede quitar para probar:
function ClienteRest(){
this.elegirEjercicio=function(nombreEjercicio){
var uid;
if (window.localStorage.getItem('alu')!=undefined){
var alu=JSON.parse(window.localStorage.getItem('alu'));
uid=alu._id;
}
if(uid!=undefined){
$.getJSON(url+"/elegirEjercicio/"+uid+"/"+nombreEjercicio,function(data){
console.log("Ejercicio elegido correctamente:"+nombreEjercicio);
var texto="El perro tiene @ casa@ pero no comida@"
app.mostrarEjercicio(texto);
});
}else{
console.log("No se ha podido elegir ejercicio");
}
}
}
Respecto del HTML, por si quieren probarlo, es este
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="cliente-apache/css/index.css">
<script src="cliente-apache/js/jquery-3.3.1.min.js"></script>
<script src="cliente-apache/js/clienteRest.js"></script>
<title>ejercicio</title>
</head>
<body>
<div class="app">
<h1>educa</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div class="container text-center" >
<div class="row">
<div class="row">
<div id="messageDiv"></div>
</div>
<div class="row">
<div id="texto"></div>
</div>
</div>
</div>
<script type="text/javascript" src="cliente-apache/js/index.js"></script>
</body>
</html>