Web Sayfasını Android Uygulamasına Dönüştürmek -2020

Herkese Merhabalar;

Yazıma başlamadan önce siz değerli blog takipçilerimin 23 Nisan Ulusal Egemenlik ve Çocuk Bayramını En içten dileklerime kutluyorum. Öncelikle Gazi Mustafa Kemal Atatürk ve silah arkadaşlarını rahmetle yâd ediyorum.

Aynı gün yine idrak ettiğimiz Ramazan ayınızı da en içten dileklerimle kutluyorum. 

Bu yazım aslında bir Ramazan hediyesini de içerisinde barındırmaktadır 🙂 Size dosyanızı hazırlayıp yazımı yazıyorum 🙂 Yani saatlerce oturup uygulamaya yazmaya çalışmayacaksınız. Dosyayı bilgisayarınıza indirdikten sonra yönergeleri takip etmeniz uygulamayı yayınlamanız için kafidir.

Eğer kendinize ait bir web sayfasını bir mobil uygulamaya dönüştürmek istiyorsanız şunları unutmayınız;

• Sayfanız mobil uyumlu olmak zorundadır.
• Sayfanızda görsellerin boyutları küçük olmak zorundadır.

Eğer internet sitenize cep telefonunuzdan giriş yaptığınızda mobil değil de masaüstü bilgisayar formatındaki halini görüyorsanız, öncelikle bunu düzeltmeniz gerekmektedir.

Bunu düzelttiğinizi ve halihazırda uygulanmış olduğunu varsayarak, sırasıyla başlayalım.

1-) Android Studio Programını İndiriyoruz.

Android Studio hem Windows tabanlı hem de Mac OS tabanlı çalışabilen özelliğe sahiptir. Buradaki linke tıklayarak uygulamayı indirebilirsiniz. Kurulum ile ilgili yardıma ihtiyacınız var ise buraya tıklayarak yardım videosunu izleyebilirsiniz.

2-) Yazılım Dökümanını İndiriyoruz.

Sizlere bir youtube videosu ile bu yazılımı nasıl yaptığımı anlatacağım. Fakat Android studio üzerinde kod yazmaya uğraşmamanız için dosyayı aşağıdaki “indir” butonuna  tıklayarak direk indirebilirsiniz.

3-) Projeyi Android Studio’da Açmak

Projeyi zip dosyasından çıkardıktan sonra uygun bir klasöre kaydediniz. Akabinde, “Open an existing Android Studio Project” butonuna tıklayarak klasörünüzü seçiniz ve projenizi açınız.

4-) Dosyaları Değiştirmeye Başlamak

Şimdi karşınıza aşağıdaki gibi bir sayfa gelecektir. İlk baktığınızda oldukça karışık durduğunun farkındayım. Fakat bir kaç dosya değişikliği ile kolayca yapabileceğimiz bir çalışmadır.

5-) String.xml Dosyasını Düzenleme

Android Projesini açınca karşınıza doğrudan Uygulamanın adını değiiştireceğiniz sayfa geliyor veya onu göremiyorsanız /app/src/main/res/values/strings.xml dosyasını açarakta ilgili bölümü değiştirebilirsiniz.

<resources>
    <string name="app_name">Ali Dindar - Kişisel Blog</string>
</resources>

Bu kısımda “Ali Dindar – Kişisel Blog” kısmını uygulamanız ne olacaksa değiştiriyoruz.

6-) MainActivity.java Dosyasını Düzenleme

Android Studio üzerinden karşınıza gelen dosyalarda yukarıdaki tab’lardan bir tanesi de “MainActivity.java” dosyasıdır. Karşınıza aşağıdaki kod grubu gelecektir.

package com.alidindar.app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("https://www.alidindar.com");

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }

    @Override
    public void onBackPressed() {

        if (webView.canGoBack()){
            webView.goBack();
        }else{
            super.onBackPressed();
        }
    }
}

Burada tek yapmanız gereken “https://www.alidindar.com” adresini kendi adresinizle değiştirmek olacaktır.

7-) Uygulamanız Hazır 🙂

Projenizi “Re-Build” etmeniz gerekecektir ve aşağıda göstediğim şekilde Re-build edebilirsiniz.

😎 “Run” Butonuna Basarak Uygulamayı Önizleme

Eğer Android Studio programınızda bir sanal cihaz kayıtlı değilse, uygulamayı çalıştırmayacaktır. Sanal bir cihaz programınıza eklemek için buraya tıklayarak bu kısa videodan görebilirsiniz.

Karşınıza İnternet Sitenizin Mobil Uygulama Versiyonu çıkacaktır. Bizler buna “Webview” sürümü demekteyiz.

Bu yaptığım uygulamayı base olarak kendime alıp, ileride bu uygulamam üzerinden sizlere daha fazla bilgi akışı sağlayacağım.

Bir sonraki yazıda görüşmek dileğiyle;

Bu yazıyı okumanız yaklaşık 3 dakika sürecektir.