<figure><img alt="" src="https://cdn-images-1.medium.com/max/500/1*luhhAZS0lPhJtqHJqTrGew.jpeg" /><figcaption>an reaction for appium config hell</figcaption></figure><p>Appium eski sürümlerinde Inspector uygulamanın içinde gömülü şekilde gelirken yeni versiyonlarda Inspector ayrılıp, Appium Server GUI ve Appium Inspector adında iki farklı uygulama getirildi. Bu yazımda tam olarak bu ayrımda kafa karıştıran config sorunlarını çözecek ve basitçe yeni sürüm Appium’u nasıl kullanırsınız onu anlatacağım.</p><h4>Kurulum</h4><p>Son versiyon tıklayarak size uygun olan işletim sistemi seçip kolayca indirebilirsiniz.</p><p>İlk öncelelik aşağıdaki adresten Appium Server GUI’ı indirmeniz gerekiyor;</p><p><a href="https://github.com/appium/appium-desktop/releases/">Releases · appium/appium-desktop</a></p><p>İkinci olarak aşağıdaki adrestende Inspector’ı indirdiğimizde indirme kısımı halloluyor.</p><p><a href="https://github.com/appium/appium-inspector/releases/">Releases · appium/appium-inspector</a></p><h4>Environment Variables</h4><p>Appium Server GUI’ın Simple sekmesinde olan “Edit Configurations” butonuna tıklıyoruz ve karşımıza iki adet environment variables geliyor eğer hali hazırda yolları belirtilmişse diğer adıma geçebilirsiniz.</p><p>İlk ANDROID_HOME variable dolduralım, aşağıda ki komutu çalıştırarak setlenmiş olan ANDROID_HOME variable alabilirsiniz.</p><pre>echo ANDROID_HOME</pre><p>Eğer boş dönüyor ise Android Studio IDE’sini açarak “Appearance & Behavior” altında “System Settings” altındaki “Android SDK” tıklayarak “Android SDK Location” sağındaki inputu kopyalayıp yapıştırabilirsiniz.</p><p>Gelelim JAVA_HOME variablena yukardakine benzer olarak aşağıdaki komudu yazın boş dönerse genelde bilgisayarınızın ana dizininde Java’yı arayabilirsiniz.</p><pre>echo JAVA_HOME</pre><p>Save and Restart butonuna tıklayın eğer kapanmaz ise manuel bir şekilde kapatıp açın ve tekrardan “Edit Configurations” butonuna tıklayarak setlenip setlenmediğini kontrol edin.</p><h4>Sunucu Ayarları</h4><p>Appium Server GUI’ı açıyoruz ve “Advance” sekmesine giriyoruz. <br>Buradan “Server Address” kısmını “localhost” veya “127.0.0.1” yazıyoruz.</p><p>Akabinde Appium’un kalkacağı portu belirtiyoruz o da “Server Port” kısmından yapılıyor default portu verebilirsiniz ya da farklı bir port verebilirsiniz.</p><p>“Allow Cors” solunda olan checkbox’ı tikliyoruz.</p><p>Advance sekmesi ile işimiz bitmiştir şimdi Simple sekmesine geri dönüyoruz. Sonrasında sunucumuzu ayağa kaldırabiliriz. Hemen eliniz büyüteç ikonuna gitmesin çünkü default olarak Github repository’sine yönlediriyor. 😁</p><p>Appium Inspector uygulamasını açabiliriz artık burada “Remote Host” inputuna Appium Server GUI’ın “Server Address” inputunda verdiğimiz değeri veriyoruz.</p><p>“Remote Port” inputnada Appium Server GUI’da verdiğimiz değeri verdiğimize göre Host ve Port tamamdır.</p><p>“Remote Path” inputuna aşağıdaki değeri yazıyoruz;</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/635/1*0VtgOpW1YlQ_Sutz52mLFA.png" /></figure><p>Kapalı durumda olan “Advance Settings” bölüntüsüne tıklayarak açıyoruz.</p><p>“Allow Unauthorized Certificates” solundaki checkbox’ı tikliyoruz.</p><p>Appium Server GUI ayarlarımız tamamdır 👌</p><h4>Capabilities Config</h4><p>Appium Inspector’da “Desired Capabilities” sekmesi altındaki bölüme bazı değerler yazmamız gerekiyor işletim sistemine ve fiziksel cihaza göre değişebiliyor. Aşağıda verilen keylerin karşısına kendi değerlerimizi dolduruyoruz.</p><p><strong>Android</strong></p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/f828685ed99f50cf66858079663ab635/href">https://medium.com/media/f828685ed99f50cf66858079663ab635/href</a></iframe><p><strong>iOS Simulator</strong></p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c6dc94098001f0e5b360cc045ee16ce2/href">https://medium.com/media/c6dc94098001f0e5b360cc045ee16ce2/href</a></iframe><p><strong>iOS Fiziksel Cihaz</strong></p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/effac1be6a734e5a947090883c2f6321/href">https://medium.com/media/effac1be6a734e5a947090883c2f6321/href</a></iframe><p>Sağ alta bulunan “Save As” butonuna basarak yazdığınız configleri kaydedip hızlıca kullanabilirsiniz. Bu arada kayıt ettiğiniz zaman “appium:” gibi bir prefix ekleyebilir heyecana gerek yok normal bir şey. 😁</p><p>I’m waiting for your prayers… <br>Happy Hacking 🤟🏻</p><p>References;<br><a href="https://www.kobiton.com/book/chapter-5-the-appium-inspector-2">https://www.kobiton.com/book/chapter-5-the-appium-inspector-2</a><br><a href="https://stackoverflow.com/a/70658730">https://stackoverflow.com/a/70658730</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=42eb55cdb61d" width="1" height="1" alt="">

Appium Server GUI & Appium Inspector Kullanım Rehberi

<h3>Component-Driven</h3><p>Bazen kötü tasarlanmış veya hiç “tasarlanmadan” ilerlenmiş bir Front-End projesi ilerleyen safalarda kötü sonuçlanabiliyor. Birbirine karışmış contextler birbirine kapsayan binlerce classlar ne olduğu belirsiz bir sürü metot ile dolabiliyor. Bu anlattığım caselerin bir çoğu için güzel patternlar ve teknikler bulunmakta ama bu yazıda Component-Driven tekniğinden bahsedeceğim.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/498/1*5jExwRbeocB9JYZTec4wVQ.gif" /></figure><h4>Ne Değildir? Nedir?</h4><p>İsiminden ki “driven” kelimesine takılıp rehavet kapılmayın çünkü bu bir development cycle veya gereklilikleri tanımlayan bir teknik değildir. Gerekliliklerinizi belirlemez yada projenizi develop ederken size bir guideline sağlamaz!</p><p>Burada ki “driven” kelimesi UI-level’da düşünülmesi gerek bir isimlendirmedir bir nevi belli başlı şeyleri soyutlamanızı önerir.</p><h4>Component Nedir?</h4><p>Çok basit olarak anlatmak gerekirse, gerektiğinde bir buton veya bir profile picture olabilir kırılımı olabildiğince üst seviyeler çıkartılabilir fakat burada dikkat edilmesi gereken konu <strong>YAGNI.</strong></p><p>YAGNI yani “Buna gerçekten ihtiyacım var mı?” sorusu bu prensibi yazılım geliştirme kariyerinizin ortasına koymanızı tavsiye ederim. Bazen bir kırılımı şu an yapmalısınıdır ya da bunun için daha zamanın vardır. Domain’in daha bu kadar büyümeden bir kırılım yapar isen bu seferde anlaşılabilirliği öldürürsün o yüzden kısaca her şeyin bir yeri ve zamanı vardır diyebiliriz.</p><p>Gelelim component nedir aslında yukarda açıkladığım gibi durumuna ve zamanına göre veya design sistemine göre oluşturulan bir projenin en küçük parçası diyebiliriz.</p><h4>Component-Driven Nedir? Nasıl Yapılır?</h4><p>Bu teknik aynı TDD’de olduğu gibi bir şeyi amacınız olarak belirleyip mimariyi tasarladığınız bir teknikdir. Herhangi bir component tanımı veya sorumluluklarını belirten bir guideline içermez. Burada ana amacımız projemizde ki her sayfanın her bölüntüsünü gerekliliğe göre kırmamız veya design systemin diktelerine uyarak.</p><p>Ek olarak eğer Front-End’de daha yeni yeşermeye başlayan bir takımda iseniz, Design System size mükemmel bir rehber olacaktır. Eğer böyle bir case içerisinde değil iseniz bile Design System’ı takip etmek sizin için çift dikiş olacaktır.</p><p>Componentler’den tasarlamaya başlayıp bir Lego parçası misali bu componentleri birbirlerine ekleyerek bir section, bu sectionlar’dan da bir sayfa, bu sayfalardanda projeye çevirmenizdir.</p><p>Basit ama efektif bir teknikdir burada önemli olan bir nokta da componentlerin verdiğiniz sorumlulukların net olmasıdır ve katiyen bu sınırların dışına çıkılmaması gerekir. Misal olarak bir Modal’dan Card türetilmemesi gibi. 🙂</p><h4>“Bu component nasıl çalışıyordu ya?” Dokümantasyon</h4><p>Eğer malum soruyu sormaya başladıysanız veya bu soruyla hiç karşılaşmamak istiyor iseniz componentinizi dokümante etmeniz şart hale geliyor.</p><p>Componentler bazen onlarca parametre alabiliyor eğer daha fazla parametre almaya başladıysa ve kod bloğu okunmayacak hale geldiyse Refactor düşünmelisiniz ama en basitinden bir Title Componenti’nin rengini, yazı boyutu ve benzeri gibi parametreleri aklınızda tutmanız tabii ki imkansızdır.</p><p>Bu şartlarda Storybook gibi dokümantasyon tooları tam size uygun olabilir. Eğer bunu yapamıyorsanız bile en basitinden README gibi markdown dosyasında veya JSDoc gibi dil seviyesinde componentlerinizi dokümante etmenizi tavsiye ederim.</p><p>Happy Hacking 🤟🏻</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=c0c6bacc8769" width="1" height="1" alt="">

Ne Olaki? Component-Driven

<figure><img alt="" src="https://cdn-images-1.medium.com/max/498/1*ZU_onxPXoUFwWy-7PwhV7Q.gif" /></figure><p>Selamlar, bu Ne Olaki? serisinin ilk yazısında sizlere Smart ve Dumb componentleri yani namı diğer Container Component’in patternından bahsedeceğim.</p><p>Modüler olması ve business logicinizi diğer dumb componentlerden kopartmanızı sağlayan tekrar kullanılabilirliği yüksek bir Front-End patternıdır. Bu patternda iki adet component konsepti bulunmaktadır Smart Component ve Dumb Component daha detaylı anlatmak gerekirse.</p><h3>Smart Component (Container Component)</h3><p>Smart component, business logic içeren ve dışarıdan veya içeriden bir datayı manipüle edip gerekli componentlere iletmesini sağlayan bir kukla yöneticisi gibi davranır. Özellikle burası önemlidir presentation içermemelidir yani herhangi bir kullanıcı tarafınca doldurulan veya kullanıcıya sunulacak bir yapı içermemelidir böyle bir durum pattern ihlaline sebep olur.</p><h4>Sorumlulukları</h4><ul><li>State tutar</li><li>Dumb componentlerden gelen eventleri yönetir</li><li>Bir veya birden fazla dumb component içerir ve bu componentleri yöneten componentdir</li></ul><h3>Dumb Component</h3><p>Herhangi bir business logic veya data manipülasyonu yapmayan sadece ve sadece parametrelerce verilen değeri herhangi bir müdahelede bulunmadan belirtilen style ile render etmeyi sağlayan arkasında neredeyse hiç logic bulunmayan bir componentdir. Kısaca özetlemek gerekirse bir presentation componentidir.</p><h4>Sorumluluklar</h4><ul><li>State tutmaz</li><li>Parametrelerden alınan değeri kullanır</li><li>Kullanıcı kaynaklı veya kullanıcı kaynaklı olmayan eventleri Smart Componente bildirir ( Event yakalandıktan sonra dumb component’de herhangi bir logic çalışmamalıdır)</li></ul><h3>“Şeklen İzah”</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5zDIV1Oz0fgzz6FOsBcJug.png" /></figure><p>Çizim üzerinden anlatmak gerekirsek Post Container Component ilgili API’a HTTP client sayesinde gidip datayı çekti ve state’de tuttu. <br>Bu stateleri postları yazdırmak için gerekli componentlere bölüştürdü ve bu Dumb Componentlerde yazılan style ve data sonucunda kullanıcıya component’i sunmuş oldu. <br>Eğer bu kullanıcı ilgili bir posta like atar ise bu like eventi Post Reaction Component tarafında emit edilip Post Container Component’e bildirecek. Bunun sonucunda Post Container içine yazılmış olan business logic çalışmış olacak.</p><p>Happy Hacking 🤟🏻</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=720876989f85" width="1" height="1" alt="">