Mobil

Linux Mint Android Emulator Hatası

written by Burcu

Linux Mint’e kurduğunuz Android Studio’da Emulator hatası alıyorsanız terminal üzerinden Android Studio dizinine girip çalıştırmayı deneyin.

cd /usr/local/android-studio/bin
LC_ALL=C ./studio.sh

24 Mart 2018 0 comment

Mobil Web Teknolojileri

React Native Nedir?

written by Burcu

React Native, yeni nesil React – Facebook tarafından geliştirilen ve 2013’te Github’da açık kaynak olan bir JavaScript kütüphanesidir.

Native uygulama oluşturma, yalnızca belirli bir işletim sistemi için uygulamalar yazmak anlamına gelir.

React Native, geliştiricilerin yazdıkları kodu web üzerinden ve mobil ortamda yeniden kullanmasına yardımcı olur.

Geliştiriciler, iOS ve Android için aynı uygulamayı sıfırdan oluşturmak zorunda kalmayacak. Her işletim sisteminde kodu tekrar kullanabileceklerdir. React Native ile ilgili harika olan şey, Objective-C‘de ve ya Java‘da bitmiş bir uygulama ile React Native’i kullanarak inşa edilmiş bir uygulama arasında çok az fark olmasıdır.

Android ve iOS’un kod geliştirme ortamları çok farklıdır. Bu yüzden iki farklı platforma uygulama çıkarmak zaman alır. Ancak React Native ile yalnızca bir geliştirici farklı mobil işletim sistemlerinde yazabilir.

React Native’in çalışma prensibini şu şekilde düşünebiliriz. Android üzerinde xml ile View kısmını oluşturabildiğimiz gibi, Java kodlarıyla da View oluşturabiliriz. MakeSquare.java isminde bir Java class’ımızın olduğunu düşünelim. Bu Java class’ı runtime’da belli tiplerde kare grafikler üretmektedir. Eğer Javascript ile bu class arasına bir köprü atarsak ve uygulama çalıştıktan sonra Javascript fonksiyonlarımız ile bu köprü vasıtasıyla kare grafik üretebiliriz. Başka bir örnekte, bir TextView nesnesi düşünelim. Yine aynı şekilde TextView üreten bir class yaptığımızda, Javacript runTime’da bunu çağırabilmektedir. Aslında bu paradigmaya çok da uzak değiliz. Hibrit uygulama geliştirirken de bu çoğu zaman Cordova (veya Phonegap gibi türevleri ile oluyor.) ile bu tip köprüler kurabiliyorduk. React’ın buna getirdiği çözüm ReactJS’in yapısında sunduğu pek çok avantajı da öneriyor olmasıdır.

React Native’in Artıları

Topluluk desteği

Çoğu çevrimiçi geliştirici topluluğunda olduğu gibi React Native’de büyüyor ve geliştiricilere deneyimli geliştiricilerin harika bir ağını sunuyor.

Başlarken, sık karşılaşılan sorunlara ve sorgulara hızlı yanıtlar edinebilirken, React Native’e yönelik yeni güncellemelerden de yararlanabilirsiniz.

Ayrıca size yardımcı olacak bir sürü dokümantasyon olacaktır.

Daha hızlı gelişme

Hız çoğu zaman gelişmenin söz konusu olduğunun kanıtıdır. Bir uygulamanın gelişimini hızlandırabilecek her şey çok önemlidir!

React Native ile geliştirme zamanı oldukça kısadır. Bu, önceden oluşturulmuş unsurların miktarına bağlıdır, yani kopyala yapıştır yaklaşımı oldukça sık alınabilir.

Daha yakın takımlar

React Native, hem iOS hem de Android geliştiricileri bir araya getirirse büyük olasılıkla daha yakın ekiplerle çalışmış oluyorsunuz demektir. Bu, birlikte çalışmayı ve kararları çok daha kolay alınabilir hale getirmelidir.

Çapraz platformlu yapı

Kopyalanıp tekrar tekrar kullanılabilen kodu yaratır. Oldukça kısa zamanda işveren ve geliştirici için para kazandıracaktır.

Gelişime açık

Bazı özel modüller eksik, yani zaman kazandıran ikramiyelerin bir kısmını siz oluşturabilirsiniz, kendi modüllerinizi inşa etmeniz ve yaratmanız gerekebilir. Bu da kendinizi bu alanda geliştirmenizi sağlayacaktır.

Neden açık kaynak?

2015 yılına gelindiğinde, Facebook blog yazısında şunları söyledi: “Açık alanda birlikte çalışırsak, teknolojinin durumunu birlikte geliştirebiliriz.”

Geliştirici topluluğu, açılanlara sadıktır. Dünyanın dört bir yanındaki Web geliştiricileri, koddaki bir hatayı ücretsiz olarak gösterebilir.

Açık kaynak projeleri geliştirmek, Facebook’un çalışması gereken en coveted şirketlerden biri olmasına yardımcı olur. Geliştiriciler meydan okumayı istiyor – ve Facebook, çalışanlarını işe alabilmek için yetenekli bir mühendis havuzundan seçiyor.

Ayrıca, eğitimden tasarruf sağlar. Eğer Facebook’ta çalışan her mühendis, React Native’e nasıl yazılacağını zaten biliyorsa, çalışan bir başlangıç yapmış durumda olur.

Facebook’un gelişimini olgunlaştıracak bir kültürü var. 12 yıldan uzun bir süredir bir milyar kullanıcısına, binlerce geliştiriciye ve üç önemli platforma (iOS, Android ve Web) hizmet vermek üzere ölçeklendirilmiştir.

React Native öğrenmeli miyim?

Bir kez yaz,her yerde çalışsın, Java için Sun tarafından kullanılan bir slogandı. Yıllar içinde pek çok farklı teknoloji geliştirdikleri sistemin esnekliğini belirtmek için, bu slogana benzer sloganlar ürettiler. React Native ile ilgili insanların ilk düşüncesi, Hibrit uygulamalar gibi bir kere yazılıp bütün platformlarda çıktı alınabilir olduğudur. Ancak, React Native’in yaklaşımı biraz farklıdır. Her platformun kendine özel UI yapısı, çalışma prensibi yapısı vardır. Dolayısıyla ortak yazdığımız bir kodun farklı platformlarda direkt olarak çalışabilir olması, özellikle kullanıcı deneyimi açısından da istemeyeceğimiz bir şey olacaktır. React Native’in de prensibi olan bir kez öğren,her yerde ile React Native’in çalışma yapısının öğrenildikten sonra, farklı platformlarda platformun gereksinimlerine göre uygulama yazmamıza izin vermektedir.

Bunun yanında platforma özel kod yazarken de, platformdan bağımsız mobil uygulamalarda ortak kullanılan birçok nokta olacaktır. Bu noktada iki platform için ortak kodbase de oluşturulabilir. Böylece uygulamanızı tasarımları haricinde özellikle event ve data yönetimlerini merkezileştirebiliriz. Uygulamalardaki farklı platformlar arası ortak kod miktarını ne kadar artırırsak, uygulamanın sürdürülebilirliği artacak ve uygulama geliştirme zamanınız kısalacaktır.

React Native’in atası olan ReactJS, ilk çıktığında geliştiricileri en çok korkutan syntax’ıydı. JSX syntax’ı template olarak yıllarca HTML kullanmış Front-end geliştiricileri korkutmuştu. Zamanla aslında ne kadar kolay olduğu görüldü. Bunun yanında, Android ve ya iOS uygulama geliştirmeye kıyasla React Native öğrenmek oldukça zamandan tasarruf etmenizi sağlar. Büyük bir community’si olması sebebiyle pek çok kaynak bularak bir an önce öğrenmeye başlayabilirsiniz.

ReactJS yazıma da göz atabilirsiniz.

26 Şubat 2018 3 comments

Mobil Web Teknolojileri

REST API Nedir ?

written by Burcu

REST, Representational State Transfer ‘in kısaltmasıdır. Representational State Transfer yani Temsili Durum Transferi, HTTP metotlarını kullanan, esnek bir yapıya sahip, istemci – sunucu arasındaki basit bir veri iletişim yoludur. Katı kurallara sahip bir protokolden ziyade bir mimari stildir.

10 Şubat 2018 3 comments

Mobil Web Teknolojileri

SEO İçin UX’in Önemi

written by Burcu

Arama motoru algoritmaları daha sofistike hale geldiğinde, birçok insan kullanıcı deneyiminin arama sıralamasında daha büyük bir rol oynayacağına inanıyor.

Arama motorları, makine öğrenimi sayesinde yıllar içinde hızlı oranda büyüyor. Bu ilerlemeler, arama motorlarının yalnızca içerik açısından değil, aynı zamanda kullanıcı deneyimi (UX) açısından en alakalı sonuçları sağlamaya odaklanmasına olanak tanıyor.

Gün sonunda, tüketici için iyi olan şey, organik arama performansı için iyi – özellikle de makine öğrenmesinin, algoritmaları arama ve arama dizisi gibi alanları, içerik kalitesi, yapı gibi alanları bir araya getirmek için nasıl daha merkezi hale geldiğini düşünebiliriz.

25 Ocak 2018 0 comment

Mobil Web Teknolojileri

ReactJS Nedir? Öğrenmeli miyim?

written by Burcu

Merhabalar. Uzun zamandır vizeler, projeler vs derken burayı çok boşladığımı fark ettim. Okulda İnternet Programlama dersinde yeniliklere açık bir hocamız sayesinde gördüğüm ReactJS’ten bahsetmek istedim bu yazıda. Ben React’ı oldukça sevdim. Keşke biraz daha erken haşır neşir olsaydım diye bile düşündüm.

ReactJS nedir?

ReactJS temelde, tek sayfa uygulamaları için özel olarak kullanıcı arabirimleri oluşturmak için kullanılan opensource JavaScript kütüphanesidir. Web ve mobil uygulamalar için görüntüleme katmanı işlemek için kullanılır. React ayrıca yeniden kullanılabilir UI componentleri oluşturmamızı sağlar.

React başta Facebook için çalışan bir yazılım mühendisi olan Jordan Walke tarafından oluşturulmuş. Önce Facebook’ta kullanılmaya başlanıyor. Şöyle ilginç bir öyküsü de varmış.

Facebook şirketi React’ı geliştiriyor ve web sitesinde bolca kullanıyor. Sonra Zuckerberg instagramı satın alıyor. O zamanlar Instagram’ ın mobil uygulamaları var ama Web sitesi yok. Zuckerberg bir web sitesi istiyor, bu arada Instagram’da çalışanlar Facebook çalışanları ile kaynaşmış kodları bile inceliyor.

Değişik bir yapı var Facebook’un kodlarında. Bu nedir diye soruyorlar. O zamanlar yapıya henüz React ismi bile verilmemiş. Instagram’dakiler diyor ki, bu yapı güzelmiş, bu sistemi Facebook’ tan bağımsız hale getirin, bizde web sitesini aynı yapı ile yapalım.

Oturuyorlar, sistemi bağımsız hale getiriyorlar, Instagramın tamamını bu sistem ile yazıyorlar. Projeyi de opensource yapıyorlar. Adına da React JS diyorlar.

React, geliştiricilerin sayfayı yeniden yüklemeden verileri değiştirebilecek geniş web uygulamaları oluşturmalarına olanak tanır. React’ ın temel amacı hızlı, ölçeklenebilir ve basit olmaktır. Projeyi oluşturmak biraz zaman alır. Ama oluşturduktan sonra iyi bir performans verir.

Yalnızca uygulamadaki kullanıcı arabirimlerinde çalışır. Bu, MVC şablonundaki görünüme karşılık gelir. MVC’deki AngularJS gibi diğer JavaScript kitaplıkları veya çerçevelerinin birleşimi ile kullanılabilir.

ReactJS’ e giriş yapalım:

JSX

React’ ta, şablonu oluşturmak için düz JavaScript kullanmak yerine, JSX kullanıyor. JSX, HTML’yi alıntılamayı ve alt bileşenleri işlemek için bu HTML etiketi söz dizimini kullanmasını sağlayan basit bir JavaScriptdir. HTML söz dizimi React’ın JavaScript çağrılarına dönüştürülür. Böylelikle saf JavaScript yazabiliriz.

React Native

React Native; IOS ve Android gibi mobil uygulamalara tepki mimarisi sağlayan 2015 yılında Facebook tarafından duyurulan native uygulamalar geliştirilmesini sağlayan bir kütüphanedir.

Virtual DOM

React’ta, her DOM nesnesi için, karşılık gelen bir “sanal DOM nesnesi” var. Sanal bir DOM nesnesi, hafif bir kopya gibi DOM nesnesinin bir gösterimidir.

Sanal bir DOM nesnesi, gerçek bir DOM nesnesiyle aynı özelliklere sahiptir, ancak ekrandaki nesneleri doğrudan değiştirebilecek gerçek şeyin gücünden yoksundur.

DOM’u manipüle etmek zaman alır. Sanal DOM’u manipüle etmek çok daha hızlıdır, çünkü hiçbir şey ekranda çizilmeyecektir. Gerçek bir evdeki odaları hareket ettirmek yerine sanal DOM’u bir plan düzenleme olarak manipüle etmeyi düşünün.

Öğrenmeli miyim?

Şimdi, önümüzde başlıca soru, React’ın neden kullanması gerektiğidir. Angular gibi web uygulaması geliştirme işlemlerini kolaylaştırmak için çok sayıda açık kaynak platform bulunmaktadır. Diğer rekabetçi teknolojilere ve ya framework’lere göre React’ın yararlarına hızlı bir şekilde göz atalım. Web dünyası her geçen gün değiştikçe, yeni bir framework’un öğrenilmesine zaman ayırmak zordur – özellikle de bu framework sonunda bir çıkmaza dönüştüğünde. Yani, yeni bir teknoloji arıyorsanız, ancak frameworklerin arasında kaybolduğunuzu hissediyorsanız, React öğrenmenizi öneririm.

Basitlik
ReactJS hemen kavramak daha kolaydır. Bileşen tabanlı yaklaşım, iyi tanımlanmış bir yaşam döngüsü ve sadece düz JavaScript kullanımı, öğrenmek, profesyonel bir web (ve mobil uygulamalar) oluşturmak ve desteklemek için çok basit hale getirir. React, JavaScript’i HTML ile karıştırmanıza izin veren JSX adlı özel bir sözdizimini kullanır. Bu bir zorunluluk değildir; Geliştirici yine de düz JavaScript yazabilir ancak JSX’in kullanımı çok daha kolaydır.
Öğrenmesi Kolay
HTML ve JavaScript’te temel bilgisi olan herkes React’ı kolayca anlayabilirler; bu da öğrenmeli miyim sorusunun bir cevabıdır aslında.
Native Yaklaşımı
React, mobil uygulamalar oluşturmak için kullanılabilir (React Native). Ve React, tekrar kullanılabilirliğin hevesli bir hayranıdır, yani kapsamlı kod yeniden kullanılabilirliği desteklenmektedir. Bu yüzden aynı zamanda IOS, Android ve Web uygulaması da yapabiliriz.
Tekrar Kullanılabilirlik
React tek yönlü veri bağlamı kullanır ve Flux adlı bir uygulama mimarisi, bir kontrol noktası vasıtasıyla bileşenlerin akışını kontrol eder . Büyük ReactJS uygulamalarının kendi başına bulunan bileşenlerini ayıklamak daha kolaydır.
Performans
React, bağımlılık için yerleşik bir kapsayıcı kavramını sunmuyor. Bağlamaları otomatik olarak enjekte etmek için Browserify, Require JS, EclaScript 6 modüllerini Babel, ReactJS-di aracılığıyla kullanabilirsiniz.
Test Edilebilirlik
ReactJS uygulamalarının test edilmesi de kolaydır. React görünümleri state’in işlevleri olarak ele alınabilir, bu nedenle ReactJS görünümüne geçtiğimiz State’le işler yapabilir ve tetiklenen eylemlere, olaylara, işlevlere vb bakabilirsiniz.

Basit bir proje oluşturalım. Ben Ubuntu üzerinde Atom’da yazıyorum.

create-react-app projeismi

1	create-react-app projeismi

Bu komutla yeni bir React projesi başlatmış oluyoruz. Ardından bu proje klasörünün içine girip Atom’u açıyorum.

Projeyi ilk oluşturduğumuzda src’nin içi bu şekilde geliyor. Oluşturmak istediğimiz componentleri buraya oluşturup import ederek kullanabiliyoruz. Bir başka yazıda bir projeyi sıfırdan yazıp anlatmayı düşünüyorum. Bu konuda düşüncelerinizi yorum olarak bırakırsanız sevinirim. Şimdilik görüşmek üzere 🙂

5 Aralık 2017 11 comments

Mobil

Android Hürriyet Api Kullanımı

written by Mahmut Yetişir

Bu makalede Android Studio ortamında Hürriyet API kullanımına değineceğim. Başlamadan önce Hürriyet Developers API sayfasından dökümantasyonu okumanızı öneririm. Hürriyet Api kullanmak için Hürriyet Developer üzerinden kayıt olup, Api Key almamız gerekiyor. İşlem basamakları aşağıda verilmiştir.

Giriş yaptıktan sonra Dashboard kısmından Api Key’i alıyoruz. Projemiz içinde bu Key’i kullanacağız.

Projenin bitmiş halinin dallanması bu şekilde oluyor. Model klasörünün içinde NewMO , Adapter klasörünün içinde ListAdapterNews, Fragment klasörünün içinde Tab2Haberler bulunuyor. Hürriyet Api projenin sadece bu kısmında kullanılmış oluyor.

Öncelikle Fragmentımızı aşağıdaki kodlarla oluşturuyoruz ve içine haberleri çekeceğimiz ListView’i ekliyoruz.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listviewHaberler"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ListView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/listviewHaberler"/>

</LinearLayout>

Yukarıda eklemiş olduğumuz ListView itemleri için ImageView ve iki adet TextView ekleyerek CustomLayout’umuzu oluşturuyoruz. Haber resmi için ImageView, haber başlığı ve içeriği için ise TextView kullanıyoruz.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">
    <ImageView
        android:paddingTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/haberResim"/>
    <TextView
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_below="@+id/haberResim"
        android:id="@+id/haberBaslik"/>
    <TextView
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingBottom="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/haberIcerik"
        android:textSize="15sp"
        android:layout_below="@+id/haberBaslik"/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#FFFFFF">

<ImageView

android:paddingTop="5dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/haberResim"/>

<TextView

android:paddingLeft="10dp"

android:paddingRight="10dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textSize="20sp"

android:layout_below="@+id/haberResim"

android:id="@+id/haberBaslik"/>

<TextView

android:paddingLeft="10dp"

android:paddingRight="10dp"

android:paddingBottom="5dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/haberIcerik"

android:textSize="15sp"

android:layout_below="@+id/haberBaslik"/>

</RelativeLayout>

Api’den gelen verileri tutmak için kullanacağımız modeli oluşturuyoruz.

package Model;

public class NewsMO {
    String Id;                    //Haberin id'si
    String CreatedDate;           //Haberin oluşturulma tarihi
    String Description;           //Haberin içeriği
    String ImgUrl;                //Haberin resmi
    String Title;                 //Haberin başlığı
    String Url;                   //Haberin url'i

    public String getCreatedDate() {
        return CreatedDate;
    }

    public void setCreatedDate(String createdDate) {
        CreatedDate = createdDate;
    }

    public String getDescription() {
        return Description;
    }

    public void setDescription(String description) {
        Description = description;
    }

    public String getImgUrl() {
        return ImgUrl;
    }

    public void setImgUrl(String imgUrl) {
        ImgUrl = imgUrl;
    }

    public String getTitle() {
        return Title;
    }

    public void setTitle(String title) {
        Title = title;
    }

    public String getUrl() {
        return Url;
    }

    public void setUrl(String url) {
        Url = url;
    }

    public String getId() {

        return Id;
    }

    public void setId(String id) {
        Id = id;
    }
}

package Model;

public class NewsMO {

String Id; //Haberin id'si

String CreatedDate; //Haberin oluşturulma tarihi

String Description; //Haberin içeriği

String ImgUrl; //Haberin resmi

String Title; //Haberin başlığı

String Url; //Haberin url'i

public String getCreatedDate() {

return CreatedDate;

}

public void setCreatedDate(String createdDate) {

CreatedDate = createdDate;

}

public String getDescription() {

return Description;

}

public void setDescription(String description) {

Description = description;

}

public String getImgUrl() {

return ImgUrl;

}

public void setImgUrl(String imgUrl) {

ImgUrl = imgUrl;

}

public String getTitle() {

return Title;

}

public void setTitle(String title) {

Title = title;

}

public String getUrl() {

return Url;

}

public void setUrl(String url) {

Url = url;

}

public String getId() {

return Id;

}

public void setId(String id) {

Id = id;

}

ListView’in içini doldurmak için gerekli olan class’ı oluşturuyoruz.

package com.example.scorpion.kitaplar.Adapter;

import android.content.Context;
import android.support.design.widget.Snackbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.scorpion.kitaplar.R;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
import Model.NewsMO;

public class ListAdapterNews extends ArrayAdapter<NewsMO> implements View.OnClickListener{
    private ArrayList<NewsMO> haberler;            //Modelden oluşturulan haberleri tutan listeyi oluşturduk
    Context context;

    private static class ViewHolder{               //CustomLayout'ta kullanılan nesneleri tanımladık
        ImageView haberResim;
        TextView haberBaslik;
        TextView haberIcerik;
    }

    public ListAdapterNews(ArrayList<NewsMO> haberler, Context context){    //Class'ımız ilk çalıştığında çalışacak
        super(context, R.layout.list_layout_haberler, haberler);            // olan metod.
        this.haberler = haberler;                                           //Burada metod içine gelen haberler 
        this.context = context;                                             // listemizi clasın içinde kullanabilmek için
    }                                                                       // Classtaki değişkene atıyoruz.

    @Override
    public void onClick(View v) {                                           //İtem için Clik Event'i ekliyoruz.
        int position = (Integer) v.getTag();
        Object object = getItem(position);
        NewsMO haberler = (NewsMO)object;
        switch (v.getId()){
            case R.id.haberIcerik:
                Snackbar.make(v, "Haber Baslıgı: "+ haberler.getTitle().toString(), Snackbar.LENGTH_LONG).setAction("No Action", null).show();
                break;
        }
    }

    private int lastPosition = -1;

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        try {
            NewsMO haberler = getItem(position);                 //Gelen listemizin içindeki verilerden şuan oluşturacağımız
            ViewHolder viewHolder;                               // haberin verilerini haberler değişkenine atıyoruz.        

            final View result;

            if (convertView == null) {             //Yeni itemi oluşturmak için kullandığımız kısım
                viewHolder = new ViewHolder();
                LayoutInflater inflater = LayoutInflater.from(getContext());
                convertView = inflater.inflate(R.layout.list_layout_haberler, parent, false);
                viewHolder.haberResim = (ImageView) convertView.findViewById(R.id.haberResim);
                viewHolder.haberBaslik = (TextView) convertView.findViewById(R.id.haberBaslik);
                viewHolder.haberIcerik = (TextView) convertView.findViewById(R.id.haberIcerik);
                result = convertView;

                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
                result = convertView;
            }

            viewHolder.haberBaslik.setText(haberler.getTitle());          //Haberler değişkeni içinde bulunan başlığı ve açıklamayı
            viewHolder.haberIcerik.setText(haberler.getDescription());    // oluşturduğumuz item'in içindeki TextView'lere atıyoruz.
            if (haberler.getImgUrl()==""){
                Picasso.with(context).load("http://www.bos.com/wp-content/uploads/2015/09/BOS_Logo_Red_Large.jpg").into(viewHolder.haberResim);
            }    //Haberlerin resimleri boşsa linkteki resmi çekiyoruz.
            else {
                Log.d("resim url : ",haberler.getImgUrl());
                Picasso.with(context).load(haberler.getImgUrl()).into(viewHolder.haberResim);
            }   //Picasso kütüphanesinden yararlanarak haberlerin resimlerini çekiyoruz ve itemdeki ImageView'e atıyoruz. 

            viewHolder.haberResim.setOnClickListener(this);
            viewHolder.haberResim.setTag(position);

            return convertView;
        }
        catch (Exception e){
            e.printStackTrace();
        }
        return convertView;
    }
}

package com.example.scorpion.kitaplar.Adapter;

import android.content.Context;

import android.support.design.widget.Snackbar;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import com.example.scorpion.kitaplar.R;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

import Model.NewsMO;

public class ListAdapterNews extends ArrayAdapter<NewsMO> implements View.OnClickListener{

private ArrayList<NewsMO> haberler; //Modelden oluşturulan haberleri tutan listeyi oluşturduk

Context context;

private static class ViewHolder{ //CustomLayout'ta kullanılan nesneleri tanımladık

ImageView haberResim;

TextView haberBaslik;

TextView haberIcerik;

}

public ListAdapterNews(ArrayList<NewsMO> haberler, Context context){ //Class'ımız ilk çalıştığında çalışacak

super(context, R.layout.list_layout_haberler, haberler); // olan metod.

this.haberler = haberler; //Burada metod içine gelen haberler

this.context = context; // listemizi clasın içinde kullanabilmek için

} // Classtaki değişkene atıyoruz.

@Override

public void onClick(View v) { //İtem için Clik Event'i ekliyoruz.

int position = (Integer) v.getTag();

Object object = getItem(position);

NewsMO haberler = (NewsMO)object;

switch (v.getId()){

case R.id.haberIcerik:

Snackbar.make(v, "Haber Baslıgı: "+ haberler.getTitle().toString(), Snackbar.LENGTH_LONG).setAction("No Action", null).show();

break;

}

private int lastPosition = -1;

@Override

public View getView(int position, View convertView, ViewGroup parent){

try {

NewsMO haberler = getItem(position); //Gelen listemizin içindeki verilerden şuan oluşturacağımız

ViewHolder viewHolder; // haberin verilerini haberler değişkenine atıyoruz.

final View result;

if (convertView == null) { //Yeni itemi oluşturmak için kullandığımız kısım

viewHolder = new ViewHolder();

LayoutInflater inflater = LayoutInflater.from(getContext());

convertView = inflater.inflate(R.layout.list_layout_haberler, parent, false);

viewHolder.haberResim = (ImageView) convertView.findViewById(R.id.haberResim);

viewHolder.haberBaslik = (TextView) convertView.findViewById(R.id.haberBaslik);

viewHolder.haberIcerik = (TextView) convertView.findViewById(R.id.haberIcerik);

result = convertView;

convertView.setTag(viewHolder);

} else {

viewHolder = (ViewHolder) convertView.getTag();

result = convertView;

}

viewHolder.haberBaslik.setText(haberler.getTitle()); //Haberler değişkeni içinde bulunan başlığı ve açıklamayı

viewHolder.haberIcerik.setText(haberler.getDescription()); // oluşturduğumuz item'in içindeki TextView'lere atıyoruz.

if (haberler.getImgUrl()==""){

Picasso.with(context).load("http://www.bos.com/wp-content/uploads/2015/09/BOS_Logo_Red_Large.jpg").into(viewHolder.haberResim);

} //Haberlerin resimleri boşsa linkteki resmi çekiyoruz.

else {

Log.d("resim url : ",haberler.getImgUrl());

Picasso.with(context).load(haberler.getImgUrl()).into(viewHolder.haberResim);

} //Picasso kütüphanesinden yararlanarak haberlerin resimlerini çekiyoruz ve itemdeki ImageView'e atıyoruz.

viewHolder.haberResim.setOnClickListener(this);

viewHolder.haberResim.setTag(position);

return convertView;

}

catch (Exception e){

e.printStackTrace();

}

return convertView;

}

Fragment ilk oluştuğu ve API’den verileri çektiğimiz class’ı yazıyoruz.

import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import com.example.scorpion.kitaplar.Adapter.ListAdapterNews;
import com.example.scorpion.kitaplar.R;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import Model.NewsMO;

public class Tab2Haberler extends Fragment {
    private static ListAdapterNews adapter;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceBundle){
        View rootView = inflater.inflate(R.layout.tab2_haberler, container, false);
        try {
             ConnectivityManager manager = (ConnectivityManager) 
                 getContext().getSystemService(rootView.getContext().CONNECTIVITY_SERVICE);
            ProgressBar progressBar = (ProgressBar) rootView.findViewById(R.id.progressBar);
            if(manager.getActiveNetworkInfo() != null) {
                CheckNews news = new CheckNews();     //CheckNews AsyncTask ile çalışan class.
                news.execute();                       //CheckNews class'ını çalıştırıp API'den verileri çekiyoruz.
            }                    
            return rootView;
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        return rootView;
    }

    class CheckNews extends AsyncTask<Object, Object, ArrayList<NewsMO>> {
        @Override
        protected ArrayList<NewsMO> doInBackground(Object... params) {   //AsyncTask'in arkaplanında çalışan kısmı.
            try {

                ArrayList<NewsMO> modelList = new ArrayList<NewsMO>();
                String line = "";
                HttpClient httpClient = new DefaultHttpClient();   //Request için client oluşturuyoruz.
                HttpGet httpGet = new HttpGet("https://api.hurriyet.com.tr/v1/articles?$top=20");
                //Hurriyet apiden kendi istediğiniz haberlere göre Request oluşturuyoruz buna Hurriyet API'nin dökümantasyonundan
                //bakabilirsiniz, biz son yayınlanan 20 haberi istedik. Request'i bu şekilde yapılandırıyoruz.
                httpGet.setHeader("accept", "application/json");    //Headerları ekliyoruz.
                httpGet.setHeader("apikey", "**************************");    //API Key'i buraya kopyalıyoruz.
                HttpResponse httpResponse = httpClient.execute(httpGet);      //Get isteğini çalıştırıp response alıyoruz.

                InputStream is = httpResponse.getEntity().getContent();       //Gelen veriyi okumak için is nesnesine atıyoruz.
                InputStreamReader isr = new InputStreamReader(is);            
                BufferedReader bf = new BufferedReader(isr);
                StringBuilder sb = new StringBuilder();       
                while ((line = bf.readLine()) != null) {                     //Veriyi satır satır okuyoruz.
                    sb.append(line).append("\n");                            //Veriyi satır satır sb'ye ekliyoruz.
                }
                isr.close();                            
                String toString = sb.toString();
                JSONArray haberler = new JSONArray(toString);                //Gelen JSON haberler dizisini değişkene atıyoruz.
                for (int i = 0; i < haberler.length(); i++) {                //JSON verilerini modelList dizisine aktarıyoruz.
                    NewsMO model = new NewsMO();
                    JSONObject haber = haberler.getJSONObject(i);
                    model.setId(haber.getString("Id"));
                    model.setDescription(haber.getString("Description"));
                    model.setTitle(haber.getString("Title"));
                    model.setUrl(haber.getString("Url"));
                    JSONArray resimler = haber.getJSONArray("Files");
                    if(resimler.length() == 0){
                        model.setImgUrl(null);
                    }
                    else {
                        JSONObject resim = resimler.getJSONObject(0);
                        model.setImgUrl(resim.getString("FileUrl"));
                    }
                    modelList.add(model);
                }
                return modelList;                                    //modelList dizisini onPostExecute metoduna gönderiyor.
            } catch (IOException e) {
                e.printStackTrace();
            } catch (JSONException e) {
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
        }

        @Override
        protected void onPostExecute(ArrayList<NewsMO> result ) {       //modelList'i alıyor, ListView'i oluşturuyor.
            super.onPostExecute(result);
            adapter = new ListAdapterNews(result, getActivity());
            ListView listView = (ListView) getActivity().findViewById(R.id.listviewHaberler);
            listView.setAdapter(adapter);                               //Oluşan Adapter'ı ListView'in içine aktarıyoruz.
        }
    }


}

100

101

102

103

104

105

106

107

108

109

110

111

112

import android.os.AsyncTask;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ListView;

import com.example.scorpion.kitaplar.Adapter.ListAdapterNews;

import com.example.scorpion.kitaplar.R;

import org.apache.http.HttpResponse;

import org.apache.http.client.HttpClient;

import org.apache.http.client.methods.HttpGet;

import org.apache.http.impl.client.DefaultHttpClient;

import org.json.JSONArray;

import org.json.JSONException;

import org.json.JSONObject;

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStream;

import java.io.InputStreamReader;

import java.util.ArrayList;

import Model.NewsMO;

public class Tab2Haberler extends Fragment {

private static ListAdapterNews adapter;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceBundle){

View rootView = inflater.inflate(R.layout.tab2_haberler, container, false);

try {

ConnectivityManager manager = (ConnectivityManager)

getContext().getSystemService(rootView.getContext().CONNECTIVITY_SERVICE);

ProgressBar progressBar = (ProgressBar) rootView.findViewById(R.id.progressBar);

if(manager.getActiveNetworkInfo() != null) {

CheckNews news = new CheckNews(); //CheckNews AsyncTask ile çalışan class.

news.execute(); //CheckNews class'ını çalıştırıp API'den verileri çekiyoruz.

}

return rootView;

}

catch (Exception e) {

e.printStackTrace();

}

return rootView;

}

class CheckNews extends AsyncTask<Object, Object, ArrayList<NewsMO>> {

@Override

protected ArrayList<NewsMO> doInBackground(Object... params) { //AsyncTask'in arkaplanında çalışan kısmı.

try {

ArrayList<NewsMO> modelList = new ArrayList<NewsMO>();

String line = "";

HttpClient httpClient = new DefaultHttpClient(); //Request için client oluşturuyoruz.

HttpGet httpGet = new HttpGet("https://api.hurriyet.com.tr/v1/articles?$top=20");

//Hurriyet apiden kendi istediğiniz haberlere göre Request oluşturuyoruz buna Hurriyet API'nin dökümantasyonundan

//bakabilirsiniz, biz son yayınlanan 20 haberi istedik. Request'i bu şekilde yapılandırıyoruz.

httpGet.setHeader("accept", "application/json"); //Headerları ekliyoruz.

httpGet.setHeader("apikey", "**************************"); //API Key'i buraya kopyalıyoruz.

HttpResponse httpResponse = httpClient.execute(httpGet); //Get isteğini çalıştırıp response alıyoruz.

InputStream is = httpResponse.getEntity().getContent(); //Gelen veriyi okumak için is nesnesine atıyoruz.

InputStreamReader isr = new InputStreamReader(is);

BufferedReader bf = new BufferedReader(isr);

StringBuilder sb = new StringBuilder();

while ((line = bf.readLine()) != null) { //Veriyi satır satır okuyoruz.

sb.append(line).append("\n"); //Veriyi satır satır sb'ye ekliyoruz.

}

isr.close();

String toString = sb.toString();

JSONArray haberler = new JSONArray(toString); //Gelen JSON haberler dizisini değişkene atıyoruz.

for (int i = 0; i < haberler.length(); i++) { //JSON verilerini modelList dizisine aktarıyoruz.

NewsMO model = new NewsMO();

JSONObject haber = haberler.getJSONObject(i);

model.setId(haber.getString("Id"));

model.setDescription(haber.getString("Description"));

model.setTitle(haber.getString("Title"));

model.setUrl(haber.getString("Url"));

JSONArray resimler = haber.getJSONArray("Files");

if(resimler.length() == 0){

model.setImgUrl(null);

}

else {

JSONObject resim = resimler.getJSONObject(0);

model.setImgUrl(resim.getString("FileUrl"));

}

modelList.add(model);

}

return modelList; //modelList dizisini onPostExecute metoduna gönderiyor.

} catch (IOException e) {

e.printStackTrace();

} catch (JSONException e) {

e.printStackTrace();

}

return null;

}

@Override

protected void onPreExecute() {

super.onPreExecute();

}

@Override

protected void onPostExecute(ArrayList<NewsMO> result ) { //modelList'i alıyor, ListView'i oluşturuyor.

super.onPostExecute(result);

adapter = new ListAdapterNews(result, getActivity());

ListView listView = (ListView) getActivity().findViewById(R.id.listviewHaberler);

listView.setAdapter(adapter); //Oluşan Adapter'ı ListView'in içine aktarıyoruz.

}

Projenin gradle kısmına picasso ve httpClient kütüphaneleri eklenmelidir. Ayrıca manifest dosyasına internet izni ve ACCESS_NETWORK_STATE verilmesi gerekmektedir.

Ayrıca projenin çalışır haline github üzerinden ulaşabilirsiniz.

Projemizde Hürriyet API’yi bu şekilde kullanıyoruz. Soru ve görüşleriniz için yorum bırakabilirsiniz.

18 Ekim 2017 2 comments