Posts

Membandingkan Ukuran APK untuk Aplikasi di Flutter, React Native, Kotlin dan Java

Ada banyak cara untuk membuat aplikasi mobile mulai dari pengembangan spesifik platform langsung (menggunakan Java dan Kotlin untuk Android dan ObjC dan Swift untuk iOS), ada React Native dari Facebook, Electrode Native dari Walmart, Ionic framework, Unity untuk tipe-tipe aplikasi tertentu, dan framework flutter.io yang baru saja dirilis oleh Google

Pernah bertanya-tanya bagaimana library dan framework ini mempengaruhi ukuran aplikasi Anda? Mari kita menganalisis beberapa file apk untuk masing-masing aplikasi yang ditulis dalam beberapa cara ini. Aplikasinya sangat sederhana, hanya berisi judul dibagian atas dan teks di tengah layar. Kita akan menunjukan untuk aplikasi minimum apa yang perlu dikerjakan oleh framework ini bersama apk agar dapat dijalankan.

1_nS-7Ji11bTmO5HIkmoYA-g

  • Untuk percobaan kali ini kita akan membuat empat versi aplikasi yang berbeda, di masing-masing aplikasi diantaranya Java, Kotlin, React Native dan Flutter (Android API 27)
  • Apk tersebut kemudian di publikasikan untuk tipe rilis menggunakan Android studio untuk Java dan Kotlin dan menggunakan cli untuk React Native dan Native
  • Menggunakan konfigurasi default proguard
  • Apk dianalisis menggunakan fitur Analisis APK di Android Studio

Java (539 KB)

Mari kita mulai dari yang paling simple –Java. Seperti yang Anda harapkan, akan menjadi ukuran terkecil mengingat kita hanya menggunakan Java dan framework Android untuk membuat aplikasi ini, dengan satu-satunya dependency yakni Android Support Library, yang dapat Anda lihat disini membutuhkan cukup banyak ruang.

1_etBFAARt0K4yBa7d-nL0iQ

Kita dapat berpotensi menurunkan ukuran aplikasi dengan menghapus dependency ini saja dan menggunakan Activity dari pada AppCompatActivity

Kotlin (550 KB)

Selanjutnya Kotlin. Jika Anda sudah lama ngoding di Java, Kotlin menjadi angin segar. Apk rilis untuk aplikasi Kotlin membandingkan sesuatu yang kita lihat di apk Java, ditambah sebagian kecil dari info sugar sintaks berdasarkan Kotlin

1_9Qo6ULUNQJtiHOHme_sFMg

React Native (7 MB)

Jika Anda datang dari dunia web dan ingin menjadi mobile developer menggunakan javascript React Native bisa menjadi salah satu pilihan. React Native juha membantu jika Anda ingin mengintergrasi lebih cepat pada fitur tanpa merilis aplikasi untuk setiap perubahan kecil.

Rilis apk yang dihasilkan oleh React Native memiliki beberapa kelas dalam file classes.dex yang memiliki 12193 metode referensi untuk aplikasi tertentu ini.

1_VkAuQM-fi3Fe7yKBiwKC6w

React Native juga menambahkan beberapa dependensi asli di direktoru lib untuk X86 dan armeabi-v7a. Menambah hingga sekitar 6,4 MB dependensi secara total.

1_IiScBxnU_MhURFzFYnDsug

Flutter.io (7.5 MB)

Aplikasi rilis yang dihasilkan oleh Flutter cli berisi mesin C/C++ dan Dart VM yang membuat hampir semua apk. Aplikasi ini berjalan langsung menggunakan set intruksi native dan tidak ada interpreter yang terlibat.

1_JqPvjrCDx4ShWNR10aP1UA

Setiap metode penulisan aplikasi memiliki kelebihan dan kekurangannya. Pilih metode yang paling sesuai untuk digunakan baik untuk kasus kebutuhan Anda sendiri ataupun unutk perusahaan Anda. Anda juga bisa mengkombinasi dan mencocokan beberapa framework untuk membuat bagian yang berbeda dari aplikasi Anda.

Contohnya, jika Anda ingin bereksperimen membuat suatu komponen di React Native, jika Anda ingin membagi kode antara aplikasi iOS dan Android, lihat React Native atau Flutter,io dan jika Anda hanya ingin berfokus pada Android dan menjaga agar ukuran aplikasi lebih minimum sangat penting Anda bisa menggunakan Java atau Kotlin

Membuat Form Validasi Kartu Kredit

Dalam tutorial ini kami akan berbagi cara untuk membuat form kartu kredit sederhana. Kita akan membangun semuanya dari awal, dengan sedikit bantuan dari Bootstrap 3 untuk interfacenya dan Payform.js untuk form validasi client-side.

Overview projek

Berikut adalah tampilan akhir hasil dari tutorial ini.

credit-card-form

Anda bisa mendapatkan full code untuk projek ini dengan klik link download. Gambaran dari file dapat dilihat dibawah ini:

project-overview

Ada dua file .css dan dua file .js yang akan kita butuhkan untuk memasukan dalam HTML kita. Semua source lain seperti framework Bootstrap, jQuery, dan font web akan dimasukan secara eksternal melalui CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>

<body>

    <!-- The HTML for our form will go here -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

Sekarang semuanya sudah diatur, kita dapat mulai membangun form kartu kredit Anda. Mari kita mulai dengan layout HTML!

Layout

Sebuah dialog kartu kredit harus sederhana, singkat dan lugas. Berikut adalah empat input fields bahwa setiap form kartu kredit harus memiliki:

  • Nama pemilik kartu kredit
  • Nomor kartu
  • Kode rahasia (juga dikenal sebagai CVV / CVC / CID)
  • Tanggal kadaluarsa

Semua yang perlu kita lakukan adalah membuat <form> dan menambahkan semua field input yang diperlukan. Untuk nama pemilik, nomor kartu dan CVV kita akan menggunakan teks field sederhana. Untuk tanggal  kadaluarsa kita akan menempatkan kombinasi dua penyeleksi dengan pilihan yang telah ditetapkan untuk membuat bulan dan tahun

Selain itu formnya kita beri judul, button dan gambar untuk vendor kartu kredit populer. Karena kita menggunakan Bootstrap maka ada markup tambahan sedikit, tapi hal itu akan membantu menjaga kode terorganisir dan layout responsif.

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input type="text" class="form-control" id="owner">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv">
            </div>
            <div class="form-group" id="card-number-field">
                <label for="cardNumber">Card Number</label>
                <input type="text" class="form-control" id="cardNumber">
            </div>
            <div class="form-group" id="expiration-date">
                <label>Expiration Date</label>
                <select>
                    <option value="01">January</option>
                    <option value="02">February </option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group" id="credit_cards">
                <img src="assets/images/visa.jpg" id="visa">
                <img src="assets/images/mastercard.jpg" id="mastercard">
                <img src="assets/images/amex.jpg" id="amex">
            </div>
            <div class="form-group" id="pay-now">
                <button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
            </div>
        </form>
    </div>
</div>

Sekarang kita memiliki field input yang dibutuhkan, kita dapat mengatur aturan validasi.

Validation

Semua validasi akan menunjukan client side dan dilakukan secara eksklusif di JavaScript. Dan untuk validasi pada HTML Anda bisa melihatnya pada postingan sebelumnya. untuk memulainya dengan mendefinisikan semua selektor jQuery yang kita butuhkan :

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

Kemudian, menggunakan Payform.js, kita akan mengubah field input dasar kita menjadi inputan khusus untuk data kartu kredit. Kita hanya perlu memanggil fungsi yang tepat dan library secara otomatis akan menangani format teks dan panjang string maksimum bagi kita :

cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');

Selanjutnya kita ingin dapat memberikan umpan balik real-time kepada pengguna saat mereka mengetik di nomor kartu mereka. Untuk melakukannya kami akan menulis fungsi sederhana yang melakukan dua hal :

  1. Periksa apakah teks field yang diinputkan adalah nomor kartu valid atau tidak. Tambahkan pewarna sesuai dengan bidang teks.
  2. Tergantung pada input karakter ini, lihat jika kartu selain Visa, MasterCard atau American Express. Hal ini dilakukan dengan menggunakan method payform.parseCardType()

Karena kita ingin melakukan eksekusi diatas setiap kali karakter baru yang diketik menggunakan jQUery keyup() event.

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

Ada satu hal lagi yang harus kita lakukan adalah memeriksa apakah semua field memegang data yang valid ketika user mencoba untuk mengirimkan form.

Nama validasi bisa sangat rumit. Untuk menjaga pencahayaan pada tutorial ini, kita tidak akan menuju subjek, dan kita hanya akan memeriksa apakah  inputan nama minimal 5 karakter. Payform memberikan metode yang diperlukan untuk memvalidasi sisa formulir.

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

Style

Kita akan menggunakan Bootstrap, sehingga sebagian besar styling dilakukan oleh framework. Sebagian besar meliputi field input dan berbagai padding, margin dan font tweak.

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

Tutorial membuat vorm validasi kartu kredit telah selesai semoga bermanfaat. Untuk Demo bisa dilihat pada link berikut

10 Media untuk Berbagi Kode Snippets

Integrated Development Environment (IDE) tool yang cukup kuat sebagai aplikasi online untuk mempercepat dan share potongan kode melalui user interface natural, intuitif dan praktis. Dan terakhir live preview dan jendela terpisah untuk CSS, HTML dan JS serta mencakup berbagai instrumen bermanfaaat seperti pre-install library JavaScript, support dengan bahasa pre-processor, kode generator, tool untuk pekerjaan kolaboratif dan lain-lain.

Kami telah menambahkan list dari 10 media yang luar biasa untuk berbagi potongan kode dengan cepat. Jadi jika Anda sedang kebingungan untuk memulainya, cukup pilih media yang menurut Anda bagus.

Codepad

1-codepad

Codepad adalah platform baru yang cocok untuk developer berbagai bidang. Apakah Anda mengkhususkan diri dalam ActionScript atau C-Sharp, layanan ini akan cocok untuk Anda yang membutuhkan  fasilitas untuk menulis, pengujian, penyimpanan dan share potongan kode Anda secara online.

Tergantung pada kebutuhan Anda dapat membuat snippet untuk publik, pribadi dan swasta mengumpulkannya menjadi satu projek sehingga dapat mengkompilasi koleksi.

Dengan komunitas yang aktif, Anda juga dapat mengikutinya dengan sesama developer, mencari tahu solusi baru dan terinspirasi oleh kreasi lainnya.

Codepen

2-codepen

Codepen adalah favorit pada developer yang menaungi ribuan coders yang antusias dan invensi mereka. Untuk menikmati manfaat tambahan, seperti sharing pribadi Anda harus mendaftar, namun jika Anda perlu dengan cepat menulis kode snipper Anda dapat menekan tombol “New Pen” dan mulai menulis kode.

Tidak hanya tool yang sangat bagus untuk prototyping komponen atau elemen UI dengan bantuan HTML/CSS/JavaScript, tetapi juga sebuah galeri besar secara online dimana Anda dapat menemukan sebuah dorongan dan jawaban untuk masalah Anda. Diantara fitur pentingnya siap digunakan untuk pre-processor sebagai SASS, LESS, Stylus, SCSS, CoffeeScript dan LiveScript.

Github Gist

3-github-gist

Sama seperti contoh sebelumnya, Github Gist adalah salah satu pilihan yang lebih disukai oleh developer ketika tiba untuk membangun proyek-proyek open-sorce. Anda dapat membuat gits umum atau rahasia, disertai dengan potongan kode dengan dokumentasi atau petunjuk dan memperbaruinya setiap kali jika Anda perlu. Terlebih lagi siapapun bisa berkomentar atau menyukai nya.

CSSDeck

4-cssdeck

Dengan lebih dari 40.000 anggota terdaftar, CSSDeck adalah platform terkemuka untuk menulis kode dan berbagi source code. Meskipun dilihat dari nama terkonsentrasi dengan CSS, Anda dapat membangun konsep yang berpusat sekitar HTML dan JavaScript.

Anda tidak harus memiliki akun untuk menggunakannya. Namun demikian, jika Anda ingin menikmati semua fasilitas, Anda akan lebih baik membuat akun dan dalam hal ini gratis.

Codeshare

5-codeshare

Codeshare merupakan hal lain dari “no-sign-up-required” editor frontend yang menawarkan developer dapat bermain dengan antarmuka yang intuitif dan satu set kecil tool bermanfaat. Hanya menulis atau paste kode, share link dengan rekan-rekan dan membahas ataupun memecahkan masalah bersama-sama. Selain itu ada video chat yang didukung oleh WebRTC untuk berkolaborasi secara real-time. Satu-satunya kelemahannya adalah bahwa proyek Anda akan menghilang dari server selama 14 hari.

jsFiddle

6-jsfiddle

jsFiddle masuk langsung to the point. Mejadi salah satu yang pertama diarea ini, tidak ada halaman petunjuk arahan pada halaman utama yang menekankan fitur dari playground atau menunjukan karya orang lain. Namun itu tidak mengapa, yang harus Anda lakukan yaitu menyediakan coders dengan smart board untuk mencampurkan dan mencocokan berbagai teknik untuk mencapai hasil yang diinginkan.

Homepage ini dibagi menjadi empat bagian dimana Anda dapat menulis dalam HTML, CSS dan JavaScript dan melihat efeknya secara realtime. jsFiddle memiliki beberapa kualitas tertentu seperti :

  • Bantuan typescript
  • Auto-saving untuk konsep lokal
  • Library JavaScript
  • Tool kolaborasi untuk tim
  • Cara intuitif dan efisien untuk menghasilkan kode embed dan lainnya.

Codeply

7-codeply

Dengan dukungan yang kuat untuk boilerplates terkenal seperti Bootstrap, Foundation, Materialize, SemanticUI, Skeleton dan beberapa yang lainnya, Codeply adalah tempat yang sangat baik untuk membuat desain responsif, widget dan komponen untuk framework. Anda dapat menggunakan layout standar, potongan dan elemen yang tepat dari editor untuk meningkatkan proyek. Ada juga sebuah galeri online dengan pekerjaan yang dirilis oleh anggotanya.

Dabblet

8-dabblet

Dabblet adalah intrumen besar ketika datang untuk memecah tugas menjadi bagian-bagian yang terpisah dan visualisasi hasil individual. Ada lima jenis yang berbeda dari preview (CSS dan hasil, HTML dan hasil, JS dan hasil  dan gabungan semuanya). Meningkatkan alur kerja dari berbagai sudut. Sayangnya, daftar fitur tidak mengesankan seperti di Codepen.

Namun, Anda dapat memperbaiki hal ini dengan cara manual memasukan semua library yang dibutuhkan. Hal ini sederhana, mudah dan tidak akan melelahkan Anda dengan berbagai tool.

LiveWeave

9-liveweave

LiveWeave memuat dengan :

  • Ton library yang secara teratur diperbarui, mulai dari AngularJS dan berakhir dengan Zepto
  • Generator untuk teks dummy yang diujung jari Anda
  • Mengekspor instrumen
  • Generator kode CSS3
  • Warna dan lab palet
  • Dan tool untuk kerja sama tim

Empat bidang tertata rapih memungkinkan untuk menulis HTML, CSS dan kode JS secara independen dan merenungkan hasil kolaborasi mereka di window preview. Terlebih lagi, jika Anda sakit dan lelah dengan tema default gelap dari UI, Anda dapat beralih ke light skin.

Pastie

10-pastie

Pastie adalah tool primitif yang merupakan alternatif untuk tool share dasar. Jika Anda perlu dengan cepat menyusun potongan kode dan share dengan orang lain. Ia menawarkan antarmuka dengan pengguna yang bersih dengan sintaks yang solid. Hanya mengatur bahasa dan layanan akan melakukan semuanya. Meskipun mungkin tidak bermain tradisional dengan live preview, dukungan untuk pra-prosesor dan pra-instal library, bagaimanapun, masih menggunakan cara yang elegan untuk menulis dan share fragmen kode.

Kesimpulan

Real-time editor yang bekerja dengan bahasa sisi klien, seperti HTML, CSS dan JavaScript adalah bantuan besar bagi pemula dan coders profesional. Apakah Anda perlu untuk menguji teknik baru, menaruh beberapa trik inventif dalam tindakan atau bantuan luar untuk memecahkan masalah, ada tool yang lebih baik. Gratis, fitur tambahan dan kebebasan memilih hanya icing pada kue. Bagaimana? Menurut Anda media yang manakah yang paling cocok dengan kebutuhan Anda? Semoga bermanfaat.