DEV Community: Surya Tech

Cara membuat proxy middleware untuk cross API.

Surya Tech — Wed, 29 Dec 2021 01:48:12 +0000

Ada beberapa hal yang menjadi kendala ketika kita melakukan fetch API dengan backend yang disetup secara strict. Salah satunya adalah crossOrigin handling. Maka dari itu terkadang kita perlu menambahkan middleware ketika ingin melakukan komunikasi server to server. Pada umumnya, middleware adalah authentication, untuk mengecek apakah seseorang yang mengakses suatu web sudah log-in dan memiliki hak akses atau belum. Web hanya akan bisa berjalan diatas Web Server. Mari kita coba membuat middleware agar dapat berkomunikasi server-to server.

Berikut tech yang diperlukan :

express
htt-proxy-middleware

Berikut sample code :

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");

const app = express();

const proxy = createProxyMiddleware({
target: "https://api.dsm-staging.app.dasiot.site",
changeOrigin: true,
});

app.use("/api", proxy);

app.listen(5000);

Demikian cara untuk melakukan proxy pada server to server communication

This is the reason why I prefer having a mentor over buying expensive courses!

Surya Tech — Sat, 16 Oct 2021 00:55:52 +0000

This may sound cliché to you but I'm sure many of us have experienced the same thing. I myself just got a job as a front end and 3d programmer at a startup. This startup only has 4 employees including me. The other employees already have 5-10 years of experience, only me as a fresh graduate. In my journey as a junior I encountered many obstacles. Lately the problem is that I have to face to face with a CEO who is very critical and has a lot of requests. it makes a burden for me. The way I solve this problem is to tell my abilities indirectly. I think it's normal to feel unsure of your own abilities because you don't have experience. At that point, I felt very deprived and didn't know where to turn for help.

The other 2 programmers are very reliable backend programmers. They are very confident in what they are doing. here I am like Joma Tech and they are the subscribers. But they couldn't help me much because they were also busy with their own work. Again I feel more and more pressure because accompanying those who are already very senior. One thing I believed in at the time was that I had to improve.

But everything changed when a senior front end with 4 years of experience came. He is very good at logic and has a solid knowledge of the fundamentals. This is where I aspire to be like him. I started learning to imitate his coding style and the way he solves problems. One thing I admire about him is that he is willing to teach other people. That makes me even more determined to say there is no need to buy expensive courses as long as you have seniors who can teach you many things. If I have money, I'd rather treat my senior than having to buy a new course!.

Mengenal Google Blockly (Semua Orang Bisa Menjadi Programmer)

Surya Tech — Thu, 14 Oct 2021 12:50:09 +0000

Pengenalan Blockly

Pada artikel kali ini saya ingin membahas mengenai google blockly, dimana semua orang bisa menjadi programer karena interfacenya yang mudah dipahami.

Kerumitan dalam bahasa pemrograman membuat google mempunyai inisiatif untuk menemukan suatu metode agar para pemula dapat memahami pemrograman.

Dengan mengubah bahasa pemrograman seperti variable, looping, statements menjadi balok-balok. Untuk menulis suatu program, blok tersebut harus disusun sehingga menjadi suatu scipts terjemahan suatu bahasa pemrograman.

Sejarah blockly

Pengembangan blockly dimulai pada musim kemarau 2011 dan dirilis ke publik untuk pertama kalinya tahun 2012 pada Maker Faire. Blockly sebenarnya didesain untuk menggantikan OpenBlocks yang ada pada App Inventor. Para tokoh yang mengembangkan blockly adalah Neil Fraser, Quynh Neutron, Ellen Spertus, dan Mark Friedman.

Menjadi developer blockly

Dari perspektif pengguna, Blockly adalah cara visual dan intuitif untuk membuat kode. Dari perspektif pengembang, Blockly adalah UI siap pakai untuk membuat bahasa visual yang men-generate kode yang dibuat secara sintaksis yang dibuat pengguna. Blockly dapat mengkonvert blok ke banyak bahasa pemrograman seperti dibawah ini :

JavaScript
Python
PHP
Lua
Dart

Keunggulan Google Blockly

Blockly adalah salah satu visual programming yang akan terus berkembang dan populer. Dalam mengambil keputusan atau decision making dalam aplikasi sangatlah penting, Blockly ini mempunyai kemampuan dalam membuat suatu keputusan dengan mudah.

Kode yang Exportable. Pengguna dapat meng-extract block mereka ke berbagai bahasa pemrograman lain sehingga blockly dapat diterapkan di berbagai macam platform yang ada.
Open source. Segala sesuatu yang ada pada blockly bersifat terbuka. Kita dapat mengedit block baik mengubah code, warna, jenis dan menambahkannya di site yang kita miliki.
Extensible. Dengan API pada blockly kita dapat mendambahkan berbagai macam block khusus atau jika ingin menghapus block yang tidak dibutuhkan
Mempunyai kapabilitas yanag tinggi. Blockly bukan mainan. Anda dapat mengimplementasikan tugas pemrograman yang rumit seperti menghitung standar deviasi dalam satu blok.
Digunakan secara Internasional. Blockly telah diterjemahkan ke lebih dari 40 bahasa, termasuk versi kanan-ke-kiri untuk bahasa Arab dan Ibrani.
Sekian untuk pembahasan kali ini pada artikel selanjutnya saya akan menjelaskan secara teknis bagaimana menggunakan blockly pada aplikasi web.

Membuat Alat Pembaca Nominal Uang untuk Tuna Netra

Surya Tech — Thu, 14 Oct 2021 12:36:46 +0000

Terimakasih sebelumnya saya ucapkan kepada Tuhan Yang Maha Esa dan teman-teman. Alasan kenapa akhirnya saya membuat artikel tentang alat ini karena diluar dari view youtube, banyak juga yang meng-email saya pribadi bertanya bagaimana cara membuat alat ini yang saya beri nama Monre. Saya juga ingin mengucapkan terimakasih kepada Ibu Ir. Linawati sebagai dosen pembimbing saya ketika mengerjakan alat ini sebagai tugas mata kuliah Teknik Telekomunikasi Terapan.

Latar Belakang

Saya ingin bercerita sedikit mengenai latar belakang kenapa saya mengambil topik ini, Seperti kita ketahui keterbatasan tuna netra dalam hal melihat merupakan masalah dalam hal berkomunikasi sehingga mereka hanya mengandalkan indra peraba dan pendengar.

Kelemahan tuna netra dalam melihat dan mengidentifikasi uang dapat menyebabkan uang tertukar, salah ambil, atau bahkan tertipu pada saat jual beli. Sehingga perlu adanya alat bantu yang dapat memudahkan tuna netra untuk mengidentifikasi nilai nominal uang, dengan memanfaatkan indra peraba dan pendengar.

Memang awalnya saya ragu dengan ide ini, mungkin saya harus membuat alat yang lebih rumit karena tujuan saya juga ingin mengasah skil teknis saya. Tapi ternyata banyak respon bagus dari teman-teman dan dosen melihat ide ini. Idenya simple tapi manfaatnya memang bukan main-main.

Ok teman-teman lanjut ke teknis, berikut saya lampirkan flowchart dari alat ini :

Cara Kerja

Alat ini akan mampu membedakan nominal uang, dengan output pada smartphone berupa suara dan getar. Uang nantinya akan discan oleh sensor warna, kemudian hasil scan tersebut merupakan input yang akan diproses oleh mikrokontroler Arduino. Seteleh mendeteksi nominal uang maka Arduino akan memberikan sinyal output ke Smartphone berupa suara dan getar. Untuk transmisi yang digunakan Via Bluetooth.

Desain Alat

Desain alat ini menyerupai sebuah Case Handphone danletak Handphone akan berada diatas menempel pada alat ini. Bahan body yang digunakan adalah acrylic dengan bentuk persegi panjang.

1. Arduino

2. Sensor warna TCS 3200

3. Bluetooth HC05

App Inventor

Untuk merancang aplikasi pada HP saya menggunakan platform App Inventor. Alasan saya menggunakan App Inventor karena laptop tidak kuat menjalankan android studio xD. Apa itu App Inventor ? App Inventor adalah aplikasi web open source yang awalnya dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute of Technology (MIT). App Inventor memungkinkan pengguna baru untuk memprogram komputer untuk menciptakan aplikasi perangkat lunak bagi sistem operasi Android. Link app inventor ada disini

Skematik Perangkat

Untuk membuat skematik alat in,i digunakan aplikasi Eagle 7.2

Simulasi

Simulasi untuk project ini menggunakan aplikasi Proteus 8 Professional dengan rancangan sebagai berikut :

Teman-teman pada simulasi ini karena di proteus saya tidak ada library sensor warna TCS3200 maka saya menggunakan sensor serupa yaitu sensor LDR. Sensor ini memberikan nilai RGB layaknya sensor warna TCS 3200.

Kesimpulan

Interface aplikasi dibuat sangat sederhana sehingga para tuna netra dapat menggunakan aplikasi ini dengan mudah. Sebelumnya para tuna netra akan diarahkan (tutorial) dengan panduan berupa suara untuk memilih mode getar ataupun mode suara.

Pembacaan nominal uang dilakukan dengan cara meletakkan uang di scanner alat. Gambar diatas menunjukkan hasil pembacaan uang Rp. 100.000 dalam mode getar. Tanda getar untuk uang Rp. 100.000 adalah getar sebanyak 10 x sedangkan untuk Rp. 50.000 getar sebanyak 5x. Hasil pembacaan dengan mode suara yang artinya tanda nominal uang yang dibaca dalam bentuk suara Mp3 yang sebelumnya dibuat di texttospeech.com. Selain 2 output getar dan suara pada aplikasi juga ditampilkan nilai RGB uang dan hasil pembacaan dalam bentuk Text.

Sekian.. teman-teman

Untuk codenya saya lampirkan di link ini.

Mengenal Bahasa Pemrograman Python

Surya Tech — Thu, 14 Oct 2021 12:32:38 +0000

Bahasa pemrograman python pertama kali diciptakan oleh Guido van Rossum seorang programmer berasal dari Belanda direlease pada tahun 1991.

Asal muasal nama python bukan berarti dari nama jenis ular yang kita ketahui. Jadi dahulu ada group komedi Inggris bernama Monty Python dan bapak Guido ini adalah penggemar beratnya. Dari sinilah dia mendapat ide untuk memberi nama bahasa pemrogramannya “python”.

Menarik ya teman-teman. Untung saja dia tidak mengenal group komedi asal Indonesia bisa-bisa saat ini semua orang belajar bahasa pemrograman Warkop.

Python sering kali digunakan sebagai :

Pengembangan web (sisi server)
Python digunakan pada pengembangan aplikasi web pada sisi server dan web framework. Framework python yang sering digunakan dan populer adalah Flask dan Django

Pembuatan Software

Karena python memiliki banyak library dan kompleks, kita dapat dengan mudah membangun suatu aplikasi seperti game, kalkulator, aplikasi painting atau kalkulator ilmiah

Matematika, Statistika

Dengan library seperty Numpy, panda, matplotlib kita bisa menyelesaikan persoalan matematika dan statistika, kemudian memvisualisasikannya. Python juga mempermudah kita dalam mengimport dan memanipulasi data.

Machine Learning

Ada banyak modul dan library yang dapat digunakan untuk menerapkan Machine Learning di dalam Python. Contoh nya pytorch yang digunakan Facebook.

Kenapa harus python ?

Bekerja di berbagai macam platform

Kita dapat menginstall python dan menjalankannya di berbagai platform seperti Windows, linux, ubuntu

Mudah dipelajari

Python layaknya bahasa inggris yang mudah dimengerti.

Syntaks lebih efisien

Dibandingkan dengan bahasa pemrograman lain, sintaks pada python lebih sedikit sehingga skrip menjadi efisien.

Multifungsi

Penggunaannya sangat luas di berbagai bidang.

Disupport banyak library

Saat ini python menjadi bahasa pemrograman yang cuku populer karena banyak library yang dapat diakses

Berjalan sebagai interpreter

Python dapat digunakan untuk interpreter platform lain

Cara Mengintegrasikan Mapbox ke React

Surya Tech — Fri, 24 Sep 2021 22:51:30 +0000

Hallo teman-teman! 😀 . Akhirnya saya kembali lagi menulis blog namun platform yang saya gunakan saat ini adalah Dev To. Ada beberapa alasan kenapa saya akhirnya memilih platform ini untuk blog saya. Mungkin saya akan tulis alasannya pada beberapa blog kedepan.
Mari kembali ke Mapbox.

Mapbox adalah sebuah package penyedia peta online yang berbasis di Amerika Serikat. Mapbox disini berperan sebagai pengganti google map dan saat ini banyak perusahaan atau individu beralih ke mapbox.

Untuk menggunakan mapbox pada React, teman-teman harus menginstal terlebih dahulu module mapbox. Berikut link instalasi doc

npm i mapbox-gl

Kemudian teman-teman perlu hook seperti useRef dan useEffect. Berikut snippet code untuk menampilkan mapbox pada React.

import "./styles.css";
import Mapboxgl from "mapbox-gl";
import { useEffect, useRef } from "react";

export default function App() {
  const map = useRef(null);

  useEffect(() => {
    Mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN || "";
    map.current = new Mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [101.52045303099948, 25.069771049083982]
    });

    map.current.zoomTo(19.5);
  },[]);
  return (
    <div>
      <div id="map" ref={map}/>
    </div>
  );
}

Demikian blog untuk kali ini. Teman-teman bisa follow akun media soaial Surya Tech.

Selamat mencoba. 👏

Instagram.