Jest Nedir? — Logo: seeklogo.com

Özellikle React projelerinde karşılaştığımız Jest, Facebook firmasının geliştirmiş olduğu bir Javascript test kütüphanesidir. React kodunu test etmek için biçilmiş bir kaftan olmasının yanında herhangi bir JavaScript kodu için de kullanılabilir. Bu yazıda Jest ile ilgili temel bilgilere değineceğim. İsterseniz Jest’in projeye kurulumuna başlayalım.

Kurulum

Mevcut React projelerinde dahili olarak gelen Jest’i sıfırdan yüklemek için öncelikle boş bir proje oluşturalım:

Bu komut ile birlikte proje içerisine package.jsondosyası oluşacaktır. Şimdi Jest’i aşağıdaki gibi yükleyelim:

- D komutu sayesinde Jest, sadece geliştirim ortamına eklenmiş olacak ve proje bundle’ına dahil edilmeyecektir.

jest’i yarn test ile çalıştırabilmek için scripts


React Native Android uygulamasını Github Packages üzerinden yayınlama

Mevcut React Native uygulamanızda yer alan bir iş akışınızı, başka uygulamalar ile de paylaşmak için, uygulamanın bir kısmını library haline getirmek isteyebilirsiniz. Native tarafta library oluşturma ve yönetme işleminin, normal uygulama geliştirimine göre bazı zorlukları bulunurken, ek olarak bir de React Native ile entegre çalışacak şekilde bir ürün ortaya çıkarmak kafa karıştırıcı ve yorucu bir süreç haline gelebiliyor. İnternette arama yaptığınızda da kaynaklar yetersiz kalabiliyor. Bu nedenle, tam bu durumu çözmek için pek çok kaynaktan edindiğim bilgileri birleştirerek sizlere aktarmaya çalışacağım. Hazırsanız başlayalım.

Mevcut React Native projesinin klonunun yapılması

Projedeki sadece bir iş akışını kütüphane haline getireceğimiz için projenin aynı konfigürasyonlarına sahip bir klonunu oluşturup kodun…


React Native projeleri kodlarken pek çok kütüphanenin npm paketini kolaylıkla bulunabiliyor. Fakat bazı durumlarda üçüncü parti bir native SDK kütüphaneyi projenize dahil etmeniz gerekebilir. Bu durumlarda Native modül yazarak JavaScript ve Native tarafı birbiriyle konuşturabilirsiniz. Şimdi projeyi oluşturdukta sonra örnek bir problem üretelim ve bunu Native Modules ile çözmeye çalışalım.

Projenin oluşturulması

React native projesini oluşturmak için iki farklı yol izlenebilir.

React native community cli ile:

Expo ile:

Ben bu projede expo ile projeyi oluşturup, native modülleri oluşturmak için eject edeceğim. Siz de istediğiniz yolu kullanabilirsiniz.

Örnek Problem

Problemi basite indirmek adına üçüncü…


iOS uygulaması geliştiren herkesin hayatında en az bir kez karşılaştığı terimlerden biridir. Apple tarafından belirlenen tanıma bir bakalım:

Provisioning profile, yazılımcıları ve cihazları yetkilendirilmiş bir iPhone Development Team’e bağlayan ve ilgili cihazların test için kullanımını etkinleştiren, dijital varlıklardan oluşan bir koleksiyonudur.

Buradan da anlaşılacağı gibi profile, yazılımcıların hangi cihazlar üzerinde, hangi uygulamayı debug edeceğinin belirlenmesini sağlamaktadır.

Peki neden Provisioning Profile’a ihtiyacımız var?

Android’de olduğu gibi apk atarak uygulama yükleme durumu iOS uygulamalarının geliştiriminde mümkün değildir. Çünkü Apple’ın güvenlik politikaları gereği, ilgili uygulama Apple tarafından imzalanmış olmalıdır. Fakat, uygulama geliştirimi yapılırken, Apple’a sunmadan önce cihazlarda da test/debug edilmesi gereklidir. Bu nedenle cihaz ve geliştirim hesabını birbirine bağlayacak…


SOLID, yazılan kodun daha anlaşılır, esnek ve bakımı yapılabilir olmasını sağlayan 5 kuraldan oluşan tasarım prensiplerine denir.

Single responsibility

Yazılım birimleri, sadece tek bir görevden sorumlu olmalıdır.

Open-closed principle

Yazılım birimleri genişlemeye açık, direkt değiştirilmeye kapalı olmalıdır.


Normalde iOS projeleri geliştirimi nispeten kolaydır. Fakat farklı uygulamalar için bir SDK/framework yazıyorsanız işler karmaşıklaşabiliyor. Bu yazımda da sizlere “iOS framework projesi nasıl oluşturulur?”, “Framework içerisine nasıl storyboard ekranları eklenir?” ve “Framework kodu nasıl çalıştırılır?” gibi konulardan bahsedeceğim.

Öncelikle hem iOS projesini hem de kullanacağı framework’ü barındıracak olan workspace’i oluşturalım.

1. Workspace dosyasının oluşturulması

File > New > Workspace veya Control + Cmd + N tuş kombinasyonu ile Workspace oluşturma ekranını açın.

Proje dizinini oluşturun. Ben Users/zaferayan/XcodeProjects/MyFramework şeklinde oluşturdum. Save As kısmında workspace dosyanızın adını belirtebilirsiniz. Ben MyFramework olarak verdim. Save dedikten sonra MyFramework.workspace dosyası oluşacaktır.


When you cloned another react native project and try to run on your android device, you can use this command:

But, if you not installed any dependencies you may get this error:

This error shows that react-native is not recognized because npm couldn’t found react-native in local project.

Solution

Install dependencies with yarn or npm:


Günlük hayatta uygulama geliştirirken hazır bir şekilde grafik kütüphanelerini kullanabiliyoruz. Fakat React Native’de birçok farklı platformu (android, ios, web) aynı anda destekleyebilen bir chart kütüphanesi bulunmayabiliyor. Bu gibi durumlarda örneğin web için harici olarak chartjs gibi kütüphaneleri de kullanabilirsiniz. Fakat ortak bir kod oluşması ve o kodun üzerinden geliştirim yapılması daha iyi olacaktır. Dolayısıyla bu problemi çözmek ve aynı zamanda grafik kütüphanelerinin en temel halde bir pasta grafiğini nasıl çizdiğini görmek için kendi pasta grafiğimizi çizebiliriz. Bu yazımda da pasta grafiğini nasıl kendiniz çizebilirsiniz buna değineceğim.

Öncelikle projeminizi oluşturalım:

Projemize react-native-svg kütüphanesini…


Mobil uygulamalarda çoklu dil desteği, diğer dilleri konuşan kullanıcılara açılmak için önem arz ediyor. Bu yazımda da sizlere React Native uygulamalarında çoklu dil desteğini nasıl yapabileceğinizi anlatacağım.

Öncelikle projeminizi oluşturalım ve boş haliyle çalıştıralım:

Projemize react-native-localize ve i18n-js kütüphanelerini ekleyelim, pod’ları yükleyelim, projeyi git’e ekleyelim ve vscode ile açalım:

react-native-localize kütüphanesi, cihazın mevcut dili ile ilgili bilgilerin getirilmesini sağlar. …


Kullanıcı açısından, uygulamalardaki görselliğin bir artı puan sağladığı su götürmez bir gerçek. Statik halde duran resimler ve fotoğraflar, animasyonlar ile birlikte sunulduğunda, uygulamayı görsel bir şölen haline getirmektedir.

React Native’de animasyon oluşturmak için Animated API kullanılabilir. Fakat Animated API kullanarak animasyon üzerinde oturup uzun zaman harcamak yerine alternatif olarak Lottie animasyonlarını da kullanabilirsiniz. Lottie animasyonlarını en basit haliyle tanımlamak gerekirse, Adobe AfterEffects ile oluşturulan animasyonlardır diyebiliriz. Mobil uygulamalar, JSON halinde tutulan bu animasyon dosyalarını, native tarafta işleyerek uygun şekilde görüntüler. Çalışma tarzını bu yönden SVG’ye benzetebilirsiniz.

Dilerseniz lafı daha fazla uzatmadan Lottie Animasyonlarının uygulama içerisinde nasıl kullanılacağına değinelim.

Projenin oluşturulması

Öncelikle projeminizi…

Zafer Ayan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store