An Apache Cordova app with API fetch and bootstrap in five minutes
3 min readNov 8, 2017
Create the project
For instructions on how to install Cordova, refer to Cordova’s documentation.
$ cordova create reader
$ cd reader
$ cordova plugin add cordova-plugin-whitelist
$ cordova prepare
$ cordova platform add browser
$ cordova platform add iosThe app
The hybrid app will fetch a simple json API and display the result as using a native tableview.
Here the source code: https://github.com/adimango/cordova-rss-reader
Bootstrap and jQuery
- jQuery calls the REST service using $.ajax() method
- Bootstrap creates a responsive layout and the articles cards
Copy in the index.html the below snippet.
<div class="container-fluid">
is going to be used to put the articles in the JSON object
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<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, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<title>Reader</title>
</head>
<body>
<body><nav class="navbar navbar-default navbar-fixed-top">
<div class="title">Reader</div>
</nav><div class="container-fluid">
<div id="feeds">
</div></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Now add the JS logic that calls the REST service using $.ajax() method.
$(document).ready(function() {
app.fetchFeed('http://rss.nytimes.com/services/xml/rss/nyt/World.xml');
});var app = {api_url: "https://aqueous-eyrie-16697.herokuapp.com/api/feeds?rss_url=",// deviceready Event HandleronDeviceReady: function() {
console.log('deviceready');
},onAddButtonClicked: function(id) {
var rss_url = document.getElementById(id).value;
if (rss_url == "" || !app.validateURL(rss_url)) {
navigator.notification.alert('Please insert a valid url!', null,'Error','OK');
}else {
app.fetchFeed(rss_url);
}
},// helpervalidateURL: function(url) {
var urlregex =/^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/;
return urlregex.test(url);
},// API callfetchFeed: function(feed_url) {
$.ajax({
type: "GET",
dataType: 'jsonp',
url: app.api_url + feed_url,
success: app.onSuccess,
error: app.onError
});
},// Update DOM on a Success EventonSuccess: function(data) {
if (data.hasOwnProperty('status')) {
navigator.notification.alert('Please insert a valid feed!', null,'Error','OK');
}else{
var items = [];
$.each(data, function(key, val){
var url = val['enclosure'].link
items.push('<div class="card mb-3"> <img class="card-img-top img-responsive" src="'+url+'"> <div class="card-block"> <h4 class="card-title">'+ val.title +'</h4> <p class="card-text">'+ val.description +'</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div>')
});
$('#feeds').html(items.join(''));
}
},onError: function(data, textStatus, errorThrown) {
console.error('Data: ' + data);
console.error('Status: ' + textStatus);
console.error('Error: ' + errorThrown);
},};
Using the emulator you will see the result as above.
cordova emulate ios