Skip to content
Modul
Share
Explore

Module

Frontend Intern Batch V Module
Modul ini dibuat dengan tujuan untuk memberi informasi detil dan juga kejelasan dari sistem yang digunakan oleh Tim Frontend Developer dalam menambah kelancaran tercapainya beberapa target, pada masa Internship

Team

Roles

image.png
Webmail
0
Nama
Email
Password
1
Affa Alfiandy
AffaAlfiandy5
2
Ageng Ayu
AgengAyu5
3
Bella Dwi Mardiana
BellaDwi5
4
Bryan Rinaldo
BryanRinaldo5
5
Muchammad Rafli Riyana
RafliRiyana5
6
Muhammad Aufa Anasin
AufaAnasin5
7
Nofath Zukhrufi Haideal
NofathZ5
8
Rengga Rizky Septian
RenggaR5
9
Thariq Hadyan
ThariqHadyan5
10
Zhirazzi Dimas Praseptyo
ZhirazziD5
There are no rows in this table

Akun email ini digunakan untuk login ke Trello dan Webmail. Gunakan akun sesuai nama masing-masing ya.

Rules

Bersikap ramah dan bersahabat dengan siapapun
Berusaha untuk ikut membantu bila rekan kerja bertanya terkait koding
Tidak perlu segan untuk sharing, memberi saran atau bertanya, melalui grup/direct message
Mengikuti berbagai rangkaian kegiatan di tim, dan mengupayakan beroperasi sesuai workflow yang ada
Mengupayakan Task untuk dikerjakan sesuai waktu yang ditetapkan

Tasks

Overview

Melakukan Pengkodean/Scripting sisi Client/Frontend pada Website Perusahaan Automate All, sesuai dengan Tech Stack serta mendukung agar tercapainya target/goal Sprint pada setiap periode Sprint.

Job Description

Client-side scripting sesuai waktu yang ditetapkan
Mengikuti berbagai kegiatan di Tim Frontend terutama pada saat Scrum
Berkomunikasi dengan rekan Frontend, Backend dan UI/UX

Goals

Merilis Website Automate All versi BETA sesuai dengan Timeline


Activities

Detail

Beberapa kegiatan di bawah juga berasal dari metodologi Agile Scrum atau biasa juga disebut dengan Scrum Events/Ceremonies
Sprint Planning
Ini merupakan langkah awal sebelum memulai Sprint/Development, yakni mengadakan rapat terlebih dahulu untuk menentukan goals apa yang dituju pada sprint tersebut, disertai dengan list item (Sprint Backlog Items) yang perlu untuk dikerjakan.
Waktu
→ Max. 3 Jam, Jumat
Output
→ Sprint Goals & Backlog
Sprint/Development
Client-side Scripting akan dilakukan pada tahap ini, lakukan pengecekan Scrum Board (Trello Board) secara rutin selain mengubah status pada Task yang dikerjakan juga melihat berbagai perubahan yang terjadi.
Durasi
→ 12 hari
Output
→ In Progress, QC & Done
Daily Scrum
Pada masa Development, akan ada Meet sejenak dengan masing² Supervisor untuk menyampaikan 3 hal
Apa yang sudah dikerjakan
Apa yang sedang dikerjakan
Kendala apa saja yang dialami
Waktu
→ 15 menit tiap hari kerja, di Siang / Malam
Output
→ Daftar Impediments / kendala
Sharing Session Meet
Meet berisi diskusi santai, seminggu sekali
Waktu
→ Jumat
Sprint Review
Membahas titik produk sudah sampai mana, dan menilai hasil Sprint
Waktu
→ Max 2 Jam, Rabu
Output
→ Sprint Report
Sprint Retrospective
Mendiskusikan terkait kinerja semasa Sprint
Waktu
→ Max 1,5 Jam, Kamis

Timeline

Workflow

Tasking

Scripting

image.png



Coordination Flow

image.png
PO mengetahui seluk beluk aplikasi dan fitur apa saja yang harus dibuat, dan tentunya berasal dari client. Perubahan fitur atau update akan ditambahkan ke Trello dan disampaikan kepada Tim.

Kedepannya, yang banyak berinterkasi dengan Developer ialah antar Developer itu sendiri dan Scrum Master. Scrum Master perlu menjaga proses Scrum agar berjalan dengan baik. Salah satunya ialah memberi Reminder terkait Rapat.

Adapun Supervisor, akan selalu memantau dan mengawasi pekerjaan yang dilakukan oleh Developer, dan juga yang mengoreksi/mengulas hasil kerja di GitHub (Pull Request Review) pada tahap Quality Check

Problem Solving

Berawal dari muncul nya Kendala seperti:
Kesulitan dalam pengerjaan
Error pada API
Bugs / Issue
Terdapat 3 cara yang harus dilakukan untuk melaporkan kendala tersebut:
Sampaikan melalui
Daily Scrum
Tambahkan kendala pada bagian
Impediments
di Trello
Khusus error yang terjadi setelah Script tersimpan di GitHub, lalu mengalami conflict dengan Script lain, mengakibatkan hasil yang seharusnya sudah baik, menjadi berantakan atau update terakhir dari Development pada saat dijalankan memiliki Bugs baik kecil maupun critical. Untuk masalah yang sangat berkaitan dengan Script & Direktori Project keseluruhan (Repository), segera laporkan issue tersebut melalui
GitHub Issues
Supervisor akan membantu dalam menangani kendala tersebut, maka dari itu jangan lupa untuk dilaporkan melalui 3 cara di atas.

Evaluation

Untuk mengevaluasi pekerjaan yang sudah dilakukan, kita akan menggunakan aktivitas yang berasal dari Agile Scrum yakni Sprint Review, dan Retrospective.
Kedua agenda tersebut dilakukan pada akhir Sprint, di hari Rabu dan Kamis, 3 minggu sekali.

Tujuan Sprint Review

Tujuan dari dilakukannya Sprint Review, antara lain
Mengetahui seberapa besar capaian kita
Mengetahui apakah Sprint Goal telah tercapai atau belum
Mengetahui seberapa besar effort yang sudah diberikan oleh Tim semasa Sprint (dilihat dari jumlah Jam yang diluangkan)
Menemukan masalah dan solusi pada Website yang dikembangkan

Tujuan Sprint Retrospective

Melihat kebelakang, bagaimana Tim bekerja dan melihat apakah ada kekurangan dari segi Tim dan bagaimana agar Sprint selanjutnya bisa lebih baik lagi

Links

alcoffeeocha/automate-all

Tech Stack

React
Next.js
TailwindCSS
styled-components

Tools

Trello → Scrum Board
GitHub → Project Repository
Sourcetree → Git Helper
Discord → Communication

Why React

Hasil diskusi dengan Back-end Dev. Team, agar website lebih aman, Client dan Server Script baiknya dipisah atau tidak digabung dengan PHP CodeIgniter4
Experience Single Page Application (SPA) untuk Website Company dirasa lebih baik
Penulisan script bisa lebih rapi, komponen yang reusable, front-end tidak perlu memikirkan bagaimana menyambungkan view dengan PHP sehingga development masing-masing Tim dapat bergerak secara asynchronous, dan juga dengan adanya styled-components dapat menghindari tabrakan CSS.
Dikarenakan sebagian besar dari kita mengenal React, dan juga kebanyakan perusahaan menerapkannya. Apabila belum pernah menggunakannya, tidak masalah bila mendalaminya terlebih dahulu, silahkan bertanya bila mengalami kesulitan kepada rekan kerja lainnya. Semoga ini bisa menjadi tantangan (bagi yang belum), agar nantinya dapat lebih percaya diri untuk bekerja di perusahaan yang memerlukan React Developer.

Why Next.js

Next.js digunakan untuk meningkatkan SEO pada Website. Kekurangan CSR yaitu React ialah di SEO nya, sedangkan website agar bisa mudah dikenal dan ditemukan di internet, bisa terjadi bila SEO nya bagus, dan hal ini diperlukan untuk website perusahaan.

Menggunakan strategi Single Static Generation (SSG) dan Client Side Rendering (CSR) yang dihandle oleh NextJS
Fetch Data dilakukan pada saat build time di environment NodeJS (local) sehingga pada saat scriptnya dideploy, sudah tidak memerlukan server lagi, karena sudah static / tidak ada lagi rendering di server ulang.
This allows you to use any asynchronous or even synchronous data fetching technique, including fetch, REST, GraphQL, or even directly accessing a database.
Adanya pre-rendered page yang dapat meningkatkan SEO, konten lebih cepat disajikan ke user karena HTML nya sudah static tanpa adanya fetch dari server
Kekurangan
Untuk project yang besar, build time nya akan lama
Hosting yang tidak support server NodeJS
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.