Komputer 8-bit: Revolusi berawal dari microprocessor

Pada tulisan sebelumnya kita dapat merunut kembali awal dari dunia komputer dimulai dari penciptaan IC dan microchip oleh Bob Noyce dan kawan-kawan yang kemudian mendirikan Intel. Dari sinilah sebenarnya revoulusi bermula, ketika para engineer berhasil mengkreasikan rangkaian logic yang tersusun pada prosessor komputer jaman itu menjadi sebuah rangkaian logic ukuran micro ( 10 pangkat minus 6) yang memiliki kekuatan komputasi yang tidak berbeda. Para engineer ini menyadari suatu saat akan ada engineer jenius lainnya diluar sana yang akan mengetahui cara menggunakan dan kekuatan microprosessor ini.

Intel mengeluarkan microprosessor 4bit 4004 dan kemudian 8 bit 8080 pada awal tahun 70an, disusul dengan MOS (pecahan motorola) yang berkreasi dengan versi 6800/6502 dengan harga lebih murah. Inilah ic microprocessor yang dapat dikatakan pioneer dijamannya diawal era 70an. IC ini tidak dapat melakukan apa-apa sebelum dirakit dan perintah berupa bahasa mesin diberikan kedalamnya. Tiap microprocessor memiliki opcode dan instruction set tersendiri yang merupakan bahasa mesin dari tiap perintah yang oleh pengguna ingin diberikan kepadanya. Disinilah timbul keterkaitan antara para desainer IC dengan para desainer system komputerdimana mereka memiliki mimpi yang sama padahal tidak berhubungan secara langsung.

opcode / bahasa mesin dari datasheet MOS 6502

Dan benar saja ALTAIR 6800 membuka segalanya dengan KIT komputer micro mereka yang memiliki sebuah rancang bangun minimal (minimum system) . Rancang bangun minimum system sebuah komputer adalah memiliki sebuah otak yang bernama microprocessor, sebuah tempat penyimpanan data-data sementara yang bernama RAM, kemudian memiliki juga kontrol Input-Output dan sebagai tambahan diberikan ROM sebagai penyimpan data program yang akan dibaca saat menghidupkan komputer.

Minimum system dari sebuah komputer mini

Janganlah dikira ini mudah sebelum para jenius dibidang software membuat bahasa pemrograman. Benar saja, semua perintah yang diberikan kedalam microprocessor harus diberikan melalui kode binner - hexa kedalam microprocessor, seperti halnya perintah pertama yang diberikan oleh steve wozniak kedalam komputer apple 1 nya (dicuplik dari manual komputer APPLE 1 yang bisa diunduh disini)

Lihatlah kode perintah pada petunjuk kedua (SECOND) dimana yang dimasukkan adalah kode opcode untuk memerintahkan komputer APPLE 1 menampilkan karakter ascii secara terus menerus pada layar TV. Begitu susahnya dan hanya orang yang mengetahui opcode yang benarlah yang dapat menjalankan suatu program pada komputer jaman "batu" ini. Sampai muncullah intrepreter bahasa pemrograman BASIC yang dibuat oleh bill gate pada komputer ALTAIR dan kemudian diterapkan oleh steve wozniak pada komputer APPLE. Tentu saja setelah itu para engineer yang bergerak dibidang software menjadi lebih tertarik untuk membuat software-software yang menarik, game yang asyik dan berbagai jenis aplikasi yang tidak terbatas oleh kemampuan otak manusia.

Berikut ini sebuah video youtube yang menampilkan acara komputer "BIT AND BYTES" episode pertama yang akan menggambarkan generasi komputer 8bit pertama dan bagaimana primitif nya komputer yang mereka pakai. Dan jangan ketawa, karena itulah awal dari segala kemajuan teknologi komputer saat ini. Tanpa mereka maka iphone yang kalian pegang tidak akan pernah ada !!

Read More

Komputer 8-bit : Revolusi yang berhasil membawa komputer ke "rumah"

Adalah mimpi dari beberapa penghobi elektronika yang tergabung pada club "HOMEBREW COMPUTER CLUB" di palo alto - california (yang kemudian menjadi silicon valley), mimpi itu adalah membawa komputer yang segede rumah dan hanya dimiliki oleh korporasi besar menjadi dapat dibawa kerumah. Hanya sebuah mimpi ketika suatu artikel pada majalah popular electronics ditampilkan pembahasan KIT elektronika yang dapat dibeli dan kemudian dirakit sebagai "Komputer 8-bit". Ketika pertemuan mingguan para kutu buku itu menjadi sangat riuh karena semua membicarakan tentang KIT ALTAIR 8800 buatan MITS pada tahun 1975. Mulailah mereka mendapatkan gambaran mimpi mengenai komputer rumah, walau hanya dapat mengerjakan program  dengan input berupa tombol toogle dan output berupa LED merah berjejer, tapi itulah komputer 8 bit pertama yang dapat menjalankan perintah berdasarkan bahasa pemrograman mesin seperti halnya komputer mainframe yang biasanya dapat disewa secara time-sharing terminal.

Saat itu seorang jenius bernama steve wozniak sedang mengerjakan beberapa proyek kalkulator di perusahaannya yaitu HP, atas bujukan steve job yang bekerja di perusahaan game ATARI mengajaknya untuk menjawab tantangan bos ATARI (yang pada saat itu ngetop dengan game PONG) untuk membuat game serupa pong yang bernama breakout, dengan tantangan merancang hardware dengan jumlah IC kurang dari 50. Saat itu steve wozniak memang sedang tertarik dengan game pong dan dia berhasil membuatnya sendiri pada pesawat TV dirumahnya dan kemudian berhasil membuat game breakout dengan ic yang kurang dari 50 buah. Woz juga (yang kemudian memiliki patent tentang menulis karakter di TV) berkreasi untuk membuat sebuah terminal yang dapat menghubungkan ARPANET (cikal bakal internet) via modem dengan pesawat televisi dan sebuah keyboard ASCII.

Sampailah berita bahwa ada seorang programmer bernama Bill Gates yang membuat bahasa BASIC pada ALTAIR dan mempersingkat proses pemrogramannya. Woz yang saat itu melihatnya mendapatkan sebuah ide brilian untuk menggabungkan alat terminal arpanet nya ke dalam sebuah komputer 8bit. Dan berkutatlah dia siang malam untuk membuat komputer pertama (yang memiliki keyboard dan layar monitor) dan steve jobs bertugas untuk menjualnya di toko elektronik. Awalnya mereka hanya menjual pada beberapa orang akan tetapi belum berbentuk rakitan, hanya berupa PCB tersolder yang kemudian oleh penjual ditoko diberikan power suply dan kotak / box yang terbuat dari kayu atau ada yang menaruhnya di dalam tas koper.

"Ini bisa dijual" kata steve jobs, tapi steve yang satunya mengatakan "belum sempurna". Dan memang akhirnya woz berhasil menyempurnakannya menjadi sebuah komputer "color" yang tak ada tandingannya saat itu yaitu APPLE II. Wah ...mereka kaya...steve jobs yang berjiwa bisnis berhasil mendatangkan investor, woz merancang software dasar dan 5 tahun kemudian APPLE INC menjadi perusahaan FORTUNE 500 dengan harga saham yang terus merangkak naik. Luar biasa ...

Apple II merupakan komputer 8 bit pertama dambaan setiap orang pada masanya. Dengan bundling software yang sangat revolusioner yaitu VISICALC (mbahnya excel - spreadsheet), penjualan bak kacang godog di layar tancap. Walau pesaing bermunculan seperti Commodore PET, Radio shack TRS -80, dan yang paling berat adalah ketika raksasa komputer IBM mengeluarkan IBM PC, tetap saja APPLE II memiliki penjualan yang fantastis sampai akhir era 80-an. 

Read More

Tutorial XML Untuk Aplikasi Dinamis Android - Adobe Air

Setelah kita berhasil membuat swf loader, kali ini akan kita manfaatkan keunggulan dari flash-adobe air lainnya yakni dapat melakukan load database berbasis XML yang sangat simpel dan berguna. Dengan menggunakan database "Tree" yang dimiliki nya maka akan sangat mudah untuk melakukan update isi dari suatu aplikasi dinamis hanya dengan merubah satu file text saja. Untuk belajar dasar-dasar mengenai flash (actionscript3) dan xml dapat membaca tutorial yang sangat menarik disini.

Format file xml dimulai dengan tag  <?xml version="1.0" encoding="UTF-8"?> , selanjutnya disusun berdasarkan tag < nama > </nama> yang dinamakan tiap node dan boleh memiliki children node didalamnya. Perhatikan kode berikut :

<GALLERY>

<IMAGE TITLE="gambar 1">

<FILE>gambar1.jpg</FILE>

<TEKS>ini teks untuk gambar1</TEKS>

</IMAGE>

<IMAGE TITLE="gambar 2">

<FILE>gambar2.jpg</FILE>

<TEKS>ini teks untuk gambar2</TEKS>

</IMAGE>

<IMAGE TITLE="gambar 3">

<FILE>gambar3.jpg</FILE>

<TEKS>ini teks untuk gambar3</TEKS>

</IMAGE>

</GALLERY>

kode diatas merupakan kode XML dari GALLERY yang memiliki node <IMAGE> yang beranak<FILE> dan <TEKS>. Panjang dari node dan anak dari GALLERY dapat disesuaikan sesuai keinginan asal dengan format yang seragam. Node IMAGE disini memiliki 3 anggota, sehingga akan menjadi array yang sangat simple jika dipindahkan ke FLASH dengan contoh test script berikut: 

simpan file xml tadi dengan nama "test.xml"

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);
trace(myXML.IMAGE.length());
trace(myXML.IMAGE.*);
trace(myXML.IMAGE[0].TEKS);
trace(myXML.IMAGE.(@TITLE=="gambar 3").FILE);

}

output dari tracing scipt diatas adalah :

3
<FILE>gambar1.jpg</FILE>
<TEKS>ini teks untuk gambar1</TEKS>
<FILE>gambar2.jpg</FILE>
<TEKS>ini teks untuk gambar2</TEKS>
<FILE>gambar3.jpg</FILE>
<TEKS>ini teks untuk gambar3</TEKS>
ini teks untuk gambar1
gambar3.jpg

Dan dari hasil tracing diatas dapat dilihat betapa simplenya database dapat diubah-ubah sesuai keinginan, semisal kita ingin merubah nama gambar ke 3 tinggal merubah saja nama filenya sesuai alamat yang dituju. contoh script berikut jika kita menginginkan menampilkan gambar pada file lokal melalui XML

file gambar1.jpg , gambar2.jpg dan gambar3.jpg harus ada di lokasi yang satu folder dengan aplikasi.

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);

var pictURL:String = myXML.IMAGE[1].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);

}

output yang keluar adalah gambar2.jpg pada layar 

jika kita memiliki text field dengan nama textnya, maka bisa juga di tambahkan seperti berikut:

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);

var pictURL:String = myXML.IMAGE.(@TITLE =="gambar 3").FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);
textnya.text=myXML.IMAGE.(@TITLE == "gambar 3").TEKS;

}

Maka output yang didapat adalah flash meload gambar3.jpg serta menampilkan isi TEKS yaitu: "ini teks untuk gambar 3". Mudah bukan? Ayo kita lanjut saja ke praktek beneran pada adobe flash cs5.5 . kali ini kita akan membuat loader file xml, dengan gambar yang bersumber di internet dan teks dari file XML yang diupload ke server.

Sesuai pembahasan loader swf sebelumnya, kita akan membuat animasi pre-loader dengan menggunakan tween, sehingga kelihatan halus saat menunggu file xml serta gambar di load ke layar android. Kita membuat animasi loader serta textbox dengan UI component berupa scroll slider.

Langsung saja perhatikan code berikut dan kita akan bahas setelahnya.

var myXML:XML;
var myLoader:URLLoader = new URLLoader();
var urutan:Number=0; //urutan gambar
tulisan.visible=false; //tulisan
uiScroller.visible=false; //text scroller

//xml loader,  contoh filenya ada di server berikut
//ubah sesuai keinginan (lokal juga bisa)

myLoader.load(new URLRequest("http://www.flexievdo.net/test.xml"));

//listener
myLoader.addEventListener(Event.COMPLETE, processXML);

//pengatur gambar
var pictLdr:Loader = new Loader();
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, kecilkan);

//geser-geser secara swap
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);


//function untuk menyeuaikan gambar

function kecilkan(e:Event):void {
pictLdr.x=10;
pictLdr.y=10;
pictLdr.width=300;
pictLdr.height=310;
trace("selesai");
tulisan.visible=true;
uiScroller.visible=true;

//tampilkan setelah gambar selesai di load

nama.text=myXML.IMAGE[urutan].@TITLE;
tulisan.text=myXML.IMAGE[urutan].TEKS;
ke.text="Gambar ke "+ String(urutan + 1) + " dari " + String(myXML.IMAGE.length());
uiScroller.update();

loaded.visible=false;

}


//pemroses xml

function processXML(e:Event):void {
myXML = new XML(e.target.data);


loaded.visible=true;

var pictURL:String = myXML.IMAGE[urutan].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);



}


//swipe babe !!

function onSwipe(evt:TransformGestureEvent):void {
 
//swipe akan menentukan urutan gambar
 
 if( evt.offsetX == -1){
 
 urutan++ ;
 if(urutan >= myXML.IMAGE.length()) {
  urutan=0;
 }
 
 }

 else if( evt.offsetX == 1){
 
 urutan-- ;
 if(urutan < 0 )  {
  urutan= (myXML.IMAGE.length() -1);
 }
 
 }

//hayo kita hancurkan kemudian tampilkan lagi

if(evt.offsetX == 1 || evt.offsetX == -1 )
{

tulisan.visible=false;
uiScroller.visible=false;
loaded.visible=true;
nama.text="";
tulisan.text="";
ke.text="";
uiScroller.update();


removeChild(pictLdr);
var pictURL:String = myXML.IMAGE[urutan].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);
}

}

Terlihat mudah saja, bahwa tiap file XML memiliki format sesuai contoh awal pada test.xml dan informasi yang akan digunakan berupa @TITLE, FILE, dan TEKS . Kita akan memainkan proses swipe untuk merubah posisi dari IMAGE[urutan] dan kemudian dengan image loader akan diresize sesuai panjang dan lebar dari layar HP Android. Sebagai keunggulan dari xml dimana kita dapat mengambil source gambar dari mana saja seperti contoh berikut, dan file tutorial lengkap dapat diunduh disini.


<GALLERY>
<IMAGE TITLE="BALI ISLAND OF GOD">
<FILE>http://us.123rf.com/400wm/400/400/saiko3p/saiko3p1107/saiko3p110700147/

10085679-beauty-rice-terrace-with-palms-on-bali-island.jpg</FILE>
<TEKS>Bali, the famed Island of the Gods, with its varied landscape of hills 

and mountains, rugged coastlines and sandy beaches, lush rice terraces and 

barren volcanic hillsides all providing a picturesque backdrop to its 

colourful, deeply spiritual and unique culture, stakes a serious claim to be 

paradise on earth. With world-class surfing and diving, a large number of 

cultural, historical and archaeological attractions, and an enormous range of 

accommodations, this is one of the world's most popular island destinations 

and one which consistently wins travel awards. Bali has something to offer a 

very broad market of visitors from young back-packers right through to the 

super-rich.
</TEKS>
</IMAGE>
</GALLERY>



Jangan lupa untuk mempublish aplikasi adobe air - android dengan permission "Internet"


-=UPDATE=-


Contoh aplikasi yang telah dibikin dengan methode xml dan ditambah dengan image caching




SELAMAT MENCOBA

Read More

TUTORIAL Swf loader Untuk membuat Aplikasi Android yang Dinamis

Ketika aplikasi android yang ingin dibuat ditujukan dapat memberikan informasi yang dinamis atau berubah-ubah, maka diperlukan proses pengunduhan konten dari isi aplikasi dari server yang telah ditentukan. Inilah menjadi keunggulan dari paltform adobe air, dimana seperti aplikasi induknya yaitu adobe flash memiliki fasilitas untuk mengunduh (load) file media seperti jpg, gif, video dan yang paling umum adalah melakukan load terhadap file format swf. Pada tutorial kali ini diperhatikan bahwa diperlukan web server via internet atau server http lokal yang dapat diakses melalui HP Android kamu.

(klik pada gambar untuk memperjelas)

Seperti pada tutorial terdahulu maka kita akan memerlukan adobe flash CS5.5 ke atas untuk mendesain applikasi berbasis adobe air ini. Jadi jika masih bingung harap menuju ke tutorial dasar pada topik GPS. Karena kali ini kita akan berhubungan dengan proses loading, maka kita butuhkan suatu animasi loading yang bebas dapat dirancang dan tentunya dengan flash tidak menjadi masalah. Pada contoh ini dibuat gambar gear yang berputar ketika proses loading. Jika menginginkan proses loading membutuhkan penunjukan persentase  loading maka ditambahkan textfield untuk menulisnya seperti contoh dibawah.

Gambar animasi gear berputar dengan proses tween yang sangat sederhana

 Gambar Textfiled persen loading

Gambar dibawah ini menunjukkan proses pembuatan isi dari file swf yang akan di unduh atau di load oleh aplikasi, kali ini akan dibuat dengan nama " isi.swf ". Format file dapat berupa file media apa saja yang mungkin dapat dikenali oleh flash seperti jpg, gif, mov dan sebagainya. Setelah di compile atau disimpan dalam format dan ukuran yang pas, maka file tersebut harus di upload pada webserver internet atau jika dirumah terdapat komputer yang menggunakan wifi, maka dengan jaringan add-hoc via wifi serta server apache , xampp dan lain sebagainya , file ini dapat diupload secara lokal. Pada contoh ini file yang akan di load berupa file swf dengan alamat : http://www.flexievdo.net/isi.swf

Lanjutkan dengan merancang script pada frame dan layer khusus (tanpa ada bentuk geometri lainnya ) dan buatlah script untuk melakukan load file swf tadi seperti contoh berikut:

var request:URLRequest = new URLRequest("http://www.flexievdo.net/isi.swf"); //ubah sesuai file yg akan di load
var loader:Loader = new Loader() 


loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
loader.load(request); 
addChild(loader);




function onLoaderComplete(event:Event):void
{

loadan.visible=false;
trace("complete");

}

Pada contoh diatas terdapat script yang menunggu Event.COMPLETE sehingga animasi loading gear dapat dihilangkan dari tampilan layar saat file telah selesai diunduh. Jika diperlukan penulisan persentase file yang sudah di load, maka tambahkan event seperti contoh berikut yang akan ditulis pada textfield "persen".

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onload);


function onload(evt:ProgressEvent):void 
{ 
var perc:Number = evt.bytesLoaded / evt.bytesTotal; 
loadan.persen.text = Math.ceil(perc * 100).toString(); 
trace(perc);
} 

Kemudian kalau mengingat bahwa kadang-kadang file swf  atau gambar yang diload terlalu besar atau kekecilan, berdasarkan tutorial gesture sebelumnya maka tambahkan saja script gesture sehingga menjadi lebih menarik. Kali ini kita tambahkan GESTURE_PAN yang merupakan gesture dengan dua jari untuk menggeser layar yang terlihat kegedean ke posisi yang diinginkan. 

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);

function onZoom(evt:TransformGestureEvent):void {
 
 
loader.scaleX *= evt.scaleX;
loader.scaleY *= evt.scaleY;
 
}

function onPan(evt:TransformGestureEvent):void
{
loader.x += evt.offsetX;
loader.y += evt.offsetY;
}

Jangan lupa untuk proses publish menggunakan permission INTERNET karena server akan diakses melalui internet.

TAMBAHAN

Error handling jika file tidak bisa diload karena network error , dapat dilihat seperti contoh berikut

jadi kita membuat tombol yang berisi tulisan bahwa loading error, kemudian akan muncul pilihan retry. Untuk itu ketika awal tombol kita tombol.visible=false; , lalu ketika error terjadi akan dihandle oleh error handling seperti contoh script berikut ini

tomret.visible=false; //tomret nama instance tombol retry

//error handler listener
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loaderIOErrorHandler);
//listener dari tombol
tomret.addEventListener(MouseEvent.CLICK, clicked1);

function clicked1(event:MouseEvent):void
{
tomret.visible=false;

loader.load(request); 
addChild(loader);
}

//jika IO error maka ini yang dipanggil
function loaderIOErrorHandler(evt:IOErrorEvent):void
{
 
 trace("error broo!");
 tomret.visible=true;

 
}

File tutorial selengkapnya dapat di download disini



SELAMAT MENCOBA

Read More