Android Programming

Create a React Native Web, Android, and IOS project with Expo CLI 1024 635 mezo

Create a React Native Web, Android, and IOS project with Expo CLI

Hello fellow programmer padawans

As you can understand from the title I will tell you how to create a web, Android, and IOS project with React Native and Expo. First, we need the Expo CLI package.

What’s Expo CLI?

Expo CLI is the npm package that creates a project that we can test on our devices. We won’t need to write codes on Xcode or Android Studio. We only need Visual Studio Code and we can write codes for 3 different environments.

First things first, we need NodeJs installed on our computer if you don’t have it you can download it here: https://nodejs.org/en/.

Install Expo and Create Project

To install the Expo CLI you need to open Node.js Command Prompt and run this code

npm install -g expo-cli

To create the project run this code below

expo init ProjectName

Template Selection

As soon as you make the code creation command run, you will see the selection menu as shown below. We need to select a template depending on our needs. I prefer to select a TABS template, it’s a TypeScript and a very good sample to learn and to see the structure of the project.

Start your project and see your app on your device

After the project creation is over we need to go inside the project folder from Nodejs Command Prompt to start your project.

expo start

Then we can see a website and a barcode on the command prompt, that barcode is the magic. I will show you…

After you see all these screens you now are ready to test your app on your device. Download the Expo app from the Apple App Store or Google Play and create an account.

Open your Camera and read the barcode. It will then ask you to open in the Expo app, do it and Voila! Your app is working on your phone or tablet.

First, open the project folder with Visual Studio Code so you can checkout the folder and file structure. Then you can find the Screens folder and make some changes on the TabScreenOne.tsx or TabScreenTwo.tsx files and you will see your app is changing on your device as well.

That’s all for now! I will write about components on React Native on my next post.

Thanks for reading

May the force be with you. 

Expo ile React Native Web, IOS ve Android Projesi Oluşturmak 1024 635 mezo

Expo ile React Native Web, IOS ve Android Projesi Oluşturmak

Selamlar sevgili programcı padavanlar

Başlıktan da anladığınız gibi bu makalemde sizlere nasıl React Native ile hem web hem android hem de IOS projesi oluşturabiliriz sorusunun cevabını anlatacağım. İlk olarak Expo CLI paketini yükleyerek başlıyoruz.

Expo CLI paketi ile oluşturduğumuz projemiz için XCode yada Android Studio gibi ek IDE yazılımlarına ihtiyaç kalmadan tek seferde 3 platform için yazılım geliştirebilmemizi sağlıyor.

Expo ile proje geliştirebilmek için öncelikle NodeJS e ihtiyacımız var. Eğer bilgisayarınız da NodeJS yoksa şuradan https://nodejs.org/en/ indirebilirsiniz.

NodeJS i kurduk şimdi sıra Expo CLI paketinde.

Expo Kurulumu ve Proje Oluşturma

ExpoCLI kurmak için Node.js command promptu bulup çalıştırın ve aşağıdaki komut satırını çalıştırın.

npm install -g expo-cli

Projeyi Oluşturmak için ise :

expo init ProjeAdı

Template Seçimi

Komut satırı çalışır çalışmaz aşağıdaki template seçim ekranı bizi karşılıyor. Buradan projenize uygun olan şablonu seçebilirsiniz ben TABS template ini seçiyorum. TABS ile gelen proje içerisinde çalışan bir sekme örneği var React Native i çok iyi anlayabileceğiniz güzel bir örnek olduğunu düşünüyorum.

Sonrasında yine Node.js command prompt üzerinden oluşturduğumuz klasörün içine giderek projemizi çalıştırıyoruz.

expo start

Proje çalışırken hem command prompt üzerinde hemde açılan localhost web sitesi üzerinde bir kare barcod çıkıyor bu barcod ne işe yarıyor birazdan anlatacağım…

Nodejs Command Prompt

Web Expo Proje Sayfası 

Projemizi Cihazlarda Çalıştırmak

Ardından elinizdeki cihaz üzerinde Google Play yada Apple App Store üzerinden Expo uygulamasını indirerek bir hesap oluşturun ardından projenizi eklemek için bir barkod isteyecek işte şimdi yukarda çıkan barkodların bir anlamı oldu. Cihazınızın kamerası ile barkodu okutun ve oluşturduğunuz uygulamanız telefonunuzda çalışmaya başlasın.

Başlangıç olarak projenizi Visual Studio Code üzerinde açıp Screens klasörü içindeki TabOneScreen.tsx , TabTwoScreen.tsx dosyalarını biraz değiştirerek uygulamanızı biraz değiştirebilirsiniz.

Şimdilik bu kadar bir sonraki yazıda sizlere React Native üzerinde component yapısını anlatacağım.

Okuduğunuz için teşekkürler

Bilgiyle Kalın…

Galaxy Note II için Android 4.3 test ROM- N7100XXUEMI6 1024 658 mezo

Galaxy Note II için Android 4.3 test ROM- N7100XXUEMI6

Selamlar

Biraz önce aldığım bir habere göre Samsung Galaxy Note 2 için Android 4.3 versiyonunun test firmware i internete sızmış. Birkaç sitede bunun ile ilgili bilgiler var ancak Note 3 teki özelliklerin hangileri Note 2 de kullanılabilir orasını bilemeyiz XDA developers yine yapmış yapacağını 🙂 Ben acele etmedim kurmak için acele eden heyecanlanan arkadaşlar için paylaşmak istedim. Çünkü Samsung , Galaxy Note 2 için  4.3 ün testlerine yeni başlamış. Bu ROM u yüklerken şuna dikkat edin tüm uygulama fotoğraf vs bilgileriniz sıfırlanıyor yedek almadan kesinlikle bu işe bulaşmayın derim ben.

Grafik olarak S4 ve Note 3 teki grafikleri kullanılmış Tablı Ayarlar vb. bunun yanında S4 ve Note 3 e gelen Samsung Knox , Samsung Walled gibi uygulamalarda 4.3 de bizleri bekliyor 😀

Ben paylaşıyorum ama Samsung hala bununla uğraşıyor testler ve geliştirmeler devam ediyor. Release versionu çıktığında önce kendi Note 2 me kurup sonra sizlerle paylaşacağımdan şüpheniz olmasın 😀

İşte isteyen meraklı arkadaşlar için linkler ve nasıl kuracağınız ile alakalı basit bilgiler 😀

Ama başta yine hatırlatmak isterim

Telefonunuzun şarjı full olmalıdır. Bu yükleme işlemi herhangi bir şekilde yarım kalırsa telefonunuz tekrardan açılmayabilir. Herhangi bir sorunda  www.mzekiosmancik.com sorumlu değildir. Sorumluluğun tamamen kendinize ait olduğunu bilerek kuruluma başlamalısınız.

Ayrıca belirtmek isterim ki bu kurulum telefonunuzu garanti dışı bırakmaz 😀  Başkaları tarafından yazılan Custom Rom lardan da değildir. Samsung ‘un üzerinde çalıştığı ancak henüz bitirmediği test ROM udur.  yani tamamen legal 😀

Eveeet gelelim kuruluma

Öncelikle buradan ODIN i indiriyoruz bizim biricik yardımcımız 🙂

ROM u buradan veya buradan veya torrent indirim kardeşim ben diyorsanız buradan indirin 🙂

Dosyanın şifresi : wagnervaz

– Şimdi zipten çıkarıp Odini açıyoruz

– Telefonumuzu download moduna alıyoruz.

DSC00031

 

 

NOT: Bunun için telefon kapalıyken Güç + Ses Kısma + Menu tuşlarına aynı anda basmalısınız. Bu tuşlara bastıktan sonra karşınıza bir menu gelecektir Ses Açma tuşuna basarsanız bir android resmi sizi karşılar ve telefonunuzun yüklemelere hazır olduğunu gösterir. Yandaki resimde Download Mode da telefonunuzun ekranının nasıl görüneceğini görebilirsiniz.

 

 

– Odin de telefonun bağlandığını  görüyorsunuz

– Sonra çıkarttığınız AP_N7100XXUEM16_CP_N7100XXEM16_CSC_N7100XAEM16_BY_WVAZ_DINK.tar adlı dosyayı PDA butonuna basarak Odin e ekliyorsunuz.

– Re-partition seçeneğinin İŞARETLENMEMİŞ olduğundan emin oluyorsunuz.

– Sonra kurulum bittikten sonra Wipe Data ve Wipe Cache yapıp Reboot ettiğinizde artık Note 2 niz 4.3 versiyonunun test aşamasındaki işletim sistemine kavuşmuş oluyoooor 😀

Aşağıda screenshot lar var. Ayrıca bu anlatıma güvenmeyen arkadaşlar olabilirler öncelikle SAMMOBILE haberidir  . ve XDA Developers tarafından da yayınlanmıştır.

evt5lntn 00sh dk2is9e5

oc44b51ep8b5926q o5k

 

Bilgiyle Kalın 😀

M.Zeki Osmancık

Galaxy Note N7000 Android 4.1.2 Jelly Bean Kurulumu 600 390 mezo

Galaxy Note N7000 Android 4.1.2 Jelly Bean Kurulumu

Android 4.1.2 Jelly Bean

Merhaba arkadaşlar
Kendimde bir Galaxy Note kullanıcısı olduğumdan yaptığım değişiklikleri veya güncellemeleri sizlerle paylaşmak istedim. Bilindiği gibi Android 4.1.2 Jelly Bean piyasaya çıkan bazı telefonlarla birlikte gelmeye başladı. Galaxy Note 2 bunlardan bir tanesi. Galaxy Note kullanıcısı olarak Note 2 deki işletim sistemi ile kullanılabilirliği arttıracağımızdan şüphem yok.
Şimdi sizlere kendi telefonuma yükleyip çok çok memnun kaldığım Jelly Bean işletim sistemini nasıl telefonunuza kurarsınız bunu adım adım anlatmak istiyorum.
Öncelikle en baştan söylemek isterim ki bu yükleme işlemi yarım kalırsa telefonunuz tekrardan açılmayabilir. Herhangi bir sorunda ben ve www.mzekiosmancik.com sorumlu değildir. tamamen kendi iradenizle kuruluma başlamalısınız.
Özellikle orjinal yazılım olduğu için telefonunuzu garantiden çıkarmaz onu söylemekte fayda var.Yükleme işlemini yapmanız için herhangi bir root veya kernel yüklemesine ihtiyacınız yok.

O zaman hadi başlayalım ve Note N7000 telefonumuza JellyBean kuralım 🙂

1- İlk işlemimiz 1076 MB’lık N7000XXLSA ROM’u buradan indiriyorsunuz.
2- Birinci adımdaki zip dosyasının içindeki 3 dosyayı herhangi bir klasöre çıkartıyoruz.
3- Buradan  ODIN adlı programı indirmeniz gerekiyor.ODIN bizim telefona ROM yüklemek için kullanacağımız programımız.
4- Telefonunuzu kapatın.
5- Telefonu USB kablosuyla bilgisayara bağlayın.
6- Telefonunuzu Dowloadn moduna almanız gerekiyor bunun için Home + Güç Butonu + Ses Kısma Tuşuna basılı tutarak telefonu açın
7- Telefon Download modunu açacak ve size iki seçenek çıkacak. Continue deyip devam edin.
8- Bilgisayardan indirdiğniz ODIN programını zip ten herhangi bir klasöre çıkartıp, çalıştırın.
9- Telefon bağlı olduğu için yukarıda 1. slot üzerinde bulundu işareti çıkacak ve aşağıdaki log penceresinde ADDED mesajını verecek. Daha sonra ODIN programında indirdiğimiz dosyaları tek tek seçmeniz gerek.
10- PDA butonuna basıp CODE_N7000XXLSA_549786_REV02_user_low_ship.tar.md5 adlı dosyayı seçiyoruz.
11- Phone butonuna basıp MODEM_N7000XXLSA_REV_05_CL1222228.tar.md5 adlı dosyayı seçiyoruz.
12- CSC adlı butona basıp CSC_OXA_N7000OXALSA_549786_REV02_user_low_ship.tar.md5 adlı dosyayı seçiyoruz.
13- Start Butonuna basarak işlemi başlatacaksınız.
Eğer program yanıt vermiyor hatası verirse hiç bir müdahale yapmayın kendi kendine düzelecektir.

NOT: Bu yüklemeden sonra SDKart  hariç tüm dosyalarınız silinecektir! Tekrar belirtiyorum telefonunuza bu yüklemeden dolayı gelebilecek bir sorundan ben sorumlu değilim…

Umarım Yararlı olur
Bilgiyle Kalın
M.Zeki OSMANCIK

Eclipse Android SDK Kurulumu 963 886 mezo

Eclipse Android SDK Kurulumu

Merhaba arkadaşlar

Bu yazımda sizlere Android programları geliştirebilmek için kullanılan bir IDE olan Eclipse ve Android SDK nin nasıl kurulduğu ve nasıl Android projeleri açtığımızı HelloWord uygulaması ile birlikte anlatmak istiyorum. Önce kurulum

Kurulum için öncelikle bilgisayarımızda Java JDK kurulu olması lazım eğer kurulu değilse buradan indirebilirsiniz.

Java JDK http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-432154.html

Ardından IDE ye sıra geliyor zira eclips programını JDK olmadan kurarsanız hata ile karşılaşıyorsunuz.

Eclipse – http://www.eclipse.org/downloads/

Eclips programınıda indirip kurduktan sonra sıra geldi Android için gerekli tool ve classların bulunduğu Android SDK ya. Onuda indirip bilgisayarımıza kurduktan sonra

Android SDK – http://developer.android.com/sdk/index.html

Şimdi Eclipsi kullanarak normal Java uygulamaları geliştirebiliriz ama biz Android istiyoruz o kadar kurulum yaptık nerde bunlar derseniz Eclips üzerinde Android projeleri yapabilmek için biraz daha tırmalamak lazım bu kadar yeterli değil.

Şimdi Eclipse üzerine kurduğumuz Android SDK yi entegre edebilmek için Help menüsünden Install New Software seçeneğini seçiyoruz.

Daha sonra karşımıza çıkacak olan pencerede ADD butonuna bastığımızda bizi Add Repository adında küçük şirin bir pencere karşılıyor.

Buraya ne yazacaz peki dediğinizi duyar gibiyim 😀 burada yazmamız gereken şey bu linkte gizli 😀 http://developer.android.com/sdk/eclipse-adt.html bu linkte bulunan hatta aşağıdaki resimde görülen Downloading the ADT Plugin başlıklı yazının altında bulunan linki kopyalayıp küçük şirin penceremiz üzerindeki Location kısmına yapıştıyoruz…

Bu işlemi tamamlayıp ilgili OK – Finish butonlarına tıkladıktan sonra işlemimiz yine bitmiyor…

Window menüsünden Preferences seçeneğini açıyoruz ve ardından Android yazan soldaki seçeneği seçiyoruz. Android ile alakalı ayarların geldiği pencerede indirip kurduğumuz Android SDK nin klasörünü belirlememiz gerekiyor.

Bu işlemde tamamlandıktan sonra Apply butonu ile işlemimizi kabul edip ardından mutluluk içinde bu pencereyide kapatıyoruz. Ama işimiz bittimi hayır bitmedi. 😀

Yine Window menüsünden Android SDK and AVD Manager seçeneğini seçiyoruz.  sanal Android cihazımızı oluşturup ilgili Android versiyonunu seçebileceğimiz bir pencere…

İlk yapmamız gereken Available Packages seçeneğini seçip Install Selected ile gerekli olan dosyaların internetten bilgisayarımıza inmesini beklemek.  Bunlar indikten sonrada artık sıra sanal Androidimize geliyor…

Bunun için  ise Virtual Devices seçeneğini seçip New ile yeni bir makine oluşturma isteğimizi belirtmek…

Hangi Android versiyonunu seçmek istiyorsak onu seçmemiz yeterli olacaktır. Bende bana uygun olan cihazı seçtim ve Create AVD ile sanal makinemi oluşturmuş oldum… Evet sonunda yapmamız gerekenler bitti ve sıra geldi Android projesi açmaya ve Hello Word uygulamasına !!

Yeni Proje Ve Hello World Uygulaması

File -> New -> Other seçeneğini seçiyoruz.

Karşımıza çıkan bu pencereden Android Project seçiyoruz.

Daha sonra projenin ayrıntılarını belirleyebileceğimiz New Android Project adındaki pencere geliyor. Burada seçmemiz gereken bikaç alan var mutlaka hangi versiyondaki Android için uygulama geliştirmek istiyoruz onu seçmemiz lazım. Ve mutlaka belirtmemiz gereken Bir proje ismi , Application Name, PackageName ve Activity kısmı. Bu arada Package Name yazarken bir kaç kelimeyi aralarında nokta ile ayırıp yazmamız gerekiyor. Ve sonra projemiz bizleri bekler…

Projemiz açıldığında Package Explorer penceresinde projemizin dosyalarını tek tek görebiliyoruz. Kısaca değinmek gerekirse src altındaki java uzantılı dosyalar java kodlarımızı yazdığımız dosya res klasörü projem için gerekli olan kaynakların tutulduğu  aynı zamanda tasarımın bulunduğu dosyaları barındıran klasörler…  Eğer Android cihaz için bir form tasarlamak istiyorsak o zaman res ->  layout içindeki main.xml dosyasını açtığımızda tasarım ekranımız karşımıza gelecek.

İşte bu ekranda yinePalette adındaki Toolbox alanında bulunan kontrolleri kullanarak projemizi şekillendirebiliriz.

Bende HelloWord uygulaması yaptığım için form üzerine bir adet TextView atıyorum ve src klasörü altındaki .java uzantılı dosyayı açıp içersine aşağıdaki kodları yazıyorum…

Veeeeee sıra geldi çalıştırmaya bakalım nasıl olacak 😀  Run butonu ile çalıştırdığımda karşıma gelen RunAs penceresinden Android Application seçip yola devam ediyorum ve beni daha önce oluşturduğumuz sanal makine karşılıyor. 😉

Sanal makine başlarken ilk başta biraz yavaş çalışıyor fakat biraz sabırla herşey yolunda gidiyor emulator yavaş yavaş açılıyor tıpkı bir telefon veya tablet kullanıyor gibi müdahale edebileceğimiz bu sanal cihazda uygulamamız çalışmaya başlıyor.

 

Şimdilik bu kadar umarım yararlı olur 😉

M.Zeki OSMANCIK

    Join our Newsletter

    We'll send you newsletters with news, tips & tricks. No spams here.