So, I just recently making mobile application for my final thesis. Shortly, my project was involved between mobile app and web app. The project is about Laundry Service app where my app able to retrieve data between consumer app and admin/merchant. The consumer app is mobile app has been developed for Android and successfully integrate the database via firebase, but the problem is the way my web app pulls data from consumer app's database?
I'm using basic HTML and simple JS to integrate between mobile and consumer app. Here is my database that already stored from mobile app (android). The Result of Firebase Database from Mobile App
To show the merchant admin Order's data I'm using the table in HTML to view the exact database from the firebase database above. (im using simple html from bootstrap theme)
// firebase function goes here
var config = {
apiKey: "AIzaSyA2YUkMkRm7FUK1AbHGNNeVfBqW4eqBAog",
authDomain: "wishywashy-179b9.firebaseapp.com",
databaseURL: "https://wishywashy-179b9.firebaseio.com",
projectId: "wishywashy-179b9",
storageBucket: "wishywashy-179b9.appspot.com",
messagingSenderId: "962300680842"
};
var table = table || firebase;
firebase.initializeApp(config);
var database = firebase.database();
var hasInit = false;
if(!hasInit){
firebase.initializeApp(config);
hasInit = true;
}
var id = '-LIz6eGHYerOM2tT6NOp';
var ref = database.ref("order/" + id);
ref.on("value", gotOne, errData);
function gotOne(data) {
var order = data.val();
}
// var ref = database.ref("orderId", "shipping", "subtotal", "total");
// ref.on ("value", gotData, errData);
// }
//
// function gotData(data) {
// var orderId, shipping, subtotal, total = data.val();
// // Grab the keys to iterate over the object
// var keys = Object.keys(orderId, shipping, subtotal, total);
//
// for (var i = 0; i < keys.length; i++) {
// var key = keys[i];
// // Look at each fruit object!
// var orderId, shipping, subtotal, total = orderId, shipping, subtotal, total[key];
// }
// }
//
// function errData(err) {
// console.log('Error');
// console.log(err);
// }
(function ($) {
"use strict";
$('.column100').on('mouseover',function(){
var table1 = $(this).parent().parent().parent();
var table2 = $(this).parent().parent();
var verTable = $(table1).data('vertable')+"";
var column = $(this).data('column') + "";
$(table2).find("."+column).addClass('hov-column-'+ verTable);
$(table1).find(".row100.head ."+column).addClass('hov-column-head-'+ verTable);
});
$('.column100').on('mouseout',function(){
var table1 = $(this).parent().parent().parent();
var table2 = $(this).parent().parent();
var verTable = $(table1).data('vertable')+"";
var column = $(this).data('column') + "";
$(table2).find("."+column).removeClass('hov-column-'+ verTable);
$(table1).find(".row100.head ."+column).removeClass('hov-column-head-'+ verTable);
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table V04</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-scrollbar.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table100 ver2 m-b-110">
<div class="table100-head">
<table>
<thead>
<tr class="row100 head">
<th class="cell100 column1">Customer Name</th>
<th class="cell100 column2">Address</th>
<th class="cell100 column3">Service</th>
<th class="cell100 column4">Price</th>
<th class="cell100 column5">Status</th>
</tr>
</thead>
</table>
</div>
<div class="table100-body js-pscroll">
<table>
<tbody>
<tr class="row100 body">
<td class="cell100 column1">Hendy</td>
<td class="cell100 column2">Jl. Hang Lekir 2, No.10A, Kebayoran Baru 12120</td>
<td class="cell100 column3">Shoe Laundry</td>
<td class="cell100 column4">Rp 150.000</td>
<td class="cell100 column5">
<button type="button" onclick="alert('Hello world!')">Accept</button>
<br>
<button type="button" onclick="alert('Hello world!')">Reject</button>
</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Andy</td>
<td class="cell100 column2">Jl. Road Trip 12</td>
<td class="cell100 column3">Helmet Laundry</td>
<td class="cell100 column4">Rp 50.000</td>
<td class="cell100 column5">
<button type="button" onclick="alert('Hello world!')">Accept</button>
<br>
<button type="button" onclick="alert('Hello world!')">Reject</button>
</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Mary</td>
<td class="cell100 column2">Jl. Orchard 122</td>
<td class="cell100 column3">Shoe Laundry</td>
<td class="cell100 column4">Rp 400.000</td>
<td class="cell100 column5">
<button type="button" onclick="alert('Hello world!')">Accept</button>
<br>
<button type="button" onclick="alert('Hello world!')">Reject</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script>
$('.js-pscroll').each(function(){
var ps = new PerfectScrollbar(this);
$(window).on('resize', function(){
ps.update();
})
});
</script>
<!--===============================================================================================-->
<script src="js/table.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
</body>
</html>
Here is the web app looks like: Web App Preview
The question is how I connect them together? I'm just ran out of idea and just an amateur coder. Please help me thanks! :)
Aucun commentaire:
Enregistrer un commentaire