Şimdi Ara

Frontend Gelişim Günlüğüm (Web Tabanlı Sipariş Takip Programı)

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
2 Misafir - 2 Masaüstü
5 sn
25
Cevap
1
Favori
1.098
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 12
Sayfaya Git
Git
sonraki
Giriş
Mesaj
  • Güncelleme: Konuyu açtıktan sonra frontend konularını çalışmaya başladığım için ve daha açıklayıcı olacağı için konu başlığını "frontend gelişim günlüğüm" şeklinde değiştirdim (26.02.2019)

    Frontend alanında edindiğim yeni deneyimleri konu sonuna yorum olarak göndereceğim.

    30.01.2019 'da açılan konu:

    Aşağıda özellikleri verilen sipariş takip programı projesi bana iletildi ve yapabilir miyim diye soruldu. Programda sunucuda veriler işlenecek ve veri tablolama tarayıcı üzerinden yapılacak.

    Backend tarafında Java Python PHP ve Perl ile veri işleme ve tablolama yapabiliyorum fakat Javascript'in veri tablolamaya özel frameworklerinden biri ile tarayıcı üzerinde yıllardır frontend işleri yapmadım.

    Bu projede frontend kodlama yapmam gerekiyor. Son 1-2 haftadır Angular.js çalıştım, Angular.js temelim var, ancak onu kullanarak tarayıcı üstünde hiç veri tablosu oluşturmadım. Bu konuda öneriniz var mı?

    Ayrıca uygulamanın backend tarafı için hangi dil ve framwork en isabetli olur. Bildiğim Framework'ler: Laravel, Rails, Zend Framework, Catalyst. Uygulama kapsamı ufak ve cloud ortamında çalışacağı için Spring MVC gibi Java framework lerin cok uygun olmayacağını düşünüyorum. Ancak asıl önemli kısım frontend. Örneğin Angular ile tarayıcı sayfasında veri tablolama yapan var mı hiç? Yani veri tablolamaya özel Javascript Framework kullanmadan sadece Angular kullanarak veri tablolama işlemi yapmak pratik midir? Yoksa Angular kullanılsa da kullanılmasa da veri tablolama amaçlı bir Javasscript Framework kullanmak daha pratik midir? Sonuç olarak, Angular.js yerine ismi duyulan Ember.js, Meteor.js ve Backbone.js gibi Framework'ler ne kadar alternatif olabilir?

    Proje tanımı:

    3 kişiden oluşan bir yazılım firması. Yoğunlaştıkları alan seminer, buluşma ve organizasyon düzenleme amaçlı çeşitli yazılım araçları (ürün) kiralamak.Ürünler ise örneğin: Eventbrite, Whova Event Management Software, Trello, Social tables, Everwall ve WordPress'in organizasyon ve planlamaya özel temaları... Bu yazılım araçlarını kiralamada "tekliften fatura kesmeye kadar" süreçleri takip edecek bir sipariş takip yazılımı gerekli. Hedeflenen proje tamamlama süresi: 1 ay. Bütçe: Asgari ücret x 5

    Gereksinimler:
    1- Her müşteriye bir müşteri no'su vererek müşteri verisi oluşturmak
    2- Farklı ürün ve ürüne bağlı ek özellikler için ürün giriş ve ürün no oluşturmak
    3- Müşteri ve ürün no girerek teklif oluşturmak. Teklif düzenleme mümkün olmalı. Teklifler teklif tarihine göre sıralanabilmeli. Her bir ürün GUI Takvimde ek seçenek olarak görünmeli ki hangi ürün için teklif verilip verilmediği anlaşılsın. Kayıt üstüne tıklandığında müşteri bilgisini göstermeli.
    4- Tekliften sipariş oluşturmak. Teklif verilmiş ürün için başka teklif ve rezervasyon engellenmeli / kırmızı işaretli gösterilmeli
    5- Siparişten fatura oluşturmak.
    6- Her bir ürün takvimde grafik olarak "kiralabilir" durumu gösterilmeli, tıklandığında kayda dair tüm önemli bilgiler çıkmalı
    7- Sipariş tarihine göre teklif ve siparişleri göstermek. Teklif kaydına göre fatura no belirlemek
    8- Faturanın ödenmesi durumunda faturanın manuel olarak onaylanması
    9- Ödeme süresi içinde ödenmeyen faturaların gösterilmesi ve E-Mail ile hatırlatma yazısı gönderebilme imkanı
    10- Finansal rapor / degerlendirme: Belli bir zaman dilimi ve her bir ürün için tek tek toplam hasılat gösterme.
    11- Program cloud ortamında çalışmalıdır, bir sunucuya kurulmayacaktır
    12- Tüm ürünler net fiyat olarak verilecektir, sadece fatura kesilirken KDV eklenecektir.
    13- Teklifler, sipariş kayıtları ve faturalar PDF olarak E-Mail ile gönderilecektir.



    < Bu mesaj bu kişi tarafından değiştirildi Tuğkan-0153 -- 26 Şubat 2019; 23:53:58 >







  • Hocam çok iyi bir frontend ci değilim ama bu projede çok güzel Vue görüyorum. Vue ile diğer js teknolojilerinden çok daha hızlı geliştirirsin projeyi. Component yapısı seni kurtarır, react gibide only js yapısı yok. Storage konusuna gelincede, dediğim gibi çok iyi değilim ama Vue nin çözüm ürettiğini anımsıyorum. Github a bakarsanız top 1 de olduğunu görürsünüz.

    < Bu ileti DH mobil uygulamasından atıldı >
  • Bu Vue gittikçe daha sık duyuluyor. Ve hala daha ona hiç bakamadım.

    Angular ile helloworld ve helloworld'un bir tık üstü düzeyde 3-4 kodlama yaptım yani sadece temelini biliyorum. Oranla açıklamak gerekirse Angular 10% biliyorum ve Angular'ı bir 50% bilmeden React veya Vue gibi yeni framework öğrenmek etkisiz olabilir.

    Bu proje büyük ihtimalle başkasına verilir cunku 2 gündür benden yanıt yok. Fakat böyle tek kişilik proje için backend 'e ek olarak frontend bilmek önemli.

    Storage konusunda şöyle birsey düşündüm: Backend te bir MySQL ve üstünde Rails yani verileri nesne olarak Rails sunacak.
  • Anladigim kadariyla JS frameworku bilmiyorsun hali hazirda. Bu durumda GWT ile sadece Java, CSS ve JDBC kullanarak bu projeyi yapabilirsin. Bizim sirkette suanki buyuk proje bitince React'a gecilecek daha modern oldugu icin, GWT artik desteklenmiyor, ama simdiye kadar hep bu kullanildi ve yiginla veri isleme ve tablo olusturma var.

    Genel anlamda baktigimizda en iyi secenek olmaz belki ama Java bilen bir insan icin kesinlikle daha rahat olur yeni bir sey ogrenmeyecegin icin. Ayni codebase uzerinde hem backend hem frontend yazmak buyuk rahatlik.

    < Bu ileti tablet sürüm kullanılarak atıldı >
  • Hocam alakası yok, bu üç framework bağımsız. Hatta en kolay öğrenileni Vue. Hiç kasma madem angular pek bilmiyorsun, direk vue ile başla öğrenmeye, bakarsan anlarsın, yaa ne kolaymış tık tık oldu dersin. Angular ve react harmanlanmış ve daha basit daha güzel bir yapı oluşturulmuş. Jsfiddle de hani html js css yazarsında bi çıktı verir ya, vuede de buna benzer bir yapı var, single file component diye, tek bi sayfada <template> tagı içinde yazıyorsın html, sonra script tagı içinde vue kodlarını, style ilede sadece o componente özel css yazıyorsın, kullanacagın yere import edip tagı kullanıyorsun.

    < Bu ileti DH mobil uygulamasından atıldı >
  • Vue github repolarında vue-awesome altında yüzlerce örnek var. Çok güzel componentler, ui templateler yazılıp oaylaşılmış. Orada admin templateler de bulunmakta, onları indirip inceleyip üzerinden de gidebilirsin. Sana verilen projeye uyumluları vardır.

    < Bu ileti DH mobil uygulamasından atıldı >
  • Yirikalische kullanıcısına yanıt
    javacıı kullanıcısına yanıt
    GWT'yi duymuştum ve Google App Engine gibi cloud ile ilgili birşey sanıyordum fakat Wiki'den bakınca frontend sistemi olduğu ortaya çıktı. Wiki'de ileride GWT 'nin yerini alabilir anlamında Dart programlama dilinden de bahsediyor; bayağı ilginç.

    @javacıı Vue olayına bir bakarım, güzel birşeye benziyor. Angular'la ilgilenme sebebim kronolojik açıdan önemli olması.


    Bu arada sipariş takip programı backend tarafı için hazır bir kod var mı diye de bakıyorum, örnek olması açısından. En azından nesne yapısı örnek olsun yeter.
  • quote:

    Orijinalden alıntı: Tuğkan-0153

    GWT'yi duymuştum ve Google App Engine gibi cloud ile ilgili birşey sanıyordum fakat Wiki'den bakınca frontend sistemi olduğu ortaya çıktı. Wiki'de ileride GWT 'nin yerini alabilir anlamında Dart programlama dilinden de bahsediyor; bayağı ilginç.

    @javacıı Vue olayına bir bakarım, güzel birşeye benziyor. Angular'la ilgilenme sebebim kronolojik açıdan önemli olması.


    Bu arada sipariş takip programı backend tarafı için hazır bir kod var mı diye de bakıyorum, örnek olması açısından. En azından nesne yapısı örnek olsun yeter.
    Hype yaratmak icin dart kullanilarak yazilan flutter hakkinda cok atip tutuyorlar, flutter icin all-in-one diye bir izlenim yaratmaya calisiyorlar, fakat flutter'da suan mobil app yapiliyor, web development destegi yok ve olacagi da kesin degil, sadece uzerinde calistiklari soyleniyor ama google basladigi her projeyi bitirmiyor, GWT'in yerini alacak biraz abartili bir ifade o yuzden. 2 sene once cikardiklari stable surumden beri yeni update yapmiyorlar, destegi kestiler, o yuzden insanlar yeni projelerine GWT ile baslamiyor genelde, ozellikle Turkiye'de GWT kullanan rastlamiyorum hic, bir tek linkedin'de required experiences kisminda asagidaki teknolojilerden bir ya da daha fazlasini bilmek yazip altina bunu koyabiliyorlar.

    Biraz outdated ama bir java developer icin guzel bir deneyim yaratiyor bence. Stockwatcher diye bir app yapiyorlar bir official tutorialinda, ona bir goz gezdir istersen.

    < Bu ileti mobil sürüm kullanılarak atıldı >




  • Selamlar, ben react angular vue üçlüsü arasında testlerim sonucu Vue ye karar vereim. Şirket genelindeki son 2 senede yapılan projelerin hepsini Vue ile geliştirdik.

    Anlattığın proje için ben Nuxt tercih ederdim, Vue nün ssr halidir. Veriyi API ile alıp işlemek yerine serverdan işlenmiş halde almak daha performanslı olur (bu dediklerim alt yapı olarak nodejs kullanman dahilinde geçerlidir, nodejs kullanmak istemiyorsan Nuxt ile server side rendering yapabilirsin fakat veriyi gene restApi gibi servisten alman gerek).

    Vue nün eksi yönlerinden bahsedersek, cache mevzusu eğer yönetemezsen başına dert açar. Gelen veri a ben neden hala a-1 i görüyorum diyebilirsin. Bu alanda vue store ve vue router üzerinde zaman kaybedebilirsin. Component içerisinde boğulabilirsin fakat tekrarlı kullanım olamayacaksa fazla zorlamaz. Vue nün öğrenim eğrisi diğerlerine göre daha alçaktır fakat alışması zordur.

    Vue nün artılarına gelirsek, reactivelik mevzusu interaktif projelerde özellikle oyun - oyunlaştırma anlık veri takibi gibi işlerde çok iyidir. Yönetimi kolaydır. Dili hafiftir, bolca dökğman vardır. Sade yapısı ve component based mimari farklı farklı insanların bir projede rahatça çalışıp birbirlerinin componentleri i rahatça kullanmalarına olanak sağlar.

    Bunun yanında eğer Vue tercih etmek istemiyorsan ki bence edilmeyebilir, Mvc framework kullanıp o framework ün ssr ı ile basit bir admin template iş görür. Asp.net + Razor gibi veya nodejs + ejs gibi.

    Vue ile ilgili sorun olursa mrsaj atabilirsin.

    Edit: react + angular = Vue diyebiliriz. Vue öğrenirsen diğerlerini öğrenmek basittir. Directive yapısını angulardan alır, hook ve lifecycle yapısını reacttan almıştır. React a geçersen sadece jsx öğrenmek kalır geriye, angular a geçersen kolay adapte olursun yazım şeklinden ötürü.



    < Bu mesaj bu kişi tarafından değiştirildi ElwinVanDyke -- 31 Ocak 2019; 14:21:59 >
    < Bu ileti mobil sürüm kullanılarak atıldı >




  • Frontend developerim. istediğin frameworku kullan fark yaratmaz. Angular öğrenmesi zor ama all in one bir framework. Diğerleri sadece view katmanı içeriyor.
    Vue öğrenmesi kolay. react da öğrenmesi kolay.

    Hangisini seçersen seç sipariş takip programı yapabilirsin. Spa yapmayacaksan kısmi komponentlere ihtiyac duyuy.orsan vue daha doğru seçim olabilir zira bir build yapısına ihtiyac duymadan js olarak kullanılabiliyor. Angular backend programlamaya daha benziyor
  • @Yirikalische Flutter'ı duymadım fakat duck.com 'da yazınca ilk sırada çıkıyor. Dart bana da biraz gereksiz göründü; GWT'ye hiç bakmadığım kullanmadığım halde. GWT Java ile frontend geliştirme sağladığı için en kullanışlı görünüyor. Dart ise yeni bir dil.

    @JSDeveloper Vue yeni olmasına ragmen firmada 2 senedir kullanılması ilginç. Nuxt ve JSX'i ilk kez duyuyorum. duck.com 'da Nuxt yazınca ilk sırada çıkıyor, nuxtjs.org 'daki Server Side Rendered (Universal) açıklaması iyi. EJS 'yi de ilk kez duydum Embedded JavaScript templating; bir incelemek gerekli. Bu durumda Angular'da birkaç deneme yaptıktan sonra Vue ve Nuxt'u da bir inceleyebilirim. Proje de kaçtı iyice. Frontend öğrenme sevdam yüzünden 3 gündür dönüş yapmadım proje sahibine.

    @mahoni_38 Angular yaklaşık 2 hafta önce bakmaya başladım iyi bir başlangıç oldu cunku helloword ötesinde birkaç kod daha denedim, tatmin edici sonuç aldım. Fakat bu projede kullanabilecek kadar bilmiyorum tabi. aslında projeye başlasam Angular'ı kullanarak proje içinde de öğrenebilirim fakat onun ne kadar süreceği belli değil ve ücreti iyi bir Freelance proje olduğu için pek uygulanabilir de değil. Bu durumda kendim bir referans Angular uygulaması yapmam gerekli, yani örneğin bir veri tablosunu alıp tarayıcıda farklı alanlara göre sıralanabilir (sort) şekilde gösteren basit birşey dahi olsa yeterli. Ha sonra aynı seyi Vue ile yapmayı denerim. Ha bu plan tutmaz ise yani frontend konusundaki buzları çözemezsem backend , Java ve Big-Data projelerine bakmam gerekecek fakat onlar da remote-job olarak yok ve şu sıralarda ailevi ve ekonomik sebeplerden dolayı remote-job almam gerekli.




  • Aslında bizim hikayemiz dibe batıp sonra da çıkmakla ilgili biraz. Oyun projemiz vardı, freelance gelen arkadaş kaçıp gitti. Proje ortada kaldı ve yeni döneme yetiştirmek gerekiyordu. Biz araştırırken 2.0 yeni yayınlanmıştı, öyle mi böyle derken geçiverdik. Bir senede yapılmayan iş 4 ay gibi kısa bir sürede tamamlandı. Hatta paralel giden 2 proje tamamladık. Bu 4 ay içerisinde öğrenme ile geçen zamanda var. Nuxt için ise güzel bir teknoloji hazır paketleri kullandım hep, oturup kendim kurmadım o yüzden proje dahilşnde karşınıza ne çıkar bilemiyorum ama nuxt kullanmak için zaten vue öğrenmeniz gerekecek.

    EJS güzel yazım şekli eski Asp.net web form a benziyor. <% %> arasına yazıyorsunuz kodları fakat codebase tsbiki nodejs olmalı. Ekstra zaman kaybı yaratabilir.

    < Bu ileti mobil sürüm kullanılarak atıldı >
  • Acaba projenin ayrıntılı detaylarını buradan veya özel mesaj ile paylaşabilirmisiniz. Gereksinimleri okurkan biraz şekillendi fakat tam şekillenmedi aklımda. Bunu kendim referans olsun diye yapmak istiyorum. Bu arada özel mesajdan cevap veremiyorum. Paylaşırsanız mutlu olurum.

    < Bu ileti DH mobil uygulamasından atıldı >
  • javacıı kullanıcısına yanıt
    Dün gece 2919 basımı Vue.js üzerine ebook indirdim Nuxt üzerine 1-2 ünitesi var. Kitabın başında önsöz kısmında Angular ve React frontend olayını geliştirdi, uygulama geliştirmeyi hızlandırdı buna ragmen Vue.js niye tercih edilsin diye sorup açıklamasını yapıyordu, uyku bastırdığı için devam edemedim, ilerde devam ederceğim ancak her halukarda Angular ile sıfırdan bir uygulama yapıp kenara koymam gerekli, Angular'ı cok merkezi cok temel birşey olarak görüyorum. Bir de arkadaşın bahsettiği GWT'yle ilgili de bir ebook indirip baktım, Java ile frontend yapmak hem ilginç hem kullanışlı gözüküyor, büyük ihtimalle onunla da bir uygulama yapmayı denerim.

    Bu konuda geçen her teknolojiyi hello world düzeyinde de olsa öğrenirim, remote-job olarak cok cazip front-end işleri var onlardan birini alabilirsem o hello world düzeyi dahi işime yarar.

    @javacıı Proje detayları derken, konu başlığındaki projeyi mi diyorsun yoksa yukarda JSDeveloper'ın bahsettiği projeyi mi?




  • Konu başında size verlen projeden bahsediyorum. Detaylarıyla.

    < Bu ileti DH mobil uygulamasından atıldı >
  • Bende aynı şekilde düşünüyorum. Aslında o iyi bu iyi diye ayrım yapmamak lazım, bakıldığında hepsi iyi. İşe göre dil veya framework seçimi daha mantıklı bir karar. Vakit bulabilsem react tarafında da biraz tecrübe kazanmak isterim. Daha önce de dediğim gibi kişisel gelişim için veya proje için fark etmez yardım almak isterseniz danışabilirsiniz, yardımcı olmaya çalışırım.
  • 
    Proje ilk mesajdaki 13 maddede belirtien özellikleri istiyor; daha fazla ayrıntısı yok :) Front end tarafındaki ayrıntıları ben düşündüm yani Teklif ve Siparişleri tablo olarak tarayıcıda göstermeyi sayfayı Refresh yapmadan gösterebilmek için Angular ve React gibi sistem kullanmayı. Proje sahipleri için belki o önemli de olmayabilir, yani örneğin Sipariş tablosunu her farklı sıralamada Siparişler sunucuda sıralanarak tarayıcıya yeniden gönderilse yani sayfa Refresh olsa da sorun olmayabilirdi, belki. Cunku AWS gibi bir cloud ortamında çalışacak, sunucu hızlı çalışacak. Yani sunucuya endeksli klasik bir uygulama olarak da yapmak mümkün; özellikle proje sahipleri daha kısa sürede / daha düşük ücrete yapılmasını da istiyorsa. Yani proje sahipleri 1 aylık sürede brüt asgari x 5 ücrete yani 23 işgününde 3000TL x 5 = 15.000TL yapılmasını istedi, ben 10 işgününde 6bin TL'ye yapsam ama öyle gelişmiş front end özellikleri olmayacak desem, proje sahipleri onu da kabul edebilir.

    Proje ana hatları olarak bir sınıf diyagramı çizdim. Tabi ki sınıfların ayrıntısını (metodlar, üye değişkenler) dahil etmedim; sadece ana hatlar:

    Frontend Gelişim Günlüğüm (Web Tabanlı Sipariş Takip Programı)


    @JSDeveloper Şu ana kadar front end larak yaptığım en ileri şey otomobil özellikleri ve fiyatını girerek ÖTV / MTV hesaplama ve kişi profili ve brüt ücret girerek sene boyunca kesilen vergi ve SGK 'ya göre aylık net ücret belirleme programları. Bu ikisinde jQuery bile kullanmadım.

    Front end framework'lerle denemek üzere şu anda bir REST veri kaynağı oluşturmayı düşünüyorum. Onun nasıl yapılacağı benim cok eski bir Rails kitabında var fakat hiç uygulamadım :) Ona bakıp yapacağım. Bu arada Rails kitabında REST konusuna bakarken RJS diye bir başlık gördüm ki o da EJS'nin Rails versiyonu gibi birşeymiş




  • Hocam o zaman firebase+(vue veya react) kullansana. Vue veya react ile reaktif bir tablo oluşturmak hiç zahmetli değil, belki zorlasa 5 dk nı alır. Tabi basit bir tablo için konuşuyorum. Ayrınti için sağol. Ben şiddetle angulara bulaşma diyorum.

    < Bu ileti DH mobil uygulamasından atıldı >
  • RJS rubydeki template engine' miş. Hepsi aynı mantıkla çalışıyor zaten. Jquery' e göre Vue çok rahattır, yani ('#element').click(() => {{ ... }) yapmak yerine v-on:click='method' şeklinde tanımlama yapıyorsun. İşi çok kolaylaştırır fakat kendi tecrübeme dayanarak söylüyorum bunu, belki daha kısa sürede yapan birileri olabilir tabi, tamamen dinamik ve kırılımlı yani kat kat bir tablo oluşturmak için yaklaşık 2 gün harcamıştım. Aşağıdaki tablo örnektir, periyotlar çoğaldıkça tablo horizontal şekilde genişleniyor veya sınavlar arttırıldığında genişliyor. Aslında formül bulmak zorlamıştı, filtre için seçilen alanları kendi içerisinde çarpınca tablonun ne kadar genişleyeceği ve hangi kolonda hangi veri gösterileceği ortaya çıkmıştı. Kısacası Vue işini kolaylaştırır fakat diğer arkadaşın dediği gibi 5 dakikalık bir iş değil. Özellikle kompleks tablo işine girersen. Javascript tarafında asıl işini kolaylaştıran ES6' dır. Arrayler üzerinde asenkron şekilde çalışan döngüler vardır forEach, map, filter, reduce gibi (higher-order functions). Ek olarak async/ await yapısını kullanmana olanak sağlar yani asenkron işlemleri senkron hale getirmeni sağlar bir de Promise kütüphanesi then().catch().finally() kullanmana olanak sağlar. API üzerinden veriyi alırsın, başarılı olursa then() içerisine gelir. data.forEach() - data.filter() gibi işlemler yapıp en sonunda tabloya yazdırırsın. Son söylediklerim react - angular - vue - jquery için geçerlidir. Her hangi birini seçtiğinde karşına çıkacaklar.

    Frontend Gelişim Günlüğüm (Web Tabanlı Sipariş Takip Programı)




  • Valla hocam ben sade bir tabloyu ki bu tablodaki satırlar tek veri değil koca bir component, 5 dkda yapabiliyorum. Benim söyledim basit bir tabloydu, ama bu sadece tek veri kadar basit değil. İçeri zengin bir componenti , v-for directive ile tablolaştırabiliyorum. Dediğim gibi basit bir yapı bu. İşin içine sıralama vs gibi özellikler katmadan

    < Bu ileti DH mobil uygulamasından atıldı >
  • 
Sayfa: 12
Sayfaya Git
Git
sonraki
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.