Mean stack uygulama nasıl geliştirilir?Günümüzde mesajlaşma uygulamaları iletişim kurma şeklimizi değiştirmeye devam ediyor. WhatsApp, Facebook Messenger, Slack veya Viber gibi uygulamaların popülaritesi birçok teknoloji şirketinin de ilgi noktasını değiştirdi.
Mesajlaşma uygulamaları bu kadar popüler konumdayken yazılımcılar için bu uygulamaları geliştirmek harika bir fikir! ????
İlk olarak bu uygulamaları geliştirmek için kullanılan teknolojileri ve özellikleri öğrenmeniz gerekiyor.
Başarılı bir mesajlaşma sohbet uygulaması nasıl oluşturulur diye merak ediyorsanız bu yazı tam size göre!
Modern Sohbet Uygulamalarının Gelişimi
Modern sohbet uygulamaları, her türlü sohbet çözümüne uyarlanabilen dikkate değer işlevlere sahip olmalıdır.
İdeal bir sohbet uygulaması, kurumsal düzeyde iletişim, kişisel sohbet, iş geliştirme iletişimi ve e-ticaret alanlarında gerçekleşecek olan iletişim için çözümler sunma potansiyeline sahip olmalıdır.
Mean Stack Nedir?
Full stack developer, hem back-end, hem front-end, hem de veritabanı programlama kısımlarında uzmanlığı olan yazılımcılar için kullanılan tanımdır.
Günümüzde projeler popüler olarak full stack development ile geliştiriliyor. Eskiden Linux, Apache, MySQL, PHP (LAMP) vb. stack kavramları yaygınken artık gelişen ön yüz teknolojileri ve birçok seçeneğin olmasıyla birlikte stack’lerde oldukça artmış durumda. Bu stack’lerden birisi de, MEAN, yani MongoDB, Express, Angular.js, Node.js’dir.
MEAN açık kaynak kod projedir. MongoDB ile veritabanını, Angular.js ile ön yüz geliştirmeleri, Node.js arka yüz tarafı için gerekli altyapıyı ve bileşenleri elde edilir, Express ile ise kolayca web sitesi, web api, single-page uygulamalar yapmamızı sağlayan bir Node.js bileşenidir.
Bir mesajlaşma uygulamasının temel özellikleri neler olmalıdır?
Uygulamanızda uygulayabileceğiniz birçok özellik var, ancak en popüler çözümleri analiz ederek ve en çok neyi sevdiğinizi düşünerek olmazsa olmazların neler olduğunu düşünmelisiniz.
Kayıt ol – Sohbet uygulamasına bağlı olarak kullanıcılar bir cep telefonu numarası girerek veya bir hesap oluşturarak kayıt olabilirler.
Durum – Kullanıcılar numara, profil resmi, ad gibi ayrıntılarla kişisel bir profil oluşturabilir.
Arama – kullanıcılara arkadaşlarını arama özelliği ekleyebilirsiniz.
Sesli aramalar – WhatsApp veya Viber gibi uygulamalar sesli arama özelliklerine sahiptir, buna benzer bir uygulama geliştirmeniz başarınızı artıracaktır.
Görüntülü aramalar – Görüntülü arama özellikleri ekleyebilirsiniz.
Grup sohbetleri – Kullanıcılarınızın aynı anda birden fazla kişiyle sohbet etmesini sağlayın, özellikle grup planları yaparken kullanışlıdır.
Bildirimler – Herhangi bir mesajlaşma uygulamasının çok önemli bir işlevi – kullanıcılarınız bir mesaj aldıklarında hızlı bir bildirim alır.
Paylaşım – Arkadaşlarınızla fotoğraf ve video paylaşmak, mesajlaşma programlarını kullanmanın ekstra bir avantajıdır.
Teknoloji ve Kullanılan Araçlar
MEAN Stack(Mongo, Express, Angular, Node).
Gerçek zamanlı olarak bire bir iletişimi sağlamak için Socketler
Kayıt ve giriş için AJAX
Basit bir sohbet uygulaması nasıl oluşturulur?
Ön koşul: MEAN Stack hakkında bazı temel bilgileri bilmeniz gerekir.
İlk olarak, yandaki gibi bir dizin yapısı oluşturarak başlayabilirsiniz.
Bu eğitimde, kendi sohbet uygulamanızı oluşturduktan sonra herhangi bir projeye bir widget olarak entegre edebilirsiniz.
Node.js ve MongoDB’yi bilgisayarınıza yükleyin .
Bu eğitim için AngularJS 1’i kullanılacaktır. AngularJS kütüphanesini buradan indirin ve Client dizinindeki lib klasörüne kopyalayın.
Uygulamayı güzelleştirmek isterseniz, herhangi bir CSS kitaplığını indirebilir ve bunları lib’e de kopyalayabilirsiniz.
Sunucuyu Kurmak
Adım 1 — Projeyi başlatın:
Sunucu dizinine gidin ve şu komutu çalıştırın: npm init
Bu yeni bir proje başlatacaktır. Gerekli tüm ayrıntıları sağladıktan sonra Package.json oluşturulacak ve yandaki gibi bir alan olacaktır.
Adım 2 — Bağımlılıkları yükleyin.
Socket.io – gerçek zamanlı web uygulamaları için kullanılan JavaScript kitaplığıdır. Web istemcileri ve sunucular arasında gerçek zamanlı, çift yönlü iletişim sağlar.
Express —Node.js web uygulama framework’üdür. Web ve mobil uygulamaları geliştirmek için bir dizi özellik sağlar. HTTP isteğine farklı ara katman yazılımları kullanılarak yanıt verilebilir ve ayrıca HTML sayfaları oluşturulabilir.
“npm install –save socket.io” ve “npm install –save express” ile gerekli bağımlılıkları kurduktan sonra bunlar package.json’a eklenecektir. package.json’a yandaki gibi görünecek fazladan bir alan eklenecektir.
Adım 3 — Sunucu Oluşturma
3000 numaralı bağlantı noktasında hizmet veren ve çağrıldığında HTML gönderecek bir sunucu oluşturun.
HTTP nesnesini ileterek yeni bir soket bağlantısı başlatın.
Olay bağlantısı gelen soketleri dinleyecektir.
Her soket, bir istemci bağlantısı kesildiğinde çağrılacak olan bağlantı kesme olayı yayar.
socket.on olayı bekler. Bu olay tetiklendiğinde geri arama işlevi çağrılır.
io.emit kendisine bağlı tüm soketlere mesajı göndermek için kullanılır.
Sözdizimi:
socket.on(‘event’, function(msg){})
io.emit(‘event’, ‘message’)
server.js adında bir sunucu oluşturun ve tüm soketlere yayınlayın.
Bir kullanıcı bağlantıyı kestiğinde, mesajı konsola yazdırmalıdır.
Sunucu yandaki gibi görünecektir:
İstemciyi Oluşturmak
İndex.html’yi istemci dizininde, style.css’yi css dizininde ve app.js’yi istemcide js dizininde oluşturun.
dizin.html: Mesajımızı alabilecek ve aynı zamanda gösterebilecek basit bir HTML yazmalısınız.
socket.io, bizim için müşteriye hizmet eder. Sayfaya hizmet veren ana bilgisayara bağlanmak varsayılandır. Nihai HTML şuna benzer:
css/style.css:
Bir sohbet kutusu gibi görünmesi için biraz stil verin. Herhangi bir kütüphaneden faydalanabilirsiniz.
js/app.js:
Bir angular.js uygulaması oluşturun ve bir soket bağlantısını başlatın.
socket.on belirli bir olayı dinler. Bu olay her çağrıldığında bir geri arama işlevi çağırır.
socket.emit , mesajı belirli bir olaya göndermek için kullanılır.
Her ikisinin de temel sözdizimi:
Bu nedenle, mesaj yazıldığında ve butona tıklandığında, mesajı göndermek için işlevi çağırmanız gerekli.
Soket bir mesaj aldığında, onu görüntüleyerek devam edebilirsiniz.
JavaScript yandaki gibi görünecektir:
Uygulamayı çalıştırma
Sunucumuzun bulunduğu sunucu dizinine gidin. Aşağıdaki komutu kullanarak sunucuyu çalıştırın:
-node server.js
Sunucu 3000 numaralı bağlantı noktasında çalışmaya başlar. Tarayıcıya gidin ve aşağıdaki url’yi yazın:
http://localhost:3000
Veritabanı tasarlama
Kullanıcı ayrıntılarını ve mesajlarını kaydetmek için bir veritabanı tasarlayabilirsiniz. Daha sonra daha fazla özellik ekleyebilmeniz için tasarımın ölçeklenebilir olması iyi olacaktır.
Mongo veritabanından yararlanmak için Mongoose veya bir MongoDB modülü kurmanız gerekir:
npm install –save mongoose veya npm install –save mongodb
Şema tasarımı yandaki gibi görünecektir:
Burada, her üyenin durumu şöyle olabilir:
Arkadaş: Üyenin arkadaş olduğunu belirtmek.
Beklemede: Üye henüz kabul etmemişse.
Engellendi: Üye diğer üyeyi engellediyse.
Üyenin bir sohbet isteğini reddettiğini varsayalım. Gönderici daha sonra tekrar bir sohbet isteği gönderebilir. Bir kullanıcı ayrıca ekstra bir koleksiyon oluşturarak mesajları kaydedebilir. Her belgenin mesajı, göndericisi, alıcısı ve zamanı olacaktır.
Bu nedenle, veritabanınızı özel ihtiyaçlarınıza ve mesajları nasıl ele almak istediğinize göre tasarlayın.
2. İstemciye hizmet vermek için REST API’leri oluşturun. Örneğin, kullanıcıların başka isteklerde bulunabileceği bir ana sayfa gönderen bir uç nokta.
API uç noktalarımdan birkaçı:
app.post(‘/register’,function(req,res){})
app.post(‘/login’,function(req,res){})
app.post(‘/friend_request’,function(req,res){})
app.post(‘/friend_request/confirmed’,function(req,res){})
3. Geliştirmek istediğiniz şekilde ek özellikler ekleyebilirsiniz.
İşte sohbet uygulamama hızlı bir bakış:
Mean stack uygulama nasıl geliştirilir?Günümüzde mesajlaşma uygulamaları iletişim kurma şeklimizi değiştirmeye devam ediyor. WhatsApp, Facebook Messenger, Slack veya Viber gibi uygulamaların popülaritesi birçok teknoloji şirketinin de ilgi noktasını değiştirdi.
Mesajlaşma uygulamaları bu kadar popüler konumdayken yazılımcılar için bu uygulamaları geliştirmek harika bir fikir! ????
İlk olarak bu uygulamaları geliştirmek için kullanılan teknolojileri ve özellikleri öğrenmeniz gerekiyor.
Başarılı bir mesajlaşma sohbet uygulaması nasıl oluşturulur diye merak ediyorsanız bu yazı tam size göre!
Modern Sohbet Uygulamalarının Gelişimi
Modern sohbet uygulamaları, her türlü sohbet çözümüne uyarlanabilen dikkate değer işlevlere sahip olmalıdır.
İdeal bir sohbet uygulaması, kurumsal düzeyde iletişim, kişisel sohbet, iş geliştirme iletişimi ve e-ticaret alanlarında gerçekleşecek olan iletişim için çözümler sunma potansiyeline sahip olmalıdır.
Mean Stack Nedir?
Full stack developer, hem back-end, hem front-end, hem de veritabanı programlama kısımlarında uzmanlığı olan yazılımcılar için kullanılan tanımdır.
Günümüzde projeler popüler olarak full stack development ile geliştiriliyor. Eskiden Linux, Apache, MySQL, PHP (LAMP) vb. stack kavramları yaygınken artık gelişen ön yüz teknolojileri ve birçok seçeneğin olmasıyla birlikte stack’lerde oldukça artmış durumda. Bu stack’lerden birisi de, MEAN, yani MongoDB, Express, Angular.js, Node.js’dir.
MEAN açık kaynak kod projedir. MongoDB ile veritabanını, Angular.js ile ön yüz geliştirmeleri, Node.js arka yüz tarafı için gerekli altyapıyı ve bileşenleri elde edilir, Express ile ise kolayca web sitesi, web api, single-page uygulamalar yapmamızı sağlayan bir Node.js bileşenidir.
Bir mesajlaşma uygulamasının temel özellikleri neler olmalıdır?
Uygulamanızda uygulayabileceğiniz birçok özellik var, ancak en popüler çözümleri analiz ederek ve en çok neyi sevdiğinizi düşünerek olmazsa olmazların neler olduğunu düşünmelisiniz.
Kayıt ol – Sohbet uygulamasına bağlı olarak kullanıcılar bir cep telefonu numarası girerek veya bir hesap oluşturarak kayıt olabilirler.
Durum – Kullanıcılar numara, profil resmi, ad gibi ayrıntılarla kişisel bir profil oluşturabilir.
Arama – kullanıcılara arkadaşlarını arama özelliği ekleyebilirsiniz.
Sesli aramalar – WhatsApp veya Viber gibi uygulamalar sesli arama özelliklerine sahiptir, buna benzer bir uygulama geliştirmeniz başarınızı artıracaktır.
Görüntülü aramalar – Görüntülü arama özellikleri ekleyebilirsiniz.
Grup sohbetleri – Kullanıcılarınızın aynı anda birden fazla kişiyle sohbet etmesini sağlayın, özellikle grup planları yaparken kullanışlıdır.
Bildirimler – Herhangi bir mesajlaşma uygulamasının çok önemli bir işlevi – kullanıcılarınız bir mesaj aldıklarında hızlı bir bildirim alır.
Paylaşım – Arkadaşlarınızla fotoğraf ve video paylaşmak, mesajlaşma programlarını kullanmanın ekstra bir avantajıdır.
Teknoloji ve Kullanılan Araçlar
MEAN Stack(Mongo, Express, Angular, Node).
Gerçek zamanlı olarak bire bir iletişimi sağlamak için Socketler
Kayıt ve giriş için AJAX
Basit bir sohbet uygulaması nasıl oluşturulur?
Ön koşul: MEAN Stack hakkında bazı temel bilgileri bilmeniz gerekir.
İlk olarak, yandaki gibi bir dizin yapısı oluşturarak başlayabilirsiniz.
Bu eğitimde, kendi sohbet uygulamanızı oluşturduktan sonra herhangi bir projeye bir widget olarak entegre edebilirsiniz.
Node.js ve MongoDB’yi bilgisayarınıza yükleyin .
Bu eğitim için AngularJS 1’i kullanılacaktır. AngularJS kütüphanesini buradan indirin ve Client dizinindeki lib klasörüne kopyalayın.
Uygulamayı güzelleştirmek isterseniz, herhangi bir CSS kitaplığını indirebilir ve bunları lib’e de kopyalayabilirsiniz.
Sunucuyu Kurmak
Adım 1 — Projeyi başlatın:
Sunucu dizinine gidin ve şu komutu çalıştırın: npm init
Bu yeni bir proje başlatacaktır. Gerekli tüm ayrıntıları sağladıktan sonra Package.json oluşturulacak ve yandaki gibi bir alan olacaktır.
Adım 2 — Bağımlılıkları yükleyin.
Socket.io – gerçek zamanlı web uygulamaları için kullanılan JavaScript kitaplığıdır. Web istemcileri ve sunucular arasında gerçek zamanlı, çift yönlü iletişim sağlar.
Express —Node.js web uygulama framework’üdür. Web ve mobil uygulamaları geliştirmek için bir dizi özellik sağlar. HTTP isteğine farklı ara katman yazılımları kullanılarak yanıt verilebilir ve ayrıca HTML sayfaları oluşturulabilir.
“npm install –save socket.io” ve “npm install –save express” ile gerekli bağımlılıkları kurduktan sonra bunlar package.json’a eklenecektir. package.json’a yandaki gibi görünecek fazladan bir alan eklenecektir.
Adım 3 — Sunucu Oluşturma
3000 numaralı bağlantı noktasında hizmet veren ve çağrıldığında HTML gönderecek bir sunucu oluşturun.
HTTP nesnesini ileterek yeni bir soket bağlantısı başlatın.
Olay bağlantısı gelen soketleri dinleyecektir.
Her soket, bir istemci bağlantısı kesildiğinde çağrılacak olan bağlantı kesme olayı yayar.
socket.on olayı bekler. Bu olay tetiklendiğinde geri arama işlevi çağrılır.
io.emit kendisine bağlı tüm soketlere mesajı göndermek için kullanılır.
Sözdizimi:
socket.on(‘event’, function(msg){})
io.emit(‘event’, ‘message’)
server.js adında bir sunucu oluşturun ve tüm soketlere yayınlayın.
Bir kullanıcı bağlantıyı kestiğinde, mesajı konsola yazdırmalıdır.
Sunucu yandaki gibi görünecektir:
İstemciyi Oluşturmak
İndex.html’yi istemci dizininde, style.css’yi css dizininde ve app.js’yi istemcide js dizininde oluşturun.
dizin.html: Mesajımızı alabilecek ve aynı zamanda gösterebilecek basit bir HTML yazmalısınız.
socket.io, bizim için müşteriye hizmet eder. Sayfaya hizmet veren ana bilgisayara bağlanmak varsayılandır. Nihai HTML şuna benzer:
css/style.css:
Bir sohbet kutusu gibi görünmesi için biraz stil verin. Herhangi bir kütüphaneden faydalanabilirsiniz.
js/app.js:
Bir angular.js uygulaması oluşturun ve bir soket bağlantısını başlatın.
socket.on belirli bir olayı dinler. Bu olay her çağrıldığında bir geri arama işlevi çağırır.
socket.emit , mesajı belirli bir olaya göndermek için kullanılır.
Her ikisinin de temel sözdizimi:
Bu nedenle, mesaj yazıldığında ve butona tıklandığında, mesajı göndermek için işlevi çağırmanız gerekli.
Soket bir mesaj aldığında, onu görüntüleyerek devam edebilirsiniz.
JavaScript yandaki gibi görünecektir:
Uygulamayı çalıştırma
Sunucumuzun bulunduğu sunucu dizinine gidin. Aşağıdaki komutu kullanarak sunucuyu çalıştırın:
-node server.js
Sunucu 3000 numaralı bağlantı noktasında çalışmaya başlar. Tarayıcıya gidin ve aşağıdaki url’yi yazın:
http://localhost:3000
Veritabanı tasarlama
Kullanıcı ayrıntılarını ve mesajlarını kaydetmek için bir veritabanı tasarlayabilirsiniz. Daha sonra daha fazla özellik ekleyebilmeniz için tasarımın ölçeklenebilir olması iyi olacaktır.
Mongo veritabanından yararlanmak için Mongoose veya bir MongoDB modülü kurmanız gerekir:
npm install –save mongoose veya npm install –save mongodb
Şema tasarımı yandaki gibi görünecektir:
Burada, her üyenin durumu şöyle olabilir:
Arkadaş: Üyenin arkadaş olduğunu belirtmek.
Beklemede: Üye henüz kabul etmemişse.
Engellendi: Üye diğer üyeyi engellediyse.
Üyenin bir sohbet isteğini reddettiğini varsayalım. Gönderici daha sonra tekrar bir sohbet isteği gönderebilir. Bir kullanıcı ayrıca ekstra bir koleksiyon oluşturarak mesajları kaydedebilir. Her belgenin mesajı, göndericisi, alıcısı ve zamanı olacaktır.
Bu nedenle, veritabanınızı özel ihtiyaçlarınıza ve mesajları nasıl ele almak istediğinize göre tasarlayın.
2. İstemciye hizmet vermek için REST API’leri oluşturun. Örneğin, kullanıcıların başka isteklerde bulunabileceği bir ana sayfa gönderen bir uç nokta.
API uç noktalarımdan birkaçı:
app.post(‘/register’,function(req,res){})
app.post(‘/login’,function(req,res){})
app.post(‘/friend_request’,function(req,res){})
app.post(‘/friend_request/confirmed’,function(req,res){})
3. Geliştirmek istediğiniz şekilde ek özellikler ekleyebilirsiniz.
İşte sohbet uygulamama hızlı bir bakış:
