Bienvenidos a este tutorial intrductory acerca de la configuración básica de la aplicación Cordova.
Usted no encontrará en este tutorial nada realmente interesante. Que acabo de escribir, porque aquí describo los primeros pasos indispensables para configurar un nuevo proyecto de Córdoba con el fin de seguir los distintos tutoriales se pueden encontrar en mi blog. En lugar de repetir las mismas cosas de comenzar cada nuevo tutorial, Pensé que era mejor poner todo en un solo artículo rápida y vincularlo al comienzo de mis artículos para aquellos que lo necesitan sin aburrir a los lectores más frecuentes con las cosas que ya conocen.
Obviamente, No voy a explicar aquí cómo instalar Cordova sí: para que sólo puede leer el documentación oficial.
Inicio de una nueva aplicación de Córdoba
Así que vamos a empezar a crear una pequeña aplicación Cordova para probar nuestra conexión Dropbox. Abre tu Command Line Interface (que será el símbolo del sistema de Windows y la ventana de terminal en Linux), Vaya al directorio donde guardas tus aplicaciones Cordova y el tipo:
Córdova crear baseApp com.codingfix.baseApp BaseApp
Y entonces entramos directorio nuevo proyecto y agregar plataforma Android:
cd baseApp cordova plataformas añaden androide
ahora hemos creado un nuevo proyecto Cordova. Ahora vamos a ver cómo editar algunos archivos para tenerlos listos para iniciar una aplicación real usando Bootstrap y jQuery.
Preparación de los archivos centrales de aplicaciones
Como tu ya sabes, los archivos principales de nuestros reside la aplicación de la baseApp / www directorio y de sus subdirectorios baseApp / www / css y baseApp / www/.js.
El archivo CSS
En el directorio baseApp / www / css nos encontramos con el archivo index.css, que debe parecerse a la siguiente:
/*
* Licencia para la Apache Software Foundation (PPA) bajo uno
* o más acuerdos de licencia para colaboradores. Ver el archivo de AVISO
* distribuido con este trabajo para obtener información adicional
* con respecto a la propiedad del copyright. La ASF licencias de este archivo
* a usted bajo la licencia Apache, Versión 2.0 (el
* "Licencia"); no se puede utilizar este archivo salvo en cumplimiento
* con la Licencia. Usted puede obtener una copia de la Licencia en
*
* HTTP://www.apache.org/licenses/LICENSE-2.0
*
* A menos que lo requiera la ley aplicable o se acuerde por escrito,
* software distribuido bajo la Licencia se distribuye en una
* "COMO ES" BASE, SIN GARANTÍAS O CONDICIONES DE CUALQUIER
* TIPO, expresa o implícita. Consulte la Licencia para la
* lenguaje específico que rige los permisos y limitaciones
* bajo la Licencia.
*/
* {
-webkit-tap-color más destacado: RGBA(0,0,0,0); /* hacer la selección enlace transparente, ajustar la opacidad último valor 0 a 1.0 */
}
cuerpo {
-webkit-táctil de llamada: ninguna; /* Prevenir de llamada para copiar la imagen, etc. cuando toque para bodega */
-webkit-text-size-adjust: ninguna; /* Prevenir WebKit de cambiar el tamaño de texto para ajustarlo */
-webkit-user-select: ninguna; /* copiar y pegar Prevent, permitir, cambio 'ninguna' a 'texto' */
color de fondo:#A4a4a4;
imagen de fondo:gradiente lineal(parte superior, #A7A7A7 0%, #A4a4a4 51%);
imagen de fondo:-webkit-lineal-gradiente(parte superior, #A7A7A7 0%, #A4a4a4 51%);
imagen de fondo:-ms-lineal-gradiente(parte superior, #A7A7A7 0%, #A4a4a4 51%);
imagen de fondo:-webkit-gradiente(
lineal,
arriba a la izquierda,
abajo a la izquierda,
el color de ventanilla(0, #A7A7A7),
el color de ventanilla(0.51, #A4a4a4)
);
background-attachment:fijo;
Familia tipográfica:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
tamaño de fuente:12Px;
altura:100%;
margen:0Px;
relleno:0Px;
transformación-texto:mayúscula;
anchura:100%;
}
/* diseño vertical (defecto) */
.aplicación {
antecedentes:URL(../img / logo.png) no-repeat parte superior central; /* 170px x 200 píxeles */
posición:absoluto; /* posición en el centro de la pantalla */
izquierda:50%;
parte superior:50%;
altura:50Px; /* altura área de texto */
anchura:225Px; /* anchura del área de texto */
texto alineado:centrar;
relleno:1800px 0px 0px px; /* altura de la imagen es 200 píxeles (20 píxeles de fondo se superponen con el texto) */
margen:-1150px 0px px -112px; /* desviación vertical: la mitad de altura de la imagen y el área de texto de altura */
/* distancia al eje horizontal: medio de la anchura del área de texto */
}
/* diseño del paisaje (con min-width) */
pantalla y @media (min-relación de aspecto: 1/1) y (anchura mínima:400Px) {
.aplicación {
posición-fondo:izquierdo y central;
relleno:750px 75px 170px px; /* acolchado superior + fondo acolchado + área de texto = altura de la imagen */
margen:-900px 0px px -198px; /* desviación vertical: la mitad de altura de la imagen */
/* distancia al eje horizontal: un medio de anchura de la imagen y el área de texto de anchura */
}
}
h1 {
tamaño de fuente:24Px;
peso-fuente:normal;
margen:0Px;
Desbordamiento:visible;
relleno:0Px;
texto alineado:centrar;
}
.evento {
frontera de radio:4Px;
-webkit-border-radius:4Px;
Color:#FFFFFF;
tamaño de fuente:12Px;
margen:0px 30px;
relleno:2px 0px;
}
.event.listening {
color de fondo:#333333;
monitor:bloquear;
}
.event.received {
color de fondo:#4B946A;
monitor:ninguna;
}
@keyframes desvanecimiento {
desde { opacidad: 1.0; }
50% { opacidad: 0.4; }
a { opacidad: 1.0; }
}
@ Webkit-fotogramas clave se desvanecen {
desde { opacidad: 1.0; }
50% { opacidad: 0.4; }
a { opacidad: 1.0; }
}
.parpadeo {
animación:desvanecimiento 3000 ms infinita;
-webkit-animación:desvanecimiento 3000 ms infinita;
}
En este caso, nuestra tarea de edición será muy rápida y fácil: dejar todo y anotar esta simple regla:
.html, cuerpo{
altura: 100%;
}
Eso es todo: guardar el archivo y estamos listos para ir en.
El archivo js
En el directorio baseApp / www / JS el archivo índice.js Se ve como esto:
/*
* Licencia para la Apache Software Foundation (PPA) bajo uno
* o más acuerdos de licencia para colaboradores. Ver el archivo de AVISO
* distribuido con este trabajo para obtener información adicional
* con respecto a la propiedad del copyright. La ASF licencias de este archivo
* a usted bajo la licencia Apache, Versión 2.0 (el
* "Licencia"); no se puede utilizar este archivo salvo en cumplimiento
* con la Licencia. Usted puede obtener una copia de la Licencia en
*
* HTTP://www.apache.org/licenses/LICENSE-2.0
*
* A menos que lo requiera la ley aplicable o se acuerde por escrito,
* software distribuido bajo la Licencia se distribuye en una
* "COMO ES" BASE, SIN GARANTÍAS O CONDICIONES DE CUALQUIER
* TIPO, expresa o implícita. Consulte la Licencia para la
* lenguaje específico que rige los permisos y limitaciones
* bajo la Licencia.
*/
era aplicación = {
// Constructor de aplicaciones
inicializar: función() {
document.addEventListener('Deviceready', this.onDeviceReady.bind(esta), falso);
},
// deviceready Gestor de Eventos
//
// Absorber inmediatamente los eventos cordova aquí. eventos son comunes:
// 'pausa', 'currículum', etc..
onDeviceReady: función() {
this.receivedEvent('Deviceready');
},
// Actualización de DOM en un evento recibido
receivedEvent: función(carné de identidad) {
var parentElement = document.getElementById(carné de identidad);
var listeningElement = parentElement.querySelector('.escuchando');
var receivedElement = parentElement.querySelector('.recibido');
listeningElement.setAttribute('estilo', 'monitor:ninguna;');
receivedElement.setAttribute('estilo', 'monitor:bloquear;');
consola.log('Evento recibido: ' + carné de identidad);
}
};
app.initialize();
Podemos caer cualquier comentario y líneas 35-40 del fragmento con el fin de conseguir:
era aplicación = {
inicializar: función() {
document.addEventListener('Deviceready', this.onDeviceReady.bind(esta), falso);
},
onDeviceReady: función() {
this.receivedEvent('Deviceready');
},
recibidoEvento: función(carné de identidad) {
consola.log('Evento recibido: ' + carné de identidad);
}
};
app.initialize();
$(documento).Listo(función () {
});
Como se puede ver También he añadido la función principal de jQuery, donde vamos a poner todos nuestros controladores de eventos.
Las vistas’ envase: índice.html
El archivo www / index.html es el archivo HTML que contendrá todos nuestros puntos de vista, es decir, las diversas páginas de aplicación, para usar un término más familiar para los desarrolladores web. Esta página son otra cosa que no sea HTML divs. Actualmente, el índice.html miradas de archivo como este:
<!DOCTYPE html>
<!--
Licencia para la Apache Software Foundation (PPA) bajo uno
o más acuerdos de licencia para colaboradores. Ver el archivo de AVISO
distribuido con este trabajo para obtener información adicional
con respecto a la propiedad del copyright. La ASF licencias de este archivo
a usted bajo la licencia Apache, Versión 2.0 (el
"Licencia"); no se puede utilizar este archivo salvo en cumplimiento
con la Licencia. Usted puede obtener una copia de la Licencia en
http://www.apache.org/licenses/LICENSE-2.0
A menos que lo requiera la ley aplicable o se acuerde por escrito,
software distribuido bajo la Licencia se distribuye en una
"COMO ES" BASE, SIN GARANTÍAS O CONDICIONES DE CUALQUIER
TIPO, expresa o implícita. Consulte la Licencia para la
lenguaje específico que rige los permisos y limitaciones
bajo la Licencia.
-->
<.html>
<cabeza>
<!--
Personalizar esta política para adaptarse a las necesidades de su propia app. Para obtener más orientación, ver:
https (en inglés)://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Algunas notas:
* brecha: se requiere sólo en iOS (cuando se utiliza UIWebView) y es necesario para JS->la comunicación nativa
* https (en inglés)://ssl.gstatic.com se requiere únicamente en Android y es necesario para TalkBack para funcionar correctamente
* Desactiva el uso de secuencias de comandos en línea con el fin de mitigar el riesgo de las vulnerabilidades XSS. Para cambiar esta:
* Habilitar JS en línea: añadir 'inseguro-inline' a default-src
->
<meta http-equiv ="Contenido-Seguridad-Política" = contenido"default-src datos 'auto': brecha: https (en inglés)://ssl.gstatic.com 'inseguro-eval'; estilo-src 'auto' 'insegura-inline'; medios de comunicación-src *; img src-datos 'yo': contenido:;">
<meta name ="Formato de detección" = contenido"= sin teléfono">
<meta name ="msapplication-tap-destacado" = contenido"No">
<meta name ="ventana" = contenido"user-escalable = no, inicial escala = 1, -Máximo de la escala = 1, mínimo escala = 1, width = dispositivo de ancho">
<= Enlace rel"hoja de estilo" type ="text / css" href ="css / index.css">
<título>Hola Mundo</título>
</cabeza>
<cuerpo>
<div class ="aplicación">
<h1>Apache Córdova</h1>
<div id ="DeviceReady" class ="parpadeo">
<= Clase p"escucha evento">Conectándose a dispositivo</pag>
<= Clase p"evento recibió">Dispositivo está listo</pag>
</Div>
</Div>
<de script type ="text / javascript" src ="Córdoba.js"></guión>
<de script type ="text / javascript" src ="JS / index.js"></guión>
</cuerpo>
</.html>
Lo primero que vamos a cambiar es la etiqueta de seguridad de contenidos en políticas: sustituirla por la siguiente:
<meta http-equiv ="Contenido-Seguridad-Política" = contenido"default-src *; estilo-src 'auto' http://* 'Inseguro-inline'; script src 'auto' http://* 'Inseguro-inline' 'insegura-eval'; medios de comunicación-src *" />
Para asegurarse de que Ight queremos cambiar el título, pero por el momento podemos dejar las cosas como son.
Abandonar todo el div con la clase «aplicación» porque no lo necesitamos y, obviamente, se puede soltar cualquier comentario superfluo en el archivo.
Por último hay que añadir enlaces a Bootstrap y jQuery. Podríamos utilizar CDN, pero que es probable que queremos que nuestro trabajo de aplicación incluso sin conexión, por lo que es mejor para descargar tanto Oreja y jQuery y proceden a poner los archivos necesarios en los directorios correctos y los vinculan en el archivo html:
<!DOCTYPE html>
<.html>
<cabeza>
<meta http-equiv ="Contenido-Seguridad-Política" = contenido"default-src *; estilo-src 'auto' http://* 'Inseguro-inline'; script src 'auto' http://* 'Inseguro-inline' 'insegura-eval'; medios de comunicación-src *" />
<meta name ="Formato de detección" = contenido"= sin teléfono">
<meta name ="msapplication-tap-destacado" = contenido"No">
<meta name ="ventana" = contenido"user-escalable = no, inicial escala = 1, -Máximo de la escala = 1, mínimo escala = 1, width = dispositivo de ancho">
<= Enlace rel"hoja de estilo" href ="css / bootstrap.min.css" />
<= Enlace rel"hoja de estilo" type ="text / css" href ="css / index.css">
<título>Hola Mundo</título>
</cabeza>
<cuerpo>
<de script type ="text / javascript" src ="Córdoba.js"></guión>
<de script type ="text / javascript" src ="JS / jquery-2.2.3.min.js"></guión>
<de script type ="text / javascript" src ="JS / bootstrap.min.js"></guión>
<de script type ="text / javascript" src ="JS / index.js"></guión>
</cuerpo>
</.html>
Eso es todo. A partir de aquí podemos empezar a construir cualquier código de la aplicación móvil Cordova añadiendo, plugins y scripts que los necesitamos.
Feliz codificación 😉