Devinta Solution Blog

1. Angular JS adalah framework yang efisien untuk membangun Rich Internet Applications (RIA).
2. Angular JS memberikan developer pilihan untuk menulis aplikasi pada sisi client dengan javascript dan pendekatan MVC (Model, View, Controller).
3. Aplikasi dengan menggunakan Angular JS bisa digunakan di segala web browser. Angular JS secara otomatis menghandle javascript supaya cocok dengan web browser yang digunakan.
4. Angular JS adalah open source, gratis! Telah digunakan oleh ribuan developer di seluruh dunia.

1. Data binding : sinkronisasi data otomatis antara Model dan View
2. Scope : objek yang mengacu pada model, sebagai perekat antara Controller dan View.
3. Controller : kumpulan fungsi-fungsi dari javascript.
4. Services : Angular JS datang dengan beberapa built-in services seperti $http untuk membuat sebuah XMLHttpRequests.
5. Filters : pilihan item dari sebuah array dan mengembalikan sebuah array baru.
6. Directives : marker dari DOM elemen seperti element, attribute, css dan lainnya.
7. Templates : tampilan yang dirender dengan informasi dari Controller dan Model.
8. Routing : perpindahan tampilan.
9. Model View Whatever : Angular JS tidak mengimplementasikan MVC secara umum, melainkan sesuatu yang lebih dekat sebagai MVVM (Model View View Model).
10. Deep Linking : mengijinkan Anda untuk meng-encode keadaan dari aplikasi pada URL, sehingga bisa dibookmark. Aplikasi bisa direstore dari URL dari keadaan terakhir.
11. Dependency Injection : terdapat built in dependency injection sehingga membantu developer untuk membuat dan mencoba aplikasi secara mudah.

1. Angular JS menyediakan kemampuan untuk membuat Single Page Application secara mudah.
2. Angular JS menyediakan kemampuan data binding pada html.
3. Kode Angular JS adalah unit yang bisa ditest.
4. Angular JS menggunakan menggunakan dependency injection.
5. Angular JS menyediakan komponen yang bisa digunakan kembali.
6. Dengan Angular JS, developer bisa membuat fungsionalitas yang lebih baik dengan kode yang lebih ringkas.
7. Dalam Angular JS, View adalah html murni, dan Controller ditulis dalam javascript sebagai business processing.

1. Tidak aman, autentifikasi dari server harus tetap dijaga untuk menjaga keamanan aplikasi.
2. Kebergantungan dengan web browser, jika javascript di-disable dari web browser maka semua kode tidak bisa bekerja.

1. ng-app : definisi arahan dan link dari aplikasi Angular JS ke html.
2. ng-model : arahan data dari aplikasi Angular JS ke input kontrol html.
3. ng-bind : arahan data dari aplikasi Angular JS ke tag html.

 

Core Container

• Core module menyediakan bagian bagian dasar dari framework, terdiri dari IoC dan fitur Dependency Injection.
• Bean Module menyediakan BeanFactory dimana itu adalah sebuah implementasi dari pattern factory yang telah di mutakhirkan
• Context Module dibuat dari solid base yang menyediakan Module Core dan Bean dan dalam sebagai perantara untuk akses setiap object yang telah ditetapkan dan di konfigurasi. Application Context interface adalah focal pint di module Context.
• SpEL module menyediakan sebuah expresi yang kuat dalm melakukan quarying dan manipulation sebuah graphics object diruntime.

 

Data Access/INtegration

• Module JDBC menyediakan sebuah lapisan JDBC-abstraction yang menghapus kebutuhan yang tidak dibutuhkan dalam JDBC
• Module ORM menyediakan lapisan integrasi dari Object Relational Mapping API termasuk JPA, JDO, Hibernate, dan iBatis
• Module OXM menyediakan sebuah lapisan abstrasi yang mendukung Object/XML mapping implementation untuk JAXB, Castor, XMLBeans, JiBX dan XStream.
• Module Java Messaging Service atau disebut JMS berisi feature untuk membuat dan meng-konsum pesan.
• Module Transaction mendukung Programatic dan menejemen transaksi deklaratif untuk kelas yang mengimplementasikan spesial interface dan untuk semua POJO yang anda buat.

Web

• Module Web menyediakan dasar dasar dari feature integrasi web-oriented seperti multipart funsi file-Upload dan pengenalan dari IoC container menggunakan servlet listeners dan web-oriented application context.
• Module Web-MVC terdiri dari implemetasi Spring Model-View-Controller (MVC) untuk aplikasi web.
• Module Web-Socket menyediakan dukungan untuk WebSocket-based, Komunikasi 2 arah antara klien dan server di aplikasi web.
• Module Web-Portlet menyediakan implementasi MVC yang digunakan untuk sebuah area portlet dan fungsi mirror dari module webservlet.

spring adalah aplikasi framework development untuk perusahaan java yang paling populer. jutaan developer di dunia ini menggunakan framework spring untuk membuat sebuah sistem berkecepatan tinggi, mudah untuk di test, dan di reusable.

spring framework adalah sebuah open source untuk platform java. pada awalnya di tulis oleh rod johnson dan pertama di keluarkan di bawah nauangan apache 2.0 license pada juni 2003.

spring sangat ringan saat pertama hadir baik ukuran dan transparansinya. versi awal dari spring framework adalah sekitar 2MB.

inti dari feature spring framemwork dapat digunakan hampir ke semua java aplikasi, namun ada beberapa penambahan untuk pembuatan web aplikasi di platform java EE. Target spring framework untuk membuat J2EE development lebih mudah untuk digunakan dan di menjadi saran baik dalam pelatihan pembuatan program dengan menyediakan sebuah POJO-base di model programnya.

keuntungan menggunakan srping framework

dibawah ini beberapa daftar dari keuntungan besar dalam penggunaan spring framework

1. spring menyediakan developers untuk membangun enterprise-class application menggunakan POJO. Keuntungan dari hanya menggunakan POJO adalah kamu tidak perlu sebuah produk EJB  seperti sebuah server aplikasi namun memiliki opsi untuk menggunakan hanya sebuah robust servlet seperti tomcat atau product komersial lainnya.
2. Spring di kelompokan dalam sebuah modular fashion. dimana angkat dari packages dan class bersifat subtansial, kamu hanya perlu mengkahawatirkan tentang apa yang kamu perlukan dan mengabaikan sisanya
3. Testing sebuah aplikasi yang di tulis menggunakan spring sangat simple karena tergantung dari area code yang dipindahkan kedalam framework. lebih dalamnya, dengan menggunakan JavaBeanstyle Pojo, akan menjadikan penggunaan injeksi dari dependency lebih mudah untuk melakukan injecting test data.
4. spring adalah web framework yang sangat cocok untuk membuat web berbasis MVC dimana menyediakan alternatif terbaik untuk web framework seperti Struts atau over-engineered lainnya atau web framework yang kurang populer lainya.
5. spring menyediakan sebuah API yang mudah untuk di alih bahasakan ke teknologi -spesific exception (di lempar dari JDBC, Hibernate, atau JDO contohnya) kedalam nilai yang konsistent, unchecked exceptions.
6. wadah IoC lebih ringan, terutama jika di bandingkan dengan EJB container. ini sangat menguntungkan saat melakukan pengolahan dan pengiriman aplikasi dari komputer dengan memory dan cpu yang terbatas.
7. spring menyediakan management interface transaksi yang konsisten sehingga dapat menurunkan skala local ( menggunakan single database) dan dapat meningkatkan skala transaksi pada global transaksi ( menggunakan JTA).

Dependency Injection (DI)

teknologi yang digunakan spring adalah yang paling mudah dikenali karena menggunakan Dependency injection (DI). Inversion of Control (IoC) adalah sebuah konsep umum, dan dapat di ekspresikan kedalam berbagai bentuk yang berbeda. Dependency Injection hanyalah salah satu contoh konkrit dari inversion of Control.

saat menulis sebuah aplikasi java yang rumit, kelas aplikasi harus semandiri mungkin dari setiap kelas java lainnya untuk meningkatkan kemungkinan penggunaan ulang dari kelas ini dan untuk melakukan test secara sendiri sendiri dari setiap kelas saat unit testing. Dependency Injection membantuk dalam penempelan dari kelas ini bersamaan dan dalam waktu yang sama mereka tetap Independent(mandiri)

Dependency Injection dapan terjadi pada saat memberikan parmeter untuk konstruktor atau Post-Contstruction menggunakan metode setter. Dependency Injection adalah jantung dari spring framework.

Apect Oriented Programming (AOP)

salah satu dari kunci komponen spring adalah Apect Oriented Programming (AOP) Framework. fungking dari rentang beberapa titik dari sebuah aplikasi disebut sebagai cross-cutting concerns dan ini adalah konsep yang terpisah dari logik bisnis aplikasi. ini adalah beberapa contoh yang baik dalam aspek yang dimasukan kedalam logging, declarative transactions, security, chacing, dll.

unit kunci dari modularity dalam OOP adalah kelas, dimana dalam AOP unit modularity adalah aspect. DI membantu anda menggabungkan object aplikasi dengan yang lain, saat AOP membantu anda menggabungkan cross-cutting concerns dari object yang mereka affect.

module AOP dari spring framework menyediakan sebuah implementasi aspect-oriented programming yang mengizinkanmu menetapkan metode interceptior dan pointcuts agar penggabungan kode menjadi bersih(clean) dimana implementasi dari fungsi tersebut harusnya terpisah.

spring berpotensi menjadi sebuah One-Stop Shop untuk semua aplikasi bisnis anda, karena itu, spring adalah modular, yang mengijinkan anda mengambil dan memilih module mana saja yang bekerja untukmu tanpa harus membawa sisanya. bagian dibawah ini menyediakan detail tentang semua modul yang tersedia di spring framework.

Spring Framework menyediakan kurang lebih 20 module yang dapat digunakan berdasarkan kebutuhakn aplikasi.

Yah beginilah menjadi seorang pemula (eits... itu kamu ya bukan saya :D ... ketawa evil)... sebelum kita melangkah ke langkah yang lebih dalam lagi... kita buat dulu deh latihan sederhana. hehehe, yups kalkulator...



Kenapa kalkulator, ya pastinya kalian kalo belajar pasti buat kalkulator dulu kan di sekolah ataupun di kampus, wkwkwkw... (sialan lu ndri!!)... tapi disitu kita bisa belajar bagaimana melakukan implementasi sederhana penggunaan variable yang cukup bikin kita pusing.. ehehehe...

Oke lanjut ke topik utama

Mari kita buat sebuah project

Buat Sebuah Project

Hal pertama yang harus dilakukan ya jelas dong, buat sebuah project baru dengan melakukan klik "start a new Android Studio Project", atau 'file-> New-> New Project'

Oke kita pilih EmptyActivity di pilihan "Add an Actiivity to Mobile", dan masukan nama sesuai keinginan kamu, tapi disini saya biarkan dengan nama awalnya yaitu MainActivity. dalam hal ini, hierarchy dari tampilan kamu seharusnya seperti gambar yang saya tunjukin di bawah ini.

Nyalakan data binding dalam project-mu

Dalam contoh kali ini, kita akan melakukan pengaturan di project menggunakan data binding. menggunakan data binding di aplikasi ini membuat kita lebih mudah melakukan refer ke widgets seperti Button(tombol), EditText dan TextView secara langsung, daripada mencarinya menggunakan metode findView. untuk menjalankan data binding, kamu harus menambahkan sebuah perintah seperti dibawah ini dalam file build.grandle.
Woke dokey... Selanjutnya kita butuh melakukan perubahan terakhir pada file activity_main.xml untuk menyalakan data binding. tutup ta root yang tergenerated atau dalam kasus kita ini dalah sebuah ReltiveLayout dengan sebuah tag layout, untuk membuat sebuah tag root baru.

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <RelativeLayout>
    ...
    </RelativeLayout>
</layout>

Tag layout akan memberitahukan build system bahwa ia adalah sebuah file yang di gunakan untuk data binding. build system lalu akan melakukan generate sebuah kels binding secra otomatis untuk layout file ini. karena activity_main.xml ini menjadi sebuah target file, maka build system akan mengenerate sebuah class bernama ActivityMainBinding, dimana itu akan memberitahukan bahwa aplikasi kamu sama seperti class java lainnya. nama class dari didapat dari sebuah nama file layout dengan hurup besar pada awal kata di setiap tulisannya setelah garis bawah, dan menghapus semuah garis bawah dan menambahkan kata "Binding"

Oke, pindah ke MainActivity.java. buat sebuah private ActivityMainBinding instance dalam class-mu, dan dalam motode onCreate, delete setContentView lalu ganti dengan DataBindingUtil.setContentView() seperti pada contoh di bawa ini.

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    }
}

Mengerti apa itu layout widgets

Ada 4 hal utama dalam aplikasi kalkultor kita.

1. RelativeLayout - item ini memberikan perintah item lain diletakan atau di tampilkan dalam screen. ReltiveLayout digunakan untuk melakukan pengaturan posisi dari child element yang berhubungan dengan lainnya atau untuk dirinya sendiri.
2. TextView - item ini digunakan untuk menampilkan sebuah text. yang nantinya akan digunakan untuk menampilkan hasil komputasi.
3. EditText - jenis ini adalah sebuah jenis dimana user bisa melakukan edit atau melakukan input. walaupun begitu kita kan bakal membuat sebuah kalkulator  ya jadi kita akan buat seperti tombol saja. alias non-editable.
4. Button - nah ini digunakan untuk melakukan eksekusi atau sebuah perintah.

 

Membuat sebuah layout kalkulator

Perintah dari layout kalkulator ini lumayan panjang loh. dikarenakan kita harus secara explisit menjelaskan semua hal mulai dari posisi, fungsi dan lainnya yang disimpan di activy_main

<layout>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.sample.foo.samplecalculator.MainActivity">

        <TextView
            android:id="@+id/infoTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:textSize="30sp" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/infoTextView"
            android:enabled="false"
            android:gravity="bottom"
            android:lines="2"
            android:maxLines="2"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonSeven"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText"
            android:text="7"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonEight"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText"
            android:layout_toRightOf="@id/buttonSeven"
            android:text="8"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonNine"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText"
            android:layout_toRightOf="@id/buttonEight"
            android:text="9"
            android:textSize="20sp" />
       
        ...
       
        ...

        <Button
            android:id="@+id/buttonDot"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/buttonOne"
            android:text="."
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonZero"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/buttonEight"
            android:layout_below="@id/buttonTwo"
            android:text="0"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonEqual"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/buttonNine"
            android:layout_below="@id/buttonThree"
            android:text="="
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonDivide"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonNine"
            android:layout_toRightOf="@id/buttonNine"
            android:text="/"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonMultiply"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonSix"
            android:layout_toRightOf="@id/buttonSix"
            android:text="*"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonSubtract"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonThree"
            android:layout_toRightOf="@id/buttonThree"
            android:text="-"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonAdd"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonEqual"
            android:layout_toRightOf="@id/buttonEqual"
            android:text="+"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonClear"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/buttonAdd"
            android:layout_below="@id/buttonAdd"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="C"
            android:textSize="20sp" />
    </RelativeLayout>
</layout>

Bagian dalam kalkulator

Kalkulator kita mempunyai dua isian, kita sebut disini valueOne dan valueTwo. isin ini mnejaga agar angkat tetap menyala. kedua isian ini bertipe double, jadi dia bisa tetap memberikan angka desiml ataupun bukan. kita atur valueOne menjadi special Double NaN (not an number) dengan beberapa penjelasan seperti berikut

private double valueOne = Double.NaN;
private double valueTwo;

Dalam aplikasi kita hanya bisa melakukan beberapa operasi saja seperti pertambahan, pengurangn, perkalian dan pembagian. jadi kita harus melakukan define 4 statik char yang merepresentasikan operasi ini, dan sebuah varible CURRENT_ACTION yang bertugas menahan operasi selanjutnya.

private static final char TAMBAH = '+';
private static final char KURANG = '-';
private static final char KALI = '*';
private static final char BAGI = '/';

private  char CURRENT_ACTION;

Akhirnyaaaa, kita bisa menggunakan DecimalFormat class untuk memberikan tipe output dari kalkulator kita.

decimalFormat = new DeccimalFormat (#.#########");

Menghandle Tomblok klik (angka)

kapanpun user menekan angka atau tanda titik, kita sehrunya ingin agar menambahkan sebuh angka pada editText. bagaimana caranya? coba kita buat koding seperti dibawah ini dengan default numbernya adalah 0.

        binding.buttonZero.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                binding.editText.setText(binding.editText.getText() + "0");
            }
        });

Menghandle tombol klik ( operasi )

Menghandle tombol klik untuk sebuah operasi sedikit berbeda. kita akan menjalankan komputasi yang tertunda dulu. jadi kita memberikan define ke sebuah metode ke coputateClaculation, bersma dengan computeCalculation, jiga vlueOne bernilah angka, maka kita membaca valueTwo dari sebuah editText dan menjalankan semua urutan operasi. di sisi lain jika valueOne dalah Nan, ValueOne akan diisi angka yang and di editText.

private void computeCalculation() {
        if(!Double.isNaN(valueOne)) {
            valueTwo = Double.parseDouble(binding.editText.getText().toString());
            binding.editText.setText(null);

            if(CURRENT_ACTION == ADDITION)
                valueOne = this.valueOne + valueTwo;
            else if(CURRENT_ACTION == SUBTRACTION)
                valueOne = this.valueOne - valueTwo;
            else if(CURRENT_ACTION == MULTIPLICATION)
                valueOne = this.valueOne * valueTwo;
            else if(CURRENT_ACTION == DIVISION)
                valueOne = this.valueOne / valueTwo;
        }
        else {
            try {
                valueOne = Double.parseDouble(binding.editText.getText().toString());
            }
            catch (Exception e){}
        }
    }

Untuk setiap opersi, kita panggil computeCalculation() terlebih, lalu mengatur CURRENT_ACTION ke operator yang dipilih, sama halnya dengan operator '=', kita panggil computCalculation(), lalu bersihkan konten yang berada di valueOne dan CURRENT_ACTION.

        binding.buttonAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = ADDITION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "+");
                binding.editText.setText(null);
            }
        });

        binding.buttonSubtract.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = SUBTRACTION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "-");
                binding.editText.setText(null);
            }
        });

        binding.buttonMultiply.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = MULTIPLICATION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "*");
                binding.editText.setText(null);
            }
        });

        binding.buttonDivide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = DIVISION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "/");
                binding.editText.setText(null);
            }
        });

        binding.buttonEqual.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                binding.infoTextView.setText(binding.infoTextView.getText().toString() +
                        decimalFormat.format(valueTwo) + " = " + decimalFormat.format(valueOne));
                valueOne = Double.NaN;
                CURRENT_ACTION = '0';
            }
        });

Akhirnyaaaaaaaa..... jika kamu sudah menulis semua yang ada di tutorial ini dengan benar dan walaaaaaahhh... kamu sudah berhasil menciptakan aplikasi kalkulator sederhana untuk android... gimana ... susah kan .. iy susah emang .. ahahahaha