Cara Membuat Aplikasi Obrolan Video

Beberapa hari yang lalu saya menemukan tutorial Twilio yang luar biasa dari Phil Nash yang menjelaskan cara membuat Video Chat menggunakan React Hooks, jadi saya memutuskan untuk menjalankannya di Back4app karena gratis, luar biasa, dan dapat diintegrasikan dengan Parse, sehingga saya dapat memiliki web hosting gratis (termasuk subdomain back4app gratis), meng-host Aplikasi saya dan menggunakan pengiriman data real-time untuk menyertakan fitur obrolan di masa mendatang.
Tulisan ini adalah panduan tentang apa yang saya lakukan untuk membuatnya berfungsi.

Hal pertama yang pertama

Saya sangat menyarankan untuk membaca artikel Phil dan membuatnya bekerja di mesin Anda sebelum membuatnya bekerja secara online.

Anda akan membutuhkan pengetahuan minimal tentang NodeJS, React dan Express untuk melanjutkan. Saya akan menjelaskan langkah-langkah yang saya ambil dan alasannya, tetapi jika Anda tidak terbiasa dengan teknologi-teknologi tersebut, Anda mungkin tidak mengerti mengapa mereka dibutuhkan.

Langkah Pertama – Apa yang Anda perlukan

Artikel Phil menyatakan bahwa Anda perlu menginstal Node.js dan NPM dan bekerja. Saya sudah memilikinya di sistem saya, jadi pastikan Anda juga memilikinya.

Selain itu, Anda memerlukan akun Twilio, jadi buatlah akun gratis dan Anda siap menggunakannya.

Langkah Kedua – Memulai

Langkah pertama, mengkloning repositori, tidak berhasil bagi saya. Perintah Phil menyatakan:

git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks

memberi saya beberapa kesalahan dan, pada akhirnya, yang berhasil bagi saya adalah yang satu ini:

git clone https://github.com/philnash/twilio-video-react-hooks.git

Dengan mengesampingkan hal itu, perintah lainnya dapat dijalankan dengan baik:

cd twilio-video-react-hooks
install npm

Hasil:

Jika Anda menjalankan secara lokal, Anda harus mengatur file env Anda seperti yang dijelaskan dalam artikel Phil, tetapi karena fokusnya di sini adalah menjalankannya di Back4app, saya akan melewatkannya untuk saat ini.
Kita masih membutuhkan nilai TWILIO_API_KEY, TWILIO_API_SECRET, dan TWILIO_ACCOUNT_SID dari akun Twilio Anda, tetapi kita akan menggunakannya di tempat yang berbeda.

Mengubah sedikit kode

Karena arsitektur kami berbeda, kami perlu mengubah beberapa hal penting.

Yang pertama adalah modul-modul NPM. Perintah install npm di atas akan menginstal modul-modul tersebut di komputer Anda, tetapi di Back4app Anda perlu memberi tahu Parse untuk menginstalnya untuk Anda.

Kami memiliki tutorial yang sangat bagus untuk menjelaskan cara melakukannya, jadi lihatlah di sini.

Pada akhirnya, file package.json saya menjadi seperti ini:

{ 
   "dependencies": {
           "express-pino-logger": "*",
           "twilio": "*"  
   } 
}

Perhatikan bahwa saya memasang modul Twilio dalam versi terbarunya (‘*’ berarti yang terbaru). Pada titik ini Anda mungkin bertanya mengapa saya melakukannya, karena Parse sudah memiliki modul Twilio yang sudah terpasang di dalam stack:

Dan alasannya adalah versi. Untuk kompatibilitas, setiap versi Parse memiliki tumpukan modul dengan versi tertentu, yang mungkin atau mungkin tidak berfungsi untuk kasus spesifik Anda. Untuk menggunakan versi apa pun yang tidak terdaftar dalam tumpukan, kita dapat memastikan Parse menginstal versi yang benar dengan menentukannya dalam file package.json.

Mari kita bangun

Untuk men-deploy, kita harus membuat versi yang dioptimalkan pada saat runtime dari kode kita. Dalam artikel Phil, dia menyatakan bahwa kita harus menjalankannya:

npm run dev

yang akan bekerja untuk lingkungan lokal, tetapi dalam kasus kita, dari dalam direktori proyek, kita akan menjalankannya:

npm menjalankan build

yang akan menghasilkan folder baru bernama build, yang berisi semua aset kita:

Kita kemudian akan mengunggah semua konten di dalam folder build ke folder Public di bagian Cloud Code.

Ada beberapa pendekatan berbeda untuk mengunggah. Anda bisa melakukannya secara manual dari peramban Anda, tetapi saya lebih suka CLI Back4app untuk menerapkan semuanya untuk saya. Ini jauh lebih cepat dan akan memastikan semuanya sudah siap.

Pada akhirnya, struktur utama Anda akan terlihat seperti ini:

Mengonfigurasi App.js

Ada satu berkas yang harus Anda ubah secara manual: berkas index.js di dalam direktori server proyek.

Parse dikonfigurasi untuk menjalankan berkas bernama app.js, bukan index.js, jadi mari kita ganti nama berkas tersebut.

Anda dapat membuat salinan bernama app.js, mengganti nama aslinya menjadi app.js, tetapi pada akhirnya, salinan tersebut harus bernama app.js:

Kita juga perlu membuat beberapa perubahan pada file tersebut.

Pada baris 7, di mana dikatakan

const app = express();

Parse sudah memiliki Express yang dimuat dan di-instansiasi, sehingga akan menimbulkan konflik. Mari kita beri komentar pada baris tersebut:

Juga, baris 41 hingga 43, di mana dikatakan:

app.listen(3001, () =>
  console.log('Server Express sedang berjalan di localhost:3001')
);

Parse tidak akan dapat membuka port tersebut karena alasan keamanan, jadi mari kita beri komentar juga:

Hal lainnya adalah, pada akhirnya, kami tidak pernah menggunakan modul express-pino-logger, jadi mari kita komentari baris 4 dan 10, di mana dikatakan:

const pino = require('express-pino-logger')();
...
app.use(pino);

Jadi, akan terlihat seperti ini:

Sekarang, di bagian paling atas berkas, Anda akan melihat bahwa berkas ini memanggil dua berkas lokal lainnya: config dan token:

const config = require('./config');
...
const { videoToken } = require('./tokens');

Kita akan membutuhkan berkas-berkas lokal tersebut untuk diunggah bersama dengan berkas app.js, jadi mari unggah ketiga berkas tersebut di folder Cloud.

Struktur akhirnya akan terlihat seperti ini:

Bagian pengkodean selesai

Sekarang kode kita sudah digunakan dan semuanya sudah siap digunakan. Sekarang saatnya untuk beberapa konfigurasi.

Ingat di mana Phil mengatakan bahwa kita harus mengatur berkas .env dengan kredensial dari Twilio?
Di Parse, kita memiliki bagian untuk itu di panel Pengaturan Server.
Buka panel Environment Variables:

Dan aturlah seperti yang Anda lakukan pada file .env:

Ingatlah bahwa Anda dapat mengambil nilai-nilai tersebut dari akun Twilio Anda:

Mengkonfigurasi Hosting Web

Sekarang, pada panel Pengaturan Server, buka bagian Web Hosting dan Kueri Langsung:

Aktifkan Hosting Web dan atur subdomain back4app.io untuk Aplikasi Anda:

Simpan dan Anda siap untuk pergi.

Pengujian

Sekarang saatnya untuk menguji aplikasi kami.

Buka URL yang Anda tetapkan pada hosting web Anda dari browser. Ingatlah untuk menggunakan HTTPS sebagai protokol.
Karena kami akan meminta akses ke kamera Anda, maka Anda wajib menggunakan HTTPS, jika tidak, Anda akan mendapatkan kesalahan. Jadi, pergilah ke:

https://Your_Domain_Name.back4app.io

Browser Anda akan meminta izin untuk menggunakan kamera dan mikrofon Anda. Jika Anda memberikan izin tersebut, Anda akan melihat diri Anda sendiri di layar:

Kesimpulan

Memiliki proyek React Anda di Back4app itu mudah, gratis, dan mengagumkan. Hanya dengan sedikit pengerjaan ulang, kita bisa membuat proyek Phil berjalan dan berjalan.

Kami juga mendapatkan semua keuntungan dari Parse dan Back4app: aman, dapat diskalakan, toleran terhadap kegagalan, dan memiliki cadangan yang sudah disiapkan untuk Anda.

Anda bahkan dapat memompanya dengan fitur Parse seperti Masuk dengan Google, Masuk dengan Apple, Masuk dengan LinkedIn, pengiriman data secara real-time, dan menautkannya dengan Database Hub kami yang sangat mengagumkan.

Ini adalah kekuatan yang besar, banyak fitur, dan yang terbaik: semuanya gratis bagi Anda untuk menjalankan aplikasi kecil.


Alex Kusmenkovsky

Leave a reply

Your email address will not be published.