fbpx
Ervandra Over the past 10 years, Ervan has built a following of over a million entrepreneurs, sold hundreds of thousands of copies of his best selling books, popularized the concept of sales funnels, and build a software company called JagoFunnels that helps tens of thousands of entrepreneurs quickly get their brand voice-out to the marketplace.

Bikin Web Apps Dalam 6 Menit!

2 min read

Holla!

Pernahkah kamu mendengar kata Web Apps ?
Tahukah kamu apa itu web apps?

Ya, pada artikel ini saya ingin sedikit sharing pemahaman saya tentang Web Apps, dan bagaimana cara membuat web apps sederhana dan cepat!

Peringatan

Konten ini ditujukan untuk programmer pemula dan siapapun yang ingin belajar mengenai programming dasar 🙂

Persiapan

Sebagai modal persiapan, kamu tentunya harus tahu sedikit mengenai istilah teknis dan tools yang digunakan oleh para programmer.

Nah ini nih beberapa layanan programming modern yang harus kamu ketahui:

  • Github (Penyedia git repository, tempat taruh source code / codingan kita)
  • Netlify (Server modern gratis, tempat kita hosting web / web apps kita)
  • React.js (Library javascript untuk coding web apps, basis nya javascript)
  • VS Code (Code editor, alternatifnya bisa pakai sublime text, atom, webstorm, notepad, atau bahkan command line sekalipun bisa untuk coding “VIM”)

Nah untuk penjelasan masing-masing diatas akan terlalu panjang nih, jadi saya pisahin di artikel berikut ya.

Mari kita mulai petualangan dengan web apps ini!

Siapkan akun github dan buat repository

Buat para programmer saat ini pasti udah familiar dengan Git dan Github, silakan buat repo baru, dan clone ke local kamu untuk memulai local development. dan masuk ke folder itu melalui command line.

Buat react app dengan menggunakan

create-react-app .

Sehingga kamu membuat app baru di root folder tersebut.

Tunggu proses instalasi hingga selesai, kemudian kamu bisa run web app dengan command:

npm start

Biasanya editor akan langsung membuka browser kamu dan membuka url dasar web apps local kamu, misal:

http://localhost:3000

Kamu bisa langsung lihat template dan halaman standar bawaan dari create-react-app kamu.

Nah tugas kita sekarang memodifikasi halaman dan stylenya, disesuaikan dengan apa yang ingin kita buat.

Silakan buka file App.js yang berada pada folder src

Kamu bisa edit pada bagian setelah return .

Isi nya bebas, layout bisa kamu modifikasi dan bisa kamu gunakan teknik layout boostrap dan menambahkan css dasar bootstrap juga.

Apakah kamu rasa saya perlu buat artikel berikut untuk integrasi bootstrap dengan react.js? Tolong beri tahu saya yaa pendapat kamu..

Commit dan push ke repo github

Setelah kamu menyesuaikan konten dan tampilannya dan kamu rasa uda oke, kamu bisa jalankan command untuk commit git nya..

Biar gampang saya kasi bocoran dulu ya commandnya, nanti kamu pelajari lagi git lebih lanjut kalau belum ngerti:

git add .

git commit -am "update konten, ganti style, tambah gambar"

git push

Kalau kamu uda jalanin command diatas 1 per satu, nanti kamu bisa cek di github kamu apakah code terbaru nya udah berhasil di upload atau tidak.

Netlify

Netlify adalah penyedia hosting modern web dan web apps gratis, kamu bisa buat project dan website sebanyak apapun di netlify gratis (untuk saat ini).

Saya sendiri udah cukup lama pakai netlify dan lumayan kalau mau bikin projek kecil dan untuk keperluan showcase saya bisa pakai netlify.

Fitur andalannya juga adalah auto-deploy, jadi kita ngga perlu berurusan dengan servernya, tidak perlu repot2 ketik command untuk build, deploy, start, clean dan lain lain.

Langkah awal adalah membuat site baru di netlify, kamu bisa pilih New Site from Git dari github kamu, jadi kamu bisa ambil repo github dan jadikan project site di netlify.

Berikut tampilan jika saya klik New Site from Git dan memilih provider Github:

Cukup setting awal command untuk build, dan folder mana yang mau di serve.

Ya sedikit agak teknis dan membuat rumit bagi pemula, tapi ikuti saya sejenak, web apps kamu sudah hampir jadi loh!

Kalau kamu uda setup ini kamu bisa tunggu proses deploy selesai.

Deploy pertama memang agak lama, namun untuk update berikut biasa lebih cepat karena ngga perlu install dari 0 lagi.

Ini salah satu juga contoh project netlify saya:

Ini tampilan frontend UI nya (cepet2 sih waktu itu buatnya)

Akses di https://covid19id.netlify.app/

Panjang juga siiihh prosesnya

Kalau udah terbiasa sih bakal cepet banget heheh, nah untuk yang pingin rekap, saya juga uda buatin video proses pembuatan salah 1 profile web apps mulai dari proses daftar github, netlify, coding hingga deploy.

Cek di video berikut ya:

Nah apakah udah lebih jelas dikit?? Jangan lupa di subscribe channel youtube saya yaa, biar saya bisa semangat juga bikin konten2 video yang berguna untuk ilmu web ini!

Terima kasih gan udah subscribe!

Oh ya, join juga newsletter saya, dan dapetin juga banyak tutorial-tutorial coding web apps dan pengetahuan mengenai programming langsung dari praktisi nya di startup! Yuk segera join di samping >>

Rekap

  • Daftar Github
  • Bikin repo project
  • Clone repo, coding di local
  • Install react app pakai create-react-app
  • Modifikasi isi dan kontennya
  • Git add, git commit, git push
  • Daftar Netlify
  • Tambahkan site dari git
  • Setting build dan deploy
  • Deploy
  • Cek site kamu di domainnya dari netlify

Kalau kamu udah checklist dan selesai semua yang diatas..

Selamat!! Kamu udah punya web apps sendiri yang bisa kamu kembangkan lebih lanjut, dan jangan lupa kamu promosiin ke media sosial kamu, share ke temen-temen kamu, dan berikutnya akan saya bagikan juga bagaimana cara membuat web apps kompleks selanjutnya.

Sobat web mu,
Ervan 🙂

Ervandra Over the past 10 years, Ervan has built a following of over a million entrepreneurs, sold hundreds of thousands of copies of his best selling books, popularized the concept of sales funnels, and build a software company called JagoFunnels that helps tens of thousands of entrepreneurs quickly get their brand voice-out to the marketplace.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share
Tweet
Share
Pin