Introduce to Front-End Developer: Installing Essential Tools and Extensions

Heihei yooo, udah gasabar mengikuti pelatihan kan sobat amcc? Hehe bentar lagi pelatihan akan dimulai kok. Eitsss,,,,, tapi sebelum temen-temen belajar mendevelop frontend web programming, temen-temen harus mempersiapkan terlebih dahulu tools-tools yang diperlukan. Tanpa tools-tools tersebut temen-temen tidak akan bisa untuk mendevelop frontend web.

Apa aja yaa? Yuk ikuti langkah-langkahnya yaa gaes.

PENGENALAN DIVISI WEB FRONTEND

Kata pepatah “Tak Kenal Maka Tak Sayang”, hmmmmm,,, memang benar sih, gasalah kan xixixixi. Nah sebelum melangkah kedalam, alangkah baiknya kita perkenalan dulu dengan Frontend web programming.

Front-End Web Programming adalah seorang profesional yang bertanggung jawab untuk mendesain dan membangun tampilan dan interaksi dari sebuah website atau aplikasi web. Menghidupkan website, dan memastikan bahwa website tidak hanya menarik secara visual tetapi juga berfungsi dan ramah pengguna.

Front-End Web merupakan salah satu bagian dari web development. Dimana di web development ada backend web dan frontend web. Dimana seringnya kita menyebut frontend sebagai “client side” atau sisi depannya aplikasi yang dilihat pengguna.

Utamanya dalam pengembangan frontend web menggunakan HTML, CSS , dan Javascript. Tetapi sekarang sudah banyak sekali terdapat framework dan library yang membantu pengembangan frontend seperti React, Vue.js, Angular, dan lain-lain.

PELATIHAN MEMBER AMCC

• 12x pelatihan dengan waktu 180 menit setiap pelatihannya.
• Pelatihan dilaksanakan pada hari Sabtu
• Di akhir pelatihan akan ada final project kolaborasi dengan backend web. Tujuan dari final project ini adalah untuk mengasah kemampuan member AMCC darri hasil belajar mereka selama pelatihan. Dan juga melatih untuk berkerja dengan tim dan melatih tanggung jawab dan pembagian tugas.
• Mengikuti perlombaan dengan kakak-kakak pengurus AMCC ataupun sesama member AMCC.
• Setelah 12x pelatihan terlaksana, setelah itu akan ada Intermediete Class. Dimana di Intermediate Class kita belajar versi lebih dalamnya tentang front-end web. Belajar menggunakan framework ataupun library populer seperti React, Vue, Angular, dll.

APA AJA YANG AKAN DIPELAJARI DI PELATIHAN?

1. HTML (Dasar-dasar HTML dan semantic HTML)
2. CSS (Dasar-dasar CSS, CSS Layouting, Responsive)
3. Javascript (Dasar-dasar bahasa pemrograman Javascript, Javascript ES6++ (Modern Javascript), manipulasi DOM, asynchronous Javascript, consume API)
4. Framework CSS : Tailwind (Dasar-dasar tailwind, tailwind layer component, tailwind arbitrary)

HAL-HAL YANG PERLU DISIAPKAN SEBELUM MEMULAI MENDEVELOP FRONTEND WEB & CARA INSTALASINYA

• Laptop
• Browser

Browser yang digunakan bebas, tetapi kami sarankan menggunakan Chrome karena terdapat banyak sekali extension yang mendukung untuk develop website.

• Visual Studio Code

Logo Visual Studio Code

Hal yang tak lupa untuk dipersiapkan adalah Visual Studio Code, sebagai teks editor untuk mengembangkan berbagai jenis aplikasi seperti web, android, dan lain-lain.

Cara install:

a. Download dulu file .exe nya di https://code.visualstudio.com/download , pilih sesuai sitem operasi yang kalian gunakan.

b. Double click pada installer yang sebelumnya telah di download.

c. License agreement, pilih “I accept agreement” lalu klik Next.

d. Pilih lokasi instalasi

Disarankan untuk tidak mengubahnya langsung saja klik Next.

e. Start menu folder

Disarankan tidak mengubahnya langsung saja klik Next.

e. Centang semua pada bagian “Select additional task”.

g. Setelah semua, klik Install dan tunggu sampai prosesnya selesai.

Berapa extension yang perlu temen-temen siapkan:

a. JSONView

JSONView adalah ekstensi atau plugin untuk browser web yang memungkinkan pengguna untuk melihat dan memahami data JSON dengan lebih mudah dan terstruktur. Saat diinstal, JSONView merender data JSON dalam tampilan yang terorganisir dan mudah dibaca langsung di jendela browser.

Contoh dari penggunaan extension ini.

b. Mobile simulator — responsive testing tool

Extension yang membantu untuk menguji responsivitas website pada berbagai perangkat seluler dan tablet langsung dari browser.

Contoh penggunaan :

c. WhatFont

Ekstensi Chrome yang berfungsi untuk mengidentifikasi font yang digunakan di situs web. Secara default, browser hanya akan menampilkan font sebagai teks biasa, yang dapat membuat sulit untuk mengidentifikasi font yang tepat. Dengan menggunakan whatfont, dapat mengidentifikasi font dan menampilkan informasi tentang font, seperti nama, ukuran, dan gaya.

Contoh penggunaan :

Bagaimana cara install extension-extension tersebut di browser Chrome?

1. Buka browser chrome temne-temen.
2. Klik titik 3 pada kanan atas browser chrome
3. Pilih menu Extension untuk membuka halaman kumpulan extension dari chrome yang telah temen-temen install.

4. Setelah itu, klik Chrome Web Store untuk beralih ke halaman download extension yang tersedia dari Chrome.

5. Cari extension yang temen-temen download di input Search tersebut. Misalkan kita mencari JSONView, maka ketik “jsonview” lalu klik Enter.

6. Nah nanti akan muncul halaman download extension JSONView, lalu temen-temen bisa klik Add to Chrome untuk menambahkan extension tersebut ke Chrome.

Secara otomatis, extension sudah terdownload, terinstal, dan siap langsung pakai di Chrome.

Beberapa Extension dari Visual Studio Code yang perlu temen-temen siapkan

a. Auto Close Tag

Berfungsi untuk menambahkan penutup tag secara otomatis saat mengetik tag pembuka.

b. Auto Rename Tag

Berfungsi untuk mengganti nama tag secara otomatis saat mengganti nama salah satu tag dalam pasangannya.

c. CSS Peek

Berfungsi untuk menampilkan definisi CSS dari suatu elemen HTML saat temen-temen menyoroti elemen tersebut.

d. Highlight Matching Tag

Berfungsi untuk menyorot tag pasangan secara otomatis saat temen-temen mengetik tag pembuka atau penutup.

e. Live Server

Berfungsi untuk memulai server lokal yang menampilkan halaman web dengan menggunakan konten file yang ada di workspace. Server tersebut secara otomatis akan melakukan reload saat terdapat perubahan pada file terkait. Jadi temen-temen tidak perlu susah-susah refresh manual di chrome.

f. Prettier

Berfungsi untuk memformat kode secara otomatis. Ekstensi ini sangat berguna untuk pengembang web, karena dapat membantu memastikan kode temen-temen rapi dan konsisten.

g. Javacript (ES6) Code Snippets

Ekstensi yang menyediakan kode pendek atau snippets untuk JavaScript dalam sintak ES6. Ektensi ini sanagat berguna karena dapat menghemat waktu dan tenaga dalam menulis kode JavaScript.

h. Tailwind CSS IntelliSense

Berfungsi untuk memberikan fitur-fitur IntelliSense untuk kode Tailwind CSS. Fitur-fitur IntelliSense ini dapat membantu temen-temen untuk menulis kode Tailwind CSS dengan lebih cepat dan mudah.

BAGAIMANA CARA INSTAL EKSTENSI DIATAS?

a. Buka Visual Studio temen-temen

b. Arahkan cursor ke icon kotak empat, lalu klik.

c. Muncul tampilan pencarian extension visual studio code dan beberapa rekomendasi extensi yang populer.

Lalu kemudian temen-temen bisa cari extension yang temen-temen ingin download. Misalkan adalah extension Javascript (ES6).

Klik Install untuk menginstall extension tersebut ke dalam visual studio code.

Setelah diinstall, extension tersebut sudah siap untuk dipakai.

Node.js dan NPM

Logo Node.js

Biasanya kita kalau mau jalanin javascript itu harus memakai browser. Nah bagaimana caranya jalanin javascript tanpa browser? Nah jawabannya adalah menggunakan Nodejs, Sebuah platform open-source dan cross-platform yang memungkinkan temen-temen menjalankan kode JavaScript di luar browser.

Logo NPM

NPM adalah Manajemen paket open-source yang digunakan untuk mengelola dependensi kode JavaScript di Node.js.

CARA INSTALASI

Node.js

1. Buka link berikut https://nodejs.org/en di browser.

2. Akan muncul halaman download Nodejs.

Klik button 20.20.0 LTS untuk mendowload file installer Node.js

3. Setelah download selesai maka akan diberikan file .msi.

Klik dua kali file tersebut lalu akan muncul tampilan awal instalasi Nodejs. Klik button Next.

4. Nantinya akan muncul License Agreement. Klik centang pada “I accept the terms in the License Agreement”. Klik Next lagi.

5. Pilih penyimpanan default. Lalu klik Next.

6. Pillih fitur yang diinstall, tetapi jika temen-temen tidak yakin dan mengerti, langsung klik Next saja.

7. Nah untuk mengecek berhasil atau enggaknya kita install Node.js. Kita bisa memakai CMD. Ketik Node -v untuk mengecek versi Nodejs. Jika versinya muncul itu berarti temen-temen berhasil menginstall Node.js, akan tetapi jika sebaliknya yang terjadi, maka temen-temen gagal menginstall Node.js.

Untuk NPM (Node Package Manager) sendiri udah terinstall bersamaan ketika temen-temen menginstall Node.js. Jika temen-temen masih belum yakin, temen-temen bisa mengecek versi dari NPM dengan cara membuka CMD lalu mengetikkan perintah npm -v. Jika versinya muncul itu tandanya berhasil menginstal NPM.

Beberapa tools diatas yang perlu temen-temen siapkan dan install supaya bisa mengikuti pelatihan di divisi Frontend Web. Harapannya teman-teman semuanya sudah menginstall tools-tools yang diperlukan sebelum hari pertama pelatihan berlangsung yaa, supaya nantinya teman-teman lancar dalam mengikuti pelatihan.

Sekian dan terimakasih 😊

AMCC

Learning By Doing

Learning By Teaching