Skip to main content

Cara Mengambil Foto dengan RNCamera dan Upload Foto ke API di React Native

Berikut ini catatan singkat saya saat belajar mengambil dan upload foto ke API menggunakan React Native yang saya pelajari saat mengikuti Indonesia Mengoding Intensive Coding Bootcamp React Native Kelas Project yang diadakan Sanbercode.

Sebelumnya, bukan bermaksud iklan, namun pengalaman saya mengikuti batch online intensive coding bootcamp di Sanbercode cukup recommended (khususnya jika kita sudah memiliki sedikit saja dasar pengetahuan programming. Jika belum ada dasar pengalaman pemrograman, Sanbercode juga menawarkan kelas dasar yang bisa diikuti pemula). Jadi ini adalah honest review.

Saya sendiri telah mengambil kelas Laravel Web Devt (30 hari), React Native Dasar (30 hari) dan React Native lanjutan atau kelas project (30 hari). Investasi totalnya hanya 700 ribu rupiah (3 bulan intensive online bootcamp!), itu jika tanpa potongan. 

Dengan biaya 200 ribu rupiah untuk kelas dasar dan 300 ribu rupiah untuk kelas project, saya rasa jika dibandingkan Coding Bootcamp lain yang harganya jutaan itu ini jauh lebih terjangkau. 

Kebetulan sy dapat voucher 100rb (lumayan) karena pas di kelas Laravel dapat teman satu kelompok yang sudah jago sehingga final project Buqueku (demo app di sini) masuk jadi salah satu final project terbaik di batch tsb. Jadi saya hanya mengeluarkan 600 ribu rupiah, untuk 3 bulan intensive bootcamp!

Kenapa 600-700 ribu rupiah menurut saya worth it? Ya bandingkan saja dengan bootcamp lain (yang di masa pandemi ini sama-sama online juga, tapi biayanya jutaan). Tidak perlu sebut nama, yang pasti paling murah saja sekitar 6 jutaan, kalau tidak salah waktunya juga 1-1.5 bulan. Ada juga yang di atas 20 jutaan. Ini jelas barrier to entrynya tinggi.

Ilmu/pendidikan memang nggak murah si.. dan tergantung kurikulum/programnya juga.. karena untuk dapat ilmunya itu memang susah dan mahal.. hanya saja kalau terlalu mahal atau mendorong calon pembelajar masuk ke dalam lilitan hutang dan membuat barrier to entry makin tinggi dan terkesan eksklusif juga kok ya gimana ya.. jadinya sangat mungkin memunculkan semacam vicious cycle... lingkaran setan "komersialisasi" ilmu (meskipun sebenarnya yg mahal sangat mungkin bukan ilmunya melainkan mungkin servis/layanan personal mentoring sehingga lebih fokus, ataupun penyaluran langsung tenaga kerja langsung ke industri)... tp bagaimana kalau kita mau belajar tp bukan untuk jadi pekerja, tapi mau bangun usaha UKM sendiri? lha ini, bisa-bisa modalnya habis di sini dan gak jd buka usaha.. jd tetap saja mahal, that's a kind of barrier for people like me/or us...

Ini beda banget jika dianalogikan: lhah ente kok berani beli Mac gak berani bayar kursus coding yg mahal dan bonafide? Jelas beda, beli Mac itu belanja modal yg InsyaAllah bs bertahan lebih dari 1 periode akuntansi (dan kalau case saya sendiri, belinya Mac 2nd yg dah tua --11 tahun-- tp masih produktif buat kerja compared to my younger Windows machine and it cost me less than 5mio)..

Lhah klo belajar ilmu apalagi yg erat kaitannya dengan practical skills dan konteks industrinya sangat dinamis/cepat sekali berubah/berkembang, tidak ada jaminan ilmunya masih nempel di otak kita sampai tahun depan he.. he.. he...

Mungkin ceruk pasar ini pula yg akhirnya jg ditangkap Sanber (calon founder UKM/startup yg duitnya lbh baik untuk modal, tp dia masih perlu belajar skill IT). 

Nah, kalau bootcamp yang versi harga terjangkau di Sanber, kalau njenengan mau coba daftar, monggo...dijamin worth it di era IT sekarang ini (meskipun ada beberapa kelemahan dalam hal isi materi, tp ini sangat tergantung sekali lagi sangat tergantung dari siapa trainer untuk kelas tsb ya.. untuk 3 kelas yg saya ikuti paling OK adalah kelas React Native project yg CrowdFunding --mungkin ini karena pesertanya jg tidak banyak jd bisa fokus trainernya--, kedua yang React Native dasar --bagus jika kita sudah memiliki sedikit basic tentang javascript--, baru yang terakhir adalah yang Laravel dasar -- materi banyak diambil dari materi third party yang sudah ada di YouTube -- jadi di awal saya malah sempat kurang semangat khusus utk yg Laravel)

Nah kalau mau coba daftar bisa juga pakai kode kupon afiliasi ini:  INTENSIFCODING (kalau tidak salah ada diskon 10% kalau pakai kupon). Kalau daftar dengan kupon kan lumayan bisa dapat potongan, selain itu dg demikian sy jg bisa dapet potongan harga juga kalau mau kursus lagi di sana lagi he he he... :) Simbiosis mutualisme kalau kata guru biologi jaman baheula dulu.. Ini bannernya untuk Batch 22:


Ok.. kembali ke pembahasan..

Dari pembelajaran kemarin, beberapa langkah untuk membuat fungsionalitas pengambilan foto dengan camera di smartphone Android serta upload hasilnya ke API kurang lebih seperti berikut:

  1. Melakukan import modul / library yang diperlukan, mulai dari useState, useEffect dan useRef, Modal, RNCamera, dan Axios.
  2. Mendefinisikan baseurl apabila uri photo yang nantinya akan kita tampilkan adalah relative path.
  3. Mendefinisikan default image untuk ditampilkan sebagai placeholder seandainya kita belum memiliki photo.
  4. Mendefinisikan state (baik state untuk photo, setPhoto; lalu state untuk editable, setEditable; lalu state untuk mengatur tipe kamera yang dipakai yaitu type, dan setType, kemudian state untuk menampilkan Modal yaitu isVisible dan setIsiVisible) dan initial value nya. Untuk photo jika belum ada foto bisa diisi dengan default image/image no photo; isVisible diset false karena pada saat awal masuk screen Modal tidak langsung ditampilkan. Kemudian editable untuk mengatur apakah TextInput yang bersamaan dengan foto bisa diedit atau tidak.
  5. Membuat UI untuk Modal berisi komponen RNCamera serta button terkait (edit photo/image, flip camera -- dimana type adalah 'back' untuk kamera belakang dan 'front' untuk kamera depan, serta button untuk take picture). Terakhir adalah button untuk Submit data multipart/form-data (data photo dan tulisan) ke API.

Import Module/library

Import RNCamera

Definisi baseurl dan default image/photo


 

Definisi State/Hooks

carikutu.com

Di sini useRef digunakan untuk memberikan point reference ke komponen <TextInput> dan tombol untuk mengaktifkan kamera <TouchableOpacity> yang kita tuju. Sedangkan useState digunakan untuk mendefinisikan nilai pada variable kita yang memiliki state/stateful.

 

Membuat UI

komponen Modal berisi RNCamera

 
carikutu.com

Cek apakah photo sudah ada isinya atau belum, jika belum, isi dengan default photo

carikutu.com

 
carikutu.com

Mengambil gambar/photo dari RNCamera dan update state UI

Mengambil photo dari RNCamera carikutu.com

 

Flip camera

flip camera RNCamera carikutu.com

 

Mengakses foto yang tersimpan sementara di device dan submit ke API

carikutu.com

Nah, kurang lebih itu Cara Mengambil Foto dengan RNCamera dan Upload Foto ke API di React Native yang saya pelajari saat bootcamp React Native kelas project di Sanbercode..

Semoga bermanfaat luurrrr....! :) 

Terus semangat belajar..


Comments

Popular posts from this blog

Belajar Coding Intensive Bootcamp Online 300 ribuan selama Sebulan dapat apa saja?

Sekedar catatan sedikit tentang apa yang saya pelajari saat mengikuti online intensive coding bootcamp kelas project React Native selama sebulan kemarin. Pada umumnya cukup menantang karena setiap hari harus catch up dengan materi yang diberikan dan tugas harian (ya, tugasnya pun setiap hari, jadi peserta mau tidak mau harus coding tiap hari). Selain itu ada quiz tiap akhir pekan atau dalam kasus kelas project tiap akhir pekan harus menyelesaikan Mini Project yang merupakan bagian dari Final Project. Lalu apa saja yang dipelajari selama sebulan tersebut? (dengan biaya Rp 300 K itu? *atau Rp 200K karena saya dapat voucher 100rb). Beberapa hal yang saya pelajari: SplashScreen dan onBoarding  Register (dengan OTP)  Login (dengan JWT ke API Sanbercode, Google Sign In dengan firebase, serta local sign in dengan sidik jari / fingerprint)  Passing data dengan menggunakan route.params melalui navigation, passing data dengan konteks ({useContext}) serta melalui props  Home Page kekinian meman

Cara atau Solusi Mengatasi java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native

 Pernah mengalami error java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native? Ente nggak sendirian Ndan .. Saya juga pernah mengalami error serupa..   Cara mengatasi / solusi / obatnya ternyata cukup simple. Untuk memastikan bahwa pada saat build APK/AAB tidak terjadi OutofMemory error, kita bisa melakukan setting pada file gradle.     Nah, udah tenang kalau sudah ada build successfull hehe.. Semoga bermanfaat..