Tutorial Memulai Membuat Aplikasi iOS Menggunakan React Native

  


Assalamu'alaikum Wr. Wb.

          React adalah Library JavaScript yang dapat digunakan untuk membagun aplikasi front-end(aplikasi yang berhadapan langsung dengan pengguna), sedangkan React Native adalah sebuah Framework yang digunakan untuk membangun aplikasi Android dan iOS bahkan sekarang juga dapat digunakan untuk membangun aplikasi Desktop Windows dan Desktop MacOS, Framework sendiri adalah kerangka kerja yang berisi file-file yang mendukung proses pengembangan sebuah aplikasi dan membuildnya sehingga dapat digunakan sebagai aplikasi utuh oleh user atau pengguna, selanjutnya seperti judul di atas saya akan membagikan cara bagaimana mulai membangun aplikasi iOS menggunakan React Native, tentu saja kita hanya bisa melakukan pengembangan aplikasi iOS pada Sistem Operasi MacOS.

  1. Install Node.js
             
    Pertama yang harus kita lakukan adalah menginstall Node.js pada komputer kita, ada dua pilihan untuk menginstallnya, pertama menggunakan Homebrew dan kedua menginstallnya secara manual dengan mendownloadnya langsung dari website Node.js.

    Menginstall Node.js menggunakan Homebrew
              
    Homebrew adalah package manager yang dapat digunakan untuk mendownload dan menginstall package pada Sistem Operasi MacOS, untuk menginstall Homebrew pada komputer MacOS anda bisa mengunjungi halaman ini, selanjutnya anda dapat menginstall Node.js  menggunakan perintah "brew install package_name" pada terminal sebagai berikut:

              brew install node (untuk menginstall node.js versi terbaru)
                                                atau 
              brew install node@node_version (untuk menginstall node pada versi tertentu)

    Menginstall Node.js dengan mendownloadnya dari Website Node.js
              
    Cara yang kedua terbilang cukup mudah, anda tinggal mengunjungi website https://nodejs.org, di halaman pertama website tersebut terdapat opsi untuk mendownload Node.js yang paling terbaru atau yang LTS terbaru, anda juga dapat mendownload versi sebelumnya dengan mengunjungi halaman https://nodejs.org/en/download/releases/, setelah anda berhasil mendownloadnya ke komputer anda, anda tinggal menginstall Node.js seperti anda menginstall aplikasi MacOS pada umumnya.
  2. Install Xcode
               Selanjutnya kita perlu menginstall Xcode, Xcode adalah Software yang berisi lingkungan yang mendukung untuk mengembangkan aplikasi iOS dan MacOS, diantaranya terdapat Editor, emulator, compailer, dan lain sebagainya, anda dapat mendownload dan menginstall Xcode di AppStore. Untuk aplikasi iOS biasanya Xcode hanya digunakan untuk mengcompile, memanage package, dan dan menampilkan emulater untuk project anda.
  3. Menginstall Xcode Command Line Tools(Opsional)
                Jika anda mengikuti Dokumentasi asli React Native anda akan disarankan untuk menginstall Command Line Tools, di dalam Command Line Tools terdapat banyak tools seperti make, awk, sed, ssh, tar, dan zip yang akan sangat berguna dan dibutuhkan dalam melakukan pengembangan Software. Untuk menginstall Command Line Tools memilih XCode Menu -> Preferences -> Panel Locations -> install tools dengan memilih versi Command Line Tools pada dropdown.
  4. Menginstall iOS Simulator
                 
    Simulator adalah Software untuk menjalankan Perangkat iPhone dengan Sistem Operasi iOS yang digunakan untuk melakukan debugging saat mengembangkan aplikasi iOS, anda dapat menginstall Simulator dengan memilih XCode Menu -> Preferences -> Panel Components -> pilih Versi iOS yang ingin anda install lalu install.
  5. Install CocoaPods
                  CocoaPods adalah deppendency manager untuk Project Xcode, deppendency-manager sendiri adalah tools yang berguna untuk memanage(mendownload, menghapus, dsb.) package-package yang dibutuhkan pada Project Xcode anda sama halnya npm dan yarn yang akan mendownload package-package yang nama-namanya terdapat pada package.json, anda dapat menginstall CocoaPods menggunakan gems dengan mengetikkan perintah berikut pada terminal MacOS anda:

                   sudo gem install cocoapods
        
                  Atau anda bisa menggunakan version manager untuk ruby yaitu rbenv untuk memberikan versi Ruby yang cocok untuk template yang diminta saat anda ingin membuat project iOS menggunakan React Navie. Untuk MacOS dengan Prosesor M1 kemungkinan akan mengalami masalah saat menggunakan CocoaPods, maka anda dapat menggunakan perintah di bawah  yang akan menginstall package ffi dan membuat anda  dapat menjalankan perintah pod install nantinyaperintah tersebut adalah:

                  sudo arch -x86_64 gem install ffi
                                dan
                  arch -x86_64 pod install

  6. Buat Aplikasi Pertama Anda
    Untuk membuat aplikasi pertama anda, anda dapat menggunakan perintah berikut:

              npx react-native init NamaAplikasiAnda

                Perintah di atas akan membuat aplikasi pertama anda dengan menginstall template dan apapun yang anda butuhkan untuk melakukan pengembangan aplikasi anda dan menginstallnya pada perangkat terpasang atau emulator yang ada, sekaligus akan membuka terminal dengan metro server sebagai runtime untuk mendebug aplikasi anda, atau anda dapat menggunakan npm atau yarn untuk membukan runtime error aplikasi React Native iOS anda dengan mengetikkan perintah berikut pada terminal:

               npm start 
                  atau
               yarn start
       
               Untuk npm sendiri biasanya sudah terinstall saat anda menginstall node.js pada perangkat anda, sedangkan untuk yarn anda dapat mengetikkan perintah berikut pada terminal:

               npm install --global yarn

              npm dan yarn sebenarnya sama-sama package manager hanya saja jika yarn bisa dibilang lebih bagus dibandingkan npm karena pernah ditemukan issue atau masalah pada npm.
  7. Menyiapkan aplikasi yang sudah tersedia
              Lamgkah ke 6 adalah langkah jika anda ingin membuat Project React Native iOS baru, berbeda jika anda sudah memiliki Project React Native iOS yang mungkin anda dapatkan dari github atau dari teman anda maka yang perlu anda lakukan sebelum melakukan pengembangan aplikasi iOS adalah menginstall package-packagenya terlebih dahulu dengan mengetikkan perintah:

                pod init (untuk menginisialisasi Project iOS anda)
                pod install(untuk menginstall package-package pada Project iOS anda)
                
                 Dengan perintah pod init maka akan membuat file Podfile pada Project iOS anda, jika Podfile sudah ada maka anda tidak perlu memengetikkan perintah pod init pada terminal, dan cukup mengetikkan perintah pod install.

  8. Menyiapkan Project iOS menggunakan Xcode
                  Setelah melakukan langkah ke 7 maka anda dapat memulai melakukan instalasi aplikasi debug menggunakan Xcode, caranya adalah dengan masuk ke file ios pada Project React Native iOS anda dan pilih file projectanda.xcworkspace dengan melakukan klik kanan pada file dan buka file menggunakan Xcode -> memilih emulator -> build aplikasi Xcode anda.
                   Sama seperti saat anda menggunakan perintah npx react-native run-android, dengan menggunakan Xcode anda juga akan disediakan terminal dengan runtime metro server untuk debugging aplikasi iOS anda.



  9. Selamat anda sudah bisa melakukan pengembangan aplikasi React Native iOS anda:-)

Posting Komentar

0 Komentar