{"id":598,"date":"2017-11-02T10:43:52","date_gmt":"2017-11-02T10:43:52","guid":{"rendered":"https:\/\/codingfix.com\/?p=598"},"modified":"2024-09-02T16:55:49","modified_gmt":"2024-09-02T16:55:49","slug":"basic-cordova-application-setup","status":"publish","type":"post","link":"https:\/\/codingfix.com\/basic-cordova-application-setup\/","title":{"rendered":"Basic Cordova application setup"},"content":{"rendered":"\n

Wellcome to this intrductory tutorial about the basic Cordova application setup.<\/p>\n\n\n\n

You won’t find in this tutorial nothing really interesting. I just wrote it because here I describe the indispensable first steps to setup a new Cordova project in order to follow the various tutorials you can find in my blog. Instead to repeat the same things starting each new tutorial, I thought it was better to put everything in a single quick article and link it at the start of my articles for those who need it without boring more frequent readers with things they already know.<\/p>\n\n\n\n

Obviously, I won’t to explain here how to install Cordova itself: for that you can just read the official documentation<\/a>.<\/p>\n\n\n\n

Starting a new Cordova application<\/h2>\n\n\n\n

So let’s start creating a small Cordova app to test our Dropbox connection. Open you command line interface (it will be the command prompt in Windows and the terminal window in Linux), navigate to the directory where you keep your Cordova apps and type:<\/p>\n\n\n\n

<\/path><\/path><\/svg><\/span>
cordova create baseApp com.codingfix.baseApp BaseApp<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
And then we enter new project directory and add Android platform:<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
cd<\/span> baseApp<\/span><\/span>\ncordova platforms add android<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
We have right now created a new Cordova project. Now we’re going to see how to edit some files to get them ready to start a real application using Bootstrap and jQuery.<\/p>\n\n\n\n
Preparing application core files<\/h1>\n\n\n\n
As you already know, the core files of our application resides in the baseApp\/www<\/em> directory and in its sub-directories baseApp\/www\/css<\/em> and baseApp\/www<\/em>\/js<\/em>.<\/p>\n\n\n\n
The Css file<\/h2>\n\n\n\n
In the directory baseApp\/www\/css<\/em> we find the file index.css, which should look like the following one:<\/p>\n\n\n\n
CSS<\/span><\/path><\/path><\/svg><\/span>
\/*<\/span><\/span>\n * Licensed to the Apache Software Foundation (ASF) under one<\/span><\/span>\n * or more contributor license agreements.  See the NOTICE file<\/span><\/span>\n * distributed with this work for additional information<\/span><\/span>\n * regarding copyright ownership.  The ASF licenses this file<\/span><\/span>\n * to you under the Apache License, Version 2.0 (the<\/span><\/span>\n * "License"); you may not use this file except in compliance<\/span><\/span>\n * with the License.  You may obtain a copy of the License at<\/span><\/span>\n *<\/span><\/span>\n * http:\/\/www.apache.org\/licenses\/LICENSE-2.0<\/span><\/span>\n *<\/span><\/span>\n * Unless required by applicable law or agreed to in writing,<\/span><\/span>\n * software distributed under the License is distributed on an<\/span><\/span>\n * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY<\/span><\/span>\n * KIND, either express or implied.  See the License for the<\/span><\/span>\n * specific language governing permissions and limitations<\/span><\/span>\n * under the License.<\/span><\/span>\n *\/<\/span><\/span>\n*<\/span> {<\/span><\/span>\n    <\/span>-webkit-tap-highlight-color<\/span>: <\/span>rgba<\/span>(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>); <\/span>\/* make transparent link selection, adjust last value opacity 0 to 1.0 *\/<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nbody<\/span> {<\/span><\/span>\n    <\/span>-webkit-touch-callout<\/span>: <\/span>none<\/span>;                <\/span>\/* prevent callout to copy image, etc when tap to hold *\/<\/span><\/span>\n    <\/span>-webkit-text-size-adjust<\/span>: <\/span>none<\/span>;             <\/span>\/* prevent webkit from resizing text to fit *\/<\/span><\/span>\n    <\/span>-webkit-user-select<\/span>: <\/span>none<\/span>;                  <\/span>\/* prevent copy paste, to allow, change 'none' to 'text' *\/<\/span><\/span>\n    <\/span>background-color<\/span>:<\/span>#E4E4E4<\/span>;<\/span><\/span>\n    <\/span>background-image<\/span>:<\/span>linear-gradient<\/span>(<\/span>top<\/span>, <\/span>#A7A7A7<\/span> <\/span>0%<\/span>, <\/span>#E4E4E4<\/span> <\/span>51%<\/span>);<\/span><\/span>\n    <\/span>background-image<\/span>:<\/span>-webkit-linear-gradient<\/span>(<\/span>top<\/span>, <\/span>#A7A7A7<\/span> <\/span>0%<\/span>, <\/span>#E4E4E4<\/span> <\/span>51%<\/span>);<\/span><\/span>\n    <\/span>background-image<\/span>:-ms-linear-gradient(<\/span>top<\/span>, <\/span>#A7A7A7<\/span> <\/span>0%<\/span>, <\/span>#E4E4E4<\/span> <\/span>51%<\/span>);<\/span><\/span>\n    <\/span>background-image<\/span>:<\/span>-webkit-gradient<\/span>(<\/span><\/span>\n        <\/span>linear<\/span>,<\/span><\/span>\n        <\/span>left<\/span> <\/span>top<\/span>,<\/span><\/span>\n        <\/span>left<\/span> <\/span>bottom<\/span>,<\/span><\/span>\n        <\/span>color-stop<\/span>(<\/span>0<\/span>, <\/span>#A7A7A7<\/span>),<\/span><\/span>\n        <\/span>color-stop<\/span>(<\/span>0.51<\/span>, <\/span>#E4E4E4<\/span>)<\/span><\/span>\n    );<\/span><\/span>\n    <\/span>background-attachment<\/span>:<\/span>fixed<\/span>;<\/span><\/span>\n    <\/span>font-family<\/span>:<\/span>'HelveticaNeue-Light'<\/span>, <\/span>'HelveticaNeue'<\/span>, <\/span>Helvetica<\/span>, <\/span>Arial<\/span>, <\/span>sans-serif<\/span>;<\/span><\/span>\n    <\/span>font-size<\/span>:<\/span>12px<\/span>;<\/span><\/span>\n    <\/span>height<\/span>:<\/span>100%<\/span>;<\/span><\/span>\n    <\/span>margin<\/span>:<\/span>0px<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>:<\/span>0px<\/span>;<\/span><\/span>\n    <\/span>text-transform<\/span>:<\/span>uppercase<\/span>;<\/span><\/span>\n    <\/span>width<\/span>:<\/span>100%<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/* Portrait layout (default) *\/<\/span><\/span>\n.app<\/span> {<\/span><\/span>\n    <\/span>background<\/span>:<\/span>url<\/span>(<\/span>..\/img\/logo.png<\/span>) <\/span>no-repeat<\/span> <\/span>center<\/span> <\/span>top<\/span>; <\/span>\/* 170px x 200px *\/<\/span><\/span>\n    <\/span>position<\/span>:<\/span>absolute<\/span>;             <\/span>\/* position in the center of the screen *\/<\/span><\/span>\n    <\/span>left<\/span>:<\/span>50%<\/span>;<\/span><\/span>\n    <\/span>top<\/span>:<\/span>50%<\/span>;<\/span><\/span>\n    <\/span>height<\/span>:<\/span>50px<\/span>;                   <\/span>\/* text area height *\/<\/span><\/span>\n    <\/span>width<\/span>:<\/span>225px<\/span>;                   <\/span>\/* text area width *\/<\/span><\/span>\n    <\/span>text-align<\/span>:<\/span>center<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>:<\/span>180px<\/span> <\/span>0px<\/span> <\/span>0px<\/span> <\/span>0px<\/span>;     <\/span>\/* image height is 200px (bottom 20px are overlapped with text) *\/<\/span><\/span>\n    <\/span>margin<\/span>:<\/span>-115px<\/span> <\/span>0px<\/span> <\/span>0px<\/span> <\/span>-112px<\/span>;  <\/span>\/* offset vertical: half of image height and text area height *\/<\/span><\/span>\n                                   <\/span>\/* offset horizontal: half of text area width *\/<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/* Landscape layout (with min-width) *\/<\/span><\/span>\n@media<\/span> <\/span>screen<\/span> and (<\/span>min-aspect-ratio<\/span>: <\/span>1<\/span>\/<\/span>1<\/span>) and (<\/span>min-width<\/span>:<\/span>400px<\/span>) {<\/span><\/span>\n    <\/span>.app<\/span> {<\/span><\/span>\n        <\/span>background-position<\/span>:<\/span>left<\/span> <\/span>center<\/span>;<\/span><\/span>\n        <\/span>padding<\/span>:<\/span>75px<\/span> <\/span>0px<\/span> <\/span>75px<\/span> <\/span>170px<\/span>;  <\/span>\/* padding-top + padding-bottom + text area = image height *\/<\/span><\/span>\n        <\/span>margin<\/span>:<\/span>-90px<\/span> <\/span>0px<\/span> <\/span>0px<\/span> <\/span>-198px<\/span>;  <\/span>\/* offset vertical: half of image height *\/<\/span><\/span>\n                                      <\/span>\/* offset horizontal: half of image width and text area width *\/<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nh1<\/span> {<\/span><\/span>\n    <\/span>font-size<\/span>:<\/span>24px<\/span>;<\/span><\/span>\n    <\/span>font-weight<\/span>:<\/span>normal<\/span>;<\/span><\/span>\n    <\/span>margin<\/span>:<\/span>0px<\/span>;<\/span><\/span>\n    <\/span>overflow<\/span>:<\/span>visible<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>:<\/span>0px<\/span>;<\/span><\/span>\n    <\/span>text-align<\/span>:<\/span>center<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.event<\/span> {<\/span><\/span>\n    <\/span>border-radius<\/span>:<\/span>4px<\/span>;<\/span><\/span>\n    <\/span>-webkit-border-radius<\/span>:<\/span>4px<\/span>;<\/span><\/span>\n    <\/span>color<\/span>:<\/span>#FFFFFF<\/span>;<\/span><\/span>\n    <\/span>font-size<\/span>:<\/span>12px<\/span>;<\/span><\/span>\n    <\/span>margin<\/span>:<\/span>0px<\/span> <\/span>30px<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>:<\/span>2px<\/span> <\/span>0px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.event.listening<\/span> {<\/span><\/span>\n    <\/span>background-color<\/span>:<\/span>#333333<\/span>;<\/span><\/span>\n    <\/span>display<\/span>:<\/span>block<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.event.received<\/span> {<\/span><\/span>\n    <\/span>background-color<\/span>:<\/span>#4B946A<\/span>;<\/span><\/span>\n    <\/span>display<\/span>:<\/span>none<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n@keyframes<\/span> <\/span>fade<\/span> {<\/span><\/span>\n    from { <\/span>opacity<\/span>: <\/span>1.0<\/span>; }<\/span><\/span>\n    50% { <\/span>opacity<\/span>: <\/span>0.4<\/span>; }<\/span><\/span>\n    to { <\/span>opacity<\/span>: <\/span>1.0<\/span>; }<\/span><\/span>\n}<\/span><\/span>\n <\/span><\/span>\n@-webkit-keyframes<\/span> <\/span>fade<\/span> {<\/span><\/span>\n    from { <\/span>opacity<\/span>: <\/span>1.0<\/span>; }<\/span><\/span>\n    50% { <\/span>opacity<\/span>: <\/span>0.4<\/span>; }<\/span><\/span>\n    to { <\/span>opacity<\/span>: <\/span>1.0<\/span>; }<\/span><\/span>\n}<\/span><\/span>\n <\/span><\/span>\n.blink<\/span> {<\/span><\/span>\n    <\/span>animation<\/span>:fade <\/span>3000ms<\/span> <\/span>infinite<\/span>;<\/span><\/span>\n    <\/span>-webkit-animation<\/span>:fade <\/span>3000ms<\/span> <\/span>infinite<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
In this case, our editing task will be very quick and easy: just drop everything and write down this simple rule:<\/p>\n\n\n\n
html, body{\n\theight: 100%;\n}<\/pre>\n\n\n\n
That’s all: save the file and we’re ready to go on.<\/p>\n\n\n\n
The js file<\/h2>\n\n\n\n
In the directory baseApp\/www\/js<\/em> the file index.js<\/em> looks like this:<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
\/*<\/span><\/span>\n * Licensed to the Apache Software Foundation (ASF) under one<\/span><\/span>\n * or more contributor license agreements.  See the NOTICE file<\/span><\/span>\n * distributed with this work for additional information<\/span><\/span>\n * regarding copyright ownership.  The ASF licenses this file<\/span><\/span>\n * to you under the Apache License, Version 2.0 (the<\/span><\/span>\n * "License"); you may not use this file except in compliance<\/span><\/span>\n * with the License.  You may obtain a copy of the License at<\/span><\/span>\n *<\/span><\/span>\n * http:\/\/www.apache.org\/licenses\/LICENSE-2.0<\/span><\/span>\n *<\/span><\/span>\n * Unless required by applicable law or agreed to in writing,<\/span><\/span>\n * software distributed under the License is distributed on an<\/span><\/span>\n * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY<\/span><\/span>\n * KIND, either express or implied.  See the License for the<\/span><\/span>\n * specific language governing permissions and limitations<\/span><\/span>\n * under the License.<\/span><\/span>\n *\/<\/span><\/span>\nvar<\/span> <\/span>app<\/span> = {<\/span><\/span>\n    <\/span>\/\/ Application Constructor<\/span><\/span>\n    <\/span>initialize<\/span>:<\/span> <\/span>function<\/span>() {<\/span><\/span>\n        <\/span>document<\/span>.<\/span>addEventListener<\/span>(<\/span>'deviceready'<\/span>, <\/span>this<\/span>.<\/span>onDeviceReady<\/span>.<\/span>bind<\/span>(<\/span>this<\/span>), <\/span>false<\/span>);<\/span><\/span>\n    },<\/span><\/span>\n<\/span>\n    <\/span>\/\/ deviceready Event Handler<\/span><\/span>\n    <\/span>\/\/<\/span><\/span>\n    <\/span>\/\/ Bind any cordova events here. Common events are:<\/span><\/span>\n    <\/span>\/\/ 'pause', 'resume', etc.<\/span><\/span>\n    <\/span>onDeviceReady<\/span>:<\/span> <\/span>function<\/span>() {<\/span><\/span>\n        <\/span>this<\/span>.<\/span>receivedEvent<\/span>(<\/span>'deviceready'<\/span>);<\/span><\/span>\n    },<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Update DOM on a Received Event<\/span><\/span>\n    <\/span>receivedEvent<\/span>:<\/span> <\/span>function<\/span>(<\/span>id<\/span>) {<\/span><\/span>\n        <\/span>var<\/span> <\/span>parentElement<\/span> = <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>id<\/span>);<\/span><\/span>\n        <\/span>var<\/span> <\/span>listeningElement<\/span> = <\/span>parentElement<\/span>.<\/span>querySelector<\/span>(<\/span>'.listening'<\/span>);<\/span><\/span>\n        <\/span>var<\/span> <\/span>receivedElement<\/span> = <\/span>parentElement<\/span>.<\/span>querySelector<\/span>(<\/span>'.received'<\/span>);<\/span><\/span>\n<\/span>\n        <\/span>listeningElement<\/span>.<\/span>setAttribute<\/span>(<\/span>'style'<\/span>, <\/span>'display:none;'<\/span>);<\/span><\/span>\n        <\/span>receivedElement<\/span>.<\/span>setAttribute<\/span>(<\/span>'style'<\/span>, <\/span>'display:block;'<\/span>);<\/span><\/span>\n<\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'Received Event: '<\/span> + <\/span>id<\/span>);<\/span><\/span>\n    }<\/span><\/span>\n};<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>initialize<\/span>();<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
We can drop any comment and lines 35-40 of the snippet in order to get:<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
var<\/span> <\/span>app<\/span> = {<\/span><\/span>\n    <\/span>initialize<\/span>:<\/span> <\/span>function<\/span>() {<\/span><\/span>\n        <\/span>document<\/span>.<\/span>addEventListener<\/span>(<\/span>'deviceready'<\/span>, <\/span>this<\/span>.<\/span>onDeviceReady<\/span>.<\/span>bind<\/span>(<\/span>this<\/span>), <\/span>false<\/span>);<\/span><\/span>\n    },<\/span><\/span>\n    <\/span>onDeviceReady<\/span>:<\/span> <\/span>function<\/span>() {<\/span><\/span>\n        <\/span>this<\/span>.<\/span>receivedEvent<\/span>(<\/span>'deviceready'<\/span>);<\/span><\/span>\n    },<\/span><\/span>\n    <\/span>receivedEvent<\/span>:<\/span> <\/span>function<\/span>(<\/span>id<\/span>) {<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'Received Event: '<\/span> + <\/span>id<\/span>);<\/span><\/span>\n    }<\/span><\/span>\n};<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>initialize<\/span>();<\/span><\/span>\n<\/span>\n$<\/span>(<\/span>document<\/span>).<\/span>ready<\/span>(<\/span>function<\/span> () {<\/span><\/span>\n <\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
As you can see I’ve also added the main jQuery function, where we’ll put all our event handlers.<\/p>\n\n\n\n
The views’ container: index.html<\/h2>\n\n\n\n
The file www\/index.html<\/em> is the html file which will hold all our views, that is the various application pages, to use a term more familiar to web developers. This page are anything else other than html divs. Currently, the index.html<\/em> file looks like this:<\/p>\n\n\n\n
HTML<\/span><\/path><\/path><\/svg><\/span>
<!<\/span>DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<!--<\/span><\/span>\n    Licensed to the Apache Software Foundation (ASF) under one<\/span><\/span>\n    or more contributor license agreements.  See the NOTICE file<\/span><\/span>\n    distributed with this work for additional information<\/span><\/span>\n    regarding copyright ownership.  The ASF licenses this file<\/span><\/span>\n    to you under the Apache License, Version 2.0 (the<\/span><\/span>\n    "License"); you may not use this file except in compliance<\/span><\/span>\n    with the License.  You may obtain a copy of the License at<\/span><\/span>\n<\/span>\n    http:\/\/www.apache.org\/licenses\/LICENSE-2.0<\/span><\/span>\n<\/span>\n    Unless required by applicable law or agreed to in writing,<\/span><\/span>\n    software distributed under the License is distributed on an<\/span><\/span>\n    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY<\/span><\/span>\n     KIND, either express or implied.  See the License for the<\/span><\/span>\n    specific language governing permissions and limitations<\/span><\/span>\n    under the License.<\/span><\/span>\n--><\/span><\/span>\n<<\/span>html<\/span>><\/span><\/span>\n    <\/span><<\/span>head<\/span>><\/span><\/span>\n        <\/span><!--<\/span><\/span>\n        Customize this policy to fit your own app's needs. For more guidance, see:<\/span><\/span>\n            https:\/\/github.com\/apache\/cordova-plugin-whitelist\/blob\/master\/README.md#content-security-policy<\/span><\/span>\n        Some notes:<\/span><\/span>\n            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication<\/span><\/span>\n            * https:\/\/ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly<\/span><\/span>\n            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:<\/span><\/span>\n                * Enable inline JS: add 'unsafe-inline' to default-src<\/span><\/span>\n        --><\/span><\/span>\n        <\/span><<\/span>meta<\/span> <\/span>http-equiv<\/span>=<\/span>"Content-Security-Policy"<\/span> <\/span>content<\/span>=<\/span>"default-src 'self' data: gap: https:\/\/ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"<\/span>><\/span><\/span>\n        <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"format-detection"<\/span> <\/span>content<\/span>=<\/span>"telephone=no"<\/span>><\/span><\/span>\n        <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"msapplication-tap-highlight"<\/span> <\/span>content<\/span>=<\/span>"no"<\/span>><\/span><\/span>\n        <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"viewport"<\/span> <\/span>content<\/span>=<\/span>"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"<\/span>><\/span><\/span>\n        <\/span><<\/span>link<\/span> <\/span>rel<\/span>=<\/span>"stylesheet"<\/span> <\/span>type<\/span>=<\/span>"text\/css"<\/span> <\/span>href<\/span>=<\/span>"css\/index.css"<\/span>><\/span><\/span>\n        <\/span><<\/span>title<\/span>><\/span>Hello World<\/span><\/<\/span>title<\/span>><\/span><\/span>\n    <\/span><\/<\/span>head<\/span>><\/span><\/span>\n    <\/span><<\/span>body<\/span>><\/span><\/span>\n        <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"app"<\/span>><\/span><\/span>\n            <\/span><<\/span>h1<\/span>><\/span>Apache Cordova<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n            <\/span><<\/span>div<\/span> <\/span>id<\/span>=<\/span>"deviceready"<\/span> <\/span>class<\/span>=<\/span>"blink"<\/span>><\/span><\/span>\n                <\/span><<\/span>p<\/span> <\/span>class<\/span>=<\/span>"event listening"<\/span>><\/span>Connecting to Device<\/span><\/<\/span>p<\/span>><\/span><\/span>\n                <\/span><<\/span>p<\/span> <\/span>class<\/span>=<\/span>"event received"<\/span>><\/span>Device is Ready<\/span><\/<\/span>p<\/span>><\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"cordova.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n        <\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"js\/index.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n    <\/span><\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
The first thing we’re going to change is the Content-Security-Policy tag: replace it with the following one:<\/p>\n\n\n\n
<meta http-equiv=\"Content-Security-Policy\" content=\"default-src *; style-src 'self' http:\/\/* 'unsafe-inline'; script-src 'self' http:\/\/* 'unsafe-inline' 'unsafe-eval'; media-src *\" \/><\/pre>\n\n\n\n
For sure we ight want to change the title, but for the moment we can leave it as it is.<\/p>\n\n\n\n
Drop out the entire div with class “app” because we don’t need it and obviously you can drop any superflous comment in the file.<\/p>\n\n\n\n
Finally we have to add links to Bootstrap and jQuery. We could use CDN but we’re likely to want our application work even offline, so it is better to download both Bootstrap<\/a> and jQuery<\/a> and proceed to put required files in the correct directories and link them in the html file:<\/p>\n\n\n\n
HTML<\/span><\/path><\/path><\/svg><\/span>
<!<\/span>DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<<\/span>html<\/span>><\/span><\/span>\n    <\/span><<\/span>head<\/span>><\/span><\/span>\n\t\t<\/span><<\/span>meta<\/span> <\/span>http-equiv<\/span>=<\/span>"Content-Security-Policy"<\/span> <\/span>content<\/span>=<\/span>"default-src *; style-src 'self' http:\/\/* 'unsafe-inline'; script-src 'self' http:\/\/* 'unsafe-inline' 'unsafe-eval'; media-src *"<\/span> <\/span>\/><\/span><\/span>\n        <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"format-detection"<\/span> <\/span>content<\/span>=<\/span>"telephone=no"<\/span>><\/span><\/span>\n        <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"msapplication-tap-highlight"<\/span> <\/span>content<\/span>=<\/span>"no"<\/span>><\/span><\/span>\n        <\/span><<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"viewport"<\/span> <\/span>content<\/span>=<\/span>"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"<\/span>><\/span><\/span>\n\t\t<\/span><<\/span>link<\/span> <\/span>rel<\/span>=<\/span>"stylesheet"<\/span> <\/span>href<\/span>=<\/span>"css\/bootstrap.min.css"<\/span> <\/span>\/><\/span><\/span>\n        <\/span><<\/span>link<\/span> <\/span>rel<\/span>=<\/span>"stylesheet"<\/span> <\/span>type<\/span>=<\/span>"text\/css"<\/span> <\/span>href<\/span>=<\/span>"css\/index.css"<\/span>><\/span><\/span>\n        <\/span><<\/span>title<\/span>><\/span>Hello World<\/span><\/<\/span>title<\/span>><\/span><\/span>\n    <\/span><\/<\/span>head<\/span>><\/span><\/span>\n    <\/span><<\/span>body<\/span>><\/span><\/span>\n<\/span>\n        <\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"cordova.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n\t\t<\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"js\/jquery-2.2.3.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n\t\t<\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"js\/bootstrap.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n        <\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>"text\/javascript"<\/span> <\/span>src<\/span>=<\/span>"js\/index.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n    <\/span><\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
That’s all. From here we can start to build any Cordova mobile application adding code, plugins and scripts as we need them.<\/p>\n\n\n\n
Happy coding \ud83d\ude09<\/p>\n\n\n\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Wellcome to this intrductory tutorial about the basic Cordova application setup. You won’t find in this tutorial nothing really interesting. I just wrote it because here I describe the indispensable first steps to setup a new Cordova project in order to follow the various tutorials you can find in my blog. Instead to repeat the […]<\/p>\n","protected":false},"author":3,"featured_media":606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[7],"tags":[],"post_folder":[141],"class_list":["post-598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cordova"],"_links":{"self":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/comments?post=598"}],"version-history":[{"count":0,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/598\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media\/606"}],"wp:attachment":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media?parent=598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/categories?post=598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/tags?post=598"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/post_folder?post=598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}