Visual Board menggunakan ASP dan Javascript

Kali ini aku mencoba untuk berbagi pengalaman membuat aplikasi untuk visual board di area produksi. Visual board yang dimaksudkan adalah papan informasi produktifitas dari line produksi tersebut secara langsung (real time). Dengan base menggunakan aplikasi dari web dengan script ASP dan data database MySQL, visual board ini nantinya akan menampilkan data output dari salah satu line. Data tersebut berupa kode produk, nomor batch produk, target output yang dicapai, produk output yang ada (proses berlangsung),prosentase pencapian produk tersebut, informasi total produk dari line tersebut dalam bulan berjalan dan total prosentase output produk yang telah dilakukan pada line tersebut.

Dengan banyaknya data yang dikeluarkan tersebut, tentunya akan membuat berat proses. Maka harus diantisipasi sebelumnya. Aku menggunakan bantuan javascript untuk proses, agar beban proses tidak terlalu besar pada layar Visual Board.

Dan masih dibebani dengan proses LineDown dan Setup proses untuk tiap line produksi. Yang nantinya akan memproses dan mengukur kinerja produksi per line.

Mungkin langsung saja, berikut capture dari visual board.

Penampakan Visual Board dengan Web

Dari penampakan diatas terlihat informasi Kode produk dan Nomor batch dari produksi line yang berlangsung dalam hal ini Line 2. Kemudian dibagian atas kanan adalah status dari proses Line2 tersebut. Berpindah ke bagian tengah ada tiga kolom, kolom warna biru adalah informasi target output dari produk tersebut, dibagian tengah warna merah informasi untuk aktual output produksi dan dibagian kanan warna orange adalah informasi pencapaian dalam prosentase.

Kemudian kearah bawah lagi adalah informasi total output line dalam bulan berjalan. Dibagain bawah kiri adalah rencana produk-produk selanjutnya yang akan diproduksi dan terakhir dibagian kanan informasi total pencapian line tersebut dalam bulan berjalan dengan target per line yang sudah diinput sebelumnya.

Berikut penampakan unit visual board display dilokasi produksi :

Display Visual board dilokasi produksi (CCTV capture)

Penampakan display diambil dari CCTV

Namun sebelumnya ada proses lain sebelumnya dari visual board tersebut  dua diantaranya adalah proses setup dan apabila line down. Hal tersebut akan dijelaskan lain waktu. Berikut penampakan visual board info lainnya.

Penampakan display untuk proses SETUP produksi dengan aplikasi Web

Penampakan display Line Down produksi dengan aplikasi Web

Begitulah visual board produksi menggunakan aplikasi Web dalam hal ini ASP dan MySQL dibantu dengan javascript.

Dashboard Management berbasis Web

Untuk saat ini aku akan men-share sedikit program yang aku buat untuk dashboard management. Memang sederhana dibandingkan dengan dashboard management yang ada dipasaran dan tentunya berharga sangat wah !!

Awalnya dashboard view ini digunakan hanya untuk me-review output produk dari perusahaan pada tiap-tiap line secara real time. Aku mencoba-coba mencari gambaran tentang dashboard view yang ada dipasaran khususnya luar negeri. Memang ada beberapa contoh dashboard management yang sangat complicated dan sangat high end. Jadi semua informasi bisa diambil dari sana, untuk data per line per produk, data availability, data man hours, data machine hours dan hingga perhitungan OEE. Aku mencoba yang sederhana dulu, yaitu menampilkan hasil output per line hingga per produk dan disertai data prosentase pencapaian per batch produk.

Berikut sedikit capture untuk dashboard tersebut.

Capture Dashboard Output Produk

Dengan berbasis pada ASP dan data dari MySQL, dashboard tersebut bisa dikeluarkan. Tampilan diatas dengan format script ASP. Dan dashboard tersebut juga bisa dibuka dari Android. Berikut penampakan dashboard management yang terpampang di monitor dan juga Android.

Penampakan pada layar peraga

Penampakan dimonitor dan di Android

Aplikasi Web Mobile dengan Barcode Scanner

Kali ini aku akan mencoba share pengalaman tentang membuat aplikasi berbasis web untuk gudang dengan mobile barcode scanner. Aplikasi ini akan berjalan pada mobile barcode scanner dari LXE type MX8 dengan OS Windows CE 5.0 dan koneksi Wifi. Dengan berbasis pada aplikasi yang ada sebelum, menggunakan ASP dan MySQL maka aplikasi tersebut menjadi second level.

Awalnya aplikasi ini digunakan untuk gudang untuk 2 alokasi, yaitu gudang untuk bahan baku dan gudang produk jadi. Dimulai dengan pemataan area gudang tersebut dan pengalokasian area gudang. Masing-masing rak gudang telah dibuatkan identifikasi perkolom dan perbaris, dan per-rak. Aplikasi juga dibuatkan model gambar per area tersebut tentunya dengan keterangan. Berikut capture aplikasi pada web master(non barcode):

Aplikasi master lokasi - non barcode

Tahap selanjutnya membuatkan database master lokasi, tentunya berbasiskan data lokasi yangdibuat sebelumnya. 
Tahap lanjutnya tentunya membuatkan script aplikasi dengan ukuran layar yang sesuai dengan barcode scanner yaitu 2,4 inc. Untuk awalnya halaman login sebagai berikut :

Laman Login aplikasi barcode scanner

Dalam waktu kurang lebih 2 bulan project tersebut selesai, karena jika diceritakan disini pasti lebar x panjang x tinggi akan menjadi luas. Maka berikut capture-capture aplikasi gudang dengan basis Web pada unit LXE type MX8 barcode scaner dengan koneksi Wifi.

 

 
 

Pada dasarnya aplikasi tersebut menyamakan antar muka android, dengan base ASP dan hasilnya seperti terlihat diatas mungkin perlu sedikti polesan agar lebih mirip. Dan berikut penampakan aplikasi pada unit LXE.

Unit LXE typeMX8

Penampakan aplikasi setelah login

   

Penampakan Menu lain

Penampakan menu awal

Demikian sedikit cerita pembuatan dan penampakan aplikasi yang telah dibuat dengan berbasis web untuk aplikasi mobile pada unit Barcode Scanner LXE type MX8 Windows CE 5.0 koneksi Wifi.

  

Windows 10 Technical Preview

Baru melihat preview dari Windows 10 yang ada dibeberapa laman website. Pikiran aku jadi pingin mencoba bagaimana ritualnya, karena untuk Windows 8.1 yang aku pake udah lumayan walau masih ada beberapa kekurangan (tapi memang begitulah manusia selalu kurang). Cari cari preview dari beberapa korban yang sudah duluan merasakan Windows 10 Preview. Berikut beberapa video dari youtube yang terdeteksi telah merasakan Windows 10.
(aku sedang berusaha download ISO file agar bisa merasakan Windows 10)

Mungkin tunggu review dari Windows 10 yang aku coba. Trims

Aplikasi Web ke Android

Yup sekarang waktunya aplikasi web bergeser ke aplikasi Android. Kenapa ? Karena Android sudah mendunia dan merupakan OS sejuta umat buat dadget dari khusus sampai umum dari dadget mahal sampai murah.
Untuk kali ini aku menggunakan aplikasi dari web http://www.appsgeyser.com/en/. Berikut capture dari web bersangkutan :

www.appsgeyser.com

Untuk cara pembuatannya mungkin bisa dijelaskan oleh bloger yang lainnya. Jadi berikut penampakan app di Android dalam hal ini Android Kitkat

Penampakan app pada Android

Penamakan aplikasi dengan Android

Penampakan aplikasi untuk departement Maintenance

Company Profile dengan HTML dan Flash

Suatu kali di tahun 2010, aku mendapatkan tantangan untuk membuatkan Company Profile dengan sesuatu yang berbeda. Awalnya berpikir layaknya sebuah tablet PC yang pada tahun tersebut masih cenderung mahal dan exclusif unitnya. Namun harus menggunakan software apa ?? Kalo software yang itu-itu saja, mungkin jatuhnya penilaian akan sama saja.

Hingga suatu ketika melihat lihat web animasi di jagat maya alias internet, terbesit untuk membuatkan Company Profile dengan Flash yang saat itu masih produk dari Macromedia. Dan karena base aku yang sering menggunakan script ASP dan HTML dibantu dengan javascript, maka aku coba-coba dengan mencari referensi di Google.

Dengan tengok sana dan sini juga dengan materi-materi yang sebelumnya disiapkan, akhirnya dalam waktu hampir 10 hari Company Profile tersebut selesai juga.
Setelah diujicoba dengan para pembesar dan dengan beberapa perubahan, maka hasil akhir Company Profile di approved. Dengan awal launching digunakan pada sebuah pameran antar site yang berlangsung didaerah Ancol di sekitar bulan Mei 2010. Unit yang digunakan untuk tampilan menggunakan layar LCD dari HP type 2209t yaitu jenis LCD Touch Monitor dengan lebar 22 inch dipadukan dengan unit desktop Acer Veriton type L480. Tentunya dengan software bawaan yaitu Windows Seven dengan opsi flash dan javascript terinstall untuk mendukung Internet Explorer 8. Running program HTML tersebut smooth dengan touch monitor, jadi layaknya membuka-buka halaman sebuah buku. Berikut penampakana Company Profil tersebut.

Penampakan Utama Company Profile

Pada saat itu Company Profile tersebut membuat banyak undangan terkagum, hingga owner dari PT Kalbe Farma, Tbk yaitu dokter Boon (maaf nama lengkapnya lupa) cukup lama memandang dan bertanya-tanya. Wah lumayan terbayar hasil kerja keras tersebut. Berikut sisa penampakan Company Profile lainnya.

Aplikasi Web dengan Gaya Metro UI

Aplikasi yang aku gunakan saat ini telah berjalan pada versi 6.2 dengan bahasa pemrograman ASP dan database My SQL.
Saat ini aku juga menggunakan Windows 8.1 sebagai OS komputer yang aku gunakan, tentunya OS ini asli dari perusahaan yang aku singgahi saat ini.
Berbicara bagaimana rasanya menggunakan Windows 8.1, aku pribadi merasa asyik menikmati Windows terakhir ini. Tapi aku tidak akan banyak bicara tentang rasa pada Windows tersebut.
Desain metro UI yang digunakan pada Windows 8.1 sampai membuat aku ingin mengubah tampilan aplikasi ASP yang telah aku develop selama ini dengan tampilan ala Windows 8.1 tersebut, ya tentunya dengan beberapa penyesuaian.
Aku coba memindahkan beberapa halaman aplikasi ASP ke model Metro UI, secara pelan-pelan dan memastikan user tidak terkaget-kaget dengan tampilan baru.

Mungkin langsung saja berikut tampilan baru Aplikasi ASP yang telah aku permak ke gaya Metro UI ala Windows 8.

Desain halaman utama

Jika melihat hasilnya sih keren, tapi prosesnya tidak sedemikian mudahnya. Aku harus ber'mandi'kan hujatan, karena aplikasi sering tidak bisa diakses atau halaman 404-Error.Tapi pada akhirnya lelahku terbayar. Dan berikut beberapa capture lainnya untuk aplikasi yang lainnya tentunya dengan desain ala Windows 8.

Desain aplikasi Document Center Online untuk QS

Desain Metro UI untuk aplikasi Departemen Maintenance

Bangga juga bisa sedikit menyaingi dengan Metro UI pada aplikasi yang telah aku buat...WOW

Perjalanan Server Web yang dibangun

Saat membuat aplikasi dengan basis web pertama kali, aku menggunakan windows 98 IIS tentunya dengan segala keterbatasan disana sini. Pada Windows 98 dinamakan dengan PWS, Personal Web Server dengan batasan salah satunya adalah pengunjung yang terbatas.

Aku mulai berpindah menggunakan server 'numpang' dengan Microsoft Windows 2000. Karena diperusahaan menggunakan produk tersebut untuk data center. Memang jauh berbeda dengan PWS yang pernah aku rasakan tentunya dari segi kecepatan dan koneksi user.

Untunglah dari segi bahasa pemrograman dengan ASP (Active Server Pages) tidak ada perubahan.
Seiring berjalannya waktu dan perubahan pada beberapa server, aku mulai menggunakan aplikasi ASP tersebut ke Windows Server 2003 Standard Edition. Awalnya sih takut, karena dengan peningkatan security pada Windows tentunya akan banyak bug yang akan ditemukan di aplikasi yang telah aku develop sendiri tersebut.
Aku beranikan untuk mencari-cari info ke Google, kira-kira apa saja yang diperlukan sebelum exekusi program ke tempat barunya.
Namun setelah seting dan exekusi, ternyata sama gampangnya untuk setting IIS di Windows 2000 Server.

Diatas adalah capture dari Windows Server 2003 yang digunakan untuk Web Server aplikasi. 
Masih ada rencana untuk ber-migrasi ke Windows Server 2008 R2. Untuk saat ini telah menggunakan dua server untuk aplikasi Web dengan sistem mirroring, agar selalu terjaga ketersediaan sistem online tersebut.

Windows Server 2008 R2

Windows Server 2003

Dan saat ini aku menggunakan dua server tersebut untuk aplikasi, dengan sistem mirroring agar keamanan dan sistem selalu 'Ready'
Berikut sedikit informasi untuk kedua server tersebut :

Windows 2003
Pada tanggal 24 April 2003, Microsoft meluncurkan Windows Server 2003, sebuah pembaruan untuk sistem operasi Windows 2000 Server, yang menawarkan banyak fitur-fitur keamanan yang baru, pemandu “Manage Your Server wizard” yang menyederhanakan peranan sebuah mesin yang menjalankannya, dan juga peningkatan kinerja. Windows Server 2003 menggunakan kernel Windows NT versi 5.2.
Di dalam Windows Server 2003, beberapa layanan yang tidak terlalu dibutuhkan di dalam lingkungan server dinonaktifkan secara default, terutama “Windows Audio” dan “Themes” demi alasan kestabilan; Agar dapat menggunakan suara dan tampilan yang sama dengan Windows XP, pengguna harus mengaktifkannya secara manual, melalui snap-in Microsoft Management Console Services.msc Selain itu, akselerasi perangkat keras untuk kartu grafis juga dimatikan; lagi-lagi pengguna harus mengaktifkannya secara manual, tentu saja jika device driver yang digunakan “bisa dipercayai”.

Windows 2008
Windows Server 2008, adalah sebuah versi baru Windows Server, yang dirilis pada tanggal 27 Februari 2008. Pada saat pengembangannya, Windows Server memiliki nama kode “Windows Server Codenamed Longhorn.” Windows Server 2008 dibangun di atas beberapa keunggulan teknologi dan keamanan yang pada awalnya diperkenalkan dengan Windows Vista, dan ditujukan agar bisa lebih modular secara signifikan, ketimbang pendahulunya, Windows Server 2003.
Windows Server 2008 dikembangkan dari Windows Server 2003 R2 yang sudah terbukti cukup andal dan aman, untuk membantu meringankan tekanan tersebut, dengan mengotomatisasikan tugas pengelolaan harian, memperketat pengamanan, meningkatkan efisiensi dan keandalan sistem.
Feature utama yang menjadi keunggulan Windows Server 2008 ini adalah penyederhanaan tugas administrasi, karena riset internal Microsoft, sekitar 70 persen anggaran belanja TI dihabiskan untuk tugas pengelolaan harian.
Sedikit info untuk kedua Server tersebut sebagai berikut :
Windows Server 2003 merupakan sebuah versi sistem operasi Microsoft Windows yang ditujukan untuk pasar server korporat. Nomor versi internalnya adalah Microsoft Windows NT 5.2 build 3790. Dulunya dikenal dengan .NET Server, Windows .NET Server, atau Whistler Server. Sistem operasi ini merupakan kelanjutan dari sistem Windows 2000 Server.
Pada bulan Desember 2005, Microsoft merilis Windows Server 2003 R2, yang merupakan Windows Server 2003 Service Pack 1 ditambah dengan beberapa paket tambahan. Di antara semua fitur-fitur barunya adalah fitur-fitur manajemen untuk kantor-kantor cabang, dan integrasi identitas yang luas.

Web Server

Sebelumnya telah membahas project awal untuk aplikasi dengan web. Tapi sebenarnya bagaimana sejarahnya web tersebut.

Sejarah Web pertama kali :

Pada tahun 1980, Tim Bernes-Lee , kontraktor independen di Organisasi Eropa untuk Riset Nuklir (CERN), Swiss , dibangun Enquire , sebagai database pribadi orang dan model perangkat lunak, tetapi juga sebagai cara untuk bermain dengan hypertext

 ; setiap halaman baru informasi dalam Enquire harus terhubung dengan halaman yang ada.
Pada tahun 1984 Berners-Lee kembali ke CERN, dan dianggap permasalahannya presentasi informasi: fisikawan dari seluruh dunia diperlukan untuk berbagi data, dan tanpa mesin umum dan tidak ada perangkat lunak presentasi umum. Dia menulis sebuah proposal Maret 1989 untuk "database hypertext besar dengan link diketik", tapi itu dihasilkan bunga kecil. Bosnya, Mike Sendall, mendorong Berners-Lee untuk mulai menerapkan sistemnya pada suatu yang baru diperoleh NeXT workstation. Ia menilai beberapa nama, termasuk Mesh Informasi, Tambang Informasi (ditolak karena abbreviates ke TIM, pencipta nama WWW) atau Tambang Informasi (ditolak karena abbreviates untuk MOI yang "Me" dalam bahasa Perancis), tetapi menetap di World Wide Web. 

Web Server :

Adalah software yang menjadi tulang belakang dari world wide web (www). Web server menunggu permintaan dari client yang menggunakan browser seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser lainnya. Jika ada permintaan dari browser, maka web server akan memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML (standar general markup language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja. Web server, untuk berkomunikasi dengan client-nya (web browser) mempunyai protokol sendiri, yaitu HTTP (hypertext transfer protocol).

Dengan protokol ini, komunikasi antar web server dengan client-nya dapat saling dimengerti dan lebih mudah. Seperti telah dijelaskan diatas, format data pada world wide web adalah SGML. Tapi para pengguna internet saat ini lebih banyak menggunakan format HTML (hypertext markup language) karena penggunaannya lebih sederhana dan mudah dipelajari. Kata HyperText mempunyai arti bahwa seorang pengguna internet dengan web browsernya dapat membuka dan membaca dokumen-dokumen yang ada dalam komputernya atau bahkan jauh tempatnya sekalipun.

Web Server Web server merupakan mesin dimana tempat aplikasi atau software beroperasi dalam medistribusikan web page ke user, tentu saja sesuai dengan permintaan user.

Cara Kerja :Hubungan antara Web Server dan Browser Internet merupakan gabungan atau jaringan Komputer yg ada di seluruh dunia. Setelah terhubung secara fisik, Protocol TCP/IP (networking protocol) yg memungkinkan semua komputer dapat berkomunikasi satu dengan yg lainnya. Pada saat browser meminta data web page ke server maka instruksi permintaan data oleh browser tersebut di kemas di dalam TCP yg merupakan protocol transport dan dikirim ke alamat yg dalam hal ini merupakan protocol berikutnya yaitu Hyper Text Transfer Protocol (HTTP). 

HTTP ini merupakan protocol yg digunakan dalam World Wide Web (WWW) antar komputer yg terhubung dalam jaringan di dunia ini. Untuk mengenal protocol ini jelas sangan mudah sekali dimana setiap kali anda mengetik http://… anda telah menggunakannya, dan membawa anda ke dunia internet. Data yg di passing dari browser ke Web server disebut sebagai HTTP request yg meminta web page dan kemudian web server akan mencari data HTML yg ada dan di kemas dalam TCP protocol dan di kirim kembali ke browser. Data yg dikirim dari server ke browser disebut sebagai HTTP response. Jika data yg diminta oleh browser tidak ditemukan oleh si Web server maka akan meninbulkan error yg sering anda lihat di web page yaitu Error : 404 Page Not Found.

Aplikasi Web ASP koe

 Aplikasi pertamaku untuk perusahaan yang saat ini aku naungi. Aplikasi tersebut berbasis web dengan bahasa pemrograman ASP dengan javascript dan database dengan My SQL. Awalnya aplikasi ini dianggap remeh pada tahun 2006, karena aplikasi yang jauh lebih besar mulai akan diterapkan di site plant yang lain.
Awalnya aku mulai belajar dari sistem kerja dilapangan dari para operator produksi dan operator gudang pada perusahaan tersebut. Dari excel-excel yang telah miliki dan gunakan selama ini. Aku mencoba memindahakan beberapa form excel mereka untuk aku ubah ke format sistem dalam hal ini dengan bahasa ASP.
Memang sewaktu pembuatan aku tidak didukung oleh para legislator perusahaan karena "ya...itu masalah remeh !!", mereka masih sibuk dengan sistem yang sudah ada yaitu excel mania. Beberapa capture dari program yang telah aku buat seperti berikut ini :


Semua sangat sederhana. Tapi itu niat baikku untuk membuatkan sistem 'yang remeh'.
Dengan pembuatan sistem yang tidak didukung oleh management, aku buktikan bahwa sistem tersebut berjalan dan sesuai. Dengan Server badget yang 'numpang' dengan data center, aku tunjukkan 'ini lho ada !!'.

Dan sedikit ditahun 2007 sistem tersebut mulai digunakan walau masih ada beberapa bug yang masih harus aku cari dan perbaiki sendiri.