Temel mesajlaşma stili uygulaması geliştirme

1. Başlamadan önce

Bu codelab, Mobil Metin Sınıflandırmayı Kullanmaya Başlama rotasındaki 2. etkinliktir.

Bu codelab'de basit bir mesajlaşma uygulaması oluşturacaksınız. Rotanın ilerleyen bölümlerinde, bu uygulamayı, uygulamadaki mesajlardan istenmeyen spam'leri filtreleyecek bir makine öğrenimi modeliyle güncelleyeceksiniz.

Ön koşullar

• Kotlin ile Android geliştirme ve (isteğe bağlı olarak) Swift ile iOS geliştirme hakkında temel bilgiler

Ne oluşturacaksınız?

• Basit bir mesajlaşma uygulaması

İhtiyacınız olanlar

• Android'de başlamak için Android Studio'yu yüklemeniz gerekir. Devam etmeden önce lütfen yüklendiğinden ve tamamen güncellendiğinden emin olun.
• iOS için Xcode'a ihtiyacınız vardır. Bu uygulamayı App Store'da bulabilirsiniz. (Yalnızca iOS uygulamasını yazmak istiyorsanız doğrudan 5. adıma geçin.

Kodu Al

Adım adım ilerlemek istemiyorsanız ve yalnızca bu yolun son kodunu görmek istiyorsanız

git clone https://github.com/googlecodelabs/odml-pathways

Burada TextClassificationOnMobile dizinini bulun. Bu dizinlerde Android ve iOS alt dizinlerini görürsünüz. Bu dizinlerde, sırasıyla Android ve iOS'teki uygulamayı içeren TextClassificationStep1 alt dizinleri bulunur.

2. Android Studio'da yeni proje oluşturma

1. Android Studio'yu başlatın.

1. Yeni Proje Oluştur'u seçin. Proje şablonu seçmenizi isteyen bir iletişim kutusu gösterilir.
2. Boş Etkinlik'i seçin ve İleri'yi tıklayın. Ardından, projenizi yapılandırmanız istenir. İstediğinizi seçin ancak dilin Kotlin, minimum SDK'nın ise API 23 olduğundan emin olun.
3. Son'u tıklayın. Bu işlem tamamlandıktan sonra Android Studio, projenizle birlikte açılır. Her şeyin yolunda olduğundan emin olmak için gradle senkronizasyonu yapılması birkaç dakika sürebilir. Bu durum, özellikle Android Studio'yu ilk kez kullanıyorsanız geçerlidir.

3. Kullanıcı arayüzünü oluşturma

Android uygulamalarının kullanıcı arayüzü, düzen dosyası adı verilen bir XML dosyası kullanılarak oluşturulur.

1. Dosyayı açın. Android Studio'daki gezgini kullanarak app > res > layout > activity_main.xml'i tıklayın.

Ekranın sağ üst tarafında, aşağıdaki gibi Kod, Böl ve Tasarım sekmelerini içeren bir seçim görmeniz gerekir:

Bir sonraki adıma geçmeden önce "Kod"un seçili olduğundan emin olun.

2. Kodu aşağıdaki XML ile değiştirin:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

 <LinearLayout android:orientation="vertical"
      android:layout_height="match_parent"
      android:layout_width="match_parent">
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal">
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Enter a string:"></TextView>
          <EditText
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtInput"></EditText>

      </LinearLayout>

      <TextView
          android:id="@+id/txtOutput"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Output Goes here"
          android:textSize="36sp"></TextView>
     <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/btnSendText"
          android:text="Send"></Button>

 </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Bu işlem, TextView içeren bir giriş alanı içeren temel bir kullanıcı arayüzü oluşturur. Bu arayüzde, Enter a String (Dize Girin) istemi ve dize girmek için kullanılabilecek txtInput adlı bir EditText bulunur. Altında, çıkışı oluşturacak bir TextView ve kullanıcının sınıflandırmayı tetiklemek için basacağı bir düğme bulunur.

Bir sonraki adım, bu kullanıcı arayüzünü etkinleştirecek kodu yazmaktır.

4. Kontrolleri bağlayın ve uygulamayı oluşturun

MainActivity kod dosyasını bularak bu etkinliğin kodunu düzenleyebilirsiniz.

1. Android Studio'da app > java > MainActivity'yi tıklayın.

2. Kod düzenleyiciye gitmek için MainActivity dosyasını açın. Bu dosyada, "package" ile başlayan ilk satır hariç her şeyi şu kodla değiştirin:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    lateinit var txtInput: EditText
    lateinit var btnSendText: Button
    lateinit var txtOutput: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        txtInput = findViewById(R.id.txtInput)
        txtOutput = findViewById(R.id.txtOutput)
        btnSendText = findViewById(R.id.btnSendText)
        btnSendText.setOnClickListener {
            var toSend:String = txtInput.text.toString()
            txtOutput.text = toSend
        }
    }
}

Bu kod, düzen üzerindeki kontrolleri txtInput, txtOutput ve btnSendText ile bağlar. Böylece, kodda bunlara değinilebilir. Ardından, düğme için bir OnClickListener oluşturur. Böylece kullanıcı düğmeye dokunduğunda txtInput'deki metin okunur, dizeye dönüştürülür ve txtOutput.text özelliği bu dizeye ayarlanır.

Mobil metin sınıflandırmasına başlama yolunu takip ediyorsanız bu davranış, 1. etkinlikteki (demo videosu) davranışla aynıdır. Burada uygulama, spam olup olmadığını kontrol etmeden kullanıcının yazdıklarını kullanır.

Sonraki Codelab'de, spam yorumları filtrelemek için bu uygulamada makine öğrenimi modelinin nasıl kullanılacağını göreceksiniz.

Aynı uygulamayı iOS'te oluşturmak istiyorsanız lütfen bu codelab'e devam edin.

5. iOS'te Basic uygulamasını oluşturma

Aşağıdaki adımlar için Xcode ve Swift ile iOS geliştirme hakkında bilgi sahibi olmanız gerekir.

Oluşturma sürecini tamamlamak istemiyorsanız depoyu klonlayabilir ve uygulamayı doğrudan açabilirsiniz. Bu dosyanın adı TextClassificationStep1 ve depodaki iOS klasöründe yer alıyor.

Temel uygulamayı oluşturmak için Xcode'u kullanmaya başlayacaksınız.

1. Temel şablonu kullanarak yeni bir uygulama oluşturun:

2. Yeni projeniz için seçenekleri belirleyin. Ürününüz için bir Ad ve Kuruluş Tanımlayıcısı girin. İstediğiniz metni yazabilir veya aşağıdaki örneği takip edebilirsiniz: (Ancak arayüzü Storyboard, yaşam döngüsünü ise UIKitApp Delegate olarak ayarladığınızdan emin olun.)

6. Resimli taslağı düzenleme

1. Main.storyboard dosyasını açın. Denetim ekleyebileceğiniz bir tasarım yüzeyi görürsünüz.
2. Kontrol eklemek için Xcode penceresinin üst kısmındaki + düğmesini tıklayın.

3. Tasarım yüzeyine bir TextView kontrolü, bir Button kontrolü ve bir Label kontrolü yerleştirmek için bunu kullanın. Şuna benzer bir görünümde olacaktır:

4. Asistanı kullanarak storyboard ve ViewController.swift dosyalarının ikisinin de açık olduğu yan yana görünümü açın. Asistan, ekranın sağ üst kısmında küçük bir simge olarak gösterilir:

1. CONTROL tuşuna basın ve TextView kontrolünü kod yüzeyine sürükleyin. Sürüklerken mavi bir ok görmelisiniz.
2. Sınıf bildiriminin hemen altındaki koda bırakın. Bağlantı türünü soran bir pop-up gösterilir. Şuna benzer bir görünümde olacaktır:

3. Outlet'i seçin ve txtInput adını verin.
4. Etiket için de aynı işlemi yapın, ardından bağlantı türünü Çıkış olarak ayarlayın ve txtOutput adını verin.
5. Son olarak, düğmeyi sürükleyin ancak bu kez bağlantı türü olarak İşlem'i seçin. (Bağlantı türü olarak Çıkış'ı kullanmayın.)
6. Eylemi btnSendText olarak adlandırın.

İşleminiz tamamlandığında sınıfın üst kısmındaki kodunuz aşağıdaki gibi görünmelidir:

@IBOutlet weak var txtInput: UITextView!
@IBOutlet weak var txtOutput: UILabel!
@IBAction func btnSendText(_ sender: Any) {
}

7. Temel iOS uygulamasının kodlamasını tamamlama

Bu görünümde UITextView kullanıldığından, görünümün etkinliklere yanıt vermesi için UITextViewDelegate olması gerekir.

Sınıf bildirimini şu şekilde değiştirerek bu değeri alabilirsiniz:

class ViewController: UIViewController, UITextViewDelegate {

Ardından, viewDidLoad işlevinde, çıkışı ayarlarken txtInput adını verdiğiniz UITextView'un temsilcisini şu şekilde bu sınıfa ayarlayın:

override func viewDidLoad() {
    super.viewDidLoad()
    txtInput.delegate = self
}

Son olarak, kullanıcı klavyede Enter tuşuna bastığında klavyenin ekrandan kaldırılmasını sağlamanız gerekir. Bu işlem, az önce ayarladığınız yetki devri aracılığıyla yapılır ve bunu işlemek için ViewController'da bu yöntemi uygulayabilirsiniz.

func textView(_ textView: UITextView, shouldChangeTextIn range: 
              NSRange, replacementText text: String) -> Bool {
    if (text == "\n") {
        textView.resignFirstResponder()
        return false
    }
    return true
}

Bu uygulamada düğme işlemi önemsizdir. Kullanıcının yazdıklarını yalnızca çıkışa aktarırız. Bu metnin bir NLP modeli tarafından nasıl filtrelenebileceğini daha sonra göreceksiniz. Ancak şimdilik, geçişi simüle etmek için kabloyla bağlayalım.

btnSendText işlemini zaten oluşturduğunuz için şimdi tek yapmanız gereken kodu bu işleme eklemektir:

@IBAction func btnSendText(_ sender: Any) {
    txtOutput.text = "Sent :" + txtInput.text
}

8. Tebrikler!

Bu codelab'i tamamladınız.

Bu öğrenme yolunun sonraki adımında, bir NLP modeli oluşturmayı öğreneceksiniz. Bu modeli daha sonra, kullanıcılarınızın metinlerini yorum spam'i için filtreleyebilmek amacıyla bu uygulamaya geri getireceksiniz.