Hai Sobat!!! Bertemu lagi dengan ADAM-BLOG pada kali ini ADAM-BLOG akan membagikan cara membuat aplikasi chatting realtime dengan Firebase dan Jquery. Sebelum membuat aplikasi chatting tersebut saya akan menjelaskan tentang Firebase dan Jquery. Firebase realtime database adalah database di host di cloud. Firebase didirikan tahun 2011 oleh Andrew Lee, James Tamplin di San Fransisco, California. Firebase membantu Anda Mengembangkan aplikasi seluler dengan baik dan menumbuhkan bisnis anda. Jquery adalah pustaka javascript lintas-platform yang didesain untuk menyederhanakan client-slide scripting pada html. Jquery didirikan pada tanggal 26 Agustus 2006.
Untuk membuat aplikasi chatting realtime ini sobat tidak perlu mendownload software apapun sobat hanya perlu meyiapkan notepad dan browser saja seperti firefox,chrome,internet explorer, dan masih banyak lagi. Apa itu realtime? realtime adalah system pemrosesan data yang tidak boleh ditunda karena waktu sangat terbatas, karena jika ditunda pemrosesan data dapat mengakibatkan sesuatu yang fatal. Ok langsung saja simak tutorial berikut :
- Langakah pertama buka https://console.firebase.google.com
- Kemudian klik add project
- Beri nama project dan pilih negaranya
- Kemudian klik tombol CREATE PROJECT
- Tunggu hingga proses selesai
- Klik continue
- Kemudian klik tab database>klik GET STARTED pada realtime database
- Lalu klik tab rules>ganti scriptnya dengan script di bawah
{
"rules": {
".read": true,
".write": true
}
}
- Kemudian klik tab DATA
- Lalu sobat buat child dengan cara klik tombol + (Name = Chat dan Value = Value)
- Klik add
- Sekarang sobat klik tab Project Overview>klik add firebase to your web app
- Kemudian copy scriptnya>buka notepad>pastekan scriptnya di notepad
- Copy script di bawah
<html>
<head>
<title>chatting realtime</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.message-bubble
{
padding: 10px 0px 10px 0px;
}
.message-bubble:nth-child(even) { background-color: #F5F5F5; }
.message-bubble > *
{
padding-left: 10px;
}
.panel-body { padding: 0px; }
.panel-heading { background-color: #3d6da7 !important; color: white !important; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<div class="container" id="chat_data">
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-4">
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="msg" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBrX700fiv1FfqB61Z7Q39vZ8prBKv_Zj4",
authDomain: "chatting-realtime-8397b.firebaseapp.com",
databaseURL: "https://chatting-realtime-8397b.firebaseio.com",
projectId: "chatting-realtime-8397b",
storageBucket: "chatting-realtime-8397b.appspot.com",
messagingSenderId: "355249132760"
};
firebase.initializeApp(config);
$(document).ready(function(){
var rootchatref = firebase.database().ref('/');
var chatref = firebase.database().ref('/Chat');
chatref.on('child_added', function(snapshot) {
var data = snapshot.val();
//console.log(data);
$('#chat_data').prepend('<div class="row message-bubble"><p class="text-muted">'+data.user+'</p><span>'+data.msg+'</span></div>');
});
});
function writeChat(user, msg) {
// A post entry.
var postData = {
msg : msg,
user: user,
};
// Get a key for a new Post.
var newPostKey = firebase.database().ref().child('Chat').push().key;
// Write the new post's data simultaneously in the posts list and the user's post list.
var updates = {};
updates['/Chat/'+newPostKey] = postData;
return firebase.database().ref().update(updates);
}
$("#msg").keypress(function(e) {
var name = $('#name').val();
var msg = $('#msg').val();
if(e.which == 13) {
if(name == ''){
alert('Isi nama terlebih dahulu..');
$('#name').focus();
return false;
}
if(msg == ''){
alert('Pesan tidakk boleh kosong');
$('#msg').focus();
return false;
}
writeChat(name, msg);
$('#msg').val('');
}
});
</script>
</body>
</html>
- Buka notepad baru lalu pastekan script di atas
- Keterangan : Script yang saya beri warna biru ganti dengan nama project sobat dan Script yang saya beri warna kuning ganti dengan script sobat
- Contoh Script :
- Kemudian save (ctrl + s)
- Keterangan nama harus belakangnya .html misalnya : Chatt.html
- Save as typenya harus All Files
- Kemudian klik Save
Nah sekarang sudah selesai silahkan sobat buka aplikasi tersebut. Chatting realtime yang sobat buat itu online sobat bisa mengirim ke teman sobat dan chatting di aplikasi tersebut. sekian dari saya dan apabila sobat mengalami masalah silahkan berkomentar terimakasih sudah mengunjungi blog saya :)
Membuat Aplikasi Chatting Realtime Dengan Firebase Dan Jquery
Reviewed by Mas Adam Herry
on
March 18, 2018
Rating:
Reviewed by Mas Adam Herry
on
March 18, 2018
Rating:
msih bisa di perlengkap lagi tutor ya
ReplyDeletesangat bagus dan simple, langsung pada intinya. terimakasih tutorialnya.
ReplyDeletemantap gan solder uap
ReplyDeletekog gak bisa tampil y gan chattingnya
ReplyDeleteDi script firebase hapus.
Delete"/script" gan :)
Bisa di buka lewat Android itu gan hasilnya?
ReplyDeleteBisa Gan
Deletemantul gan
ReplyDeleteIjin coba praktekin dulu
ReplyDeleteWork gan thanks
ReplyDelete