Membuat Website Zaman Sekarang

Berbagai informasi mengenai pembuatan website dengan teknologi terkini

Transcript

1. MEMBUAT WEBSITE Zaman Sekarang STMIK Widya Cipta Dharma - Samarinda 12 Maret 2022
2. Halo, saya Irfan Maulana (dipanggil mazipan). Saat ini bekerja di Tokopedia sebagai Principal Engineer untuk tim Web Platform, bergabung sejak 2019. Telah menjadi pemrogram web sejak 2013-an. Kalian bisa baca lebih lanjut mengenai saya di blog mazipan.space Bisa juga ikuti twitter saya di @maz_ipan Perkenalan
3. Semua yang saya sampaikan adalah pendapat pribadi saya sebagai profesional berdasarkan pengalaman yang saya pelajari dan berbagai sumber daya yang saya baca, bukan merupakan pendapat resmi dari tempat saya bekerja. Resiko yang timbul sebagai akibat dari kesalahan interpretasi dari materi yang ada, bukan merupakan tanggung jawab saya. Penafian
4. Poin-poin yang akan dibahas Kenapa memilih web? profesi web developer Membuat web dengan (hampir) tanpa biaya Kenyataan kerumitan pengembangan web Belajar pengembangan web Berbagai skill yang perlu ditempa Kesimpulan
5. Kenapa memilih web? Mudah dicari Selalu terbarukan Mudah diakses Mudah Disebarkan
6. Beberapa pekerjaan yang “naik daun” 2021 di asia tenggara ksana.in/jobs-sea-2021
7. • Konsumer di asia tenggara semakin berkembang ke arah “digital”. • Para “Brand” menemukan cara baru untuk berhubungan dengan konsumer. • E-commerce meledak di 2020, melecutkan munculnya berbagai sektor. • Posisi “tradisional” semakin berevolusi, sebagai akibat Covid-19. Beberapa pekerjaan yang “naik daun” 2021 di asia tenggara
8. Beberapa pekerjaan yang “naik daun” 2021 di asia tenggara
9. predictsalary.com/salaries Berapa rentang gaji Web developer?
10. Beberapa bagian dari web Perangkat Peramban Antarmuka Peladen Basis data
11. Bagian mana kerjaannya web developer? Perangkat Peramban Antarmuka Peladen Basis data Web Developer
12. Spesialisasi profesi Antarmuka Peladen Basis data Web Developer DB ADMINISTRATOR Backend developer Frontend developer System Engineer/Devops
13. Backend vs Frontend Rest APIs / GraphQL Business Flow Engine Designing DB Table Caching System Authentication + Authorization Service Communication Server Management Job / Task Scheduler Containerization CI / CD Cloud Service Many more… Visual Layouting Interactivity Server/Client Rendering Client Side Validation Data Fetching Web Performance Web Accessibility Build Process CI / CD Many more…
14. Backend vs Frontend Java Go Python PHP Ruby HTML CSS JavaScript
15. Membuat web (hampir) tanpa biaya 1 2 3 4
16. Alternatif hosting gratis
17. Custom domain (Kalau perlu) Wowww
18. Tambahan konten semi dinamis Metode: • Markdown sebagai sumber konten • Menjadi bagian dari kode • Static-Site Generation (SSG) • Membutuhkan proses build tiap kali ada perubahan • Membutuhkan pengiriman berkelanjutan (continuous delivery) yang baik • Disajikan dalam bentuk web statis Kelebihan: • Pada umumnya bisa lebih cepat dimuat, tidak membutuhkan proses di server • Biasanya lebih murah, banyak tersedia hosting gratisnya • Teknologi lebih familiar dengan Frontend Developer https://jamstack.org/generators/
19. Dukungan data dinamis Headless CMS - Strapi - Ghost - Netlify CMS - Headless Wordpress - Google Doc? Backend as a Service (BaaS) - Firebase - Supabase - AWS Amplify https://jamstack.org/ DB as a Service (DBaaS) - Prisma - PlanetScale - FaunaDB - FireStore from Firebase
20. Contoh nyata web (hampir) tanpa biaya mazipan.space - Next.js - Static generated - Konten dengan markdown - Hosting di Vercel ksana.in - Next.js - Server render - Supabase - Hosting di Vercel pramuka.online - Next.js - Static generated - Konten dengan JS statis - Hosting di Vercel www.baca-quran.id - Next.js - Static generated - Konten dengan berkas JSON statis - Hosting di GitHub learning.byphp.id - Svelte - Static generated - Konten dengan markdown - Hosting di Netlify https://ksana.in/gh
21. Tren teknologi terkini: javascript https://2021.stateofjs.com/en-US/libraries/front-end-frameworks
22. Tren teknologi terkini: alat build https://2021.stateofjs.com/en-US/libraries/build-tools
23. Tren teknologi terkini: css https://2020.stateofcss.com/en-US/technologies/css-frameworks/
24. Bikin aplikasi yang production-grade, gak segampang bikin aplikasi prakarya. Ada lebih banyak sudut pandang yang mesti diperhatikan: • Validasi • Skalabilitas • Keamanan • Performa • Manajemen dependensi • Integrasi dan pengiriman berkelanjutan • Monitoring aplikasi • Dan banyak lainnya Kenyataan kerumitan pengembangan web https://ksana.in/susahnya-bikin-aplikasi
25. Sumber daya: • Materi pembelajaran interaktif • Artikel / tutorials / video / dokumentasi resmi • Mentorship / belajar dari & dengan yang lebih bisa • Belajar bersama / berkelompok • Projek bersama / kode sumber terbuka • Bootcamp / kursus intensif Catatan: • Semuanya butuh komitmen waktu dan tenaga • Tetap perlu praktek, banyak nyoba, berulang, konsisten, bikin projek nyata • Jangan panik kalau error • Tulis ulang yang sudah dipelajari, ajarkan dan bagikan ke teman belajar jadi pengembangan web https://ksana.in/belajar-pemrograman
26. belajar jadi pengembangan web https://roadmap.sh
27. #MULAIAJADULU
28. GIT Version control buat kolaborasi Unix command Biar bisa mengeksekusi berbagi perintah di server dan di lokal Data structure + Algorithm Bisa lancar buat manipulasi berbagai jenis struktur data Debugging skill Biar tidak heboh dan putus asa kalau ketemu bug/error Seni mencari jawaban dan bertanya Biar terbiasa mencari jawaban di mesin pencari, dan bisa bertanya tentang suatu hal dengan lebih baik Skill teknis yang berguna dimana saja
29. Membaca Kolaborasi Komunikasi Berpikir kritis Growth Mindset Beradaptasi dengan perubahan Bahasa Inggris Skill non-teknis yang sering diremehkan
30. Kesimpulan Kenapa WEB? Mudah dicari, mudah diakses, mudah disebarluaskan dan selalu terbarukan Profesi web programmer Menanjak di 2021 dan terlihat menjanjikan di tahun mendatang Bagian dari web Ada layer backend dan frontend, kendati sering dikerjakan oleh orang/tim berbeda, mungkin saja semuanya dikerjakan orang/tim yang sama. Bikin web (hampir) tanpa modal Kita bisa membuat web murah tapi tidak murahan. Bongkar pasang berbagai layanan. Pintar-pintar memanfaatkan layanan gratis yang tersedia. Skill yang perlu dipelajari Ada skill spesifik macam HTML, CSS, JS untuk Frontend. Tapi ada beberapa skill yang bisa diterapkan dimanapun kamu ditempatkan. Jangan lupa untuk mempelajari skill non-teknis juga
31. Unduh slide speakerdeck.com/mazipan
32. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik. TERIMA KASIH! Silahkan bertanya!!!