Angular 4 : Membuat Client App Sederhana

Assalamu’alaikum Wr. Wb

Pada kesempatan kali ini, saya mau berbagi ilmu kepada teman2 skalian, bagaimana membuat client app sederhana menggunakan Angular 4

berikut penampakannya :

Client App Sederhana menggunakan Angular 4

Untuk demo appnya bisa dilihat di : https://simple-ghibli-app.herokuapp.com/

Data diambil dari https://ghibliapi.herokuapp.com/. Api tersebut berisi data tentang film yang ada di Ghibli Studio.

Mari kita mulai.

1. Kita buat starting project terlebih dahulu

seperti biasa untuk membuat app baru ketik

ng new ghibli-app

pada kali ini saya menggunakan materialize-css. Untuk menginstall-nya kita bisa masuk ke terminal dan arahkan ke direktori project kita, kemudian ketik perintah :

npm install — save materialize-css

atau jika menggunakan yarn

yarn add materialize-css

dikarenakan materialize membutuhkan jquery, maka kita juga install jquery

npm install — save jquery

atau

yarn add jquery

Setelah menginstall, jangan lupa untuk mengimport kan materialize-css, dan jquery ke project kita. Kita bisa menambahkkannya dengan cara :

menambahkan path ke style, dan jquery yg ada di .angular-cli.json.

tambahkan css di properti styles, dan js di properti scripts

Ketika sudah menambahkan

“../node_modules/materialize-css/dist/css/materialize.min.css” ke styles

“../node-modules/jquery/dist/jquery.min.js” dan

“../node_modules/materialize-css/dist/js/materialize.min.js” ke scripts,

maka kita sudah dapat menggunakannya. Tetapi untuk dapat mengakses materalize-css icons kita harus menambahkan

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>

di index.html

2. Buat komponen yang akan kita gunakan.

Berikut struktur komponen yang akan saya gunakan:

struktur komponen

Mari kita buat 3 komponen tersebut. AppComponent sudah ada sejak startup project, jadi kita hanya membuat ListFilmComponent, dan CardFilmComponent.

Sebelumnya, komponen-komponen yang saya gunakan, saya letakkan di folder terpisah. Saya menambahkan komponen tersebut di folder app > components.

ng g c list-film

ng g c card-film

pastikan jika komponen sudah di masukkan ke app.module.ts

3. Buat model yang diperlukan.

Model ini digunakan untuk mempermudah mapping data. Pertama kita memerlukan model Film, variable ini berisi detil film ada. Oleh karena itu kita buat file dengan nama film.ts. File-file model saya letakkan di app > models.

code film.ts

Kemudian kita juga memerlukan model untuk menampung respons pada api yang biasanya berisi array dari film tersebut, sebut saja modelnya FilmResponse, jadi kita buat film_response yang berisi code berikut :

code di film_response.ts

4. Berikan style pada masing-masing komponen.

Pertama kita buka app.component.html, kita akan memberi style pada komponen terluar.

code di app.component.html

kemudian kita berikan style css di app.component.css

style di app.component.ts

#Note: mohon maaf ya, kali ini saya tidak membahas tentang css. ^_^

Kita ketahui di atas terdapat

<img [src]=“imgSrc” height=200 />

src pada img mengacu pada variable imgSrc di app.component.ts yang didalam nya berisi path gambar ghibli, oleh karena itu kita tambahkan variable imgSrc di app.component.ts

code di app.component.ts

Jangan lupa kita copy gambah ghibli.png ke folder assets.

Maka tampilan akan menjadi seperti ini :

Kedua kita buka card-film.component.html, di file ini akan kita buat bagaimana bentuk per item film yang muncul nanti.

pada kali ini saya akan mengambil bentuk card. Berikut kode yang ada di card-film.component.html

code di card-film.component.html

Jika dilihat di code diatas terdapat imagePath yang mana variable tersebut berisi link gambar default. Dan juga terdapat variable film, yang nanti adalah variable yang akan di passing dari list. Nah, variable tersebut sebenarnya adalah model yang kita buat sebelumnya. Untuk lebih jelasnya berikut kode card-film.component.ts

code di card-film.component.ts

variable film yang ada di card-film.component.ts adalah variable props yang akan di passing dari luar. sedangkan imagePath adalah gambar ghibli yang kita letakkan sebelumnya.

Setelah card-film jadi sekarang kita membuat listnya, dimana list tersebut berupa kontainer yang berisi banyak card. pertama-tama kita isi datanya dengan data fake. Untuk lebih jelasnya coba kita lihat kode list-film.component.ts

code di list-film.component.ts

Setelah itu, kita buat html kontainer yang menampung film tersebut. berikut adalah kode dari list-film.component.html.

code di list-film.component.ts

Kode di *ngFor diatas digunakan untuk pengulangan, dari variable films tadi. Sehingga kita dapat mengambil per satuan film yang ada di variable films

Kemudian variable film setiap films tersebut kita passing ke component card-film, menggunakan [film]=“film”.

Jangan lupa memberi css agar tampilan lebih bagus:

code di list-film.component.css

Sehingga apabila dijalankan maka akan menjadi seperti ini.

Hasil sekarang.

Nah sekarang sudah jadi fungsi untuk menampung data. Selanjutnya kita akan membuat bagaimana mengambil data dari api.

5. Buat service untuk mengakses data ke api.

Untuk mengakses data kita membuat sesuatu yang dinamakan service.

Kenapa service ?

Di dokumentasi angular 4 tertulis :

Components shouldn’t fetch or save data directly and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service.

Dari kesimpulan keterangan di atas komponen tidak boleh terlibat dalam proses mengambil atau menyimpan data secara langsung, komponen hanya ditugaskan untuk menampilkan data, ketika ingin mengakses data, semua diserahkan kepada service.

yaa,, mungkin begitu.. karena saya juga kurang jago bhs inggris.. 😅

okee.. selanjutnya kita buat file service,, biasanya saya letakkan file servis di tempat terpisah, jadi saya letakkan di app > services

di angular-cli sendiri sudah ada cara untuk mengenerate file service,

berikut caranya:

ng g s films

Dan seketika akan muncul file berikut ini

hasil generate service

Dan ketika films.service.ts dibuka akan muncul kode berikut :

code di films.service.ts

Karena saat kita mengakses api kita membutuhkan Http, maka kita wajib mengimport HttpModule di app.module.ts

import { HttpModule } from ‘@angular/http’;

kemudian kita import ke AppModule. Jadi class AppModule menjadi sperti berikut :

class AppModule di app.module.ts

Setelah itu, kita balik lagi ke FilmService. Kali ini, kita akan membuat fungsi service untuk mengambil data dari api. Berikut kode untuk mengakses data ke api.

code di films.service.ts

Dari source code di atas sudah saya beri komentar tentang penjelasannya sedikit. Sisi service sudah jadi, sekarang kita menuju list-films untuk menjalankan service tersebut.

code di list-film.component.ts

Mengapa kita menjalankan service di ngOnInit() ?

karena kita ingin menjalannya di inisialiasi awal ketika komponen tersebut selesai dibuat. Berikut hasil nya :

hasilnya

Data sudah ditampilkan sesuai tempatnya, sekarang yang kurang adalah gambarnya. Setelah dilihat di response api, ternyata Api tersebut memang tidak menyediakan gambar. Oleh sebab itu, saya mengupload gambar2 nya di firebase, dan saya namai gambar2 tersebut dengan id yang sama dengan response API 😅, jadi untuk menampilkan gambarnya, cukup dengan membuat pipe untuk mengubah id response menjadi link gambar.

6. Buat pipe untuk mengakses gambar ke firebase storage

Sebelum membuat pipe, kita perlu membuat fungsi untuk mendapatkan link gambar yang diinginkan. Saya menambahkan fungsi tersebut di FilmService yang telah kita buat tadi, sehingga film.service.ts menjadi seperti ini :

code di film.service.ts

Nah, sekarang waktunya membuat pipe.

Buat file pipe di folder terpisah, saya letakkan di app > pipe. Kita namakan FirebaseImagePipe.ts

berikut adalah kodenya :

code di FirebaseImagePipe.ts

Setelah pipe terbentuk, jangan lupa untuk menggunakannya di card-film.component.ts

<img [src]=”film.id | toFirebaseImage”>

sehingga kode menjadi sperti ini :

code di card-film.component.ts

Sekarang aplikasi sudah hampir selesai.

hasil akhir

Agar lebih indah, kita tambah loading,.. Jadi ketika mengambil data tidak kosong, tetapi menampilkan loading tersebut.

Untuk menambahkan loading, kita buka list-film.component.ts. Dan buat kode yang ada menjadi kode berikut :

list-film.component.ts

Kita tambahkan juga css nya di list-film.component.css

list-film.component.css

6. Done.

ketika direload akan muncul loading seperti berikut :

loading

hasil akhir

Sekian tutorial singkat dari saya, semoga bermanfaat

Untuk mendukung bahan belajar, saya menyertakan link github saya sebagai berikut :

dhanarJkusuma/Simple-Ghibli-App

Terima kasih sudah membaca ^_^

Wassalamu’alaikum wr.wb