Görüntülü Sohbet Uygulaması Nasıl Oluşturulur

Geçen gün Phil Nash ‘in React Hooks kullanarak nasıl Görüntülü Sohbet yapılacağını açıkladığı bu harika Twilio eğitimine rastladım, bu yüzden ücretsiz olduğu, harika olduğu ve Parse ile entegre edilebildiği için Back4app ‘te çalıştırmaya karar verdim, böylece ücretsiz web barındırma (ücretsiz back4app alt alan adı dahil) alabilir, Uygulamamı barındırabilir ve gelecekte sohbet özelliklerini dahil etmek için gerçek zamanlı veri dağıtımını kullanabilirdim.
Bu yazı, uygulamayı çalışır hale getirmek için neler yaptığımı anlatıyor.

Her şey sırayla

Phil’in makalesini okumanızı ve çevrimiçi olarak çalıştırmadan önce makinenizde çalıştırmanızı şiddetle tavsiye ederim.

Devam etmek için NodeJS, React ve Express hakkında minimum bilgiye ihtiyacınız olacak. Attığım adımları ve nedenlerini açıklayacağım, ancak bu teknolojilere aşina değilseniz, bunların neden gerekli olduğunu tam olarak anlayamayabilirsiniz.

İlk Adım – Neye ihtiyacınız olacak

Phil’in makalesinde Node.js ve NPM ‘nin kurulu ve çalışır durumda olması gerektiği belirtiliyor. Benim sistemimde zaten vardı, bu yüzden sizde de olduğundan emin olun.

Ayrıca, bir Twilio hesabına ihtiyacınız olacak, bu yüzden ücretsiz bir tane oluşturun ve gitmeye hazırsınız.

İkinci Adım – Başlarken

İlk adım olan depoyu klonlama benim için çalışmadı. Phil komutu şöyle diyor:

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

bana birkaç hata verdi ve sonunda benim için işe yarayan şey bu oldu:

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

Bunu bir kenara bırakırsak, diğer komutlar iyi bir şekilde yerine getirildi:

cd twilio-video-react-hooks
npm kurulumu

Sonuç:

Yerel olarak çalıştırıyorsanız, env dosyanızı Phil’in makalesinde açıklandığı gibi ayarlamanız gerekir, ancak buradaki odak noktası Back4app’ta çalıştırmak olduğu için şimdilik bunu atlayacağım.
Twilio hesabınızdan TWILIO_API_KEY, TWILIO_API_SECRET ve TWILIO_ACCOUNT_SID değerlerine hala ihtiyacımız olacak, ancak bunları farklı bir yerde kullanacağız.

Kodu biraz değiştiriyorum

Mimarimiz farklı olduğu için birkaç önemli şeyi değiştirmemiz gerekecek.

Bunlardan ilki NPM modülleridir. Yukarıdaki npm install komutu modülleri bilgisayarınıza yükleyecektir, ancak Back4app’de Parse’a bunları sizin için yüklemesini söylemeniz gerekir.

Nasıl yapılacağını açıklayan harika bir eğitimimiz var, buradan göz atın.

Sonunda package.json dosyam şu şekilde sonuçlandı:

{ 
   "bağımlılıklar": {
           "express-pino-logger": "*",
           "twilio": "*"  
   } 
}

Twilio modülünü en son sürümüyle yüklediğime dikkat edin (‘*’ en son anlamına gelir). Bu noktada neden böyle yaptığımı sorabilirsiniz, çünkü Parse zaten yığında yerleşik bir Twilio modülüne sahip:

Bunun nedeni de versiyonlama. Uyumluluk için, her Parse sürümü, sizin özel durumunuz için işe yarayabilecek veya yaramayabilecek belirli sürümlere sahip modül yığınına sahiptir. Yığında listelenmeyen herhangi bir sürümü kullanmak için, package.json dosyasında belirterek Parse’ın doğru sürümü yüklediğinden emin olabiliriz.

Hadi inşa edelim

Dağıtmak için kodumuzun çalışma zamanı için optimize edilmiş bir sürümünü oluşturmalıyız. Phil’in makalesinde, çalıştırmamız gerektiğini belirtiyor:

npm run dev

yerel bir ortam için çalışacaktır, ancak bizim durumumuzda, projenin dizininin içinden çalıştıracağız:

npm run build

Bu, tüm varlıklarımızı içeren build adında yeni bir klasör üretecektir:

Daha sonra derleme klasörümüzün içindeki tüm içeriği Cloud Code bölümündeki Public klasörümüze yükleyeceğiz.

Yükleme için farklı yaklaşımlar var. Bunu tarayıcınızdan manuel olarak yapabilirsiniz ancak ben her şeyi benim için dağıtması için Back4app CLI ‘yi tercih ediyorum. Çok daha hızlıdır ve her şeyin yerinde olmasını sağlar.

Sonunda, ana yapınız şu şekilde görünmelidir:

App.js’yi Yapılandırma

Manuel olarak değiştirmeniz gereken bir dosya var: projenin sunucu dizini içindeki index.js dosyası.

Parse, index.js değil app.js adlı bir dosyayı çalıştıracak şekilde yapılandırılmıştır, bu yüzden dosyayı yeniden adlandıralım.

app.js adında bir kopya oluşturabilir, orijinalini app.js olarak yeniden adlandırabilirsiniz, ancak sonuçta app.js olarak adlandırılması gerekir:

Bu dosyada da birkaç değişiklik yapmamız gerekecek.

7. satırda şöyle yazıyor

const app = express();

Parse zaten Express’i yüklemiş ve örneklemiş olduğundan bu durum çakışacaktır. Bu satırı yorumlayalım:

Ayrıca, 41’den 43’e kadar olan satırlarda şöyle yazıyor:

app.listen(3001, () =>
  console.log('Express sunucusu localhost:3001 üzerinde çalışıyor')
);

Parse güvenlik nedeniyle bu portu açamayacaktır, bu yüzden onu da yorumlayalım:

Bir başka şey de, sonuçta express-pino-logger modülünü hiç kullanmadık, bu yüzden 4. ve 10. satırları yorumlayalım:

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

Yani şöyle görünecek:

Şimdi, dosyanın en üstünde, bu dosyanın iki yerel dosyayı daha çağırdığını fark edeceksiniz: config ve tokens:

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

Bu yerel dosyaların app.js dosyasıyla birlikte yüklenmesine ihtiyacımız olacak, bu yüzden üç dosyayı da Cloud klasörüne yükleyelim.

Son yapı şu şekilde görünecektir:

Kodlama kısmı tamamlandı

Artık kodumuz dağıtıldı ve her şey kullanıma hazır. Bazı konfigürasyonların zamanı geldi.

Phil’in .env dosyasını Twilio’dan gelen kimlik bilgileriyle ayarlamamız gerektiğini söylediği yeri hatırlıyor musunuz?
Parse’da, Sunucu Ayarları panelinde bunun için bir bölümümüz var.
Ortam Değişkenleri panelini açın:

Ve tıpkı .env dosyasında yaptığınız gibi ayarlayın:

Bu değerleri Twilio hesabınızdan alabileceğinizi unutmayın:

Web Hosting Yapılandırma

Şimdi, Sunucu Ayarları bölmesinde Web Hosting ve Canlı Sorgu bölümüne gidin:

Web Hosting’i etkinleştirin ve Uygulamanız için bir back4app.io alt alan adı belirleyin:

Kaydedin ve gitmeye hazırsınız.

Test

Şimdi uygulamamızı test etme zamanı.

Bir tarayıcıdan web hostinginizde belirlediğiniz URL’ye gidin. Protokol olarak HTTPS kullanmayı unutmayın.
Kameranıza erişim isteyeceğimiz için HTTPS kullanmanız zorunludur, aksi takdirde hata alırsınız. Bu yüzden şu adrese gidin:

https://Your_Domain_Name.back4app.io

Tarayıcınız kameranızı ve mikrofonunuzu kullanmak için izin istemelidir. Bu izinleri verirseniz, kendinizi ekranda görmeniz gerekir:

Sonuç

React projenizin Back4app’te olması kolay, ücretsiz ve harika. Sadece küçük bir değişiklikle Phil’in projesini çalışır hale getirebiliriz.

Ayrıca Parse ve Back4app’in tüm avantajlarına sahibiz: güvenli, ölçeklenebilir, hataya dayanıklı ve sizin için önceden ayarlanmış yedekleri var.

Hatta Google ile Oturum Açma, Apple ile Oturum Açma, LinkedIn ile Oturum Açma, gerçek zamanlı veri iletimi gibi Parse özellikleriyle pompalayabilir ve süper harika Veritabanı Merkezimize bağlayabilirsiniz.

Çok fazla güç, çok fazla özellik ve en iyisi: küçük uygulamaları çalıştırmanız için hepsi ücretsiz.