Mobil Developer Olarak Angular Geliştirmek
Merhaba arkadaşlar, bugün size bir mobil developer olarak Angular geliştirirken yaşadığım süreçten bahsedeceğim. Eğer yazı geçmişime bakar iseniz uzmanlık alanım olan mobil uygulama geliştirme dışında farklı teknolojilerede merakımın olduğunu görmüşsünüzdür. Birçok teknolojiye acemi olarak değindikten sonra Front-end dünyasında bulunan kavramlara pek aşina olmadığım için kendimi cahil hissetmeye başladım bununla birlikte projelerimi uçtan uca geliştirmeyi sevdiğim için artık bu konu hakkında bir bilgi sahibi olmalıydım.
Not: Bundan sonra bahsedeceğim tüm tecrübeler kişisel fikrimdir. Belki yanlış şeylerden de bahsedebilirim sadece yaşadığım deneyimi aktarmak istedim.
Eğer bir mobil developer iseniz son kullanıcıya değen kişi sizsinizdir. Eğer proje genel olarak(Backend, devops vb.) iyi ise yinede siz taktir edilirsiniz veya proje genel olarak kötü ise yine siz yerin dibine sokulursunuz. Mobil developer arkaşlarım ne demek istediğimi çok iyi anlamışlardır :) . Bunu nasıl mobilde yapabiliyorsak aynı şekilde web tarafında da yapabiliyoruz. İşte bunları web tarafında yapabileceğimiz teknolojilerin tümüne Front-end teknolojileri denir. Ve Front-end dünyası mobil dünyadan daha hızlı gelişen bir dünya Allah’ın her günü yeni bir framework çıkıyor.
Peki nedir bu Front-end teknolojileri (Bildiklerim);
- React
- Vue
- Angular
Genellikle sağdan soldan bu teknolojileri duyuyorum. Kesinlikle daha fazla teknoloji vardır ama gerek Twitter olsun gerekse diğer şirketlerde bulunan teknolojiler olsun genellikle yukarıdaki teknolojiler sürekli kulağımda beliriyor.
Bende yukarıdaki teknolojilerden “React” ve “Angular” teknolojilerine bakmaya başladım
React
Mobil developer iseniz React Native teknolojisini duymamanız imkansız. Buna istinaden hem React Native yazmak istersem kolay yazarım hemde Front-end teknolojisi olarak tech stackime eklerim umuduyla bu teknolojiye giriştim (Bu arada büyük firmalar sırf hem mobilini React Native ile yazarız hemde websiteyi diyerekten React seçiminde bulunuyor). Girişmez olaydım!!
Peki neden;
Çünkü UI’da birşeyleri güncelleyene kadar atla karayı seçiyorum. Isınamadım bu teknolojiye olmadı ben yapamadım elendim bu teknolojiyi kullanırken. Design Patternları biliyoruz yazılım temelimiz sağlam ama Front-end dünyasından gelmiyorum diye çok zorladım. Zaten React Native’yi de sevmiyordum iyi oldu :) .
Not: https://talentgrid.io/ adlı bir platformda çıkarılan analiz sonucu Türk şirketleri içinde en fazla kullanılan Front-end teknolojisi React’mış. Ama ben yapamadım bir sebeple kullanılıyor ama onu kavrayamadım.
Angular
Angular’ı yıllardır duyuyorum ben ama hiç bakma fırsatım olmamıştı. Neyse birgün kişisel bir proje yapacağım backendi Spring Boot olacak bir tanede admin paneli lazım bana onuda jsp ile yazayım dedim. Başladım ben projeyi yazmaya bu arada yaptığım projeyi etrafım ile paylaşıyorum. Bu projeyi paylaştığım bir abi diyeyim bana “Şuan admin panelini jsp ile yazman best practice değil çünkü eskide kaldı böyle proje geliştirmek. Backend’ini REST servisler üstüne kurmalısın admin panelin ve mobil uygulaman aynı servisleri kullanabilir olmalı” dedi. Bende dedim ki “NEDEN?”
Cevap olarak şunu söyledi;
“Serkan bir firmaya proje geliştiriyorsun olarak düşün. Projende admin paneli ve bir mobil uygulaman var. Projeyi geliştirdin ve admin panelini jsp ile yazdın. Yarın öbürgün müşteri şunu diyebilir “Admin panelinde yaptığımız herşeyi mobil uygulamada da yapmak istiyoruz” böyle bir durumda mobil uygulama için bir sürü servis yazman gerekir ama en baştan Admin panelini REST üstünden yönetseydin böyle bir sorunun kalmayacaktı.”
Bununla birlikte birçok neden saydı ama en can alıcı nokta bu idi. Bununla birlikte projelerinde Angular kullandıklarından bahsetti (bu arada çalıştığı firma çok büyük global bir firma). Bende kolları sıvadım ve başladım Angular öğrenmeye.
Angular’ın(Typescript) syntaxını nedense kolay kavradım çünkü Javascript biliyorum ve Kotlin’e benziyor. Ve bir UI’yı güncellemek çok kolay geldi sanki mobil uygulama yazıyorum. Bunlarla birlikte benim için otomatik componentler oluşturuyor. Component derken şundan kast ediyorum;
- 1 adet html
- 1 adet css
- 1 adet ts dosyası
Ve Angular MVVM kullanıyor. Ön taraf(HTML) veriyi observe ediyor. Bu mimariye mobil geliştirdiğim için yatkınım. Aman Allah’ım aradığım teknoloji bu diyerekten başladım aklımdaki paneli geliştirmeye.
Servislerin hepsini yazdım ve başladım paneli geliştirmeye. Nasıl HTTP işlemleri yapılır diye araştırmaya başladım. Yapıyı kurdum ve Bismillah deyip attım isteği peki cevap ne oldu?
Bu ne yahu şimdi? Efendi efendi projemizi geliştirecektik. Sonra araştırdım neden böyle olduğunu sebebini öğrendim ama önceden CORS’un ne olduğunu öğrendim
Meğersem Angular önce “OPTIONS” methodu ile request atıyormuş sonra yapmak istediği isteği yapıyormuş tabi bende backend projesinde JWT kullandığım için ve istek attığım endpointe authorize koşulu koyduğum için bu hatayı alıyormuşum. Sonra kaldırdım koşulu çalıştı. Peki sırada ne vardı?
Düzgün Network Yapısı
Baktım ki kod tekrarı yapıyorum ve tüm işlemlere teker teker aynı headerı koyuyorum dedim bu olmaz. Sonra internetten araştırdım insanlar nasıl Base servis yapısı koymuş diye kafama yatan bir yapıyı aldım loglama ekledim sağını solunu düzelttim (Düzelttim derken kendime uygun hale getirdim) sonra tüm HTTP işlemlerimi yapacak bir yapı oluşturdum. Yapı aşağıdaki gibi oldu.
Sonra biraz daha araştırınca Angular’da “HttpInterceptor” adında bir sınıf olduğunu öğrendim ve bu sınıf istek internete çıkmadan önce tetikleniyor. Dedim hayhay! loglamayı ve unauthorize olma işlemlerini buraya aldım (Örneğin kullanıcının ilgili işlemi yapmaya izini yok ise backend 401 dönecek ve kullanıcıyı login sayfasına atacağım)
Şu ana kadar herşey çok güzel.
“ Peki ben her HTTP işleminde loading çıkarmak istiyorum ve tüm HTTP işlemlerinden önce manuel olarak göstermek istemiyorum. Bunun için ne yapabilirim?” diye araştırmaya başladım. Yine karşıma “HttpInterceptor” çıktı. Bende öyle düşündüm ama belki doğrusu bu değildir diye araştırayım dedim sonuç olarak “HttpInterceptor” sınıf business işlemi yapabilir ve loading ise bir UI işlemi bu ikisi aynı yerde yer almamalı diye düşündüm ama genellikle insanlar loading işlemini bu sınıfın içinde yapmışlar. Sonra ben HTML ve CSS konusunda kötüyüm nasıl bir loading çıkarabilirim ki diye düşündüm karşıma hemen şöyle bir kütüphane çıktı
Peki herhangi bir mesajı kullanıcıya çıkarmak istersem nasıl yaparım diye araştırınca karşıma şöyle bir kütüphane çıktı;
Artık güzel bir yapı oluşturdum.
Peki “Dosya yapısı nasıl olmalı?” diye bir araştırmaya girince direkt karşıma şu yazı çıktı ve biraz daha araştırınca birçok kişinin bu yapıyı önerdiğini gördüm
Sonra dedim “Serkan hepi topu bir admin paneli yapacaksın işin cılkını çıkardın yapıştır geç”. Yazıyı okuduktan sonra dosya yapısına fazla takılmadan projemi geliştirdim.
Sonuç;
- Artık bir web uygulaması geliştirebilirim (küçük ve orta çaplı).
- Front-end konusunda birşeyler öğrendik artık cahil değiliz evelAllah
- Angular bir frameworkten fazlasıymış adamlar herşeye bir döküman ve kütüphane geliştirmiş (NPM için demiyorum adamların herşey için componentleri var)
Not: Yukarıdakileri öğrenmem ve yapmam 1 haftamı aldı diyebilirim. Belki yanlış şeyler yazmışımdır ama tüm fikirlerim kişisel.
BONUS
Angular projeni geliştirdin ve deploy etmek istiyor isen şöyle bir kaynak paylaşayım. Hemde CI/CD’li :)
