Xamarin Android – Consuming REST API

Pada tulisan bulan Mei (lama kali ya..) saya pernah posting tulisan tentang cara membuat REST Web Service dengan Silex pada tautan berikut. Sejatinya saya berencana membuat tutorial cara mengkonsumsi Web Service tersebut di beberapa jenis platform seperti android dan iOS. Tapi karena keterbatasan waktu, saya baru sempat membuat penggunaannya pada platform android dengan menggunakan Xamarin. Berikut langkah-langkahnya :

  • Buatlah sebuah project android pada Xamarin.
  • Tambahkan package “Newtonsoft.Json” dan “Xamarin.Android.Support.v4” melalui nuget
  • Buatlah sebuah model dengan nama “FoodMenu.cs” yang akan mendefinisikan class data dari FoodMenu, masukkan code berikut :
using System;

namespace SilexSample
{
	public class FoodMenu
	{
		private int id;
		private string name;
		private double price;

		public FoodMenu (string name, double price)
		{
			this.name = name;
			this.price = price;
		}

		public FoodMenu (int id, string name, double price)
		{
			this.id = id;
			this.name = name;
			this.price = price;
		}

		public int Id{get{ return this.id; }}

		public string Name{get{ return this.name; }}
		public double Price{get{ return this.price; }}
	}
}
  • Tambahkan sebuah file yang digunakan untuk melakukan komunikasi dengan REST Server, beri nama dengan “FoodLoader.cs”. Pada file ini akan mendefinisikan fungsi untuk mengambil data, melakukan insert update serta menghapus data. Masukkan code berikut pada class FoodLoader :

 

using System;
using System.Collections.Generic;
using System.Text;
using System.IO;
using System.Net;
using Newtonsoft.Json.Linq;

namespace SilexSample
{
	public class FoodLoader
	{
		private static readonly string serverLink = "url_anda/web/index.php/";

		public FoodLoader ()
		{}

		public static List LoadData()
		{
			string link = serverLink + "daftar";
			List datas = new List ();
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);
				request.Method="GET";
				request.ContentType = "application/json";

				HttpWebResponse response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					string outputString = readStream.ReadToEnd();

					response.Close();
					readStream.Close();

					outputString = outputString.Trim().Replace("// ", "");
					var resultArray = JArray.Parse(outputString);

					for (int i=0; i < resultArray.Count; i++) {
						var jstock = (JObject)resultArray[i];

						FoodMenu temp_data=new FoodMenu(
							int.Parse((string)jstock["id"]),
							(string)jstock["name"],
							double.Parse((string)jstock["price"])
						);

						datas.Add(temp_data);
					}
				}
			}
			catch (Exception e) {
				throw;
			}
			return datas;
		}

		public static String InsertData(FoodMenu data)
		{
			string link = serverLink + "insert";
			String result = "";
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);

				StringBuilder postData = new StringBuilder();
				postData.Append("name="+data.Name+"&");
				postData.Append("price="+data.Price.ToString());
				var data_encode = Encoding.ASCII.GetBytes(postData.ToString());

				request.Method = "POST";
				request.ContentType = "application/x-www-form-urlencoded";
				request.ContentLength = data_encode.Length;

				using (var stream = request.GetRequestStream())
				{
					stream.Write(data_encode, 0, data_encode.Length);
				}

				var response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					result = readStream.ReadToEnd();

					response.Close();
					readStream.Close();
				}
			}
			catch (Exception) {
				throw;
			}
			return result;
		}

		public static String UpdateData(FoodMenu data, int id)
		{
			string link = serverLink + "update/" + id.ToString ();
			String result = "";
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);

				StringBuilder postData = new StringBuilder();
				postData.Append("name="+data.Name+"&");
				postData.Append("price="+data.Price.ToString());
				var data_encode = Encoding.ASCII.GetBytes(postData.ToString());

				request.Method = "PUT";
				request.ContentType = "application/x-www-form-urlencoded";
				request.ContentLength = data_encode.Length;

				using (var stream = request.GetRequestStream())
				{
					stream.Write(data_encode, 0, data_encode.Length);
				}

				var response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					result = readStream.ReadToEnd();

					response.Close();
					readStream.Close();
				}
			}
			catch (Exception) {
				throw;
			}
			return result;
		}

		public static String DeleteData(int id)
		{
			string link = serverLink + "delete/" + id.ToString ();
			String result = "";
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);
				request.Method = "DELETE";
				var response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					result = readStream.ReadToEnd();

					response.Close();
					readStream.Close();
				}
			}
			catch (Exception) {
				throw;
			}
			return result;
		}
	}
}
  • Sekarang kita akan membuat beberapa UI yang ditampilkan pada aplikasi android. UI yang akan dibuat antara lain UI main activity yang terdiri dari sebuah listview dan text, UI form melakukan input/update data, UI untuk menu pada bar, dan untuk row masing-masing data pada listview. Pertama buatlah UI untuk tampilan main pada Main.xml dengan memasukkan code berikut :

<?xml version=1.0 encoding=utf8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
    android:orientation=vertical
    android:layout_width=match_parent
    android:layout_height=match_parent>
    <TextView
        android:text=List of Food
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:id=@+id/title
        android:layout_gravity=center
        android:textSize=18dp
        android:paddingBottom=8dp />
    <ListView
        android:id=@+id/my_list
        android:layout_width=match_parent
        android:layout_height=match_parent
        android:paddingLeft=5dip
        android:paddingRight=5dip
        android:layout_margin=0dip
        android:padding=0dip
        android:divider=#00000000 />
</LinearLayout>

  • Setelah itu buat layout “form_food.xml” untuk form input data :

<?xml version=1.0 encoding=utf8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
    android:orientation=vertical
    android:layout_width=match_parent
    android:layout_height=match_parent>
    <TextView
        android:text=List of Food
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:id=@+id/title
        android:layout_gravity=center
        android:textSize=18dp
        android:paddingBottom=8dp />
    <ListView
        android:id=@+id/my_list
        android:layout_width=match_parent
        android:layout_height=match_parent
        android:paddingLeft=5dip
        android:paddingRight=5dip
        android:layout_margin=0dip
        android:padding=0dip
        android:divider=#00000000 />
</LinearLayout>

  • Lalu UI untuk tampilan row masing-masing data pada “row_food.xml :

<?xml version=1.0 encoding=utf8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
    android:layout_width=match_parent
    android:layout_height=40dp
    android:orientation=horizontal>
    <TextView
        android:text=Name 
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:id=@+id/name
        android:paddingLeft=5dp
        android:layout_gravity=center
        android:width=250dp
        android:textSize=18dp />
    <TextView
        android:id=@+id/price
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:gravity=right
        android:text=Price
        android:layout_gravity=center
        android:textSize=18dp />
</LinearLayout>

  • Terakhir UI untuk tampilan top bar pada aplikasi yang terdiri dari tombol Add dan Refresh data pada “bar_menu.xml”

<?xml version=1.0 encoding=utf8?>
<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android
    xmlns:tools=http://schemas.android.com/tools
    android:layout_width=fill_parent
    android:layout_height=wrap_content>
    <ImageButton
        android:id=@+id/add
        android:layout_width=50dip
        android:layout_height=fill_parent
        android:src=@mipmap/add
        style=?android:attr/borderlessButtonStyle
        android:layout_alignParentRight=true />
    <ImageButton
        android:id=@+id/refresh
        android:layout_width=50dip
        android:layout_height=fill_parent
        android:src=@mipmap/refresh
        style=?android:attr/borderlessButtonStyle
        android:layout_toLeftOf=@id/add />
</RelativeLayout>

  • Setelah membuat UI yang dibutuhkan, sekarang raciklah MainActivity pada aplikasi anda. Berikut code lengkap dari MainActivity :

 

using System;
using System.Collections.Generic;

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Content;
using Android.Views;

namespace SilexSample
{
	[Activity (Label = "SilexSample", MainLauncher = true, Icon = "@mipmap/icon")]
	public class MainActivity : Activity
	{
		AlertDialog.Builder builder;
		private ListView my_list;
		private TextView title;
		private ImageButton btn_add;
		private ImageButton btn_refresh;

		private LoadTask asyncTask;  
		private Handler mHandler = new Handler();
		Runnable mUpdateTimeTask;

		List datas = new List ();
		private FoodAdapter adapter;
		private int current_position = 0;

		protected override void OnCreate (Bundle savedInstanceState)
		{
			base.OnCreate (savedInstanceState);

			SetContentView (Resource.Layout.Main);

			my_list = FindViewById (Resource.Id.my_list);
			title = FindViewById (Resource.Id.title);

			adapter = new FoodAdapter (this, this.datas);
			my_list.Adapter = adapter;
			ListEvent ();
			SetActionBar();

			mUpdateTimeTask = new Runnable(Run);
			mHandler.RemoveCallbacks(mUpdateTimeTask);
			mHandler.Post(mUpdateTimeTask);
		}

		private void RefreshData()
		{
			mUpdateTimeTask = new Runnable(Run);
			mHandler.RemoveCallbacks(mUpdateTimeTask);
			mHandler.Post(mUpdateTimeTask);
		}

		private void SetActionBar()
		{
			Context context = ActionBar.ThemedContext;

			ActionBar.DisplayOptions = ActionBarDisplayOptions.ShowCustom;
			ActionBar.SetCustomView(Resource.Layout.bar_menu);

			btn_add = FindViewById(Resource.Id.add);
			this.btn_add.Click += (o, e) =>
			{
				builder = new AlertDialog.Builder(this);
				builder.SetTitle("Add Data");

				View view_layout = LayoutInflater.From(this).Inflate(Resource.Layout.form_food, null);
				EditText name = view_layout.FindViewById(Resource.Id.name);
				EditText price = view_layout.FindViewById(Resource.Id.price);

				builder.SetView(view_layout);
				builder.SetPositiveButton("Ok", (os, es) =>
				{
					FoodMenu temp = new FoodMenu(name.Text, double.Parse(price.Text));
					FoodLoader.InsertData(temp);
					mHandler.RemoveCallbacks(mUpdateTimeTask);
					mHandler.Post(mUpdateTimeTask);
					((Dialog)os).Dismiss();
				});

				builder.SetNegativeButton("Cancel", (os, es) =>
				{
					((Dialog)os).Dismiss();
				});
				builder.Show();
			};

			btn_refresh = FindViewById(Resource.Id.refresh);
			btn_refresh.Click += (o, e) =>
			{
				RefreshData();
			};
		}

		private void ListEvent(){
			my_list.ItemClick += (o, e) => {
				this.current_position=e.Position;
				builder = new AlertDialog.Builder (this);
				builder.SetMessage("Select an action");
				builder.SetNegativeButton ("Delete", DeleteClicked);
				builder.SetPositiveButton("Update",UpdateClicked);
				builder.Show();
			};
		}

		private void DeleteClicked (object sender, DialogClickEventArgs e)
		{
			FoodLoader.DeleteData (datas [current_position].Id);
			mHandler.RemoveCallbacks(mUpdateTimeTask);
			mHandler.Post(mUpdateTimeTask);
			((Dialog)sender).Dismiss ();
		}
			
		private void UpdateClicked (object sender, DialogClickEventArgs e)
		{
			((Dialog)sender).Dismiss ();

			builder = new AlertDialog.Builder (this);
			builder.SetTitle ("Update Data");
			//
			View view_layout = LayoutInflater.From (this).Inflate (Resource.Layout.form_food, null);

			EditText name = view_layout.FindViewById (Resource.Id.name);
			EditText price = view_layout.FindViewById (Resource.Id.price);

			name.Text = datas [current_position].Name;
			price.Text = datas [current_position].Price.ToString ();

			//
			builder.SetView (view_layout);
			builder.SetPositiveButton ("Ok", (os, es) => {
				FoodMenu temp=new FoodMenu(name.Text,double.Parse(price.Text));
				FoodLoader.UpdateData(temp,datas[current_position].Id);
				mHandler.RemoveCallbacks(mUpdateTimeTask);
				mHandler.Post(mUpdateTimeTask);
				((Dialog)os).Dismiss ();
			});

			builder.SetNegativeButton ("Cancel", (os, es) => {
				((Dialog)os).Dismiss();
			});
			builder.Show();
		}

		public void Run(){
			if (asyncTask != null)
			if (asyncTask.GetStatus() == AsyncTask.Status.Running)
				asyncTask.Cancel(true);   		

			asyncTask = (LoadTask)new LoadTask (this).Execute ();
		}

		private class MyResult {
			public Boolean success;
			public Exception exception;
		}

		private class LoadTask : AsyncTask< Java.Lang.Void , Java.Lang.Void , MyResult>{
			MainActivity parent;
			public LoadTask(MainActivity parent){
				this.parent=parent;
			}

			protected override void OnPreExecute() {
				parent.title.Text = "Loading...";
				base.OnPreExecute();
			}

			protected override void OnPostExecute(MyResult result){
				if (result.exception != null && result.success == false)
					Toast.MakeText (parent, result.exception.Message, ToastLength.Long).Show ();

				parent.title.Text = "List of Food";
				base.OnPostExecute (result);
			}

			protected override MyResult RunInBackground(params Java.Lang.Void[] @params){			
				MyResult result = new MyResult();
				result.exception = null;
				result.success = true;

				try {
					parent.RunOnUiThread(() => {
						parent.LoadData();
					});
				}
				catch (Exception e) {
					result.exception = e;
					result.success = false;
				}
				return result;
			}
		}

		public void LoadData(){
			try {
				this.datas=FoodLoader.LoadData();
				adapter = new FoodAdapter (this, this.datas);
				my_list.Adapter = adapter;
			} 
			catch (Exception) {
				Toast.MakeText (this, "Something error on the server or your connection", ToastLength.Long).Show ();
			}
		}
	}
}

Setelah itu jalankan aplikasi anda untuk melihat hasilnya..

Anda juga dapat mengunduh aplikasi yang telah saya buat di https://github.com/sabithuraira/tutor_silex (aplikasi android yang dibuat saya letakkan pada folder “SilexAndroid”..

Happy coding..

Advertisements

React Native – ListView With Filter Header and Section Header

React Native – ListView With Filter Header and Section Header

Melanjutkan tulisan sebelumnya, kali ini kita akan mencoba menambahkan control untuk melakukan filter pada listview yang telah dibuat seperti gambar berikut :

screen-shot-2016-10-29-at-10-55-08-pm

Sebelum membuat sebuah screen seperti tampilan diatas, kita terlebih dahulu akan membuat sebuah screen yang terdiri dari ListView dan fitur untuk melakukan filter :

screen-shot-2016-10-26-at-3-43-04-pm

Untuk menambahkan component seperti gambar di atas, tambahkan header pada listview yang kita miliki dengan menambahkan code berikut pada code ListView :

         renderHeader={() =>
            <View style={styles.listview_header}>
              <TextInput style={styles.input}
                placeholder="Search..."
                onChangeText={(text) => console.log('searching for ', text)}
              />
            </View>
          }

Code di atas memasukkan code TextInput pada bagian header listview dimana jika diketikkan suatu karakter pada textinput tersebut, maka secara otomatis data pada listview akan difilter berdasarkan karakter yang kita ketikkan. Kok setelah diketik datanya masih belum ter-filter? Emang belum kita buat.. Untuk membuat fitur yang dapat melakukan filter data sesuai dengan data yang dimasukkan pengguna lakukan modifikasi code anda seperti berikut :

const data_array=[‘Music', ‘Movie', ‘Sport', 'Entertainment',];
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class SampleMenu extends Component {
  constructor(props) {
    super(props);
    //definition of listview datasource
    this.state = {
      dataSource: ds.cloneWithRows(data_array),
      filter_string:'',
    };
  }

Rubah code pada bagian constructor seperti code di atas. Apa yang kita lakukan pada perubahan tersebut?

  1. Meletakkan data yang akan ditampilkan pada ListView di luar constructor/class. Kenapa ini dilakukan?
      • Jika data array diletakkan di dalam constuctor, kita tidak dapat menggunakan data array untuk di filter.
      • Antara data array dan dataSource harus dipisahkan sebab ketika proses filter berlangsung maka dataSource akan diperbaharui sesuai dengan data array yang sudah di filter.
  1. Nilai ds kita lettakkan di luar constructor/class. Kenapa?
      • Untuk memperbaharui nilai pada dataSource, kita akan menggunakan nilai ds. Jika diletakkan di constructor kita jadi tidak bisa menggunakan data ds tersebut.

Selain melakukan modifikasi code di atas, kita juga perlu menambahkan code yang akan mengeksekusi proses filter data ketika user memasukkan nilai untuk filter. Perbaharui nilai renderHeader anda seperti code berikut :

 renderHeader={() =>
            <View style={styles.listview_header}>
              <TextInput style={styles.input} placeholder="Search..."
                onChangeText={(text) =>{
                  var rows = [];
                  for (var i=0; i < data_array.length; i++) {
                     var stateName = data_array[i].toLowerCase();
                     if(stateName.search(text.toLowerCase()) !== -1){
                       rows.push(data_array[i]);
                     }
                   }
                   this.setState({dataSource:ds.cloneWithRows(rows)});
                }}
              />
            </View>
          }

Pada code di atas terdapat penambahan pada fungsi “onChangeText”. Code yang kita tambahkan adalah code yang melakukan pengecekan masing-masing data terhadap keyword untuk filter data. Setelah mendapatkan kumpulan data yang sudah sesuai dengan keyword, maka nilai dataSource akan diperbaharui kembali dengan data yang sudah ada. Setelah menambahkan code tersebut aplikasi yang kita buat akan melakukan filter sesuai keyword yang dimasukkan.

screen-shot-2016-10-26-at-11-20-13-pm

Section Header

ListView menyediakan fitur untuk melakukan grouping pada tampilan ListView anda. Hal ini sering digunakan untuk ListView yang memiliki data cukup banyak. Kita akan membuat ListView dengan section header dengan tampilan akhir seperti berikut :

screen-shot-2016-10-29-at-10-55-08-pm

Halaman tersebut menyediakan sebuah ListView dengan Section Header dan fitur filter pada bagian atas ListView. Baiklah, pertama-tama kita harus merubah jenis data yang ada pada ListView. Lakukan perubahan pada variabel data_array yang sebelumnya telah dibuat menjadi seperti berikut :

  const data_array=[];
  data_array['Sport']=['Soccer','Moto GP','Others'];
  data_array['IT & Technology']=['IT','Technology','Science'];
  data_array['Entertainment']=['Music','Movie','Art'];
  data_array['Interest']=['Travel','Style','Fashion','Business'];
  data_array['News & Info']=['Politics','World','Phenomenon'];
  data_array['Health']=['Health','Food','Lifestyle'];

Pada data sebelumnya aplikasi hanya menggunakan data array biasa sedangkan untuk kasus membuat ListView dengan section header data harus di-grouping di masing-masing data. Setelah itu pada constructor anda lakukan perubahan data pada variabel “dataSource” :

      dataSource: ds.cloneWithRowsAndSections(data_array),

Pada code ListView tepatnya code renderSeparator, lakukan perubahan berikut :

 renderSeparator={(sectionId, rowId) => <View key={sectionId+rowId} style={styles.separator_style} />}

Karena dilakukan perubahan pada struktur data_array, maka metode pada fitur filter harus kita modifikasi. Ganti code pada event “onChangeText” pada “renderHeader” menjadi seperti berikut :

                   var rows = [];
                   for (var key in data_array) {
                     if (!rows[key]) {
                       rows[key] = [];
                     }

                     for (var i=0; i < data_array[key].length; i++) {
                        var stateName = data_array[key][i].toLowerCase();
                        if(stateName.search(text.toLowerCase()) !== -1){
                          rows[key].push(data_array[key][i]);
                        }
                      }

                      if(rows[key].length==0)
                        delete rows[key];
                   }

                   this.setState({dataSource:ds.cloneWithRowsAndSections(rows)});

Yang terakhir tambahkan code renderSectionHeader pada ListView anda seperti berikut :

          renderSectionHeader={(rowData,sectionId)=>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionHeaderText}>{sectionId}</Text>
            </View>
          }

Silahkan jalankan aplikasi, jika code yang anda masukkan sudah benar maka akan tampil halaman seperti gambar aplikasi yang diinginkan.

Masih ga jalan?? Silahkan lihat project lengkap dari tulisan ini di : https://github.com/sabithuraira/react_native_playground. Untuk code tulisan ini bisa dicek langsung di https://github.com/sabithuraira/react_native_playground/blob/master/application/components/SampleMenu.js

Happy coding..

React Native – Using ListView

React Native – Using ListView

Untuk menampilkan sekumpulan data kepada pengguna, aplikasi biasanya menggunakan tabel. Untuk aplikasi android sering digunakan ListView, iOS menggunakan UITableView dan pada react native kita akan menggunakan ListView. Kita akan coba membuat sebuah tampilan seperti pada gambar berikut :

screen-shot-2016-10-26-at-1-59-45-pm

Pertama-tama buatlah sebuah componen dengan code listview di dalamnya seperti berikut :

import React, { Component } from 'react';
import {
  StyleSheet, Text, View, ListView, TouchableHighlight,
} from 'react-native';

export default class SampleMenu extends Component {
  constructor(props) {
    super(props);
    //definition of listview datasource
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'Music', 'Movie', 'Sport', 'Entertainment',
      ])
    };
  }

  render() {
    return (
      <View style={{flex: 1, paddingTop: 22,marginTop:45}}>
        <ListView style={styles.listview_style}
          dataSource={this.state.dataSource}
          renderRow={(rowData,sectionId,rowId) =>(
              <View style={styles.row}>
                <Text style={styles.row_style}>{rowData}</Text>
              </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  listview_style: {
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  row: {
    flexDirection: 'row',
    backgroundColor: 'white',
  },
  row_style: {
    flex: 1,
    fontSize: 15,
    textAlign: 'left',
    margin: 10,
  },
  separator_style: {
   flex: 1,
   height: StyleSheet.hairlineWidth,
   backgroundColor: '#8E8E8E',
  },
});

Code di atas akan menghasilkan interface seperti berikut :

screen-shot-2016-10-26-at-2-24-00-pm

Agar lebih enak dilihat tambahkan pembatas/separator pada setiap baris.

renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator_style} />}

Tambahkan code tersebut dibawah tag code “renderRow” pada ListView, maka tampilan listview akan berubah menjadi seperti berikut :

screen-shot-2016-10-26-at-2-31-40-pm

Selain menampilkan data, anda juga dapat menambahkan sebuah perintah yang dijalankan ketika pengguna memilih salah satu data. Pada contoh ini kita akan menampilkan sebuah pesan jika pengguna memilih salah satu data.

              <View style={styles.row}>
                <Text style={styles.row_style}>{rowData}</Text>
              </View>

Rubah code di atas menjadi seperti berikut :

            <TouchableHighlight onPress={() => {
                Alert.alert(
                  'Enter title here..',
                  'You click on '+rowData,
                );
            }}>
              <View style={styles.row}>
                <Text style={styles.row_style}>{rowData}</Text>
              </View>
            </TouchableHighlight>

Untuk memberikan respon ketika pengguna menekan suatu data, kita harus menggunakan component “TouchableHighlight”. Setelah menambahkan code tersebut maka ketika pengguna menekan salah satu data akan dijalankan fungsi “onPress”. Pada contoh ini aplikasi yang kita buat akan menampilkan pesan setiap kali pengguna menekan salah satu data.

screen-shot-2016-10-26-at-3-08-06-pm

Selesai, itulah contoh pengembangan aplikasi react native dengan listview sederhana..

Happy coding..

React Native – Understanding Props and State

React Native – Understanding Props and State

Selain Component dan JSX, dalam React Native anda juga akan sangat sering menemui Props dan State. Apa itu Props dan State?

Props

Dalam pengembangan aplikasi kita mungkin sering menggunakan parameter pada suatu fungsi. atau class. React native sendiri menyediakan sebuah opsi untuk mempermudah developer mengelola parameter pada suatu component yang disebut Props. Props sendiri bisa dibilang adalah sebuah parameter default yang dimiliki oleh suatu component dimana ketika anda memanggil sebuah component, anda dapat menentukan/insert nilai props untuk component tersebut. Sebagai contoh penggunaan props adalah seperti berikut :

//class ini akan menampilkan jumlah huruf yang ada pada
//suatu karakter.

class CountOfCharacter extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <Text style={styles.welcome}>
          //menampilkan jumlah huruf dari variabel props.text
          Count of character : {this.props.text.length}
        </Text>
    );
  }
}

Silahkan hapus baris komentar yang berawalan “//“.

Code di atas adalah salah satu contoh penggunaan props pada suatu component. Kita dapat memanggil class di atas dengan cara seperti berikut :

        <CountOfCharacter text=‘Text Saya' />

Pemanggilan tag tersebut akan mencetak tampilan “Count of character : 9”

Props digunakan untuk melempar parameter yang berasal dari luar class component/dari component yang memanggilnya. Props juga tidak mengizinkan modifikasi nilai props di dalam class component-nya dan pada teorinya penggunaan parameter memang tidak dirancang untuk dimanipulasi/diubah-ubah. Bagaimana jika alur aplikasi kita memerlukan data props untuk dimodifikasi? Anda dapat gunakan variabel lain atau gunakan “state”. Lalu bagaimana jika saya butuh variabel untuk mengelola informasi dalam suatu component? Anda juga dapat gunakan variabel lain atau gunakan “state”.

State

State bisa dibilang adalah variabel default yang dimiliki suatu component yang nilainya dapat diubah-ubah. Nilai pada state harus didefinisikan terlebih dahulu pada constructor suatu component. Berikut contoh penggunaan state:

Jika pada pemrograman C# atau Java sering ditemui pendefinisian variabel seperti berikut :

 private string name;
 private string address;

Pada react native mendefinisikan nilai tersebut di dalam state dengan cara seperti berikut :

constructor(props) {
    super(props);
    this.state = { name: ‘Sabit',address:'South Sumatera, Indonesia’ };
  }

Dengan ditanamkannya nilai this.state.name dan this.state.address, anda dapat menggunakan variabel tersebut di seluruh class component bersangkutan. Anda juga dapat merubah nilai dari state dengan cara seperti berikut :

 this.setState({name:new_value}) // code ini akan merubah nilai this.state.name
 this.setState({address:new_value}) // gunakan code ini untuk merubah this.state.address

Berikut adalah contoh aplikasi lengkap penggunaan state dan props :

import React, { Component } from 'react';
import {
  AppRegistry, StyleSheet, Text, TextInput, View
} from 'react-native';

export default class myfirstApp extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '',text2:'Awesome' };
  }

  render() {
    let judul='React Native';
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to {judul} {this.state.text2}!
        </Text>
        <TextInput
          style={{height: 40, margin: 15, padding: 10, 
            borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({text})}
        />
        <CountOfCharacter text={this.state.text} />
      </View>
    );
  }
}

//class ini akan menampilkan jumlah huruf yang ada pada
//suatu karakter
class CountOfCharacter extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
          //akan menampilkan jumlah huruf dari variabel props.text
        <Text style={styles.welcome}>
          Count of character : {this.props.text.length}
        </Text>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('myfirstApp', () => myfirstApp);

Itu adalah contoh aplikasi untuk melakukan penghitungan huruf yang telah diinput. Tampilan dari aplikasi adalah sebagai berikut :

screen-shot-2016-11-02-at-11-19-26-am

Jika code anda sudah benar, maka akan tampil screen seperti gambar diatas.. Happy coding..

[React Native] Understanding JSX, Style and Component

[React Native] Understanding JSX, Style and Component

Beberapa konsep dasar yang akan sering anda temui dalam pengembangan aplikasi dengan react native diantaranya adalah Component, JSX, Props dan State. Pastikan anda memahami hal tersebut agar tidak kesulitan dalam mengembangkan aplikasi dengan react native.

JSX dan Style

Dalam react native kita akan menampilkan sebuah screen/tampilan dengan menggunakan JSX. JSX sendiri menggunakan syntax XML yang dimasukkan ke dalam Javascript dari aplikasi react native. Berikut adalah contoh dari JSX :

       <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to {judul}!
        </Text>
        <Text style={styles.instructions}>
          Hola React Native Developer!
        </Text>
      </View>     

Code tersebut adalah potongan code JSX yang terdiri dari tag “View” dan tag “Text”.  Bagi anda yang sudah familiar dengan HTML besar kemungkinan mudah dalam memahami struktur penulisan code JSX. Pada JSX anda dapat menampilkan nilai suatu variabel atau fungsi dengan menambahkan tag kurung kurawal “{ }”. Penggunaan { } juga dapat digunakan untuk menyisipkan styles, contoh :

<View style={styles.container}>

Bagaimana pengaturan style pada react native?

Style digunakan untuk mengatur dan memperindah tampilan aplikasi anda. Dengan style anda dapat mengatur warna, font huruf, margin, dll. Style bisa langsung anda sisipkan dalam suatu tag control bisa juga anda definisikan secara terpisah dimana style yang telah didefinisikan tadi akan dipanggil langsung dari suatu control. Contoh style yang langsung disisipkan langsung adalah seperti berikut :

 <Image source={pic} style={{width: 193, height: 110}}/>

Sedangkan untuk membuat style yang terpisah dari component-nya, dapat dilakukan dengan menambahkan variabel styles di luar class Component seperti berikut :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Variabel styles di atas dapat digunakan langsung pada component :

 <View style={styles.container}>

Code di atas menggunakan styles.container yang telah di definisikan pada variabel styles. Anda juga dapat menggunakan styles.welcome dan styles.instructions.

Component

Semua tampilan yang anda lihat pada aplikasi react native adalah kumpulan dari component. Dimana masing-masing component minimal harus memiliki sebuah fungsi yang me-render sebuah tampilan (menggunakan JSX). Berikut adalah contoh code sebuah aplikasi kecil yang mungkin bisa membantu anda untuk memahami strukturnya :

import React, { Component } from 'react'; //import React dari react
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';  // import beberapa class yang akan digunakan dalam program

// class myfirstApp meng-extends class Component.
export default class myfirstApp extends Component { 
  //fungsi render pada class myfirstApp, jika fungsi ini dipanggil
  //maka secara otomatis aplikasi akan memanggil fungsi render
  //untuk menampilkannya ke aplikasi
  render() {
    let judul='React Native'; //definisi sebuah variabel
    return (
      //ini adalah kumpulan JSX yang akan ditampilkan pada aplikasi
      <View style={styles.container}> // contoh penggunaan styles pada suatu control
        <Text style={styles.welcome}>
          Welcome to {judul}!  // contoh menampilkan sebuah variabel
        </Text>
        <Text style={styles.instructions}>
          Hola React Native Developer!
        </Text>
      </View>
    );
  }
}

//baris di bawah adalah kumpulan definisi styles yang dapat dipanggil
//dari class myfirstApp
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
//baris ini adalah yang pertama kali dieksekusi oleh aplikasi
//baris ini memanggil Component myfirstApp untuk ditampilkan
AppRegistry.registerComponent('myfirstApp', () => myfirstApp);

Catatan : Silahkan hapus code komentar dengan awalan “//” jika mengganggu.

Code tersebut akan menampilkan tampilan aplikasi seperti berikut :

screen-shot-2016-10-30-at-4-25-53-pm

React native memiliki banyak component untuk digunakan, silahkan explore pada website resmi react native.

Happy coding..

[ React Native ] Introduction and Installation

Pengembangan aplikasi mobile saat ini menjadi semakin seksi terutama aplikasi Android dan iOS. Para penyedia layanan melalui website pun banyak yang menyediakan layanannya dalam bentuk aplikasi smartphone. Pada kenyataannya pengembangan aplikasi smartphone yang kompleks tidaklah mudah. Ditambah lagi kebutuhan pengembangan untuk platform Android dan iOS guna memenuhi kebutuhan pengguna yang sebagian besar menggunakan dua jenis platform tersebut. Dari permasalahan tersebut, telah bermunculan beberapa framework yang menciptakan tools untuk mempermudah pengembangan aplikasi Android dan iOS. Apa saja framework tersebut?

Hybrid App

Pengembangan aplikasi  hybrid menampilkan komponen web ke dalam aplikasi smartphone dengan menggunakan webview. Dengan hybrid anda cukup menulis satu buah aplikasi dan akan berjalan pada platform Android dan iOS. Walaupun hanya menggunakan webview, pengembangan dengan hybrid tetap memungkinkan anda mengakses hardware dari perangkat mobile. Kelemahan dari hybrid adalah bukan aplikasi native dan berjalan pada webview sehingga aplikasi hybrid memiliki performa masih kalah jika dibandingkan aplikasi native. Sedangkan kelebihannya adalah kemudahan dalam pengembangannya, terutama untuk anda yang telah terbiasa dengan pemrograman web. Pengembangan Hybrid menggunakan HTML5, Javascript dan CSS. Terdapat beberapa framework dalam hybrid seperti phone gap, cordova dengan ionic, kendoui, dll. Berdasarkan pengalaman pribadi pengembangan aplikasi dengan hybrid cukup mudah, running aplikasi dapat dilakukan lewat browser (tidak perlu berdarah-darah dengan emulator yang sangat berat). Tetapi untuk pengembangan aplikasi kompleks perlu anda pertimbangkan kembali karena performa yang masih di bawah aplikasi native.

Xamarin

Xamarin adalah framework yang dimiliki Microsoft yang memungkinkan anda membangun aplikasi Android, iOS dan Windows Phone dengan bahasa pemrograman C#. Berbeda dengan hybrid, kelebihan pengembangan dengan Xamarin adalah aplikasi dibangun dengan native dan karenanya Xamarin memberikan performa yang baik. Sedangkan kelemahannya pengembangan dengan Xamarin tidaklah mudah. Jika anda tidak terbiasa menggunakan bahasa pemrograman C# dengan .NET kemungkinan anda akan cukup kesulitan untuk menggunakan Xamarin. Pada Xamarin anda tetap harus memodifikasi code anda untuk masing-masing platform Android, iOS dan Windows Phone.

React Native

Jika hybrid menggunakan pemrograman web dan Xamarin dengan native yang dikonversi dari C#, kemudian muncul Facebook yang mengembangkan React Native. React Native adalah framework besutan Facebook yang memungkinkan anda membuat aplikasi Android dan iOS dengan Javascript. Walau dibangun dengan Javascript, React Native merupakan aplikasi native dimana komponen javascript akan dikonversi menjadi komponen native Android atau iOS. Anda juga membutuhkan iOS dan Android sdk dalam pengembangan dengan react native. Kelebihan dari React Native adalah performanya yang baik karena merupakan aplikasi native. Pengembangan dengan javascript juga menjadi keuntungan tersendiri bagi developer. Kekurangan dari react native anda harus memahami react tidak hanya javascript.

Pada tulisan selanjutnya saya akan membahas proses instalasi React Native. Untuk menjelajah react native lebih lanjut silahkan buka website https://facebook.github.io/react-native/. Berikut ini adalah panduan instalasi menggunakan mac ox, untuk proses instalasi pada windows atau linux dapat dilihat di https://facebook.github.io/react-native/docs/getting-started.html. Proses instalasi react native untuk development aplikasi ios dan android dilakukan terpisah.

Instalasi Pada iOS

Untuk melakukan instalasi react native pada IOS development, yang ada butuhkan adalah node.js, watchman, React Native command line interface, dan xcode.

Node.js dan Watchman dapat anda instal menggunakan Homebrew : http://brew.sh/.

Installasi Homebrew

Silahkan buka website homebrew, kemudian buka terminal pada mac os. Masukkan perintah berikut :

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”. 

Perintah tersebut akan melakukan instalasi pada homebrew pada PC anda.

Catatan : Jika pada proses instalasi homebrew terdapat pesan :

“You have not agreed to the Xcode license.
Before running the installer again please agree to the license by opening
Xcode.app or running:
    sudo xcodebuild -license”

silahkan buka xcode anda lalu klik agree pada xcode license. Jika telah sukses melakukan instalasi homebrew, maka akan muncul pesan :

==> Installation successful!
==> Next steps
Run `brew help` to get started
Further documentation: https://git.io/brew-docs

Installasi Node.js dan Watchmen

Setelah selesai melakukan instalasi homebrew, lakukan instalasi node.js dan watchmen dengan memasukkan perintah berikut pada terminal anda :

  • brew install node (untuk installasi node.js)
  • brew install watchman (untuk installasi watchman)

Installasi React Native

Setelah selesai melakukan node.js dan watchman, kita akan melakukan instalasi react native menggunakan fitur npm yang dimiliki node.js. Ketik perintah berikut pada terminal anda untuk melakukan instalasi react native : npm install -g react-native-cli.

Instalasi Xcode

Buka mac app store anda lalu cari aplikasi xcode, kemudian install aplikasi xcode.

Membuat project React Native

Setelah melakukan installasi semua komponen yang dibutuhkan, sekarang kita mencoba membuat sebuah aplikasi react native. Jalankan perintah berikut di terminal anda :

react-native init myfirstApp 

Perintah ini digunakan untuk membuat sebuah project react native, aplikasi react-native akan diinstal dan memakan cukup waktu untuk menjalankannya. Setelah proses instalasi selesai, masukkan perintah berikut :

cd myfirstApp 

Perintah di atas akan mengarahkan ke path directory project yang telah dibuat. Masukkan perintah berikut untuk menjalankan aplikasi yang telah dibuat.

react-native run-ios

Jika berhasil maka akan muncul ios emulator seperti gambar berikut :

screen-shot-2016-10-29-at-2-32-41-pm

Tampilan di sebelah kiri adalah tampilan dari code “index.ios.js” sedangkan tampilan di sebelah kanan adalah tampilan dari emulator ios.

Instalasi ANDROID

Instalasi pada android juga memerlukan komponen node.js, watchman dan React Native command line interface. Sebagai tambahan untuk menjalankan androidnya, kita juga harus  memiliki android studio beserta android sdk-nya.

Instalasi Android Studio

Unduh android studio pada tautan berikut : https://developer.android.com/studio/install.html dan lakukan instalasi Android studio pada PC anda. Pastikan anda sudah melakukan konfigurasi SDK android anda, caranya? Ketika anda membuka android studio, pada menu halaman welcome pilih tombol “configure” kemudian pilih SDK Manager.

screen-shot-2016-10-29-at-2-34-04-pm

akan tampil menu SDK seperti berikut :

screen-shot-2016-10-29-at-2-35-34-pm

Anda dapat melakukan pengaturan konfigurasi SDK baik merubah path, melakukan update SDK, dll.

React Native command line interface membutuhkan ANDROID_HOME variabel agar dapat mendapatkan path dari android sdk yang kita miliki. Lakukan setting nilai variabel ANDROID_HOME dengan memasukkan perintah berikut pada terminal anda :

 export ANDROID_HOME=pathAndroidAnda

Kemudian jalankan aplikasi anda dengan memasukkan perintah berikut pada terminal :

react-native init myfirtsApp
cd myfirstApp
react-native run-android

Kode di atas sama dengan kode untuk menjalankan react-native pada aplikasi IOS, hanya saja ketika akan menjalankan aplikasi anda perlu mendefinisikan perintah run-android. Berikut tampilan aplikasi android yang telah dibuat :

screen-shot-2016-10-29-at-2-37-18-pm

Catatan : jika aplikasi hanya menampilkan halaman blank berwarna putih, buka SDK command prompt anda, kemudian ketikkan perintah :

adb reverse tcp:8081 tcp:8081

Jika tampilan pada PC anda menampilkan halaman yang sama seperti gambar di atas, artinya anda telah berhasil melakukan instalasi react-native pada IOS dan android..

Happy coding…

Budget Currency

Buat anda yang sering kesulitan mencatat dan mengelola keuangan, mungkin aplikasi kami “Budget Currency” bisa membantu.. Aplikasi yang bisa di install di hp android anda ini bisa digunakan untuk mencatat transaksi pengeluaran, pemasukan dan tagihan anda. Anda juga dapat memasukkan budget per bulan anda, sehingga pengeluaran anda dapat di kontrol dengan lebih baik.

Untuk anda yang sering melakukan transaksi dengan menggunakan banyak jenis mata uang, aplikasi ini bisa menjadi pilihan tepat karena secara otomatis dapat menghitung transaksi anda ke dalam satu jenis mata uang yang sudah ditentukan. Tentu saja nilai tukar mata uang adalah nilai ter-update..

Setelah anda memasukkan setiap transaksi keuangan anda, aplikasi ini akan menampilkan statistik transaksi anda dalam bentuk rangkuman maupun grafik. Membuat anda lebih mudah melihat pola keuangan anda.

Unduh langsung aplikasi kami yang bernama “Budget Currency” di play store anda https://play.google.com/store/apps/details… .

 

Screenshot_2015-03-22-22-04-59 Screenshot_2015-03-22-22-05-04 Screenshot_2015-03-22-22-05-16 Screenshot_2015-03-22-22-05-23

Screenshot_2015-03-22-22-05-48 Screenshot_2015-03-22-22-06-33 Screenshot_2015-03-22-22-07-08 Screenshot_2015-03-22-22-09-49

Selamat menggunakan.., kelola keuangan anda dengan maksimal dan lebih baik..

%d bloggers like this: