CODING RAKITAN | INSPIRASI CODING TERUPDATE | android studio | laravel

Friday, October 7, 2022

Cara Menghubungkan Openfire (XMPP) dengan Node js

Openfire merupakan sebuah aplikasi yang berada di bawah licensi Apache, bersifat open source. Aplikasi ini bekerja di ruang lingkup internet sebagai chat server / instant messaging server.

Openfire menyediakan layanan chat server menggunakan protokol extensible messaging and presence protocol (XMPP) atau sering disebut Jabber.

Pengguna aplikasi ini dapat mendapatkan ataupun mengirim pesan secara Real Time Collaboration (RTC).

Sebelum memulai menghubungkan Openfire dengan Node js pastikan anda memiliki tools berikut :

1. Openfire

2. Spark (Software Chat)

3. Node Js

Berikut langkah-langkah Cara Menghubungkan Openfire (XMPP) dengan Node js

1. Buka "http://localhost:9090/" di browser kesayangan kalian kemudian login

2. Pada halaman selanjutnya klik menu server -> Server Settings -> HTTPBinding kemudian enable pada dan setting port seperti pada gambar

3. Masuk ke menu User/Groups -> Create New User untuk membuat user baru yang akan di test nantinya

Dalam hal ini kita sudah memiliki akun test dan akun admin, nantinya akun test akan di coba untuk mengirim pesan ke akun admin.

4. Buat project baru node js dengan nama "chat" kemudian buat file index.js dan jadikan sebagai file utama aplikasi yang dibuat

5. Edit file index.js sebagai berikut, dan jangan lupa mengganti code-serverhost dengan kode yang ada di dashboard openfire bagian server -> server manager -> Environment -> Server Host Name (FQDN)

const express = require('express');
var bodyParser = require('body-parser');
const { client, xml } = require("@xmpp/client");
const debug = require("@xmpp/debug");

const app = express();
const PORT = 3000;

const xmpp = client({
    service: "ws://127.0.0.1:7070/ws/",
    domain: "127.0.0.1",
    resource: "",
    username: "test",
    password: "123123",
  });
  
  debug(xmpp, true);
  
  xmpp.on("error", (err) => {
    console.error(err);
  });
  
  xmpp.on("offline", () => {
    console.log("offline");
  });
  
  xmpp.on("stanza", async (stanza) => {
    console.log("terhubung")
    if (stanza.is("message")) {
      await xmpp.send(xml("presence", { type: "unavailable" }));
    //await xmpp.stop();
    }
  });
  xmpp.on("online", async (address) => {
    // Makes itself available
    await xmpp.send(xml("presence"));
  
    // Sends a chat message to itself
    const message = xml(
      "message",
      { type: "chat", to: address },
      xml("body", {}, "hello world"),
    );
    await xmpp.send(message);
  });
  
  xmpp.start().catch(console.error);

app.get('/send', async (req, res)=>{
    const message = xml(
        "message",
        { type: "chat", to: "admin@code-serverhost" },
        xml("body", {}, "Hai"),
          );
      await xmpp.send(message);
    res.send("ok")
})

app.listen(PORT, async (error) =>{
    if(!error){
        console.log("server running || port : "+PORT);
    }else {
        console.log("Error occurred, server can't start", error);
    }
});

Kode yang perlu di perhatikan ada pada

const xmpp = client({
    service: "ws://127.0.0.1:7070/ws/",
    domain: "127.0.0.1",
    resource: "",
    username: "test",
    password: "123123",
  });
  
  debug(xmpp, true);
  
  xmpp.on("error", (err) => {
    console.error(err);
  });
  
  xmpp.on("offline", () => {
    console.log("offline");
  });
  
  xmpp.on("stanza", async (stanza) => {
    console.log("terhubung")
    if (stanza.is("message")) {
      await xmpp.send(xml("presence", { type: "unavailable" }));
    //await xmpp.stop();
    }
  });
  xmpp.on("online", async (address) => {
    // Makes itself available
    await xmpp.send(xml("presence"));
  
    // Sends a chat message to itself
    const message = xml(
      "message",
      { type: "chat", to: address },
      xml("body", {}, "hello world"),
    );
    await xmpp.send(message);
  });

Kode ini berfungsi untuk menghubungkan aplikasi dengan jabber, sekaligus mendapatkan respon apakah telah terhubung atau tidak.

Untuk service bagian

const xmpp = client({
    service: "ws://127.0.0.1:7070/ws/",
    domain: "127.0.0.1",
    resource: "",
    username: "test",
    password: "123123",
  });

Silahkan sesuaikan dengan akses ke jabber atau openfire kalian.

Kemudian untuk melakukan pengetesan pengiriman pesan terdapat pada kode bagian :

  app.get('/send', async (req, res)=>{
      const message = xml(
          "message",
          { type: "chat", to: "admin@code-serverhost" },
          xml("body", {}, "Hai"),
            );
        await xmpp.send(message);
      res.send("ok")
  })

Ketika url yang di akses "http://localhost:3000/send" aplikasi akan otomatis mengirim pesan ke admin@localhost.

Pengiriman pesan ini dapat di modif sesuai kebutuhan entah menggunakan POST atau yang liannya.

6. Jalankan aplikasi dengan mengetikkan perintah "npm start" jika terdapat module yang belum terinstall silahkan install terlebih dahulu misalnya "npm i express", "npm i body-parse", "npm i @xampp/client", "npm i @xampp/debug".

7. Buka aplikasi SPARK dan login sebagai admin untuk nantinya melihat pesan yang terkirim dari test.

8. Buka url "http://localhost:3000/send" di browser, jika berhasil pesan akan otomatis terkirim ke admin

Membuat Single Page Application (SPA) di React JS

SPA merupakan singkatan dari Single Page Application yaitu sebuah istilah untuk aplikasi yang menggunakan satu halaman sebagai tampilan dari halamannnya. Dimana semua aksi reload page di lakukan dalam halaman tersebut tanpa memuat utuh satu halaman. Hal ini dapat membuat web lebih menarik dan tentunya lebih cepat sebab hanya bagian tertentu yang akan di load.

Menggunakan React Js kita bisa memanfaatkan package react-router-dom untuk membuat Single Page Application. Berikut cara Membuat Single Page Application (SPA) di React JS

1. Menginstall package dengan mengetikkan perintah di bawah :


npm i react-router-dom

2. Edit file src/App.js seperti Berikut

import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Link, Route, Routes} from 'react-router-dom'
import Home from './Home';
import About from './About';
import Profile from './Profile';

function App() {
  return (
    <div className="App">
      <Router>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/profile">Profile</Link>
          </li>
        </ul>
        <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/about' element={<About/>}/>
          <Route path='/profile' element={<Profile/>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

3. Buat Home.js

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>Home</div>
    )
  }
}

4. Buat About.js

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
      <div>About</div>
    )
  }
}

5. Buat Profile.js

import React, { Component } from 'react'

export default class Profile extends Component {
  render() {
    return (
      <div>Profile</div>
    )
  }
}

6. Jalankan aplikasi dengan perintah npm start

Syntax CRUD Mysql pada Django Python

Sebelumnya kita pernah membahas tentang Cara Menghubungkan Database Mysql dengan Django maka pada kesempatan kali ini kita akan membahas Syntax CRUD Mysql pada Django Python. CRUD (Create Read Update and Delete) merupakan hal dasar yang harus dimiliki untuk dapat membuat aplikasi nntinya.

Sebelum memulai terlebih dahulu kita harus membuat model kemudian melakukan migrate ke database sama halnya ketika menggunakan Laravel.

Edit file models.py

from django.db import models

# Create your models here.
class user(models.Model):
    name= models.CharField(max_length=255)
    username= models.CharField(max_length=255)
    email= models.CharField(max_length=255) 
    created_at = models.DateTimeField(auto_now_add=True)

    class Meta:
        db_table = 'user'

Setelah membuat model ketikkan perintah di bawah untuk melakukan migrasi.

python manage.py makemigrations

Kemudian ketikkan

python manage.py migrate

Berikut Syntax CRUD Mysql pada Django Python

Insert Data ke Database

Buat file baru bernama FormUser.py untuk melakukan validasi form.

from dataclasses import field
from django import forms
from .models import kata_baku

class FormUser(forms.ModelForm):   
    class Meta:
        model = user
        fields = '__all__'
        error_messages = {
            'name' : {
                'required':'Name Harus di Isi'
            },
            'username' : {
                'required':'Username Harus di Isi'
            },
            'email' : {                'required':'Email Harus di Isi'
            },
 
        }

Kemudian aksi untuk melakukan insert database adalah sebagai berikut :

def add_data(request):
    form = FormUser(request.POST or None, request.FILES or None)
    if request.method == "POST":
        if form.is_valid():
            form.save()
            return JsonResponse({'result':'success'})
        else:
            return HttpResponse(form.errors)

Select Data dari Database

Semua data :

def data(request):
    get = user.objects.all()
    data ={
        'title':"Data",
        'data' : get
    }
    return JsonResponse({'result':'success', 'data':data})

Berdasarkan parameter yang dipilih :

 data = user.objects.filter(username="coding")
 atau 
 data = user.objects.get(username="coding")   
        

Menggunakan fungsi Where <>

 
data = user.objects.filter(~Q(username="coding"))
        

Where like :

 data = user.objects.filter(username__contains="codin")
        

Menggunakan fungsi Where In :

 data = user.objects.filter(username__in=dataArray)
        

Menggunakan fungsi Where not In :

 
data = user.objects.filter(~Q(username__in=dataArray))
        

Update Data

 
data = user.objects.get(id=1)
data.username="blog"
data.save() 
        

Delete data

 data = user.objects.get(id=1)    
 data.delete()

Membuat Project Baru dengan Next Js

Next Js merupakan framework frontend berbasis React. Framework ini di ciptakan untuk mengatasi masalah client-side rendering yang dimiliki React.

Seperti yang diketahui website yang dibuat menggunakan React Js terasa lebih ringan. Hal ini dikarenakan React lebih efisien dalam mengupdate halaman, dimana yang di update hanya bagian tertentu saja tanpa meload satu halaman. Untuk mendapatkan semua itu client pertama kali harus memuat semua file javascript sebelum konten halaman di tampilkan. Jika file Js cukup besar maka perlu waktu yang lama untuk meload website pertama kali. Hal inilah yang menjadi salah satu kekurangan dari React Js.

Untuk mengatasi masalah tersebut dapat menggunakan teknik pre-rendering yaitu Server Side Rendering (SSR) dan Static Side Generator. Next js mendukung untuk melakukan kedua teknik pre-rendering tersebut.

Membuat Project Baru Next Js

Berikut langkah-langkah untuk membuat project baru dengan Next js

Jalankan perintah berikut pada CMD, atau Terminal


    npx create-next-app hello

"hello" merupakan nama project

Jika muncul seperti pada gambar, tekan enter, hal ini untuk menginstall dependencies yang dibutuhkan.

Untuk menjalankan project masuk ke folder project yang telah dibuat menggunakan terminal kemudian ketikkan perintah berikut


npm run dev

GIT merupakan sebuah sistem pengontrol versi (Version Control System) pada proyek perangkat lunak. Tools ini diciptakan oleh Linus Torvalds yang sangat membantu dalam pengerjaan project-project besar.

Tentunya kalian sudah cukup paham mengenai apa itu GIT, disini kita tidak akan membahas lebih jauh tentang apa itu GIT, melainkan perintah-perintah dasar dalam menggunakan git.

Berikut perintah-perintah dasar GIT

No.	Perintah	Kegunaan
1.	git config --global	Perintah untuk mengatur configurasi git seperti email, algoritma untuk diff, username, format file, dll. Contoh : git config --global user.email coding@coding.com
2.	git init	Untuk membuat repositori baru
3.	git add	Untuk menambahkan file baru ke repositori
4.	git clone file@domain.com/path/repositori	Git clone untuk melakukan cloningan dari repositori dari server ke lokal
5.	git commit -m "keterangan"	Digunakan untuk menyimpan perubahan yang telah di lakukan
6.	git status	Perintah untuk menampilkan daftar file yang berubah bersama dengan file yang ingin di tambahkan atau di-commit
7.	git push	Digunakan untuk mengirim perubahan ke master branch. Contoh untuk push ke branch v1 : git branch origin v1
8.	git checkout	Untuk berpindah branch
9.	git checkout -b nama_branch	Membuat branch baru
10.	git remote -v	Melihat url repository yang sedang di remote
11.	git branch	Melihat branch yang sedang digunakan
12.	git branch -d nama_branch	Menghapus branch sesuai nama
13.	git pull	Menarik dan menggabungkan semua perubahan yang ada di remote repositori ke lokal
14.	git marge	Menggabungkan branch yang di pilih ke branch yang sedang aktif atau digunaka. Contoh : git marge Master
15.	git reset --hard HEAD	Mereset sesuai dengan repositori paling baru.

Instalasi Vue Js dan Membuat Project Baru

Vue Js merupakan salah satu framework atau kerangka kerja javascript yang bekerja di sisi front end. Framework ini bersifat open source yang dapat digunakan untuk mempermudah dalam membuat antar muka website

Instalasi

Hal pertama yang wajib di pelajari adalah cara Instalasi Vue.js untuk membuat project baru. Ada dua cara yang bisa digunakan dalam instalasi vue.js yaitu menggunakan CDN :


    
    <html lang="en">
      <head>
        <meta charset="UTF-8"></meta>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
        <title>Aplikasi Vue JS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <h1>{{pesan}}</h1>
        </div>
        <script>
          const App = new Vue({
            el: '#app',
            data: {
              pesan: 'Hello World!',
            }
          })
        </script>
      </body>
    </html>

Selain itu kita bisa menggunakan cara kedua Vue CLI, untuk caranya anda perlu menginstall node js terlebih dahulu kemudian menjalankan perintah berikut :


    npm i -g @vue/cli @vue/cli-service-global

atau jika anda menggunakan yarn :


    yarn global add @vue/cli @vue/cli-service-global

Membuat project baru

Membuat project baru dengan vue js sangatlah mudah, jika anda menggunakan CDN anda tinggal menambahkan code seperti di atas. Jika anda menggunakan CLI anda tinggal menjalankan perintah berikut :


vue create new-app

new-app merupakan nama project yang akan dibuat. Setelah project berhasil di buat, gunakan perintah "npm run serve" untuk menjalankan project.

Menghubungkan Bot Telegram dengan Spreadsheet

Tahukah kalian bahwa kita bisa membuat aplikasi dengan menggabungkan bot Telegram dengan Spreadsheet, caranya pun terbilang sangat mudah. Sebelum kita lanjut, ada baiknya mengetahui terlebih dahulu apa itu bot telegram.

bot telegram adalah fitur ataupun akun yang ada di telegram dimana akun ini dioperasikan seperti bot atau AI yang dapat di desain sesuai kebutuhan. Salah satu fungsi yang paling banyak digunakan adalah menjawab pesan yang masuk secara otomatis.

Pada postingan kali ini kita akan membuat sebuah bot telegram yang dapat mengambil ataupun menginput data ke spreadsheet layaknya database.

Silahkan ikuti langkah-langkah di bawah ini :

1. Buat akun bot telegram, silahkan ketikkan "BotFather " di pencarian telegram kemudian pilih yang bercentang biru.

2. Tekan tombol start kemudian masukkan nama yang terdiri dari 5 - 32 karakter, kemudian masukkan username yang di inginkan.

3. Selanjutnya bila berhasil akan muncul respon berisi token dari botFather, silahkan simpan token ini.

4. Buka spreadsheet kemudian buat file baru.

5. Isi file baru sesuai gambar di bawah :

6. Klik Extensi -> Apps Script

7. Selanjutnya akan muncul editor seperti pada gambar di bawah :

8. Klik icon tambah pada library kemudian tambahkan Google Sheets API

9. Edit Kode.gs seperti berikut


var token = "MASUKKAN_TOKEN_BOT_ANDA_DISINI";
var SheetID = "MASUKKAN_SHEET_ID_DISINI";
var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";

function doPost(e) { 
 
  var stringJson = e.postData.getDataAsString();
  var updates = JSON.parse(stringJson);
  var pesan_dari_bot = updates.message.text;
  var jenisAksi = pesan_dari_bot.toLowerCase();
  var id_pesan = updates.message.chat.id;


  switch(jenisAksi) {
    case "ambil_data":
    	var data = AmbilDataDariSheet();
    	sendText(id_pesan,data);
    	break;
    case "input_data":
    	InputDataKeSheet("Pulpen", "A2");
    	InputDataKeSheet("Alat tulis", "B2");
    	InputDataKeSheet(10, "C2");
    	InputDataKeSheet(2000, "D2");
    	break;
    default:  
    	sendText(id_pesan,"Aksi tisak ada!");    
  }  

  
}

function InputDataKeSheet(isi, posisi){
  	var request = {
        majorDimension: "ROWS",
        values: [[isi]]
    };

 	Sheets.Spreadsheets.Values.update(
      request,
      SheetID,
      "Sheet1!"+posisi,
      {valueInputOption: "USER_ENTERED"}
    );
    return true;
}

function AmbilDataDariSheet(){
	var data = "";
    var rows = Sheets.Spreadsheets.Values.get(SheetID, "Sheet1!A2:D2").values;
    for (var row = 0; row < rows.length; row++) {
    	data = "Nama Barang : " + rows[row][0] + "\n\n" +
    		"Deskripsi : " + rows[row][1] + "\n" +
    		"Jumlah : " + rows[row][2] + "\n" +
    		"Harga Satuan : " + rows[row][3] + "\n";
    }
    return data;
}

function setbot(){
  var link = "https://api.telegram.org/bot"+token+"/setWebhook?url="+url;
  var a = UrlFetchApp.fetch(link);
  Logger.log(a);
}


function sendText(chatid,text,replymarkup){
var data = {
    method: "post",
    payload: {
      method: "sendMessage",
      chat_id: String(chatid),
      text: text,
      parse_mode: "HTML",
      reply_markup: JSON.stringify(replymarkup)
    }
  };
  UrlFetchApp.fetch('https://api.telegram.org/bot' + token + '/', data);
}

Isi token sesuai token bot telegram yang telah dibuat. SheetID bisa di dapatkan pada url Spreadsheet anda pada bagian seperti pada gambar di bawah :

Sedangkan url bisa akan ada setelah melakukan deployment.

10. Klik Terapkan -> Deployment baru

11. Klik ikon pengaturan kemudian pilih aplikasi web

12. Isi deskripsi, dan pilih yang memiliki akses sebagai "siapa saja" kemudian klik terapkan

13. Klik Izinkan akses kemudian login ke akun google anda dan berikan akses.

Jika muncul seperti gambar di ata klik advance kemudian "Go to Project tak berjudul (unsafe)". Selanjutnya allow pada halaman selanjutnya.

14. Selanjutnya akan muncul ID penerapan dan URL. Silahkan salin url untuk ditempel pada codingan yg telah dibuat tadi.

15. Paste url ke bagian:


var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";

16. Selanjutnya pada bar pilih save kemudian pilih setBot kemudian klik jalankan

Hal ini untuk membuat bot telegram berinteraksi dengan spreadsheet yang telah dibuat dan bisa menjalankan kode.

Perlu di perhatikan setiap kali anda melakukan perubahan pada kode silahkan save, kemudian ulangi langkah 10 - 16. Jika tidak kode perubahan tidak akan diterapkan.

Kurang lebih contohnya akan tampak seperti berikut :

Friday, October 7, 2022

Cara Menghubungkan Openfire (XMPP) dengan Node js

Tuesday, October 4, 2022

Membuat Single Page Application (SPA) di React JS

Monday, October 3, 2022

Syntax CRUD Mysql pada Django Python

Insert Data ke Database

Select Data dari Database

Update Data

Delete data

Saturday, October 1, 2022

Membuat Project Baru dengan Next Js

Membuat Project Baru Next Js

Perintah-perintah Dasar Git dan Penjelasannya

Friday, September 30, 2022

Instalasi Vue Js dan Membuat Project Baru

Instalasi

Membuat project baru

Tuesday, September 6, 2022

Menghubungkan Bot Telegram dengan Spreadsheet

Halaman FB

Labels

Blog Archive