Assalamualaikum dan hello semua! Moga semuanya sihat belaka, supaya dapat terus belajar benda baru setiap hari π
Untuk minggu ini, saya nak mengupas perkara berkaitan pembangunan web, memandangkan pendigitalan begitu rancak, terutamanya pasca COVID-19 yang kini bakal menjadi endemik.
Okay, dah sedia? Kalau terlalu malas, boleh tengok bawah terus, di "Terlalu Panjang; Malas Nak Baca" (TP;MNB).
Pembangunan Web
Pembangunan web yang saya maksudkan merangkumi segala yang berkaitan dalam membangunkan suatu web, dari perancangan sehingga penyebaran sesawang (web deployment). Saya akan perihalkan secara umum berkaitan pembangunan frontend dan pembangunan backend, terutamanya pembangunan web moden, iaitu JAMStack.
JAMStack (Javascript, API, Markdown) adalah timbunan web moden yang diguna pakai oleh majoriti pembangun web di dunia kerana kelajuannya, keselamatannya dan beberapa ciri yang memastikan pengguna mendapat segala kebaikan timbunan terkini.
Perancangan
Bila kita nak memulakan pembangunan web, kita perlu tahu objektif dan keperluan dalam web tersebut. Dengan memperincikan keperluan sistem, modul boleh diasingkan dan dibangunkan dengan efektif.
Antara perkara lain yang memberikan nilai kosmetik antaranya penjenamaan, identiti penjenamaan boleh juga dipertimbangkan untuk menambah nilai, tetapi bukanlah suatu yang mesti.
Antara kemahiran penting pada peringkat ini ialah penyelesaian masalah, kemahiran analisis keperluan. Jika anda dapat menguasai kemahiran ini secara maksimum, anda mungkin boleh menjadi Pengurus Produk atau seangkatan dengannya. Atau mungkin mahu jadi CEO? π€·ββοΈ
Reka Bentuk
Bayangkan, web dahulu kala adalah seperti berikut.
Dan kini, web mempunyai astetik yang begitu cantik seperti di bawah.
Para penyelidik bertahun-tahun telah mengumpulkan hasil penyelidikan mereka dalam pembangunan antara muka web. Dengan itu, terhasilnya satu bidang, iaitu Antara Muka Pengguna (User Interface, UI), dan juga Pengalaman Pengguna (User Experience, UX). Terdapat juga kerjaya yang berkaitan sekiranya anda mahu fokus kepada UI dan UX, iaitu Pereka UI/UX atau seangkatan dengannya.
Untuk menghasilkan UI/UX yang berkesan, perincian keperluan dan objektif perlu jelas, di samping memberikan identiti yang padan dengan objektif dan bakal pengguna.
Antara peralatan penting yang biasa digunakan antaranya Figma, Adobe XD, dan juga beberapa peralatan lain seperti Zeplin untuk mendapat respons daripada sampel pengguna sebelum web tersebut dibangunkan.
Tapi jangan risau. Untuk permulaan, anda boleh juga mula dengan Figma atau Adobe XD untuk mencuba membuat reka bentuk. Anda tidak mahir mereka bentuk? Tidak mengapa juga, kerana anda juga boleh menggunakan beberapa inspirasi lain di web lain, atau menggunakan pratetap seperti Bootstrap, Tailwind atau Bulma.
Pengaturcaraan Web
Dahulu, web lebih bersifat monolitik, di mana antara muka web dan fungsi logik antaranya komunikasi dengan pengkalan data, pemprosesan data, semuanya diletakkan dalam satu infrastruktur sahaja.
Dengan teknologi baru antaranya servis mikro, Sistem Pengurusan Kandungan (Content Management System, CMS), nirpelayan (serverless) dan sebagainya, kesemuanya boleh dipisahkan dengan menjadikan setiap bahagian itu sebagai modul atau servis. Dengan ini, sistem boleh diurus secara mikro.
Frontend
Untuk pembangunan frontend, atau dengan kata lain, pembangunan antara muka, anda boleh belajar asas dahulu seperti HTML, CSS dan Javascript. Kemudian, anda boleh memilih untuk belajar salah satu kerangka Javascript antaranya Angular, React, Vue, Svelte atau yang lain. Sekiranya berminat untuk belajar React, saya pernah menulis satu artikel berkaitan sumber untuk belajar React di sini π
Tak tahu untuk mengaturcara, tapi nak hasilkan produk dengan cepat? Jangan risau, kini sudah banyak solusi tanpa-kod (no-code), antaranya Glide, DrapCode dan sebagainya. Anda boleh terus rujuk di nocode.tech.
Backend
Untuk pembangunan backend pula, terdapat banyak solusi yang boleh terpilih, dan tidak terhad kepada Javascript sahaja. Jika menggunakan Javascript, anda boleh mula meneroka NodeJS, di mana beberapa kerangka boleh digunakan antaranya ExpressJS, FeatherJS, atau menggunakan CMS seperti Strapi, Contentful.
Pengkalan Data
Untuk pengkalan data pula, terdapat beberapa pilihan yang boleh dikategorikan kepada dua (sekarang sudah banyak kategori), antaranya SQL dan NoSQL. Kedua-duanya mempunyai ciri-ciri dan falsafahnya tersendiri. Sekiranya anda mahu meneroka SQL, anda boleh mula belajar MySQL, PostgreSQL, dan sekiranya anda mahu meneroka NoSQL, anda mungkin berminat dengan MongoDB, Firebase atau Supabase.
Timbunan Web
Seperti yang saya sebut di awal artikel ini, web moden sudah mula mendukung JAMStack (Javascript, API dan Markdown). MERN (MongoDB, ExpressJS, React, NodeJS), MEAN (MongoDB, ExpressJS, Angular, NodeJS), MEVN (MongoDB, ExpressJS, VueJS, NodeJS) adalah antara Timbunan JAMStack yang paling popular abad ini π
Pengujian
Anda boleh pilih untuk uji web anda secara manual, atau menggunakan beberapa kerangka Javascript yang popular antaranya Mocha, Jest. Untuk memantau prestasi web, anda juga boleh mula memasang Lighthouse atau menggunakan WebDev.
Penyebaran
Untuk menyebar web di pelayan menggunakan kaedah moden, kita boleh menggunakan teknologi pelayan awan (cloud server). Untuk itu, anda berkemungkinan besar (rekomen) belajar Antara Muka Baris Arahan (Command Line Interface, CLI).
Antara peralatan penting lain ialah Git, penyedia Git seperti Github atau Gitlab. Ini penting untuk menguruskan versi web anda, dan mudah untuk membuat perubahan sekiranya terdapat pepijat, dan memantau setiap versi.
Pembekal penyebaran web terkini boleh digunakan antaranya Vercel, Netlify, Layer0. Untuk penyebaran backend pula, anda boleh menggunakan Heroku. Banyak lagi servis penyebaran yang boleh digunakan, dan mereka lebih dikenali sebagai platform penyebaran atau platform-sebagai-servis (*Platform-as-a-Service, PAAS).
Lain-lain
Terdapat beberapa alatan lain yang boleh digunakan untuk meningkatkan produktiviti. Untuk tujuan pengaturcaraan, anda boleh memasang VSCode pada komputer anda, kerana kemampuannya dan banyak pemalam (plugins) untuk membantu anda mengesan pepijat dan melajukan proses pengekodan.
Untuk pengurusan projek, anda mungkin boleh mempertimbangkan untuk menggunakan Trello. Github Projects juga boleh digunakan untuk uruskan projek.
Itu sahaja untuk belajar pembangunan web! Mungkin nampak macam banyak nak belajar, tapi mulakan dengan sedikit, nanti akan selesa dan mungkin akan ada produk sendiri akan datang?
TP;MNB
-
Perancangan
- Kemahiran: penyelesaian masalah, kemahiran analisis keperluan
- Ekstra: penjenamaan, identiti penjenamaan
-
Reka Bentuk
- Kemahiran: Antara Muka Pengguna (User Interface, UI), Pengalaman Pengguna (User Experience, UX)
- Alatan: Figma/Adobe XD, Zeplin, Google Sheet (mengumpul pandangan pengguna)
-
Pengaturcaraan
- Timbunan: JAMStack (Javascript, API, Markdown)
- Frontend:
- Bahasa: Javascript
- Kerangka: Angular/React/Vue/Svelte dsb
- Pilihan lain: Tanpa-kod(no-code) spt. Glide
- Backend:
- Bahasa: Javascript (NodeJS)/PHP/Python dsb
- Kerangka: ExpressJS/FeatherJS/NestJS
- Sistem Pengurusan Kandungan (CMS): Strapi/Contentful
- Pengkalan Data:
- SQL: MySQL/PostgreSQL
- NoSQL: MongoDB/Firebase/Supabase
-
Pengujian
- Bahasa: Javascript
- Kerangka: Mocha/Jest dsb.
- Alatan lain: Lighthouse, WebDev
-
Penyebaran
- Kemahiran: pelayan awan (cloud server), antara muka baris arahan (command line interface, CLI), Git, Pembekal Git
- Servis: Vercel/Netlify/Github Pages/Heroku
Nak lagi ringkas?
Figma, MERN (MongoDB, ExpressJS, React, NodeJS), Strapi, Vercel untuk React, Heroku untuk ExpressJS atau Strapi. Dah. Boleh dah cari semua yang saya senaraikan tu.
Konklusi
Mungkin ada yang akan rasa pembangunan web susah, sebab banyak nak belajar. Tapi jangan risau, sebab dah banyak templat sumber terbuka yang tersedia di Github, kalau anda pandai mencarinya. Walau bagaimana pun, kemahiran untuk kuasai pembangunan web, tidak terhad kepada pengaturcaraan sahaja. Kemahiran penyelesaian masalah dan analisis keperluan sangat penting bagi saya dalam menghasilkan produk yang bermakna. Dan yang paling penting, jangan mudah mengalah πͺ.
Baiklah, untuk itu sahaja pada minggu ini, dan saya tamatkan dengan wassalamualaikum!
Top comments (0)