Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Web Teknolojileri ve Programlama 3. Ders: MEAN Mimarisi Hazırlayan ve.

Slides:



Advertisements
Benzer bir sunumlar
Web uygulamalarında yeni bir yaklaşım AJAX
Advertisements

 Teachertube.com sitesinin ana sayfa görüntüsünu sol taraftaki resimden görebiliyoruz. Teachertube.com slideshare.com ‘a benzer bir sosyal paylaşım sitesidir.
MS OFFICE Access 2013.
SGB.NET’İN TEKNİK ALTYAPISI
VERİTABANI YÖNETİM SİSTEMLERİ
Raporlama ve İş Zekası Çözüm Platformu
Yazılım Geliştirme ve Java
Google Analytics Nedir?
WEB SERVİCE İDRİS YÜRÜK MAHMUT KAYA.
MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme
INTERNET TABANLI HASTA KAYDI PAYLAŞIMI VE TELEKONSÜLTASYON PLATFORMU
İşletim Sistemlerine Giriş – 2 Kaynakların Paylaşımı
 106 a det bilgisayar. Donanım özelliklerine göre İşletim Sistemleri, Ofis Programları ve güvenlik yazılımları lisanslı olarak yüklenmiştir.  1 a det.
Çevre ve Orman Bakanlığı Bilgi İşlem Dairesi Başkanlığı
Proje yönetiminde başarının yeni formülü. Daha başarılı projeler Daha ekonomik çözümler Daha özelleşmiş hizmetler için… Neden ?
BTP 108 BİLGİSAYAR AĞ SİSTEMLERİ AĞ KAVRAMI Birden çok bilgisayarın birbirine bağlı olarak kullanılmasıyla oluşturulan çalışma biçimine bilgisayar ağı.
IT 504 İnternet ve Web Programlama Tanıtım Yrd. Doç. Yuriy Mishchenko.
.NET Teknolojileri .NET mimarisi VB.NET, C.NET, C#.NET
Görsel Programlama Dr. Muhammet Balcılar
İŞLETİM SİSTEMLERİ Öğr. Gör. S.Serkan TAN.
Web 2.0 Yeni nesil Internet.
Quest Atlantis Dünya Üzerine Yayılmış Çok-Kullanıcılı Çevrim-İçi Eğitsel Bir Bilgisayar Oyununun Teknik Yapısı.
RSS Rss nedir? Rss özellikleri nelerdir? Rss Nasıl kullanılır?
İnterneti Tanıyalım.
Bilgi Teknolojisinin Temel Kavramları
Web Tasarımı ve Adobe Muse
Yazılım Geliştirme Projesi
Yrd. Doç. Dr. Doğan AYDOĞAN
BIL MOBiL PROGRAMLAMA TEKNiKLERi
Bilgisayar Mühendisliği Bölümü
WEB2.0 ARAÇLARI Gökçe Hanım EMİR K ONULAR : ajax, rss, css, vidcast, podcast podcast.
Web 2.0 Araçlarının Tanıtımı ÖZGE AKMAN TÜRKÇE ÖĞRETMENLİĞİ 2. SINIF 1. ÖĞRETİM
Mobil Uygulama Geliştirme
Kasım Webinarı Ü. Esra KÖROĞLU - Alparslan MESRİ.
İnsan Kaynakları Bilgi Sistemleri
Hazırlayan: EMRAH HAS. Eşzamanlı ya da eş zamansız, metin, grafik, animasyon, ses, video gibi içeriğin tamamen işlenmiş, yarı işlenmiş ya da ham veri.
BSM447 – MOBİL UYGULAMA GELİŞTİRME Öğr. Gör. Nevzat TAŞBAŞI 3. Hafta.
Akıllı İstemcileri Geliştirmek ve Dağıtmak
Ahmet Keleşoğlu Eğitim Fakültesi
ÖTÖ 451 Okul Yönetiminde Bilgisayar Uygulamaları R. Orçun Madran.
NOT: Bu slayt üzerindeki resmi değiştirmek için resmi seçin ve silin. Ardından, kendi resminizi eklemek için yer tutucudaki Resimler simgesini tıklatın.
Ömer AYDOĞMUŞ Mustafa SÖZGEN. Herkes Windows 9'u beklerken Microsoft büyük sürpriz ile Windows 10 tanıtımını gerçekleştirdi. Şaşırtıcı bir hamle olarak.
İÇERİK YÖNETİM SİSTEMİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu.
ÖTÖ 451 Okul Yönetiminde Bilgisayar Uygulamaları R. Orçun Madran.
LOGMEIN İLK OLARAK, “REMOTE CONTROL” ILE BAŞKA BIR BILGISAYARA BAĞLANMAYı VE ERIŞILEN BILGISAYAR ÜZERINDEN KOLAYCA IŞLEM YAPMAYı ANLATACAĞıM. ”
XML ve XML WEB SERVİSLERİ Volkan ALTINTAŞ. XML Bağımsız bir kuruluş olan W3C tarafından tasarlanmıştır. Herhangi bir kurumun tekelinde değildir. Kişilerin.
Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Web Teknolojileri ve Programlama 2. Ders: Giriş Hazırlayan ve Sunan:
NetOpenX-REST Burak Çelik Uyarlama Araçları Uzmanı.
SOSYAL MEDYA.
haZIRLAYAN: ELİF KARAOĞLU
WEB 2.0 ARAÇLARI.
Bilgisayar Mühendisliği Bölümü
Kaynakların Paylaşımı
BOZOK ÜNİVERSİTESİ Merkezi Kimlik Doğrulama Sistemi
E Twinning Eğitimi-1 Muğla e-Twinning İl Koordinatörü BETÜL ŞOHOĞLU.
MBLOCK ile Arduino ve Robotik Kodlama
e-Trakya Uzaktan Eğitim Sistemi
Uzm. Rıdvan YAYLA – Bilecik Üniversitesi Müh. Fak. Bilg. Müh. Bölümü
Amazon Web Servisleri ve Javascript Dilinin Birlikte Kullanımı
Bu sununun aynısını (Animasyonlar vb
Bu sununun aynısını (Animasyonlar vb
Tasarım: Ali Topal.
YAZILIM KOD ÜRETEÇLERİ
Dünya Üzerine Yayılmış Çok-Kullanıcılı Çevrim-İçi Eğitsel
İOS PLATFORMUNDA MOBİL TRAFİK CEZA BİLDİRİM UYGULAMASI
FIRAT ÜNİVERSİTESİ MÜHENDİSLİK FAKÜLTESİ BİLGİSAYAR MÜHENDİSLİĞİ
Sunum transkripti:

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Web Teknolojileri ve Programlama 3. Ders: MEAN Mimarisi Hazırlayan ve Sunan: Yrd. Doç. Dr. Asım Sinan YÜKSEL Süleyman Demirel Üniversitesi Bilgisayar Mühendisliği Bölümü

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL MEAN Mimarisi Blog gereksinimileri, veri katmanı için API oluşturma Esnek Bir MEAN Mimarisi Tasarımı Hızlı prototipleme, WiFi Buddy geliştirme adımları Geliştirmeyi Aşamalara Bölme İlk yüklenme hızı, SPA kullansak mı kullanmasak mı? SPA’lar Üst düzey plan, mimari tasarım, herşeyi Express’e gömme, son ürün WiFi Buddy Uygulamanın Planlanması Geliştirme donanımı, üretim donanımı Donanım Mimarisi Sunum Planı 06

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL MEAN Mimarisi Mean tabanlı bir uygulama geliştirmenin genel kabul görmüş yolu REST API ile SPA uygulamasını beslemektir. REST: Representational State Transfer. Basitçe sunucu ve istemci arasındaki iletişim karmaşık protokoller yerine HTTP protokolü ile sağlanıyor. API: Application Programming Interface. Uygulamaların birbirleriyle ortak bir dilde konuşmalarını sağlar. REST API: Geliştireceğiniz uygulamaların veritabanında yer alan veri ile çalışması için genel bir yapı sunar. 01

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL MEAN Mimarisi 01

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL AngularJS ile kodlama yapmak sahil yolunda üstü açık Porsche ile tur atmaya benzer. Eğlenceli, hızlı, çevik ve beceriklidir. Ama her zaman uygun değildirler. Eğer sörf tahtanızı ve ailenizi alıp tatile çıkacaksanız sportif bir araç size çok uygun olmayacaktır. SPA türü uygulamalar geliştirmek de böyledir. AngularJS süper olabilir ancak probleminize en iyi çözüm olmayabilir. Önceki dersimizde de bahsettiğimiz gibi web örümcekleri Javascript çalıştıramazlar. HTML içeriğine bakarlar. Dolayısıyla Javascript ile sunulan içerik görülemez. Çözüm: Web örümceğinin taramasını sağlayan HTML içerikler üretmek. SPA kullansak mı kullanmasak mı? 02

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Eğer kazancınız arama motoru trafiğine ya da sosyal paylaşımlara dayanıyorsa sitenizi SPA olarak yapmayı bir kez daha düşünün. Eğer SEO(Search Engine Optimization)’ya ihtiyacınız yoksa ya da sitenizi web örümceklerinin gezinmesinden korumak istiyorsanız SPA sizin için uygundur. Google Analytics tarzı araçlar yeni sayfa yüklemelerine dayanır. SPA’lar da ilk yüklemede tüm sayfa yüklemeleri ve değişimleri iç bir yapı vasıtasıyla halledildiği için hiçbir şey tarayıcı geçmişine eklenmez. Dolayısıyla Analitik uygulamaları sitede kimin ne yaptığı hakkında bir bilgiye sahip olamaz. –HTML5 History API ile analitik uygulamalarına entegre olunabilir. SPA kullansak mı kullanmasak mı? 02

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Bu büyük bir problem mi? Tamamen ihtiyaçlarınıza bağlı. Ziyaretçi akışındaki trendlere bakmak istiyorsanız kolayca entegrasyon yapabilirsiniz. Eğer daha fazla detay istiyorsanız işiniz biraz zorlaşacak. SPA’lar sunucu tabanlı uygulamalara nazaran daha yavaş ilk sayfa yüklemesine sahiptirler. Sebep? Çünkü HTML üretilmeden önce uygulama kodunun ve çatının yüklenmesi gerekmektedir. Sunucu tabanlı uygulama sadece HTML’i tarayıcıya yollar. Bu da gecikmeyi ve sayfanın indirilme zamanını azaltır. SPA Çözümü: Caching (Ara bellekleme), lazy-loading(tembel yükleme)-ihtiyaç duyulduğunda gerekeni yükleme. SPA kullansak mı kullanmasak mı? 02

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Gmail uygulamasını düşünün. İlk yüklemesi biraz zaman alıyor. Ancak ilk birkaç saniyeden sonra karşınızda canavar gibi, hemen cevap veren bir hizmet sunuyor. Eğer arama motorlarından çok trafik çekiyorsanız ilk yüklemede bekleme insanların siteniz hakkındaki görüşleri “yavaş çalışıyor”,”heralde göçtü” şeklinde olacaktır. Kısaca düşünmeniz gereken konular: –Taranabilirlik –Analitik entegrasyonu –Sayfa yükleme hızı SPA kullansak mı kullanmasak mı? 02

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL AngularJS Porsche ise MEAN’deki diğer teknolojiler garajınızda duran Audi RS6 gibidir. Kullanıcılar dışardan baktığında spor bir araba görecek ama garaja daldığınızda Lamgorgini V10 motoruna sahip bir yapı var. REST API için MongoDB, Express, NodeJS kullanmak Audi RS6 ile okula çoçukları bırakmak gibi algılayabilirsiniz. Yani her işi en iyi şekilde yapacaktır. Bir blog motoruna ve MEAN ile nasıl oluşturacağımıza göz atalım: –Herkesin gördüğü, makalelerin, haberlerin bulunduğu bir sayfa. –Makalelerin, haberlerin girildiği yönetildiği bir admin sayfası. Esnek Bir MEAN Mimarisi Tasarımı 03

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Esnek Bir MEAN Mimarisi Tasarımı 03 Blogtaki İçeriklerAdmin Tarafı Zengin içerik Düşük etkileşim Hızlı ilk yükleme Herkese açık ve paylaşılabilir Kısa süreli gezinti Zengin özellikli Yüksek etkileşim Olaylara hızlı cevap verme Özel Uzun süreli kullanım

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Bu tarz bir uygulama geliştirirken ne yapmalıyım? Cevap bir tane seç hepsine uygula değil. Bakıldığında 2 uygulamanız var. Sunucudan bilgilerin alınıp ekranda gösterildiği bir uygulama ve SPA ile geliştirmek isteyeceğiniz interaktif bir admin uygulaması. Admin Uygulaması: –MongoDB, Express ve NodeJS kullanılarak REST API oluşturulacak. –Arayüz AngularJS ile yapılacak. –JSON ile veri alış verişi sağlanacak. Blog Girişleri: –HTML ve içerik doğrudan sunucudan gelmeli. Bunu Express ile yapabilirsiniz. –HTML için veritabanından gelecek veri de REST API ile –Ek Özellikler: Makaleye yorum yapma, session kullanma: MongoDB kullan. Yan menüde arama kutusu, ilgili içerikler: AngularJS kullan Esnek Bir MEAN Mimarisi Tasarımı 03

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Esnek Bir MEAN Mimarisi Tasarımı 03 Admin TarafıBlog Tarafı( Ek Özelliksiz) Blog Tarafı( Ek Özellikli)

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Esnek Bir MEAN Mimarisi Tasarımı 03 Tüm Uygulama Son Hali

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Örnekte de gördüğünüz gibi mimarinin her versiyonunda bir API kullandık. Eğer NodeJS ve Express ile uygulamayı geliştirip HTML’i doğrudan sunucudan alsaydık NodeJS ile doğrudan veritabanıyla konuşmak daha kolay olacaktı. Kısa vadede iyi bir çözüm olabilir. Ancak uzun vadede uygulama veriyle çok sıkı bağlı olduğu için başka hiçbir şey veriyi kullanamayacaktı. Diğer bir çözüm kendi API’nizi oluşturup veritabanıyla doğrudan konuşmak ve ihtiyaç duyulan veriyi sunmak. Dolayısıyla NodeJS doğrudan veritabanıyla konuşmak yerine API ile konuşmuş olur. Neden bu kadar zahmete girip API oluşturuyoruz? –İleride Android ya da iOS tabanlı bir uygulama geliştirirseniz ve veri çekmek isterseniz ne olacak? –Ya da AngularJS tabanlı bir arayüz geliştirecekseniz? Esnek Bir MEAN Mimarisi Tasarımı 03

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Esnek Bir MEAN Mimarisi Tasarımı 03 Doğrudan Veri Tabanına BağlanmaAPI Yaklaşımı

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Esnek Bir MEAN Mimarisi Tasarımı 03 Doğrudan Veri Tabanına BağlanmaAPI Yaklaşımı

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL İlk aşama uygulamada hangi ekranların olacağının belirlenmesi. Bu işlem iş hayatında genelde beyaz tahtada karalama ile olur. Storyboard (Hikaye Panosu) dediğimiz işlem. Ekranları bir akış içinde ifade etmemizi sağlar. WiFi Buddy: İnsanların bulundukları yerin yakınlarında WiFi ağına bağlanarak internete girebilecekleri mekanları listeleyen, mekan hakkında bilgiler sunan, kullanıcıların yorum yapabildiği, puanlayabildiği, mekanı haritada gösteren uygulama: –Yakındaki mekanları listeleyen sayfa. –Bir yer hakkında detaylı bilgi gösteren sayfa. –Yer ile ilgili yorum yapmayı sağlayan bir ekran. –Ek olarak Hakkında sayfası. Bir sonraki adım karalama yaparak görselleştirmek. WiFi Buddy Uygulamanın Planlanması 04

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL WiFi Buddy Uygulamanın Planlanması 04 Mekanlar ile İlgili Sayfalar ListelemeDetay SayfasıYorum Sayfası Diğer Sayfalar

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Bir sonraki aşama mimari tasarım. Bir veri akışı olacağı için bu akışı sağlayacak API oluşturulması gerekiyor. Bu aşamada SPA’mı yoksa geleneksel yöntem mi kullanacağımıza karar vermemiz gerekecek. 3 değişik mimari ile tasarlayabiliriz. –NodeJS + Express uygulaması –NodeJS + Express + AngularJS uygulaması (daha interaktif yapmak için) –AngularJS SPA Bir dersimiz boyunca sırayla bu 3 mimariyi de uygulamaya çalışacağız. WiFi Buddy Uygulamanın Planlanması 04

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL WiFi Buddy Uygulamanın Planlanması 04

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Bu derste 2 amacımız var: –MEAN kullanarak uygulama geliştirme. –Geliştirirken MEAN yığınının her bir katmanını öğrenmek. Geliştirmeye başlarken aşamalar halinde hızlı prototipleme yapacağız. –1. Aşama: Statik bir site oluşturma. –2. Aşama: Gömülmüş statik veriden kurtulup veritabanı oluşturma. –3. Aşama: Veri tabanı ile etkileşimde bulunacak Rest API oluşturma. –4. Aşama: Uygulamanın API ile entegrasyonu. –5. Aşama: Uygulama süsleme. –6. Aşama: Uygulamayı iyileştirme (refactor). –7. Aşama: Kimlik doğrulama işlemlerinin eklenmesi (Kayıt olma, giriş yapma). Geliştirmeyi Aşamalara Bölme 05

Web Teknolojileri ve Programlama, 2016Ders Sunumu, Yrd. Doç. Dr. Asım Sinan YÜKSEL Uygulamanın çalışması için özel bir donanıma gerek yok. Sadece bir laptop, sanal makine yeterli olacaktır. Tüm bileşenler Mac, Linux ve Windows bilgisayara kolayca yüklenebilir. İstenildiğinde birkaç makine farklı amaçlarla kullanılabilir. –Veri tabanı için bir sunucu –REST API için bir sunucu –Ana uygulama için bir sunucu Üretim aşaması (canlıya alma) da çok farklı değildir. Ancak bilgisayar özelliklerinin biraz daha iyi olması faydanıza. Genelde veri tabanının ayrı bir sunucuda tutulması önerilir. Donanım Mimarisi 06