Cara Membuat Aplikasi Android QR Code Scanner Sederhana, Developer Pemula Wajib Coba!

QR Code Scanner Min

Dunia startup fintech (financial technology) sedang bertumbuh pesat. Fintech menawarkan metode pembayran non-tunai yang mudah, salah satunya adalah QR Code Scanner.

9 Langkah Membuat Aplikasi Android QR Code Scanner

Time needed: 30 minutes.

Kali ini Dafunda Tekno akan berbagi cara untuk membuat aplikasi Android QR Code Scanner. Semoga bisa membantu developer pemula yang ingin membuat suatu aplikasi android melalui Android Studio.

  1. Buka Project Baru di Android Studio

    Langkah pertama adalah buka project baru di Android Studio.
    Aplication Name : Isi nama aplikasi kamu (Tulis saja QRCodeScanner)
    Company Domain : Isi terserah (untuk latihan tidak perlu dipikirkan)
    Project Location : Lokasi file project di komputer kamu

    Jika kamu belum punya Android Studio, silahkan download dulu disini.

    Tutorial QR Code Aplikasi 1 Min

  2. Tambahkan Library Zxing di Gradle

    Setelah itu, untuk membaca QRCode kalian perlu menambahkan Library Zxing di build.gradle project kamu. Setelah itu, klik sync now.

    Berikut kodenya (Tambahkan di build.gradle)
    ————————————————————————————————————-
    dependencies {
    compile fileTree(include: [‘*.jar’], dir: ‘libs’)
    androidTestCompile(‘com.android.support.test.espresso:espresso-core:2.2.2’, {
    exclude group: ‘com.android.support’, module: ‘support-annotations’

    })
    compile ‘com.android.support:appcompat-v7:25.1.1’
    testCompile ‘junit:junit:4.12’

    // tambahkan baris kode berikut
    compile ‘com.journeyapps:zxing-android-embedded:3.4.0’
    }

  3. Buat UI (User Interface) Sederhana

    Nah, setelah itu kamu membuat UI sederhana. Kali ini, kita buat UI sederhana saja. Yaitu hanya berisi Text untuk menampilkan Nama dan Tinggi serta button untuk mengarahkan menuju QR Code.

    Berikut kodenya (Copas code ini di activity_main.xml)
    ————————————————————————————————————-

    <?xml version=”1.0″ encoding=”utf-8″?>

    <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:tools=”http://schemas.android.com/tools”
    android:id=”@+id/activity_main”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:paddingBottom=”@dimen/activity_vertical_margin”
    android:paddingLeft=”@dimen/activity_horizontal_margin”
    android:paddingRight=”@dimen/activity_horizontal_margin”
    android:paddingTop=”@dimen/activity_vertical_margin”
    tools:context=”.MainActivity”>

    <LinearLayout
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:layout_centerVertical=”true”
    android:layout_centerHorizontal=”true”
    android:orientation=”vertical”>

    <TextView
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:text=”Name” />

    <TextView
    android:id=”@+id/textViewNama”
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:text=”nama disini”
    android:textAppearance=”@style/Base.TextAppearance.AppCompat.Large” />

    <TextView
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:text=”Tinggi” />

    <TextView
    android:id=”@+id/textViewTinggi”
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:text=”tinggi disini” android:textAppearance=”@style/Base.TextAppearance.AppCompat.Large” />

    </LinearLayout>

    <Button
    android:id=”@+id/buttonScan”
    android:layout_width=”match_parent”
    android:layout_height=”wrap_content”
    android:layout_alignParentBottom=”true”
    android:text=”Scan QR Code” />
    </RelativeLayout>

    Tutorial QR Code Aplikasi 2 Min

  4. Definisikan View Object

    Setelah itu, kalian harus mendefinisikan object yang sudah dibuat.

    Berikut kodenya (copas di Java)
    ————————————————————————————————————-

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    // View Object
    private Button buttonScan;
    private TextView textViewNama, textViewTinggi;

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

    // initialize object
    buttonScan = (Button) findViewById(R.id.buttonScan);
    textViewNama = (TextView) findViewById(R.id.textViewNama);
    textViewTinggi = (TextView) findViewById(R.id.textViewTinggi);
    }

  5. Tambahkan OnClickListener

    Tambahkan OnClickListener dengan mengimplemntasikan View.OnClickListener.

    Berikut kodenya (copas di Java)
    ————————————————————————————————————-

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    // View Object
    private Button buttonScan;
    private TextView textViewNama, textViewTinggi;
    @Override

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

    // initialize object
    buttonScan = (Button) findViewById(R.id.buttonScan);
    textViewNama = (TextView) findViewById(R.id.textViewNama);
    textViewTinggi = (TextView) findViewById(R.id.textViewTinggi);

    // attaching onclickListener
    buttonScan.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {

    // inisialisasi IntentIntegrator(scanQR)
    intentIntegrator = new IntentIntegrator(this);
    intentIntegrator.initiateScan();
    }

  6. Tambahkan kode berikut

    Tambahkan kode berikut di Java untuk scanning QRCode

    Berikut kodenya (copas di Java)
    ————————————————————————————————————-

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    // View Object
    private Button buttonScan;
    private TextView textViewNama, textViewTinggi;

    //qr code scanner object
    private IntentIntegrator intentIntegrator;

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

    // initialize object
    buttonScan = (Button) findViewById(R.id.buttonScan);
    textViewNama = (TextView) findViewById(R.id.textViewNama);
    textViewTinggi = (TextView) findViewById(R.id.textViewTinggi);

    // attaching onclickListener
    buttonScan.setOnClickListener(this);
    }

    // Mendapatkan hasil scan
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);
    if (result != null){
    if (result.getContents() == null){
    Toast.makeText(this, “Hasil tidak ditemukan”, Toast.LENGTH_SHORT).show();
    }else{

    // jika qrcode berisi data
    try{

    // converting the data json
    JSONObject object = new JSONObject(result.getContents());
    // atur nilai ke textviews
    textViewNama.setText(object.getString(“nama”));
    textViewTinggi.setText(object.getString(“tinggi”));
    }catch (JSONException e){
    e.printStackTrace();

    // jika format encoded tidak sesuai maka hasil
    // ditampilkan ke toast
    Toast.makeText(this, result.getContents(), Toast.LENGTH_SHORT).show();
    }
    }
    }else{

    super.onActivityResult(requestCode, resultCode, data);
    }
    }

    @Override
    public void onClick(View v) {

    // inisialisasi IntentIntegrator(scanQR)
    intentIntegrator = new IntentIntegrator(this);
    intentIntegrator.initiateScan();
    }
    }

  7. Buka Situs Generate Code

    Untuk mengecek QRCode kamu berhasil apa tidak. Coba buka situs ini goqr.me. 

    Nah, kali ini kita buat data JSONnya. Misalnya kita buat data JSON seperti ini.

    {“Nama”:”Dimas Maulana”,”tinggi”:”170″}

    Tutorial QR Code Aplikasi 5

  8. Run Aplikasi Kamu di Device (Smartphone Kamu)

    Run aplikasi buatanmu di device kamu setalah itu scan QRCode tersebut.

    Tutorial QR Code Aplikasi 3 Min

  9. Aplikasi Akan Menampilkan Hasilnya

    Jika kamu berhasil, aplikasi kamu akan menampilkan hasil seperti ini.

    Tutorial QR Code Aplikasi 4 Min

Ayo mulai berdiksusi