Membuat bot Telegram

Terinspirasi dari tulisan pak Yohanes, akhirnya tadi malam saya berhasil membuat bot untuk Telegram setelah membaca tutorial yang dibuat oleh pak Yohanes tersebut. Bedanya hanya url webhook-nya saya arahkan ke salah satu endpoint API dari aplikasi saya yang lain yang saya buat dengan SlimFramework dan saya tidak menggunakan stream php://input untuk membaca post data dari telegram tapi langsung menggunakan fungsi dari slim buat baca data

$body = $app->request->getBody();

 

Bot ini berfungsi untuk mendapatkan data hadits dan terjemahnya dari beberapa kitab hadits. command-nya adalah sebagai berikut:

/<periwayat> <nomorhadits>
misalnya:
/ahmad 200
untuk mendapatkan informasi hadits nomor 200 pada kitab musnad Ahmad

dimana nama periwayatnya adalah sebagai berikut:

  1. bukhari untuk kitab shahih bukhari
  2. muslim untuk kitab shahih muslim
  3. ahmad untuk kitab musnad Imam Ahmad
  4. tirmidzi untuk kitab sunan at-tirmidzi
  5. nasai untuk kitab sunan an-nasa’i
  6. darimi untuk kitab sunan ad-darimi
  7. malik untuk kitab al-muwaththa’ karya Imam Malik
  8. ibnumajah untuk kitab sunan Ibnu Majah, dan
  9. abudaud untuk kitab hadits sunan Abu Dawud

silahkan langsung menambahkan bot-nya di sini @hadits_bot

 

semoga bermanfaat. Aamiin

Android Unit: px (pixel), dp/dip (density-independent pixel) dan sp (scale-independent pixels)

tldr;

selalu gunakan sp untuk teks dan dp untuk yang lainnya. Kecuali, benar-benar terpaksa dan tahu benar konsekuensinya, gunakanalah px.

Ekosistem android dikenal dengan fragmentasi spesifikasi device yang sangat bervariasi. Tentunya ini tantangan tersendiri bagi developer. Untungnya, untuk masalah screen density yang bervariasi, sepertinya sudah diantisipasi oleh para pengembang platform Android di Google, dengan memperkenalkan dua unit/satuan baru yaitu dip/dp (density-independent pixel) dan sp (scale-independent pixels).

Misalkan ada dua tablet 7-inch (ukuran diagonal layar), tablet pertama (A) memiliki resolusi layar  1200x1920px 320dpi dan yang lainnya (B) beresolusi 2048x1536px 326dpi. Membuat button dengan ukuran 300x300px mungkin akan tampak normal pada  tablet tapi akan tampak kecil di tablet

Tapi akan berbeda jika kita spesifikasikan ukuran buttonnya dengan ukuran yang bergantung pada density layar alias menggunakan dip misal 300x300dp.

secara fisik ukuran button tersebut akan selalu sama pada ukuran layar yang berbeda.

Perhatikan gambar berikut:

Screen Shot 2015-07-15 at 1.45.58 PM

ukuran 200dp akan dikonversi pada device mdpi (device dengan density 160dpi/dots per inch) menjadi 200px dan menjadi 400px pada device xhdpi (density 420dpi) misal pada nexus 4. Sehingga ukuran tersebut tampak sama dan konsisten secara fisik untuk beragam device dengan ukuran layar yang berbeda.

serupa dengan dp adalah sp (scaled-independent pixels) yang kita gunakan untuk ukuran teks. Perbedaannya, dengan menggunakan satuan sp android akan menscale ukuran teks sesuai dengan setting ukuran teks di device (yang biasa dapat di akses melalui menu settings).

Jadi, selalu gunakan sp untuk teks dan dp untuk yang lainnya. Kecuali, kamu benar-benar terpaksa dan tahu benar konsekuensinya, jangan menggunakan satuan px. Jika kebetulan designer yang bekerja bersama anda belum tahu, beritahukan untuk selau menginformasikan spesifikasi design dengan dp/sp. Beberapa website berikut akan sangat membantu:

  1. http://developer.android.com/guide/practices/screens_support.html
  2. http://developer.android.com/training/multiscreen/screendensities.html
  3. http://dpi.lv/
  4. https://pixplicity.com/dp-px-converter/
  5. https://www.youtube.com/watch?v=zhszwkcay2A

Tulisan ini terinspirasi setelah membaca status path Sidiq (salah satu Android Developer Expert dari Indonesia )

Google Apps Script for Fun and Profit

Saya suka membaca, buku, artikel, blog, notes dll, untuk blog saya biasa menggunakan google reader dan setelah di shutdown, saya berpindah menggunakan feedly, ada lebih dari seratus sumber berita saya subscribe (meskipun tidak selalu saya baca semua artikelnya). Saya juga senang sekali kalau ada yang mengirimkan artikel-artikel menarik melalui email karena tentu saja pengirim info tersebut telah memilihkan berita atau informasi yang menarik bagi saya. Hal tersebut yang dilakukan oleh salah seorang manager senior di kantor.

Karena beliau relatif sering mengirimkan artikel tersebut, saya berfikir untuk menyimpan artikel-artikel tersebut di google site saya, sehingga saya bisa mengaksesnya sewaktu-waktu dengan mudah. Oleh karena itu saya membuat script sederhana untuk mengambil artikel tersebut dan menyimpannya di google site dengan menggunakan google apps script. Menggunakan google apps script ternyata sangat mudah, berikut script yang saya buat:

/**
 * Retrieves all inbox and post body email from pak Soegi with subject: "fyi" to google sites
 * https://sites.google.com/a/kaskusnetworks.com/hakim/home/articles
 * For more information on using the GMail API, see
 * https://developers.google.com/apps-script/class_gmailapp
 */
function processInbox() {
  Logger.log("start reading inbox");
  // get top 50 inbox (assuming no more than 50 threads within a day)
  // sort it based on first message date, since sometimes old thread goes up because of new message/reply
  // it make sure that only latest message read and posted to google site
  var threads = GmailApp.getInboxThreads(0, 50).sort(function(thread1, thread2){
    return thread2.getMessages()[0].getDate().getTime() - thread1.getMessages()[0].getDate().getTime();
  });
  
  var day_in_miliseconds = 86400000; // 24*60*60*1000
  if (threads.length > 0){
    for (var i = 0; ; i++) {
      // get all messages in a given thread
      var thread = threads[i];
      var firstmessage = thread.getMessages()[0];
      var firstmessagedate = firstmessage.getDate()
      var now = new Date();
      // only check for past 24 hour email
      if ((now.getTime() - firstmessagedate.getTime()) <= day_in_miliseconds){
        var messages = thread.getMessages();
        // log message subject
        var message = messages[0]; // we only care for the first message
        Logger.log(message.getFrom() + " subject: "+ message.getSubject())
        if (message.getSubject().trim() == "fyi" && message.getFrom().indexOf("soegi") > 0){
          var date = message.getDate()
          // post to google sites
          var fyi = "<strong>" + date.toLocaleDateString() + "</strong><br/>"+message.getBody();
          addArticlesToPage(fyi);
        }
      }else{ // outdated message
        break;
      }
    }  
  }
  
};

function addArticlesToPage(fyi){
  var domain = 'kaskusnetworks.com';
  var sitenya = 'hakim';
  var site = SitesApp.getSite(domain, sitenya);
  var page = SitesApp.getPageByUrl("https://sites.google.com/a/kaskusnetworks.com/hakim/home/articles");
  var content = page.getHtmlContent();
  // append content
  content = content.replace("</div></td>","<br/>"+fyi+"</div></td>");
  page.setHtmlContent(content);
}

selanjutnya saya tinggal menentukan trigger yang akan mengeksekusi fungsi tersebut (semcam membuat cron jobs). akhirnya halaman google sites saya akan selalu terupdate dengan link-link informasi menarik yang dikirimkan kepada saya. Dan di akhir pekan, saya bisa membaca semua link-link tersebut dengan santai.

happy scripting :)

Face detection dengan OpenCV

Saya suka sekali belajar sesuatu yang baru. Beberapa waktu yang lalu saya mulai belajar bahasa pemrograman Python. Python sangat menarik bagi saya karena dia scripting languange yang secara default sudah keinstall di OS X, jadi sewaktu waktu saya butuh simple programming, selain dengan shell script saya bisa langsung menggunakan Python. Ketertarikan saya ini berlanjut dengan mencoba menggunakan Pandas, python library/modules yang bisa kita gunakan untuk data (big atau small) analysis. Dan akhirnya, saya mencoba python untuk face detection dengan python opencv module. dengan menggunakan tutorial di sini, saya membuat simple script seperti ini:

import numpy as np
import cv2

face_cascade = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')
eye_cascade = cv2.CascadeClassifier('haarcascade_eye.xml')
nose_cascade = cv2.CascadeClassifier('haarcascade_mcs_nose.xml')
img = cv2.imread('ayahahmad.png')
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

faces = face_cascade.detectMultiScale(gray, 1.3, 5)

for (x, y, w, h) in faces:
	cv2.rectangle(img, (x,y), (x+w, y+h), (255, 0, 0), 2)
	roi_gray = gray[y:y+h, x:x+w]
	roi_color = img[y:y+h, x:x+w]
	eyes = eye_cascade.detectMultiScale(roi_gray)
	for (ex, ey, ew, eh) in eyes:
		cv2.rectangle(roi_color, (ex, ey), (ex+ew, ey+eh), (0, 255, 0), 2)

	nose = nose_cascade.detectMultiScale(roi_gray)
	for (nx, ny, nw, nh) in nose:
		cv2.rectangle(roi_color, (nx, ny), (nx+nw, ny+nh), (0, 0, 255), 2)

cv2.imshow('img', img)
cv2.waitKey(0)
cv2.destroyAllWindows()

disini saya mencoba medeteksi wajah, sepasang mata dan juga hidung dengan metode Haar Cascades Classifier. OpenCV sudah menyediakan training classifier dalam format xml, jadi saya tinggal menggunakannya saja sebagaimana terlihat di source code di atas. Berikut hasil eksekusi dari script tersebut: Ayah dan Ahmad wah, ternyata mata Ahmad yang lagi menyipit tidak terdeteksi :)
kotak biru adalah bagian yang dideteksi sebagai wilayah wajah, kotak hijau adalah mata dan kotak merah adalah hidung.

Ahmad sedang sakit 3 hari ini, semoga lekas sembuh ya nak. Aamiin :'(

Android Drawable Management dengan ImageSweep

Screen Shot 2014-06-19 at 4.38.30 PM

Dengan terus berkembangnya aplikasi Android yang kita buat, bertambah pula jumlah resource citra (image) yang kita gunakan. Karena jumlah citra yang terus berubah/bertambah ini, kadang kita lupa untuk membersihakn citra yang sudah tidak digunakan dalam aplikasi kita. Jika demikian, tentunya ukuran aplikasi kita menjadi semakin besar karena banyak citra yang tidak digunakan tersebut.

Untungnya, ada script menarik yang namanya ImageSweep, awalnya ImageSweep ini dikembangkan oleh developer lain di Instructure, tapi kemudian saya tertarik untuk sedikit menambahkan kemampuan di dalamnya. ImageSweep ini bekerja dengan melakukan pemeriksaan apakah citra yang ada di folder res/ di aplikasi android kita pernah digunakan di tempat lain (source code atau xml layout), jika tidak ada maka citra tersebut akan dihapus. Penambahan yang saya lakukan adalah pilihan untuk memindahkan citra yang tidak digunakan tersebut ke dalam folder lain.

Misalnya kita ingin menghapus semua citra yang tidak digunakan, perinahnya adalah sebagai berikut (dengan 2 parameter, parameter pertama adalah script-nya, parameter kedua adalah folder project android kita):

 

$ python /users/hakim/github/android-ImageSweep/ImageSweep.py . 

tapi, jika kita hendak memindahkan saja, misal karena siapa tahu bakal digunakan lagi nantinya, command-nya adalah sepert ini (dengan 3 parameter, parameter ketiga adalah folder tempat backup citra yang dipindahkan):

$ python /users/hakim/github/android-ImageSweep/ImageSweep.py . /users/hakim/Desktop/backup_res_image

nah, hasilnya bisa dilihat pada gambar di awal blog ini, lumayan bermanfaat kan.

happy cleaning :)

Improve Detail Aplikasi Kaskus (2)

Mungkin hanya beberapa orang saja yang memperhatikan, saat anda mulai melakukan pencarian melalui aplikasi KasKus for Android; Searchbox akan melakukan animasi expand begitu anda touch searhbox tersebut, dan melakukan animasi shrink saat anda batal melakukan pencarian.

searchbox_anim

 

Ini sebenarnya diimplementasikan menggunakan teknik yang sangat sederhana. Yang perlu dilakukan adalah men setting atribut layout agar beranimasi saat perubahan layout android:animateLayoutChanges=”true”, setalah itu layout searchbox saya berikan bobot 1 (android:layout_weight=”1) sehingga dia selalu berusaha memenuhi seluruh bagian layout; dan akhirnya saya tinggal memainkan visibility state button cancel-nya antara View.VISIBLE dan View.GONE; saat button cancel di remove dari layout (View.GONE) secara otomatis SearchBox akan berusaha memenuhi seluruh bagian layout, dan sebaliknya saat button cancel ditambahkan dalam layout (View.VISIBLE) secara otomatis SearchBox akan shrink untuk memberi tempat pada Button cancel tersebut. Kurang lebih seperti ini implementasinya:

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:orientation="horizontal"
            android:paddingLeft="5dp"
            android:paddingRight="5dp" >

            <EditText
                android:id="@+id/searchbox"
                android:hint="@string/search_hint"
                android:layout_weight="1"
                android:imeOptions="actionSearch" />

            <Button
                android:id="@+id/cancel"
                android:text="@string/cancel"
                android:visibility="gone" />
        </LinearLayout>

tentu saja teknik ini ada kekurangannya, karena android:animateLayoutChanges=”true” baru dikenali mulai dari Honeycomb; tapi ini teknik simple yang menurut saya bisa menambah menarik aplikasi kita :)

happy coding :)

Improve detail aplikasi KasKus

Sementara detail disain dikerjakan oleh teman kantor saya Yogie, saya juga memperbaiki beberapa detail aplikasi yang pada versi sebelumnya:

  1. Font di text hint password Edittext ang berubah jadi courier (bug’s di android sepertinya), sekarang menjadi sama seperti di bagian username.
  2. ImeAction pada keyboard yang pada awalnya default (“Done”) sekarang diberikan label (“Sign In”) untuk device yang support ImeActionLabel.

Berikut screenshot dari versi sebelumnya dan versi terbaru:

Screenshot_2014-05-21-17-33-35 Screenshot_2014-05-21-17-36-19

untuk kaskus pertama, ini sebenarnya behavior bawaan android (bug?), agar ini tidak terjadi, yang harus dilakukan salah satunya adalah dengan cara yang ditunjukkan di stackoverflow. Tapi, karena saya tidak lagi menggunakan default EditText, saya membuat kelas tersendiri agar EditText/TextView saya menggunakan font yang diinginkan oleh disainer kami, saya tidak perlu melakukan langkah tersebut.

Sedangkan kasus yang kedua ini, trik-nya juga sangat mudah; yang diperlukan adalah menambahkan attribute ImeActionLabel di EditText yang kita definisikan, misalnya seperti berikut:

<EditText
    android:id="@id/login_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/password"
    android:imeActionId="@+id/action_sign_in"
    android:imeActionLabel="@string/sign_in"
    android:imeOptions="actionDone"
    android:inputType="textPassword"
    android:padding="10dp"
    android:singleLine="true"
    android:textSize="12sp" />

Dengan cara ini kita bisa merubah Ime Action label di keyboard dengan label yang kita inginkan; Saat mengimplementasikan ini saya menemukan hal menarik, rupanya dengan mengganti ime action label mengakibatkan kita tidak bisa me-listen action Done di onEditorActionListener, sehingga saya menambahkan atribut ime action id (android:imeActionId) yang kemudian saya gunakan untuk mendeteksi action tersebut. Kurang lebih seperti ini caranya:

password.setOnEditorActionListener(new TextView.OnEditorActionListener() {
	@Override
	public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
		if (actionId == mContext.getResources().getInteger(R.id.action_sign_in)){
			// do signin
			return true;
		}
		return false;
	}
});

masih banyak improvement yang bisa dilakukan, dan ini sangat menarik sekali :)

happy coding :)