Pertemuan Ke 2
KELAS XII SEMESTER GANJIL
Sekilas Cerita:
Pada kelas ini kita akan mempraktekan tentang template framework7 dan ..... hari ini kita akan Pengenalan, berkaitan dengan pembuatan Mobile
Mobile Development Framework
Mobile Development Framework (MDF) merupakan framework pengembangan mobile multiplatform yang bertujuan untuk menghasilkan aplikasi mobile multiplatform yang berasal dari sumber (source code) yang sama.
Mobile Development Framework (MDF) merupakan gabungan dari Apache Cordova, Java Development Kit (JDK), Android SDK dan Gradle beserta konfigurasinya. Mobile Development Framework ini menghasilkan platform Android, Electron (Desktop), Browser, Windows (Windows Phone) dan iOS (dengan tambahan konfigurasi tertentu)
Java Development Kit (JDK)
Java Development Kit (JDK) adalah sebuah perangkat lunak yang berfungsi untuk compile kode-kode / script java kemudian menterjemahkannya ke dalam bytecode agar berikutnya dapat dijalankan oleh Java Runtime Environment (JRE).
Java Runtime Enviroment (JRE)
Java Runtime Environment ( JRE) adalah sebuah perangkat lunak yang berfungsi untuk menjalankan aplikasi berbasis Java atau script setelah di compile menggunakan Java Development Kit (JDK).
Cara kerja JDK dan JRE
Android SDK
Android SDK adalah kumpulan perangkat lunak (kit) yang digunakan untuk mengembangkan aplikasi berbasis Android. Android SDK terdiri dari beberapa tool seperti: debugger, libraries, emulator, versi android dan lain sebagainya
Pengenalan Gradle
Gradle adalah sebuah program yang berfungsi untuk mem-build secara otomatis. Karena fungsi itulah Gradle disebut juga sebagai build tool. Gradle tidak hanya digunakan untuk java melainkan dapat digunakan pula pada C++, Groovy, Javascript, Kotlin, dll.
Pengenalan Apache Cordova
Apache Cordova atau lebih sering disebut Cordova saja sebuah framework yang memungkinkan syntax HTML5, CSS, Javascript (yang kemudian disebut Hybrid) dapat berjalan pada platform mobile yang berbeda-beda (multiplatform) layaknya aplikasi.
Agar dapat mengakses Hardware perangkat mobile seperti aplikasi berbasis native, Apache Cordova menyediakan berbagai plugin yang digunakan untuk menangani hal tersebut. Plugin-plugin tersebut bersifat open source dan terdapat di berbagai sumber.
Arsitektur Apache Cordova
Pada gambar dibawah ini menunjukkan alur dari Plugin Cordova yang dapat digunakan untuk berbagai keperluan pada Mobile OS seperti mengakses sensor, service dan lain-lain
Library Apache Cordova
Konfigurasi Environment Variable
Gradle adalah sebuah program yang berfungsi untuk mem-build secara otomatis. Karena fungsi itulah Gradle disebut juga sebagai build tool. Gradle tidak hanya digunakan untuk java melainkan dapat digunakan pula pada C++, Groovy, Javascript, Kotlin, dll.
JAVA_HOME
Variabel ini digunakan untuk mengkonfigurasi lokasi java development kit JDK
Contoh: C:\Program Files\Java\jdk1.8.0_261 {lokasi akan berbeda tergantung waktu install kita letakkan dimana}
ANDROID_SDK_ROOT
Variabel ini digunakan untuk mengkonfigurasi lokasi Android SDK
Contoh: C:\Android\Sdk {pada kasus ini, kita bisa melakukan 2 cara. 1. Dengan install Android Studio. 2. Decangan cara copy folder SDK saja lalu diletakkan bebas}
GRADLE_HOME
Variabel ini digunakan untuk mengkonfigurasi lokasi gradle
Contoh: C:\gradle-6.4
_JAVA_OPTIONS
Variabel ini digunakan untuk mengkonfigurasi besar cache untuk compile
Contoh: -Xmx512M
PATH
Variabel ini digunakan untuk mengkonfigurasi beberapa path tambahan yang dibutuhkan
Contoh: C:\Program Files\Java\jdk1.8.0_261\bin; C:\Android\Sdk\platform-tools;
File config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<preference name="android-minSdkVersion" value="26" />
<preference name="android-maxSdkVersion" value="29" />
<preference name="android-targetSdkVersion" value="29" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
Cara Kerja Aplikasi Android
Aplikasi android terdiri dari sebuah View atau lebih. View digambar sebagai sebuah form dalam aplikasi berbasis desktop atau webpage pada aplikasi berbasis web. View meliputi kode-kode syntax maupun User Interface (UI) yang dirancang sebagai media interaksi antara alat (device) dengan pengguna.
Model alur program android saat berjalan menggunakan Model Stack (bertumupuk) sehingga saat pengguna mengakses view ke 1 kemudian mengakses view ke 2, maka view ke 1 akan tertutup oleh view ke 2 dan seterusnya. Jika view ke 2 ditutup, maka yang terakses kemudian adalah view ke 1 dan seterusnya.
Sesuai dengan cara kerja pada deskripsi diatas, maka dapat dismpulkan pada hal tersebut adalah nilai pada form, variable dan lain sebagainya pada sebuah view lain dapat dibaca pada view lainnya. Misal pada View ke 1 terdapat sebuah variabel, maka nilai dari variabel tersebut tetap akan terbaca oleh view lain dan berlaku juga sebaliknya.
Apa Itu Framework7
Framework7 adalah sebuah framework HTML yang berlisensi Open Source dan secara khusus diperuntukkan pada platform Mobile (terutama jenis Hybrid). Dikarenakan kategrori Framework HTML, maka Framework7 hanya digunakan untuk membuat User Interface (UI). Sedangkan pemrosesan data pada sistem ditangani oleh Pure Javascript atau Framework Javascript seperti AngularJS, jQuery, React Native, VueJS, NodeJS dan lain sebagainya.
Dapat digambarkan peran dari Framework7 sama seperti peran dari Bootstrap pada platform website. Baik Framework7 dan Bootstrap memiliki kesamaan yaitu sama-sama framework HTML perbedaannya terletak pada peruntukan dan penulisan class. Framework7 diperuntukkan pada platform mobile sedangkan Bootstrap untuk platform website. Penulisan class juga beda misal dalam membuat tombol pada framework7 menggunakan class “button” sedangkan pada Bootstrap menggunakan class “btn”.
Struktur View Framework7
Framework7 terdiri dari 2 jenis View yaitu View Main dan View Secondary. View Main merupakan interface awal dan juga interface utama (halaman utama) dalam Framework7. View Main harus bernama index.html. Sedangkan View Secondary merupakan interface lanjutan selain interface utama yang nantinya dijalankan sebagai view yang menutupi View Main (sesuai cara kerja aplikasi di Android point diatas). Kedua jenis view tersebut memiliki struktur class yang berbeda satu dengan yang lain.
Struktur disamping merupakan Struktur dari View Main atau index.html. Dalam struktur tersebut, dominan menggunakan model parent. Contoh div id app harus berada didalam blok tag body begitu pula tag/div lainnya sesuai gambar tersebut.
Secara umum lokasi dimana sebuah komponen dapat tampil secara visual adalah pada div class navbar dan div class page-content walaupun terdapat beberapa komponen yang tidak menganut konsep tersebut misal FAB (Floating Action Button)
View Secondary juga terdiri dari 2 jenis yaitu View Secondary tanpa Javascript dan View Secondary dengan tambahan Javascript. View Secondary tanpa Javascript merupakan interface secondary yang hanya menampilkan content secara statis. Sedangkan View Secondary dengan tambahan Javascript merupakan interface secondary yang tidak hanya menampilkan content akan tetapi terdapat proses Javascript yang dijalankan didalamnya sehingga membutuhkan struktur yang sedikit berbeda.
Struktur disamping merupakan Struktur dari View Secondary tanpa Javascript. Dalam struktur tersebut hanya terdapat 3 div yaitu div class page, div class navbar dan div class page-content dengan susunan seperti gambar disamping dengan div class navbar sejajar dengan div class page-content.
Struktur disamping merupakan Struktur dari View Secondary dengan tambahan Javascript. Struktur pada jenis ini mirip dengan View Secondary tanpa tambahan JS perbedaannya terletak pada tambahan tag template dan tag script dengan model struktur seperti gambar disamping.
Skema view framework7
Framework7 adalah sebuah framework HTML yang berlisensi Open Source dan secara khusus diperuntukkan pada platform Mobile (terutama jenis Hybrid). Dikarenakan kategrori Framework HTML, maka Framework7 hanya digunakan untuk membuat User Interface (UI). Sedangkan pemrosesan data pada sistem ditangani oleh Pure Javascript atau Framework Javascript seperti AngularJS, jQuery, React Native, VueJS, NodeJS dan lain sebagainya.
Pengenalan Dasar Javascript
Javascript merupakan bahasa scripting pemrograman web yang bersifat Client Side (berjalan disisi Browser) sehingga lebih mudah memanipulasi HTML DOM (Document Object Model) dibandingkan dengan Bahasa pemrograman Server Side (berjalan disisi Server). Penulisan Javascript dapat dilakukan di dalam section <head> atau di dalam section <body>.
Model Penulisan Javascript
Untuk lebih jelasnya seperti ini:
Internal scripting
Penulisan model ini dengan cara menulis syntax Javascript yang diletakkan pada tag <script>..........</script> didalam file webpage (.html)
External scripting
Cara penulisan model ini dilakukan diluar file webpage (.html) dengan kata lain syntax Javascript ditulis pada file dengan extensi .js
Kemudian setelah file .js terbuat, maka file tersebut diakses dengan cara menambahkan syntax berikut
<script src=“lokasifile”></script> pada section <head> atau <body> dari file webpage
Pengenalan Variabel Javascript
Untuk membuat variabel pada Javascript cukup mudah. Kita tidak perlu menentukan tipe data untuk variabel tersebut. Jika membuat variabel pada PHP harus diawali dengan karakter “$” maka pada Javascript variabel diawali dengan kata-kata “var” pada saat pembuatan awal. Jika pada pemanggilan berikutnya, maka cukup menyebutkan variabelnya saja.
Contoh:
<script>
var jumlah;
jumlah = 3 + 7;
alert(jumlah);
//menghasilkan pesan berisi tulisan 10
</script>
Pengenalan Dasar JQuer
JQuery merupakan library Javascript yang telah disusun sedemikian rupa untuk memudahkan pengguna dalam menulis syntax javascript. Untuk menggunakan Jquery, kita harus menambahkan sebuah file JQuery dalam project sistem yang akan kita buat.
Semisal menambahkan file jquery-3.4.1.min.js
Karena pada dasarnya JQuery adalah Javascript yang dimodifikasi agar lebih mudah digunakan, maka kita juga dapat menggunakan Javascript yang masih asli (Pure Javascript). Berikut contoh perbandingan dalam penulisannya:
Pure Javascript:
document.getElementById(“txtnim”).value = “4114221”;
JQuery:
$(“#txtnim”).val(“4114211”);
Manipulasi HTML DOM
By ID
ID Merupakan identifier pada HTML DOM yang bersifat unik. Aturan yang digunakan adalah ID setiap HTML DOM harus berbeda satu dengan yang lainnya
By Class
Class dapat digunakan sebagai identifier pada HTML DOM yang bersifat global. Aturan yang digunakan adalah sebuah Class dapat digunakan pada banyak HTML DOM.
Contoh Manipulasi By ID menggunakan library JQuery
<input type=“text” id=“txtnim” value=“12345”>
<input type=“text” id=“txtnama” value=“Ahmad”>
<script>
$(“#txtnim”).val(“”); $(“#txtnama”).val(“”);
</script>
Contoh Manipulasi By Class menggunakan library JQuery
<input type=“text” id=“txtnim” value=“12345”>
<input type=“text” id=“txtnama” value=“Ahmad”>
<script>
$(“.txtnim”).val(“”); $(“#txtnama”).val(“”);
</script>
langkah-langkah menjalankan framework7
jika tidak bisa di buka silahkan lihat disini
