Sabtu, September 23Perahu Layar Kertas

Membuat Aplikasi Android Kuis Sederhana dengan jQuizMe

Hai sobat Pantura kali ini saya akan menulis tentang materi pemrograman, yaitu bagaimana kita membuat aplikasi kuis sederhana dengan jQuizme. Materi dasar pemrograman cukup mudah hanya menggunakan bahan dasar paham tentang Javascript dan HTML. Aplikasi ini sering disebut Phonegap, dari kelamaan mari kita langsung ke tahapan pembuatan. sebelumnya kalian harus menyiapkan file sebagai berikut :

Bahan :

jQuizMe 2.2.1
jQuery 1.8.2
Cordova 1.9.0

Selanjutnya kita buka aplikasi IDE kita, penulis disini menggunakan Android Studio, anda juga bisa menggunakan aplikasi dengan menyesuaikan caranya sendiri :
Buat Project Baru dengan Application name : KuisPhonegap
Create New Project
Kemudian, Pilih Target Android Devices
Select Target

Kemudian Pilih Activity Mobile

Pilih Activity
Create Activity Name

Selanjutnya buat folder Assets

Buat Folder Assets
Target Folder Assets Location
Buat folder pada assets
Tahapan selanjutnya
Setelah semua selesai kita buka file MainActivity.java ganti isinya dengan script ini :

package com.example.andhika.kuisphonegap;
import android.content.Context;
import android.graphics.Bitmap;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener{
private SwipeRefreshLayout swipeRefreshLayout;
private WebView mWebView;
private CoordinatorLayout coordinatorLayout;

@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.activity_main_webview);
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swiperefresh);
swipeRefreshLayout.setOnRefreshListener(MainActivity.this);
coordinatorLayout = (CoordinatorLayout) findViewById(R.id.container);
mWebView.setWebViewClient(new WebViewClient() {
@Override public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
swipeRefreshLayout.setRefreshing(true);
}
public void onPageFinished(WebView view, String url) {
swipeRefreshLayout.setRefreshing(false);
}
});
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAppCacheEnabled(true);
loadWebsite();
}
private void loadWebsite() {
ConnectivityManager cm = (ConnectivityManager) getApplication().getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo netInfo = cm.getActiveNetworkInfo();
if (netInfo != null && netInfo.isConnectedOrConnecting()) {
mWebView.loadUrl(“file:///android_asset/latihansoal/index.html”);
} else {
Snackbar snackbar = Snackbar.make(coordinatorLayout, “Cek Koneksi Internet Anda!.(Swipe for Refresh)”, Snackbar.LENGTH_LONG);
snackbar.show();
swipeRefreshLayout.setRefreshing(false);
}
}
@Override public void onRefresh() {
mWebView.reload();
}
@Override public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId();
//noinspection SimplifiableIfStatement if (id == R.id.action_settings) {
return true;
}
else if (id == R.id.action_abouts){
return true;
}
return super.onOptionsItemSelected(item);
}

/* Script untuk menangani tombol back jika di tekan agar tidak keluar secara langsung */ public void onBackPressed() {
Snackbar snackbar = Snackbar.make(coordinatorLayout, “Klik Menu Pilihan Pojok Atas!”, Snackbar.LENGTH_LONG);
snackbar.show();
}

}

Kemudian buat/buka file activity_main.xml ganti dengan dibawah ini :

xml version=“1.0” encoding=“utf-8”?><android.support.design.widget.CoordinatorLayout xmlns:android=“http://schemas.android.com/apk/res/android” xmlns:tools=“http://schemas.android.com/tools” android:layout_width=“match_parent” android:layout_height=“match_parent” android:fitsSystemWindows=“true” tools:context=“androlite.webviewpullrefresh.MainActivity”>

<include layout=“@layout/content_kuisphonegap” />

</android.support.design.widget.CoordinatorLayout>

Kemudian buat/edit file content_kuisphonegap.xml

xml version=“1.0” encoding=“utf-8”?><android.support.design.widget.CoordinatorLayout xmlns:android=“http://schemas.android.com/apk/res/android” android:layout_width=“match_parent” android:layout_height=“match_parent” android:id=“@+id/container”>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android=“http://schemas.android.com/apk/res/android” android:id=“@+id/swiperefresh” android:layout_width=“match_parent” android:layout_height=“match_parent”>
<WebView android:id=“@+id/activity_main_webview” android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_below=“@+id/progress”/>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

Setelah semua selesai, Jalankan Run and Build 

Jalankan Program
Hasilnya seperti Berikut :
Download Source Code :
Baca Lainnya :   Membuat Grafik dengan HighCharts di PHP dan Oracle

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *