CategoriesProgramming

Realtime Chat dengan Html, Javascript dan Socket.io

Realtime Chat atau Realtime Data sering disebut dalam dunia programing adalah suatu hal akan sering digunakan dan sangat diperlukan. Dalam kesempatan ini kita akan membahas dan langsung mem praktik kan Realtime Data dengan Chat App.

Senjata yang akan kita gunakan adalah:

1. HTML

     Sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. Platform umum yang sering digunakan sehingga akan mudah untuk di praktik kan.

2. Javascript

     Javascript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript biasanya digunakan untuk olah data secara Client ke server namun juga bisa sebagai server ke client. Disini Javascript akan berfungsi GET POST data dari client atau HTML.

3. Socket.io

Apa itu Socket.Io?
Socket.io ada suatu library dari Node.JS yang berfungsi untuk menjembatani realtime data, Namun jangan salah socket.io tidak hanya bisa digunakan di Node.js. Socket.io bisa digunakan di multiplatform dan yang Paling penting Gratis tanpa Batasan jumlah / Unlimited.

Silahkan Berkenalan dengan Socket.io Disini : https://socket.io/

Ayo kita praktikan secara langsung:

1. Buat file index.html.

2. Initialisasi dahulu package.json di terminal.

   $npm init

3. Install socket.io dalam depedencies

$ npm i socket.io

4. install nodemon dalam dependencies, nodemon berfungsi untuk menjalankan Server socket.io.

$npm i --save-dev nodemon

5. Set devStart di package.json untuk menjalankan server nodemon.

"devStart": "nodemon server.js"
{
  “name”“socket.io”,
  “version”“1.0.0”,
  “description”“”,
  “main”“index.js”,
  “scripts”: {
    “devStart”“nodemon server.js”
  },
  “author”“Dhendik”,
  “license”“ISC”,
  “dependencies”: {
    “socket.io”“^2.3.0”
  },
  “devDependencies”: {
    “nodemon”“^2.0.3”
  }
}

 

6. Coding script di Index.html.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <title>Realtime Chat</title>
  <script defer src=“http://localhost:3000/socket.io/socket.io.js”></script>
  <script defer src=“client.js”></script>
  <style>
    body {
      padding0;
      margin0;
      displayflex;
      justify-contentcenter;
    }
    #message-container {
      width80%;
      max-width1200px;
    }
    #message-container div {
      background-color#CCC;
      padding5px;
    }
    #message-container div:nth-child(2n) {
      background-color#FFF;
    }
    #send-container {
      positionfixed;
      padding-bottom30px;
      bottom0;
      background-colorwhite;
      max-width1200px;
      width80%;
      displayflex;
    }
    #message-input {
      flex-grow1;
    }
  </style>
</head>
<body>
  <div id=“message-container”></div>
  <form id=“send-container”>
    <input type=“text” id=“message-input”>
    <button type=“submit” id=“send-button”>Send</button>
  </form>
</body>
</html>

 

7. Buat Server dahulu server.js untuk initialisasi socket.io.

const io = require(‘socket.io’)(3000)
const users = {}
// Register User yang baru Masuk ke server dan melakukan Join
io.on(‘connection’socket => {
  socket.on(‘new-user’name => {
    users[socket.id] = name
    socket.broadcast.emit(‘user-connected’name)
  })
  socket.on(‘send-chat-message’message => {
    socket.broadcast.emit(‘chat-message’,
message: messagename: users[socket.id] })
  })
  socket.on(‘disconnect’, () => {
    socket.broadcast.emit(‘user-disconnected’users[socket.id])
    delete users[socket.id]
  })
})
 

 

8. Buat client dahulu client.js disini menggunakan Javascript untuk GET POST data di HTML.

const socket = io(‘http://localhost:3000’)
const messageContainer = document.getElementById(‘message-container’)
const messageForm = document.getElementById(‘send-container’)
const messageInput = document.getElementById(‘message-input’)
//Client script untuk register User Baru
const name = prompt(‘What is your name?’)
appendMessage(‘You joined’)
socket.emit(‘new-user’name)
//Chat message client / User
socket.on(‘chat-message’data => {
  appendMessage(`${data.name}${data.message}`)
})
//Chat message pertanda user baru join
socket.on(‘user-connected’name => {
  appendMessage(`${name} connected`)
})
//Chat Message pertanda User disconnected
socket.on(‘user-disconnected’name => {
  appendMessage(`${name} disconnected`)
})
//Event post untuk Submit Message
messageForm.addEventListener(‘submit’e => {
  e.preventDefault()
  const message = messageInput.value
  appendMessage(`You: ${message}`)
  socket.emit(‘send-chat-message’message)
  messageInput.value = 
})
//Event get misal ada message Baru dari User Lain 
function appendMessage(message) {
  const messageElement = document.createElement(‘div’)
  messageElement.innerText = message
  messageContainer.append(messageElement)
}

 

9. Jalankan Server socket.io

$npm run devStart

10. Berikut Hasilnya.  Gambar dibawah menunjukan simulasi chat dari 2 User yang berbeda dan bisa Realtime.

Gmbar ini menunjukan simulasi chat dari 2 User yang berbeda

Jika ingin mencoba sendiri Anda bisa Clone Git dan ikuti arahannya: https://gitlab.com/Sendok/realtimechat.git

Sekian artikel yg bisa dibuat semoga bermanfaat.

Wassalamualaikum.

CategoriesProgramming

Instalasi Anaconda Di Linux Tanpa User Root

Anaconda telah menjadi platform Python standar dalam bidang Data Science. Anaconda menyediakan berbagai packages yang berkaitan dengan Data Science seperti numpy, ternsorflow, matplotlib, dll. Saya pribadi lebih menyukai menggunakan Anaconda daripada package manager Python lainnya ketika membuat program yang berkaitan dengan Data Science.

Dalam tulisan ini saya akan memandu Anda dalam melakukan instalasi Anaconda dalam sistem Operasi Linux tanpa memerlukan hak akses user root. Dalam tulisan ini saya akan menggunakan Ubuntu Linux 18.04, namun secara umum cara instalasi ini akan sama di distribusi Linux lainnya.

Tulisan ini saya buat berdasarkan panduan di dokumentasi Anaconda dengan beberapa penyesuaian.

Unduh instalasi Anaconda

Langkah pertama adalah mengunduh instalasi Anaconda Python 3.7 versi 64 Bit (x86) pada alamat berikut https://www.anaconda.com/distribution/#linux, lalu simpan di directory home anda, misal /home/saya/anaconda.

Anda bisa mengunduhnya menggunakan perintah wget, misalnya

$ mkdir /home/saya/anaconda
$ cd /home/saya/anaconda
$ wget https://repo.anaconda.com/archive/Anaconda3-2020.02-Linux-x86_64.sh

Pada contoh diatas, versi Anaconda yang saya unduh adalah 2020.02

Proses instalasi Anaconda

Jalankan perintah file instalasi tersebut. Berikut adalah contoh peirntah yang dapat anda gunakan untuk menjalankan file instalasi Anaconda versi 2020.02.

$ bash /home/saya/anaconda/Anaconda3-2020.02-Linux-x86_64.sh

Berikut ini adalah contoh tampilan awal proses instalasi. Anda akan diminta membaca license.

Welcome to Anaconda3 2020.02

In order to continue the installation process, please review the license
agreement.
Please, press ENTER to continue
>>>

Tekan ENTER

===================================
End User License Agreement - Anaconda Individual Edition
===================================

Copyright 2015-2020, Anaconda, Inc.

All rights reserved under the 3-clause BSD License:

This End User License Agreement (the "Agreement") is a legal agreement between y
ou and Anaconda, Inc. ("Anaconda") and governs your use of Anaconda Individual E
dition (which was formerly known as Anaconda Distribution).

Subject to the terms of this Agreement, Anaconda hereby grants you a non-exclusi
ve, non-transferable license to:

  * Install and use the Anaconda Individual Edition (which was formerly known as
 Anaconda Distribution),
  * Modify and create derivative works of sample source code delivered in Anacon
da Individual Edition; and
  * Redistribute code files in source (if provided to you by Anaconda as source)
 and binary forms, with or without modification subject to the requirements set 
forth below.

--More--

Tekan Q.

Do you accept the license terms? [yes|no]
[no] >>>

Ketik yes lalu tekan ENTER.

Anaconda3 will now be installed into this location:
/home/saya/anaconda3

  - Press ENTER to confirm the location
  - Press CTRL-C to abort the installation
  - Or specify a different location below

[/home/saya/anaconda3] >>>

Proses instalasi akan dilakukan ke dalam directory /home/saya/anaconda3. Tekan ENTER bila menyetujui lokasi instalasi.

. . .
Preparing transaction: done
Executing transaction: done
installation finished.
Do you wish the installer to initialize Anaconda3
by running conda init? [yes|no]
[no] >>> 

Ketik yes lalu ENTER untuk menjalankan proses conda init secara otomatis.

no change     /home/saya/anaconda3/condabin/conda
no change     /home/saya/anaconda3/bin/conda
no change     /home/saya/anaconda3/bin/conda-env
no change     /home/saya/anaconda3/bin/activate
no change     /home/saya/anaconda3/bin/deactivate
no change     /home/saya/anaconda3/etc/profile.d/conda.sh
no change     /home/saya/anaconda3/etc/fish/conf.d/conda.fish
no change     /home/saya/anaconda3/shell/condabin/Conda.psm1
no change     /home/saya/anaconda3/shell/condabin/conda-hook.ps1
no change     /home/saya/anaconda3/lib/python3.7/site-packages/xontrib/conda.xsh
no change     /home/saya/anaconda3/etc/profile.d/conda.csh
modified      /home/saya/.bashrc

==> For changes to take effect, close and re-open your current shell. <==

If you'd prefer that conda's base environment not be activated on startup, 
   set the auto_activate_base parameter to false: 

conda config --set auto_activate_base false

Thank you for installing Anaconda3!

=================================================================

Anaconda and JetBrains are working together to bring you Anaconda-powered
environments tightly integrated in the PyCharm IDE.

PyCharm for Anaconda is available at:
https://www.anaconda.com/pycharm

Proses instalasi selesai. Silahkan tutup dan buka kembali shell atau terminal yang Anda gunakan untuk melihat hasil instalasi. Berikut adalah contoh tampilan shell saya ketika saya buka kembali

(base) saya@algostudio:~$ 

(base) menandakan bahwa saat ini anda sedang menggunakan conda environments bernama base.

Membuat conda environments baru

Saya sangat menyarankan untuk membuat conda environments baru untuk program Data Science yang anda gunakan. Tujuannya adalah agar memudahkan dalam mengelola package yang kita gunakan dalam program tersebut. Karena terkadang kita memerlukan versi package yang spesifik untuk tiap program.

Berikut adalah contoh perintah untuk membuat conda environments baru bernama datascience.

$ conda create --name datascience

Berikut tampilan awal proses pembuatan conda environments.

Collecting package metadata (current_repodata.json): done
Solving environment: done

## Package Plan ##

  environment location: /home/saya/anaconda3/envs/datascience

Proceed ([y]/n)?

Tekan y untuk menyetujui pembuatan conda environment baru.

Preparing transaction: done
Verifying transaction: done
Executing transaction: done
#
# To activate this environment, use
#
#     $ conda activate datascience
#
# To deactivate an active environment, use
#
#     $ conda deactivate

conda environments baru bernama datascience telah selesai dibuat. Jalankan perintah berikut ini untuk mengaktifkan conda environments tersebut.

$ conda activate datascience

Kini tampilan shell anda akan berubah sperti ini.

(datascience) saya@algostudio:~$

Silahkan membaca dokumentasi Anaconda ini untuk penjelasan lebih lanjut.

Instalasi conda package

Anda bisa mencari conda package yang anda perlukan di https://anaconda.org/anaconda/repo. Misalnya, tensorflow dapat anda temukan di https://anaconda.org/conda-forge/tensorflow.

Untuk melakukan instalasi tensorflow Anda cukup mengaktifkan conda environments tempat tensorflow tersebut akan Anda install, misalnya

$ conda activate datascience

Kemudian jalankan perintah

$ conda install -c conda-forge tensorflow

Daftar conda package yang akan ditambahkan akan ditampilkan.

...

tensorflow         pkgs/main/linux-64::tensorflow-2.1.0-mkl_py37h80a91df_0

...

Proceed ([y]/n)?

Ketik y dan ENTER untuk melanjutkan proses instalasi. Setelah selesai, tensorflow telah siap digunakan.

Menghapus conda environments

Untuk menghapus conda environments yang sudah tidak digunakan, misalnya datascience yang kita buat sebelumnya, kembalilah ke conda environments base (atau conda environments lain selain yang anda hapus) dengan perintah:

$ conda activate base

Lalu hapus conda environments dengan perintah:

$ conda remove --name datascience --all

Anda akan diminta melakukan konfirmasi penghapusanconda environments.

Proceed ([y]/n)?

Ketik y dan ENTER untuk melanjutkan proses penghapusan.

Preparing transaction: done
Verifying transaction: done
Executing transaction: done

Proses penghapusan conda environment selesai.

Silahkan membaca dokumentasi Anaconda ini untuk penjelasan lebih lanjut.


CategoriesProgramming

Menambah IdentityUser Property di Identity ASP.Net Core

Identity pada ASP.Net Core ada untuk memudahkan kita menambahkan user dan mengatur user management pada website. Bahkan Identity sudah bisa menghandle  TwoFactorAuthentication, ExternalLogins dll. Secara default, identity akan membuat user dengan bentuk model seperti berikut.

Bisa kita lihat IdentityUser hanya terdiri dari beberapa property dan tidak bisa kita ubah. Lalu bagaimana jika kita butuh untuk menambah property?

Continue reading