Skip to content

Instantly share code, notes, and snippets.

@beebs93
Created June 21, 2012 04:23
Show Gist options
  • Save beebs93/2963823 to your computer and use it in GitHub Desktop.
Save beebs93/2963823 to your computer and use it in GitHub Desktop.
Simple example of integrating Firebase with Appcelerator
// Set master UI background color
Ti.UI.backgroundColor = '#000';
// Set vars
var winMain,
vwWebMain,
lblValue,
vwBtn;
// Set global event listener as Firebase callback
Ti.App.addEventListener('fireBaseCallback', function(e){
Ti.App.info('Firebase message: ' + e.message);
lblValue.text = e.message;
});
// Initialize main window
winMain = Ti.UI.createWindow({
backgroundColor: 'blue'
});
// Load webview (with Firebase-infused goodness)
vwWebMain = Ti.UI.createWebView({
url: Ti.Filesystem.resourcesDirectory + 'web/firebase.html',
width: 1,
height: 1,
visible: false // This will simply act as our Firebase vehicle so no need to show it
});
// Label to show the latest value
lblValue = Ti.UI.createLabel({
text: 'Default text',
width: 'auto',
height: 'auto',
font: {
fontSize: 18
},
color: '#fff'
});
// Button to retrieve the latest value
vwBtn = Ti.UI.createView({
width: 100,
height: 100,
backgroundColor: '#fff',
top: 10,
left: 10
});
vwBtn.addEventListener('click', function(e){
var sLatestValue = vwWebMain.evalJS('sValue');
alert('Latest value: ' + sLatestValue);
});
// Consolidate views
winMain.add(vwWebMain);
winMain.add(lblValue);
winMain.add(vwBtn);
// Open window
winMain.open();
<!-- Source of Ti.UI.Webview -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firebase</title>
<script type="text/javascript" src="js/firebase.js"></script>
</head>
<body>
<script type="text/javascript">
var sFbRef = 'http://YOUR_FIREBASE_REF_URL_HERE';
var oFb = new Firebase(sFbRef);
var sValue;
oFb.on('child_added', function(e) {
var oMsg = e.val();
sValue = oMsg.value;
Ti.App.fireEvent('fireBaseCallback', {
message: sValue
});
});
</script>
</body>
</html>
<!-- Web-based app example -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firebase</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/firebase.js"></script>
</head>
<body>
<div>
<a id="addEntry" href="javascript:{}" title="Add entry">Add entry</a>
</div>
<div id="message"></div>
<script type="text/javascript">
jQuery(document).ready(function($){
var oFb = new Firebase('http://YOUR_FIREBASE_REF_URL_HERE');
var tmrMsg = null;
var $message = $('div#message');
var $link = $('a#addEntry');
$link.on('click', function(e){
var oDate = new Date();
var iTs = Math.floor(oDate.getTime()/1000);
oFb.push({
name: 'Name_' + iTs,
value: 'Value_' + iTs
});
clearTimeout(tmrMsg);
$message.stop().fadeTo(0, 1).text('Data pushed');
tmrMsg = setTimeout(function(){
$message.fadeTo(1000, 0);
}, 2000);
});
});
</script>
</body>
</html>
@tiui1301mail
Copy link

tiui1301mail commented Apr 20, 2017

sir this code is not working
i am getting these error ..
couldn't load URL: app://com.dev.firebaseReadWrite/Users/imac5/Library/Developer/CoreSimulator/Devices/BD26069A-EC33-4DBF-845B-978D00653074/data/Containers/Bundle/Application/AF7C5B54-725A-4FA6-A890-CC05325925F6/firebaseReadWrite.app/web/firebase.html
..

i am coping these are three file in my resource.

u should have to upload also your firebase structure. , i think it ll be helpful.
THANKS AND REGARD
Nitin Sharma

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment