Tutorial Bikin web live count Fiki Dayana pakai react, nodejs, puppeteer




0:00​ intro

0:27​ prototype

1:21​ teknologi yang dipakai: React, nodejs, puppeteer

1:33​ penjelasan cara ngambil data dari instagram

2:03​ init project pakai react

2:41​ run initial projectnya

3:00​ install puppeteer, express, cors

4:43​ bikin server.js untuk backendnya

7:27​ install nodemon untuk live reload server

8:30​ bikin script puppeteer untuk ngambil data dari web instagram

14:22​ ngetest script puppeteer yang udah dibuat

15:03​ mulai coding frontend (react)

15:36​ install reactstrap (bootstrap wrapper untuk react)

16:15​ implement prototype pakai reactstrap

19:38​ coding counter box

23:50​ konekin frontend ke backend (ngambil data instagram)

28:26​ percantik tampilan UI (coding css)

37:01​ bikin gap counter (selisih penambahan/pengurangan jumlah followers)

44:56​ penampakan akhir (selesai)

Komentar

Posting Komentar

postingan lainnya

Cara GAMPANG bikin syntax/code highlighter di blogger/blogspot TERBARU 2021

Gambar
Setelah melakukan banyak try and error akhirnya saya menemukan cara yang enak dan mudah untuk masukin code snippet ke blog saya ini.  Masuk ke menu layout Tambahkan HTML/Javascript gadget  Masukkan code ini dan simpan <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/atom-one-dark.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> lalu kalian tinggal pakai syntax seperti ini di dalam setiap postingan bloggernya. *note: ganti html dengan bahasa yang sesuai. list bahasa pemgrogramannya ada disini <pre><code class="html"> // simpan codenya disini </code></pre>
Baca selengkapnya

gopls not working at apple m1 visual studio code 1.54.3

 ini output errornya Tools environment: GOPATH=/Users/rifanfauzi/go Installing 1 tool at /Users/rifanfauzi/go/bin in module mode. [email protected] Installing golang.org/x/tools/[email protected] FAILED { "killed": false, "code": 2, "signal": null, "cmd": "/usr/local/go/bin/go get -v golang.org/x/tools/[email protected]", "stdout": "", "stderr": "os/user\n# os/user\nxcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun\n" } 1 tools failed to install. gopls: failed to install gopls(golang.org/x/tools/[email protected]): Error: Command failed: /usr/local/go/bin/go get -v golang.org/x/tools/[email protected] os/user # os/user xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun no output solusinya adalah xcode-select --
Baca selengkapnya

chat app #3b - menghubungkan UI dengan graphql API

install recoil npm install recoil src/recoil.js import { atom } from "recoil"; export const selectedUserState = atom({ key: "selectedUser", default: null, }); src/pages/Main/Message/index.js setTimeout(() => { const cb = document.getElementById("chat-content").parentElement; if (cb) { cb.scrollTop = cb.scrollHeight; } }, 200); updated query (src/pages/Main/Message/index.js) subscription MyQuery($where: messages_bool_exp = {}) { messages(where: $where, order_by: { createdAt: asc }) { id fromUserId message fromUser { name picture } createdAt } } update variable params (src/pages/Main/Message/index.js) let params = { where: {} }; if (selectedUser && !selectedUser.id) { params.where = { toUserId: { _is_null: true, }, }; } else if (selectedUser && selectedUser.id) { params.wh
Baca selengkapnya

Cara Lapor SPT Tahunan dengan E-Form bagi freelancer 2021

Gambar
 Disini saya cuma share cara saya lapor SPT.. Saat ini pekerjaan saya adalah programmer yang bekerja secara freelance (proyekan) tanpa ada badan hukum atau PT yang menaungi.. Pertama siapkan rekap penghasilan selama 1 tahun di xls. Seperti ini contohnya: selanjutnya buka DJP online  https://djponline.pajak.go.id/account/login . Jika kalian belum melakukan registrasi dan belum memiliki nomor efin, silakan datang ke KPP terdekat dengan membawa fotokopi KTP dan NPWP untuk melakukan aktivasi efin.  lalu masuk menu Lapor dan klik e-Form PDF  klik Buat SPT, Pilih Ya dan klik ' E-Form SPT Tahunan Orang Pribadi Formulir 1770 '  Isikan seperti dibawah ini, Lalu klik Kirim Permintaan. Setelah klik 'kirim permintaan', kalian akan dapat form SPTnya. simpan di tempat yang kalian inginkan.     Pada saat yang bersamaan pula kalian akan dapat email berisi kode verifikasi yang nantinya akan diperlukan saat mengunggah SPT.  Jika kalian belum punya adobe acrobat reader. download dulu di m
Baca selengkapnya