Universal Apps

Apa itu Universal Apps? Universal apps merupakan sebuah metode yang disediakan oleh windows untuk membuat aplikasi dimana aplikasi tersebut hanya dibuat sekali tetapi aplikasi tersebut mampu untuk berjalan pada platform Desktop Windows 8.1 sekaligus Windows Phone 8. Cara kerja dari sistem ini adalah dengan menggunakan Shared code dimana code yang ada akan dapat digunakan baik pada aplikasi Desktop Windows 8.1 maupun aplikasi Windows Phone 8.

Struktur dari Universal Apps sendiri terbagi menjadi 3 bagian project yakni :

• Windows
• Windows Phone
• Shared

Untuk project Windows dan WIndows Phone mungkin sudah biasa, pada project Shared terdapat shared code yang dapat digunakan oleh kedua project lainnya baik Windows maupun Windows Phone. Contohnya pada Universal Apps dengan javascript, pada project shared akan berisi file javascript dengan ekstensi .js. Selain itu juga terdapat Universal Apps dengan menggunakan bahasa C# dan juga C++

Tools yang dibutuhkan untuk membangun Universal Apps adalah Microsoft Visual Studio 2013 Build 2 atau Microsoft Visual Studio 2015 Technical Preview. Untuk membuat project Universal Apps, sama seperti sebelum nya kita perlu klik FILE -> NEW -> Project. Pilih bahasa yang diinginkan, lalu pilih project dengan tulisan Universal Apps. Setelah di create, maka pada Solution Explorer akan muncul struktur dari Universal apps dengan 3 bagian project seperti yang dijelaskan diatas

 

C#

C#^{[note 2]} (pronounced as see sharp) is a multi-paradigm programming language encompassing strong typing, imperative,declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines. It was developed by Microsoft within its .NET initiative and later approved as a standard by Ecma (ECMA-334) and ISO (ISO/IEC 23270:2006). C# is one of the programming languages designed for the Common Language Infrastructure.

Diatas merupakan kutipan pengertian C# yang saya ambil dari wikipedia. C# adalah bahasa pemrograman yang menurut saya powerfull, cukup mudah digunakan, fleksibel dan banyak digunakan dan dibutuhkan di dunia industri. C# berbasis Object Oriented Programming, sehingga kita akan banyak menggunakan class - class didalam nya.
Pertama kita akan belajar cara pendeklarasian dan penginisialisasian variabel.

string Nama;
Nama = "Andi";

Kemudian kita belajar untuk membuat class

class Mobil{
        string merk {set; get;}
        int KapasitasMesin {set; get;}
}

class Program
{
    static void Main()
    {
        Mobil Avanza = new Mobil();

        Avanza.merk = "Toyota";

        Avanza.KapasitasMesin = 1500;
        System.Console.WriteLine("Avanza Memiliki Merk " + Avanza.merk + "dengan kapasitas mesin" + Avanza.KapasitasMesin);
    }
}

Jika ingin membuat constructor kita tinggal melakukan : 

class Mobil{

        Mobil()

        {

                  Roda = 4;

        }

        int Roda;

        string merk {set; get;}

        int KapasitasMesin {set; get;}

}

Visual Studio

Bagi yang belum tahu, microsoft Visual Studio adalah salah satu  IDE atau compiler yang digunakan oleh banyak developer untuk membangun banyak aplikasi dengan bahasa pemograman mencakup C, C++, C#, JavaScript, ASP dan lain sebagainya. Dengan tools ini, kita juga dapat coding dengan lebih mudah karena terdapat fitur auto complete yang sangat berguna bagi kita yang sering lupa dengan suatu syntax tertentu. Yang terbaru, Visual Studio 2015, kabarnya akan dapat membangun aplikasi pada iOS dan Android dalam sekali coding dengan menggunakan IDE yang powerfull ini. Namun saya belum sempat mencobanya karena masih banyak pekerjaan yang harus saya kerjakan.

Nah kali ini saya akan mengajarkan bagaimana cara untuk membuat sebuah aplikasi desktop menggunakan tools Visual Studio 2013.

Pertama, pastikan kita telah melakukan install Visual Studio 2013 pada PC atau laptop kita. Silahkan download disini

Kedua, Jalankan aplikasi Microsoft Visual Studio 2013. Setelah selesai loading, klik menu File - Pilih New Project / Solution. Maka akan muncul tampiplan dibawah ini

untuk kali ini saya akan mendemokan penggunaan HTML CSS dan Javascript pada aplikasi windows 8. oleh karena itu, saya pilih javascript pada tab template.

Tampilan default.html(pada windows app) akan seperti ini. Disinalah kita memulai Coding HTML

Buat script baru dengan cara klik kanan pada file js(pada shared folder, akan dijelaskan nanti pada Universal Apps) beri nama script.js. isikan code javascript sesuai yang anda inginkan

Tambahkan juga CSS sesuai kreativitas anda pada default.css

Untuk melihat hasilnya silahkan pencet f5 atau klik tombol play (segitiga hijau) dengan tulisan Local Machine. Punya saya tampak seperti ini

Mudah bukan?? HTML bukan hanya digunakn untuk website, html dgn bantuan visual studio 2013 dapat menjadi aplikasi pada Windows App dan juga Windows Phone App.. Keren Bukan??

CSS

Menurut W3School, kiblatnya orang buat belajar bikin web, CSS adalah

• CSS stands for Cascading Style Sheets
• CSS defines how HTML elements are to be displayed
• Styles were added to HTML 4.0 to solve a problem
• CSS saves a lot of work
• External Style Sheets are stored in CSS files

Nah ringkasnya dapat saya katakan bahwa CSS itu adalah sebiuah markup language yang digunakan untuk memanipulasi tampilan yang ada pada sebuah website atau aplikasi dengan web view. CSS dapat mengatur font, warna, dan lain - lain dari sebuah text, tag maupun background atau elemen - elemen tertentu dalam HTML. Disarankan untuk memahami HTML dahulu sebelum memulai "bermain" dengan CSS. CSS sebaiknya digunakan secara eksternal, artinya CSS diletakan pada file lain dengan ekstensi .css dan di link atau reference ke file webpage dengan ekstensi .html (bisa juga yang lain).

Cara CSS dapat memanipulasi suatu elemen pada HTML adalah dengan menggunakan SELECTOR pada id - id atau class - class atau tag tertentu yang telah dibuat dalam HTML. Untuk memanipulasi tampilannya dapat digunakan atribut atau properties dari CSS yang sangat variatif. Langsung saja kita mulai "coding" nya tanpa perlu panjang lebar lagi.

Pertama saya sudah memiliki HTML page dengan code yang mengandung suatu tag (dalam konteks ini saya asumsikan tag )

Kedua, Siapkan file dengan ekstensi .css (dapat dibuat dengan text editor) 

p {  color: red;    text-align: center;}

Penggalan code diatas dapat dibaca : untuk setiap tag p pada html berikan warna merah dan text-align center. Selain tag, CSS juga dapat memilih class (.) atau id(#) dalam HTML

.ClassCSS {    color: red;    text-align: center;}

Penggalan code diatas dapat dibaca : untuk setiap element dengan class ClassCSS pada html berikan warna merah dan text-align center.

#idCSS{    color: red;    text-align: center;}

Penggalan code diatas dapat dibaca : untuk setiap element dengan id idCSS pada html berikan warna merah dan text-align center. Namun id harus unik dan tidak boleh sama pada elemen lain dalam satu page, sehingga css ini hanya akan dijalankan satu kali pada id tersebut.

Untuk CSS3 terdapat efek lain yang lebih keren! Anda dapat tahu lebih banyak tentang CSS dari W3School

Belajar HTML dan JavaScript

Apa itu HTML? Html adalah singkatan dari hypertext markup language, ”bahasa” yang biasa digunakan untuk coding pada sebuah website. Namun HTML ini bukan lah benar – benar coding, HTML hanya bahasa markup dan tidak bisa memanipulasi data (hanya berupa tampilan). Sedangkan untuk menjalankan logic atau logika dari pemrograman kita membutuhkan “bahasa lain” yang mendukung HTML contohnya adalah server language seperi PHP, ASP dan scipting language seperti javascript dan jquery.

Persiapan; untuk persiapan coding HTML dan Javascript, kita perlu mendownload software atau compiler seperti visual studio atau eclipse. Kita hanya membutuhkan sebuah web browser dan sebuah text editor seperti notepad (kurang dianjurkan, karena tampilan sulit), notepad++, sublime text, dan lain – lain. Pada HTML, selalu ada yang namanya tag pembuka dan penutup contoh :

‘The quick brown fox jump over the lazy dog
’. Nah yang disebut tag pembuka adalah ‘’ dan penutupnya ‘
’. Ada banyak sekali tag pada HTML dan juga HTML 5 (yang terbaru, terdapat canvas, video player, music player, datepicker, number,dll).

Javascript adalah bahasa yang dapat memanipulas HTML. Basis dari javascript adalah bahasa pemrograman java yang terkenal dengan object oriented nya. Untuk memasukan javascript ke HTML dibutuhkan tag ‘’ langsung saja saya contohkan coding nya.

http://ideone.com/HoyHgB

Di postingan selanjutnya, kita akan belajar bagaimana mempercantik tampilan dengan CSS

Belajar Google Maps ??

Hah?? gugel meps perlu dipelajarin?? yupss bagi seorang developer google maps bukan hanya sebuah aplikasi yang dapat dipakai saja sebagai pencari alamat, tempat atau hal hal lainnya. Google maps adalah sebuah permainan yang sangat menarik untuk di "oprek - oprek" alias dikembangkan sedemikian rupa sehingga menghasilkan sesuatu yang lebih dari sebelumnya..

Kali ini saya akan membagi beberapa informasi mengenai Google Maps API (bukan api panas ya :p tapi Application Programming Interface) yang dapat membantu developer menggunakan "hasil olahan" dari sang empunya aplikasi, embah gugel. Banyak yang bisa dilakukan oleh API ini dengan aplikasi maps, contoh sederhananya, dengan api ini kita dapat melihat lokasi dengan mengirimkan parameter longitude dan latitude suatu tempat, menambahkan point - point location tertentu dan kerennya, api ini dapat memberikan informasi tempat sekitar berdasarkan category tempat beserta informasi alamat serta tempat tersebut sudah tutup / masih buka. Hal ini lah yang saya pelajari untuk dapat menciptakan aplikasi Cafe In untuk windows 8.1 dan Cafe In untuk windows Phone 8. Bagaimana penggalan code yang diperlukan untuk mengolah data api seperti ini?? Berikut saya berikan penggalan code dari Cafe In ini dalam basis Javascript dan berjalan pada aplikasi web.


var Loc = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);//inisialisasi posisi nya
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';

        map = new google.maps.Map(document.getElementById('map-canvas'), {//buat gambarnya
          center: Loc,
          zoom: 16
        });

        var here = new google.maps.Marker({//membuat penanda lokasi
          map: map,
          position: Loc,
          icon: iconBase + 'arrow.png'
        });

        google.maps.event.addListener(here, 'click', function() { //event button here saat di klik
          infowindow.setContent("You Are Here");
          infowindow.open(map, this);
        });

        var request = { //category yang saya pilih adalah cafe karena mau nyari cafe di sekitar
          location: Loc,
          radius: 1000,
          types: ["cafe"]
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);