Temel mesajlaşma stili uygulaması geliştirme

1. Başlamadan önce

Bu codelab, "Mobil metin sınıflandırmaya başlayın" yolundaki 2. etkinliktir.

Bu codelab'de basit bir mesajlaşma uygulaması geliştireceksiniz. Sürecin ilerleyen aşamalarında bu uygulamayı, uygulamadaki mesajlardan gelen istenmeyen spam iletileri filtreleyen bir makine öğrenimi modeliyle güncelleyeceksiniz.

Ön koşullar

• Kotlin ile Android uygulaması geliştirme ve (isteğe bağlı olarak) Swift ile iOS geliştirme hakkında temel düzeyde bilgi

Neler oluşturacaksınız?

• Basit bir mesajlaşma uygulaması

Gerekenler

• Android'de başlamak için Android Studio'ya ihtiyacınız vardır. Devam etmeden önce lütfen yüklendiğinden ve tam olarak güncellendiğinden emin olun.
• iOS için Xcode gerekir. Bunu 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 uygulamak istemiyorsanız ve bu yolun son kodunu görmek istiyorsanız

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

Burada, TextClassificationOnMobile dizinini bulun. Bunlar arasında Android ve iOS alt dizinlerini görürsünüz. Bu dizinler, sırasıyla Android ve iOS'teki uygulamayı içeren TextClassificationStep1 alt dizinlerini içerir.

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örürsünüz.
2. Etkinliği Boşalt'ı seçin ve İleri'yi tıklayın. Bir sonraki adımda projenizi yapılandırmanız istenir. İstediğiniz dili 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ığında Android Studio projenizle açılır. Özellikle Android Studio'yu ilk kez kullanıyorsanız her şeyin düzgün çalıştığından emin olmak için bir gradle senkronizasyonu yapması birkaç dakika sürebilir.

3. Kullanıcı Arayüzünü Oluşturma

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

1. Dosyayı açın. Uygulama'yı tıklayın > res > düzen > activity_main.xml dosyasını kullanarak bunu Android Studio'daki gezgini kullanarak yapabilirsiniz.

Ekranın sağ üst tarafında Kod, Böl ve Tasarım sekmelerinin bulunduğu aşağıdaki gibi bir seçim görürsünüz:

"Kod"un seçili olduğundan emin olun.

2. Kodu şu 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>

Böylece, TextView içeren bir giriş alanı içeren temel bir kullanıcı arayüzüne sahip olursunuz. Bu arayüzde, sizden bir dize girmek için Bir Dize girin ve txtInput adlı bir EditText oluşturulur. Altında, çıkışı oluşturacak bir TextView ve kullanıcının sınıflandırmayı tetiklemek için basacağı bir düğme bulunur.

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

4. Denetimleri bağlayıp uygulamayı oluşturun

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

1. Android Studio'da uygulama > Java > MainActivity (Ana Etkinlik).

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

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üzendeki denetimleri txtInput, txtOutput ve btnSendText bağlantılarına bağlayarak bunların kodda ele alınmasını sağlar. Ardından, kullanıcı düğmeye dokunduğunda txtInput metni okunacak, bir Dizeye dönüştürülecek ve txtOutput.text özelliği bu dizeye ayarlanacak şekilde düğme için bir OnClickListener oluşturur.

Mobil metin sınıflandırma yolunu takip ediyorsanız 1. etkinlik olan tanıtım videosunda gördüğünüz davranış budur. Bu videoda uygulama, spam olup olmadığını kontrol etmeden yalnızca kullanıcının yazdığını kullanır.

Bir sonraki Codelab'de, yorum spam'lerini filtrelemek için bu uygulamada bir Makine Öğrenimi modelini nasıl kullanacağınızı öğreneceksiniz.

Aynı uygulamayı iOS'te derlemek istiyorsanız lütfen bu codelab'e geçin.

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

Aşağıdaki adımlarda, Swift ile Xcode ve iOS uygulaması geliştirme hakkında biraz bilgi sahibi olmanız gerekir.

Oluşturma işlemini gerçekleştirmek istemiyorsanız depoyu klonlayıp doğrudan uygulamayı açabilirsiniz. TextClassificationStep1 adı verilen ve kod deposundaki iOS klasöründe yer alıyor.

Temel uygulamayı oluşturmak için Xcode ile başlamanız gerekir.

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

2. Yeni projeniz için seçenekleri belirleyin. Ürününüze bir ad ve kuruluş kimliği verin. İstediğiniz metni yazabilir veya aşağıdaki örnekteki adımları uygulayabilirsiniz: (Ancak, arayüzü gösterildiği gibi Storyboard ve Life Cycle'ı UIKitApp Delegate olarak ayarladığınızdan emin olun.)

6. Resimli Taslak'ı Düzenleyin

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

3. Tasarım yüzeyine bir TextView denetimi, bir Düğme denetimi ve bir Etiket denetimi yerleştirmek için bunu kullanın. Şuna benzer bir görünümde olacaktır:

4. Resimli taslak ve ViewController.swift dosyaları açık bir şekilde yan yana görünüm açmak için asistanı kullanın. Asistan, burada gösterildiği gibi ekranın sağ üst köşesinde küçük bir simgedir:

1. DENETİM tuşuna basın ve TextView denetimini kod yüzeyine sürükleyin. Sürüklerken mavi bir ok görürsünüz.
2. Sınıf beyanının hemen altındaki kodun üzerine bırakın. Bağlantı türünü soran bir pop-up gösterilir. Şuna benzer bir görünümde olacaktır:

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

İşiniz bittiğinde, sınıfın üst kısmındaki kodunuz aşağıdaki gibi görünecektir:

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

7. Temel iOS uygulamasını kodlama işlemini tamamlayın

Bu görünüm bir UITextView kullandığından, bu görünümdeki etkinliklere yanıt vermesini sağlamak için UITextViewDelegate olması gerekir.

Bu sayfaya sınıf beyanını aşağıdaki şekilde değiştirerek ulaşabilirsiniz:

class ViewController: UIViewController, UITextViewDelegate {

Ardından, viewVerifyLoad işlevinde, UITextView için yetkiyi (çıkışı kurarken txtInput olarak adlandırdığınız) şu şekilde ayarlayın:

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

Son olarak, kullanıcı klavyede Enter tuşuna bastıktan sonra klavyenin ekrandan kaldırılmasıyla ilgilenmeniz gerekir. Bu, az önce ayarladığınız yetkiyle gerçekleştirilir. Bu yöntemi kullanmak için ViewController'a uygulayabilirsiniz.

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

Bu uygulama için düğme işlemi önemsizdir. Sadece kullanıcının yazdıklarını çıkışa aktaracağız. Daha sonra, bir NLP modelinin bu metni nasıl filtreleyebileceğini göreceksiniz. Şimdilik, geçiş simülasyonu yapmak için bunu kabloyla yapalım.

btnSendText işlemini zaten oluşturdunuz. Şimdi, tek yapmanız gereken kodu bu koda eklemektir:

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

8. Tebrikler!

Bu codelab'i tamamladınız.

Sürecin devamında NLP modeli oluşturmayı öğreneceksiniz. Bu modeli daha sonra bu uygulamaya geri dönüp kullanıcınızın metnini yorum spam'leri için filtreleyecek şekilde donatacaksınız.