Bagaimana cara membuat aplikasi Angular?
Angular adalah kerangka kerja sumber terbuka yang populer untuk membangun aplikasi web yang dinamis, responsif, dan kompleks. Angular pertama kali dikembangkan oleh Google pada tahun 2010 dengan nama “AngularJS.”
Angular memungkinkan Anda untuk membuat aplikasi satu halaman yang dinamis dengan struktur kode yang bersih dan terorganisir.
Angular menggunakan TypeScript, sebuah superset dari JavaScript, yang menambahkan fitur-fitur seperti pengecekan tipe, antarmuka, dan kelas ke dalam bahasa tersebut. Hal ini membuat kode Angular lebih mudah dipelihara dan tidak mudah mengalami kesalahan.
Untuk merampingkan pengembangan web dengan Angular, akan sangat membantu jika Anda menggunakan solusi Backend-as-a-Service (BaaS) seperti Back4app.
Back4app menyediakan infrastruktur backend yang telah dibangun sebelumnya dengan fitur-fitur seperti otentikasi, penyimpanan data, dan logika sisi server.
Hal ini memungkinkan Anda untuk fokus pada pembangunan front end aplikasi Anda tanpa mengkhawatirkan kerumitan pengembangan backend.
Pada artikel ini, Anda akan menjelajahi Angular dan membangun aplikasi blog dasar menggunakan Angular dan Back4app.
Contents
Keuntungan Dari Sudut
Angular telah mendapatkan popularitas di kalangan pengembang karena banyak keunggulannya. Berikut ini adalah beberapa keunggulan utama Angular:
Pengikatan Data Dua Arah
Pengikatan data dua arah adalah fitur penghematan waktu dan peningkatan produktivitas yang meningkatkan kualitas aplikasi Angular. Pengikatan data dua arah memungkinkan perubahan pada model (data) untuk merefleksikan secara otomatis dalam tampilan (UI).
Setiap perubahan pada model segera tercermin dalam tampilan. Hal ini membuat pengembangan aplikasi yang kompleks dan dinamis menjadi lebih mudah dan lebih cepat, sehingga tidak perlu lagi menulis kode boilerplate untuk menyinkronkan model dan tampilan.
Injeksi Ketergantungan
Injeksi ketergantungan adalah fitur penting dari Angular yang membuat pengelolaan ketergantungan antara komponen dan layanan menjadi lebih mudah. Injeksi ketergantungan adalah fitur canggih yang meningkatkan keandalan, pemeliharaan, dan uji coba aplikasi Angular.
Injeksi ketergantungan di Angular memungkinkan komponen dan layanan untuk mendeklarasikan ketergantungan pada komponen dan layanan lain. Sistem injeksi ketergantungan kemudian mengambil alih tugas untuk membuat dan menyediakan ketergantungan ini secara otomatis. Hal ini menghilangkan kebutuhan untuk membuat dan mengelola dependensi secara manual, sehingga mengurangi risiko kesalahan.
Sistem injeksi ketergantungan Angular memudahkan untuk mengelola ketergantungan dan mengurangi jumlah kode yang perlu Anda tulis.
Arsitektur Berbasis Komponen
Arsitektur berbasis komponen Angular memudahkan untuk membangun antarmuka pengguna yang kompleks dengan memecahnya menjadi komponen-komponen yang lebih kecil dan dapat digunakan kembali.
Komponen dapat dengan mudah digunakan kembali di berbagai bagian aplikasi yang berbeda. Komponen dapat dikembangkan secara independen, sehingga memudahkan pengelolaan aplikasi yang kompleks dengan banyak bagian yang bergerak. Arsitektur ini juga membuat pengujian dan debugging kode menjadi lebih mudah, karena komponen dapat diisolasi dan diuji secara terpisah.
TypeScript
TypeScript adalah superset dari JavaScript yang menambahkan pengecekan tipe statis, antarmuka, kelas, dan fitur lainnya ke dalam bahasa tersebut. Bahasa ini merupakan bahasa sumber terbuka yang dikelola oleh Microsoft dan merupakan pilihan populer untuk mengembangkan aplikasi web berskala besar.
Angular ditulis dalam TypeScript. Hal ini memberikan perkakas yang lebih baik dan pengalaman pengembangan yang lebih kuat. Pengetikan statis dari TypeScript memungkinkan pengembang untuk menangkap kesalahan pada saat kompilasi, bukan pada saat runtime, sehingga lebih mudah untuk memelihara dan memperbaiki kode.
Komunitas Besar
Angular memiliki komunitas pengembang yang besar dan aktif, yang bisa sangat berharga karena beberapa alasan.
Komunitas yang besar menawarkan banyak sumber daya, seperti tutorial, dokumentasi, dan forum. Sumber daya ini dapat sangat membantu bagi pengembang yang baru mengenal Angular atau mencari solusi untuk masalah tertentu.
Komunitas yang besar berarti banyak pengembang yang secara aktif bekerja untuk meningkatkan kerangka kerja dengan membuat dan berbagi plugin dan ekstensi pihak ketiga untuk Angular. Hal ini dapat menghemat waktu dan tenaga Anda, karena Anda dapat memanfaatkan kode yang sudah ada untuk menambahkan fungsionalitas baru ke proyek Anda.
Keterbatasan Sudut
Meskipun Angular adalah framework yang kuat dan populer untuk membangun aplikasi web, Angular memiliki beberapa keterbatasan yang harus Anda ketahui. Beberapa keterbatasan Angular adalah sebagai berikut:
Kurva Pembelajaran yang Curam
Angular dapat menjadi tantangan untuk dipelajari oleh beberapa pengembang karena Angular memperkenalkan banyak konsep dan pendekatan baru untuk pengembangan web. Anda mungkin perlu menghabiskan banyak waktu untuk mempelajari modul, komponen, layanan, injeksi ketergantungan, dan pemrograman reaktif.
Ukuran besar
Angular adalah kerangka kerja yang relatif besar dibandingkan dengan kerangka kerja front-end lainnya. Ukuran besar Angular terutama disebabkan oleh set fiturnya yang luas, yang mencakup banyak fungsi bawaan, seperti penanganan formulir, perutean, dan manajemen data.
Ukuran Angular yang besar dapat mengakibatkan waktu muat yang lebih lambat untuk aplikasi web, yang dapat berdampak negatif pada pengalaman pengguna. Hal ini terutama berlaku untuk pengguna dengan koneksi internet yang lambat.
Ukuran Angular yang besar dapat membuat pengembangan dan pemeliharaan proyek yang kompleks menjadi lebih menantang.
SEO terbatas
Kemampuan SEO yang terbatas dari Angular terutama karena Angular merupakan kerangka kerja aplikasi halaman tunggal (SPA). SPA dirancang untuk berjalan sepenuhnya di browser, yang berarti kode HTML dibuat secara dinamis menggunakan JavaScript. Hal ini menyulitkan perayap mesin pencari untuk mengindeks konten situs web yang menggunakan Angular secara akurat.
Membangun Aplikasi Blog
Buat aplikasi Angular dan beri nama “blog-application.” Untuk membuat aplikasi Angular, jalankan perintah berikut di direktori proyek Anda pada terminal Anda:
ng new blog-application
Setelah membuat aplikasi Angular, Anda akan membuat dua komponen. Dua komponen tersebut adalah komponen home dan post. Setelah membuat komponen, Anda akan merutekan komponen tersebut.
Untuk menghasilkan komponen, jalankan perintah berikut ini:
cd blog-application
ng generate component home-component
ng generate component post-component
Setelah Anda membuat komponen, konfigurasikan perutean mereka di file app-routing.module.ts.
Sepertinya begitu:
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';
const routes: Routes = [
{path: '', component: HomeComponentComponent},
{path: 'post', component: PostComponentComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Blok kode di atas mendefinisikan dua rute dalam larik rute. Rute untuk HomeComponentComponent memiliki jalur kosong. Jalur kosong menandakan bahwa HomeComponentComponent akan ditampilkan segera setelah Anda me-render aplikasi.
Rute PostComponentComponent didefinisikan dengan jalur ‘post’, yang berarti bahwa ketika Anda menavigasi ke rute ini, PostComponentComponent akan dirender dan ditampilkan dalam tampilan.
Untuk menavigasi ke rute yang ditentukan, Anda akan menambahkan header ke aplikasi Anda. Anda akan membuat tajuk di file app-component.html. Header akan berisi elemen yang menavigasi ke rute yang berbeda.
Sebagai contoh:
<!--app.component.html-->
<div>
<div class="header">
<a routerLink=""><h2>Blog</h2></a>
<a routerLink="post"><button>write</button></a>
</div>
<router-outlet></router-outlet>
</div>
Div header berisi dua elemen jangkar anak. Elemen jangkar membungkus elemen h2 dan elemen tombol. Mengklik h2 akan menavigasi Anda ke rute default, sedangkan mengklik elemen tombol akan menavigasi Anda ke rute pos. Outlet router menampilkan komponen yang dirutekan di bawah div header.
Setelah membuat header, Anda menata header di file app-compnent.scss:
/* app.component.scss*/
.header{
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
Mengintegrasikan Back4App
Untuk mulai membuat aplikasi dengan Back4app, pertama-tama, pastikan Anda memiliki akun. Jika Anda tidak memiliki akun Back4app, ikuti petunjuk yang diberikan:
- Buka situs web Back4app.
- Temukan tombol Daftar di bagian kanan atas beranda dan klik tombol tersebut.
- Lengkapi formulir pendaftaran dan kirimkan.
Setelah Anda berhasil mendaftar, masuk ke akun Back4app Anda dan lanjutkan sebagai berikut:
- Cari tombol APLIKASI BARU di sudut kanan atas dan klik tombol tersebut.
- Anda akan diarahkan ke formulir di mana Anda akan memasukkan nama aplikasi yang Anda inginkan.
- Masukkan nama aplikasi Anda dan pilih tombol BUAT untuk memulai proses pembuatan aplikasi.
Setelah mengklik tombol ‘BUAT’, aplikasi Anda akan dibuat, dan Anda akan diarahkan ke dasbor aplikasi.
Menghubungkan Aplikasi Anda ke Back4app
Untuk menghubungkan aplikasi Angular Anda ke aplikasi Back4app yang Anda buat, Anda harus menginstal Parse JavaScript SDK.
Instal SDK dengan menjalankan salah satu perintah di bawah ini, tergantung pada manajer paket Anda:
#using npm
npm install parse
or
#using yarn
yarn add parse
Setelah menginstal Parse JavaScript SDK, Anda harus mendapatkan ID Aplikasi dan JavaScript Key. Anda akan membutuhkannya untuk menghubungkan aplikasi Angular Anda ke aplikasi Back4app.
Untuk mengambil ID Aplikasi dan Kunci JavaScript dari Back4app, navigasikan ke bagian Keamanan & Kunci dengan memilih Pengaturan Aplikasi di dasbor. Di sana, Anda dapat dengan mudah mengakses kunci yang diperlukan untuk menghubungkan aplikasi Angular Anda ke Back4app.
Setelah mendapatkan ID Aplikasi dan Kunci JavaScript Anda, simpanlah dengan aman di aplikasi Anda.
Dalam berkas app.component.ts Anda, impor versi kecil Parse dari parse. Kemudian panggil metode inisialisasi pada Parse. Metode inisialisasi mengambil ID Aplikasi dan Kunci JavaScript sebagai argumen. Terakhir, atur serverURL pada Parse ke‘https://parseapi.back4app.com/’.
Setelah melakukan ini, file app.component.ts Anda akan terlihat seperti ini:
//app.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";
Menambahkan Data ke Aplikasi Back4app Anda
Untuk menambahkan data ke aplikasi Back4App Anda, Anda akan membuat formulir untuk menerima data dari pengguna. Saat mengirimkan formulir, Anda akan menjalankan fungsi handleSubmit. Fungsi handleSubmit akan berisi logika untuk menambahkan postingan baru dari aplikasi blog Anda ke dalam aplikasi Back4app.
Sepertinya begitu:
// post-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-post-component',
templateUrl: './post-component.component.html',
styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {
data: postData = {
title: '',
body: '',
}
handleSubmit(){
try {
const Post = new Parse.Object("Post");
Post.set("title", this.data.title);
Post.set("body", this.data.body);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
}
}
interface postData {
title: string,
body: string
}
Blok kode di atas adalah file post-component.component.ts**.** Fungsi handleSubmit membuat objek Parse Post baru dan menetapkan properti judulnya ke nilai properti data.title dan properti body ke properti data.body. Terakhir, fungsi ini menyimpan properti objek Post ke server Parse menggunakan Post.save().
Properti data akan mendapatkan nilainya dari pengguna melalui formulir. Untuk melakukan hal ini, Anda akan membuat sebuah formulir di dalam file post-component.component.html.
Sepertinya begitu:
<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
<input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >
<textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea>
<button type="submit">Post</button>
</form>
NgModel mengikat nilai bidang input judul dan isi ke properti data. ngSubmit menangani pengiriman formulir dengan memanggil fungsi handleSubmit yang dideklarasikan di file post-component.ts.
Selanjutnya, Anda akan memberi gaya pada komponen Anda. Pada file SCSS dari komponen pasca, masukkan kode berikut ini:
/* post-component.component.scss */
.post{
margin-block-start: 4rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
input{
border: none;
inline-size: 100%;
padding: 1rem;
border-radius: 7px;
&::placeholder{
color: #e2e2e2;
}
textarea{
border: none;
inline-size: 100%;
padding: 1rem;
&::placeholder{
color: #e2e2e2;
}
}
}
Mengambil Data Dari Back4app
Untuk mengambil data dari aplikasi Back4app Anda, buatlah kueri Parse untuk kelas yang ingin Anda ambil datanya. Kueri ini akan dijalankan di hook siklus hidup ngOnInit.
Sebagai contoh:
// home-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-home-component',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {
data: postData[] = [];
async ngOnInit() {
try {
const query = new Parse.Query("Post");
const post = await query.find();
this.data = post;
} catch (error) {
console.log(error);
}
}
}
interface postData {
id: string,
get: any,
}
Blok kode di atas mencari objek “Post” dari database aplikasi Back4app Anda menggunakan metode Parse.Query(). Kemudian mengembalikan sebuah array yang berisi hasil dari query dengan memanggil metode find dari Parse SDK pada hasil dari pemanggilan Parse.Query(). Terakhir, ia menetapkan array yang dikembalikan ke variabel data.
Dengan menggunakan array data, Anda akan merender templat HTML Anda:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button>Delete</button>
</div>
</div>
Arahan ngFor mengulang melalui larik dan menghasilkan elemen HTML yang dibungkus dalam div. Metode post.get() mengambil nilai dari properti judul dan isi dari atribut dalam database Back4App Anda.
Anda sekarang dapat memberi gaya pada komponen Anda dengan menambahkan kode berikut dalam file SCSS komponen:
/* home-component.component.scss */
.home{
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 4rem;
.post{
border-radius: 12px;
padding: 1rem;
&:hover{
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background-color: #e2e2e2;
}
h3{
text-transform: uppercase;
margin-block-end: 0.4rem;
}
button{
margin-block-start: 1rem;
}
}
}
Menghapus Data Dari Aplikasi Back4app Anda
Untuk menghapus data dari aplikasi Back4App Anda, Anda menggunakan metode destroy untuk menghapus record yang sesuai dari database Anda. Anda akan membuat fungsi deletePost di file home-component.component.ts. Fungsi deletePost akan berisi logika untuk menghapus posting dari database aplikasi Back4app Anda berdasarkan ID yang diberikan.
Sepertinya begitu:
// home-component.component.ts
async deletePost(id: string) {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newData = this.data.filter( (item: postData) => item.id !== id )
this.data = newData;
} catch (error) {
console.log(error);
}
}
Blok kode di atas membuat objek Post baru menggunakan metode Parse.Object.extend. Kemudian menetapkan properti id dari objek Post ke parameter id yang dioper ke fungsi.
Selanjutnya, ia memanggil metode destroy dari objek Post untuk menghapus postingan dengan ID yang diberikan dari database Back4app. Kemudian menyaring larik data dan mengembalikan larik baru newData, dengan semua postingan kecuali postingan yang dihapus. Larik newData kemudian ditugaskan ke variabel data.
Setelah Anda mendefinisikan fungsi deletePost di berkas home-component.component.ts, Anda akan mengikat fungsi tersebut ke tombol hapus di berkas HTML komponen dengan menggunakan peristiwa klik.
File home-component.component.html Anda akan terlihat seperti ini:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button (click)="deletePost(post.id)">Delete</button>
</div>
</div>
Terakhir, tambahkan beberapa gaya global ke aplikasi dengan menambahkan blok kode di bawah ini ke file styles.scss Anda:
/* styles.scss */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: inherit;
}
button{
border: 1px #333333 solid;
padding: 0.3rem 0.5rem;
border-radius: 0.4rem;
background-color: inherit;
inline-size: min-content;
&:hover{
background-color: #333333;
color: #FFFFFF;
}
}
Menguji Aplikasi
Untuk menguji aplikasi, buka terminal proyek Anda dan jalankan perintah di bawah ini:
ng serve
Perintah di atas mengkompilasi aplikasi dan menghostingnya di server lokal di http://localhost:4200 secara default.
Ketika aplikasi Anda diluncurkan, Anda akan melihat UI yang ditunjukkan pada gambar di bawah ini:
Mengklik tombol tulis akan mengarahkan Anda ke komponen pascakomponen. Komponen pasca berisi formulir dengan bidang input dan tombol.
Komponen pasca akan terlihat seperti ini:
Setelah mengisi kolom input, mengklik tombol post akan menambahkan nilai input ke database Back4app. Untuk mengonfirmasi hal ini, Anda dapat memeriksa dasbor aplikasi Back4app Anda atau hanya mengarahkan kembali ke beranda aplikasi.
Mengklik tombol hapus akan menghapus sebuah postingan. Sebagai contoh, hapus postingan ‘Apa itu singa?’ dengan mengeklik tombol hapus:
Kesimpulan
Angular adalah kerangka kerja yang kuat untuk membangun aplikasi web yang dapat diskalakan dan kuat. Framework ini memiliki arsitektur modular, pengikatan data yang kuat, dan komponen yang sudah jadi. Manfaatnya meliputi peningkatan produktivitas pengembang, proses pengembangan yang efisien, dan kemampuan untuk membuat antarmuka pengguna yang dinamis, responsif, dan berkinerja tinggi.
Membangun aplikasi Angular dengan Back4app sebagai solusi Backend-as-a-Service dapat sangat menyederhanakan dan mempercepat pengembangan. Dengan infrastruktur yang sudah dibangun sebelumnya dari Back4app, Anda dapat fokus pada pembuatan front end aplikasi Anda tanpa perlu mengkhawatirkan kerumitan pengembangan backend, seperti otentikasi dan penyimpanan data.
