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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Kenapa
   memilih web?
   Mudah dicari
   Selalu terbarukan Mudah diakses
   Mudah Disebarkan
   

   View Slide

6. Beberapa pekerjaan yang “naik daun” 2021 di
   asia tenggara
   ksana.in/jobs-sea-2021
   

   View Slide

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
   

   View Slide

8. Beberapa pekerjaan yang “naik daun” 2021 di
   asia tenggara
   

   View Slide

9. predictsalary.com/salaries
   Berapa rentang gaji
   Web developer?
   

   View Slide

10. Beberapa bagian dari web
    Perangkat
    Peramban Antarmuka Peladen Basis data
    

    View Slide

11. Bagian mana kerjaannya web developer?
    Perangkat
    Peramban Antarmuka Peladen Basis data
    Web Developer
    

    View Slide

12. Spesialisasi profesi
    Antarmuka Peladen Basis data
    Web Developer
    DB
    ADMINISTRATOR
    Backend developer
    Frontend
    developer
    System
    Engineer/Devops
    

    View Slide

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…
    

    View Slide

14. Backend vs Frontend
    Java
    Go
    Python
    PHP
    Ruby
    HTML
    CSS
    JavaScript
    

    View Slide

15. Membuat web (hampir) tanpa biaya
    1 2
    3
    4
    

    View Slide

16. Alternatif hosting gratis
    

    View Slide

17. Custom domain (Kalau perlu)
    Wowww
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. Tren teknologi terkini: javascript
    https://2021.stateofjs.com/en-US/libraries/front-end-frameworks
    

    View Slide

22. Tren teknologi terkini: alat build
    https://2021.stateofjs.com/en-US/libraries/build-tools
    

    View Slide

23. Tren teknologi terkini: css
    https://2020.stateofcss.com/en-US/technologies/css-frameworks/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. belajar jadi pengembangan web
    https://roadmap.sh
    

    View Slide

27. #MULAIAJADULU
    

    View Slide

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
    

    View Slide

29. Membaca
    Kolaborasi
    Komunikasi
    Berpikir kritis
    Growth Mindset
    Beradaptasi dengan perubahan
    Bahasa Inggris
    Skill non-teknis yang sering diremehkan
    

    View Slide

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
    

    View Slide

31. Unduh slide
    speakerdeck.com/mazipan
    

    View Slide

32. CREDITS: This presentation template was created by
    Slidesgo, including icons by Flaticon, and infographics
    & images by Freepik.
    TERIMA KASIH!
    Silahkan bertanya!!!
    

    View Slide