Project Pertama Intel XDK - III

Di part sebelumnya, kita udah buat 2 biji tombol lagi yaitu "Materi" dan "Soal".... Okie disini pertama-tama kita buat page baru lagi, nama pagenya "soal" page ini tar akan dikonekin ke tombol soal... :)

Balik ke page materi, Terus scroll ke bawah jauh.. dibagian kiri ada tab "Interactivity" naah disitu kita hubungin tiap button, back ke main page, materi ke materi, terus soal ke page soal kyk gini :

Naaah....sampe sini kita udah konekin setiap button ke masing-masing page yang bersesuaian.... Berikutnya adalah ngatur background pagenya,,, klik sembarang tempat di page materi,,, terus di panel sebelah kanan tar ada menu background, nah itu diklik trs pilih new :

Daan...silahkan atur2 sendiri backgroundnya sesuai selera... :D
Klu Hisoka kek gini :

Siiips... ini akhir dari quiz kedua... yeeeiii... :D


Beralih ke part berikutnya....

Project Pertama Intel XDK - II

Di Part sebelumnya kita udah nambain button....mmmm.... tulisan buttonnya dikosongin, jadi tinggal iconnya ajjah...

Terus buat style baru, caranya pencet menu "custom" terus pilih "new" :

Terus kasiin nama, misalnya transparent :

Terus di dalam style transparent tersebut, masukin kode ini terus pencet save style :

Naaah...setelah disave kita liad buttonnya jadi transparant kek gini :

Okiee..terus kembali select buttonnya, terus kita buat style baru, tapi sekarang pilih yang "Text" :

Pilih new terus masukin namanya "Putih"

Terus centang pilihan color, terus pencet yang warnanya buat diganti jadi warna putih :

Naaah...tar gambar rumah di buttonnya jadi putih kyk gini :

Tuuuh... jadi putih yang sebelumnya warna item... :D
Neext... drag and drop image :

Naaah... pas kita tambain image XDK-nya otomatis masukin image sendiri, sooo tinggal kita ganti imagenya lewat kotak ijo di sebelah kanan atas jadi kyk gini :

Terus drag and drop 2 biji tombol dan atur jadi kyk gini :

Terus mari kita atur button "Materi" dan "Soal"...Yang akan kita lanjutkan di part berikutnya... :)

Project Pertama Intel XDK

Naah...sebelumnya kita udah berhasil masuk ke intelnya...:D Skr mo buat project baru.. :) Silahkan ikuti gambar2 di bawah ini :

Naaah tampilan diatas tuuh tab develop. Tab develop ini tuh dipake buat ngatur dan ngedit aplikasi kita. Ada 2 biji pilihan di tab developer ini yaitu bagian code dan design.

Code dipake buat edit script, terus yang design buat ngedit layout aplikasi. Naah..terus ada tab berikutnya adalah tab EMULATE...

Tab emulate ini berguna untuk menampilkan hasil layout yang udah kita buat di tab Develop. Naah di tab emulate ini kita bisa memilih tampilan emulatornya dibagian drop down menu sebelah kiri atas.. :)
Berikutnya adalah tab TEST.... Tampilannya kek gini :

Naaah....Tab ini dipake buat ngetest aplikasi yang kita bikin langsung direal device, cuman real devicenya harus diinstalin App Preview dulu kyk gambar di atas, so download dulu app previewnya dari google store,..

Terus buka aplikasinya, dan konekin ke laptop pake USB... terus kita login :

Klu udah, tar ngesynchronize...daan aplikasi di laptop sama di hp jadi sama, karena disini Hisoka baru bikin jadi cuma 1 biji ajjah... :D

Naaah... klu udah kyk gitu... Pencet tombol "I HAVE INSTALLED APP PREVIEW" di laptop :

Abis itu tampilannya jadi kek gini :

* Sebenarnya dari App preview di hp juga bisa...tapi gpp coba yang dari laptop ajjah.. :D
Terus pencet PUSH FILES {tombol ijo digambar} buat update aplikasi atau sync aplikasi ke ke HP..terus pencet "Begin Debug"..buat ngedebug.. disini blom.. :v
Okieee.... :D
Tab berikutnya adalah DEBUG

Coba pencet tombol "Start" itu lhooo.. :D

Naaah... itu kliatan HPnya... :D
Terus Tab Profile mirip sm Debug..intinya cuma tips2....
Terus Tab berikutnya adalah BUILD....

Tab build ini dipake buat ngebuild dengan beberapa pilihan flatform yang ada... :D
Terus terakhir adalah tab PUBLISH...

Yang ini dpkae buat ngepublish di Google Play, Amazon Store, dsb... cumaan.. kekna bnyk syaratnya.. :v

Okiee... cukup sekian bincang2nya...let's go back to our Quiz 1... :D
mmmm... Pertama-tama balik ke Tab Develop, terus buat new page :

Terus drag and drop header terus kasih nama Quiz kyk gini :

Mmm.... entah bagemana, tapi disini pagenya direfresh... jadi terus kyk gini... .:v

Okieee... Next tambain tombol terus kasiin icon home...

Naaah...terus select butoon itu, terus ganti propertinya jadi kyk gini :

terus.... isiin idnya jadi btnBack :

mmmm.... Part I smpe dulu ajjah... :D



Beralih ke Part II....

Overview Intel XDK

Download di sini...

Terus silahkan di instal....

Terus silahkan dilaunch....

Sign Up dulu...soalnya baru pertama kali... :D

Terus konfirm lewat email...

Terus kita balik ke intel XDK dan login :

Daaan.... sampe deeeh... :D

Sssipss... challenge di dicodingnya udah sampe sini ajjah.. :D


Next Challenge...