Gumawa ng Library Finder App sa Angular: Serbisyo at Direksiyon sa Aklatan

Sa isa sa mga nauna kong serye ng pagtuturo ng Angular, isinama ko ang mga pangunahing kaalaman ng Angular, mula sa pag-install ng CLI at pagtalakay kung paano gumawa ng pangunahing bahagi nito at pagpatupad ng routing. Tingnan ang aking post sa Paggawa ng Iyong Unang Angular App: Mga Pangunahing Kaalaman, para sa paalala muli sa pag-install ng Angular CLI at ibang pang inirerekomendang instrument para makagawa ng Angular app nang madali.  

• Angular
  Paggawa ng Iyong Unang Angular App: Mga Pangunahing Kaalaman
  Monty Shokeen

Ang country information app na ginawa natin sa seryeng iyon ay maganda para umpisahan ang Angular, subalit may kulang itong ilang features.   Halimbawa, itinago natin ang impormasyon na nais nating ipakita sa ating users sa loob ng array. Subalit sa pagtuturong ito, pupunta tayo sa labas ng maliit na set ng data at hayaang hanapin ng users ang library database na makikita sa CDNJS.

Narito ang app na gagawin natin:

Sa panimulang pagtuturo ng seryeng ito, Nabanggit ko na kukunin natin ang lahat ng mga datos sa aklatan sa tulong ng CDNJS API. Nabanggit ko din na may dalawang bahagi sa ating app na gagamit ng datos mula sa  mga bumalik na tugon para maipakita ang mahalagang impormasyon sa gumagamit.

• Angular
  Gumawa ng Library Finder App sa Angular: Panimula
  Monty Shokeen

Sa pahayag na ito, ating isusulat ang lahat ng mga code na kailangan upang ma-access ang mga impormasyon tungkol sa iba’t-ibang aklatan sa iisang file library.service.ts.

Tayo ay lumikha ng isang katulad na file sa ibang pagtuturo at tinawag na lumikha ng iyong unang Angular app: pagtatago at pag-access ng datos. Kung gayon, ating itinago ang datos sa isang lugar lamang sa loob na naka-ayos at pagkatapos ay sinulatan ng mga pamamaraan sa loob ng uri ng serbisyo upang ma-access ang impormasyon mula sa sentral na lokasyon. Mayroon tayong gagawin na parang kaparehas sa oras din ito.

Paglikha ng LibraryService Class

May kaunting pagkakaiba ang mga bagay kaysa dun sa huli natin tinukoy na klase ng serbisyo. At sa panahon na iyon, ang mga datos ay nakatago sa iisang lugar lamang para ma-access natin ito kaagad. Sa ngayon, ating kukunin ang mga datos sa server, kung kaya’t kailangan natin mag-angkat ng ibang lupon ng dependensya.

Kailangan din nating baguhin ang mga paraang ginamit natin upang ma-access ang ating mga datos dahil ang mga impormasyon ay hindi agad-agad magagamit sa oras na ito. Tandaan palagi ang mga bagay na ito, tayo’y magsimula nang magsulat ng mga code para sa LibraryService.

Tayo ay aangkat ng dalawang dependesya para sa ating LibraryService class. Ang Injectable dependency na mayroon ay @angular/core ay nagpapahintulot na mag-inject sa ating LibraryService class sa loob ng ibang bahagi na nangangailangan nito.

Tayo rin ay mag-aangkat ng HttpClient mula sa @angular/component/http. Ang injectable class na ito ay nakapagbibigay sa atin ma-access ang iba’t-ibang paraan na maaring gamitin upang gumawa ng kahilingan na HTTP. Gagamitin natin ang gets( ) na pamamaraan mula sa klase na ito upang makuha ang lahat ng ating datos ng aklatan.

Tutukuyin natin ang dalawang pamamaraan na nasa loob ng ating LibraryService class kung saan kahit alin ay makukuha ang datos tungkol sa isang partikular na aklatan o makakakuha ng lisatahan ng maraming aklatan. Narito ang kumpletong code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class LibraryService {

    constructor(private http: HttpClient) {
    }

    showLibrary(libraryName) {
        const url = 'https://api.cdnjs.com/libraries/' + encodeURI(libraryName);
        return this.http.get(url).toPromise();
    }

    searchLibraries(searchTerm) {
        const url = 'https://api.cdnjs.com/libraries?search=' + encodeURI(searchTerm) + '&fields=version,description';
        return this.http.get(url).toPromise();
    }
}

Sa loob ng showLibrary( ) at searchLibraries( ) pamamaraan, ginamit natin ang parehas na ayos para bumuo ng ating URL na ating napag-usapan sa nakaraang pagtuturo. Para sa searchLibraries ( ), makukuha lan natin ang bersiyon at paglalarawan ng bawat aklatan. Para showLibrary (), hindi natin tutukuyin ang anuman partikular na larangan para makuha natin lahat, kasama ang link sa homepage, sisidlan, etc.

Pagkatapos niyan, gumamit tayo ng toPromise ( ) pamamaraan upang palitan ang Observable na binalik sa pamamagitan ng pagkuha gets( ) pamamaraan bilang Promise. Napapadali ng Promises para sa atin na isulat ang asynchronous code. Kapag ang Promise ay natupad o natanggihan, ito ay may ibabalik sa iyo na halaga kung saan ay magagamit nang ayon dito. Magagamit natin ang noon then() pamamaraan sa Promise para ilakip sa humahawak ng katuparan at hindi pagtanggap sa ating promise. Ito ay tatalakayin sa pagtururo mamaya kung saan ay matututunan natin kung pano manipulahin ang bumalik na datos at ipakita ito sa ating mga gumagamit.

Pagpapatupad ng Direksiyon para sa ating App.

Hindi tayo lumikha ng anuman bahagi mula sa ating library finder app, ngunit alam pa rin natin kung anong bahagi ang kailangan maipakita.

Upang isulat ang ating code para sa direksiyon, tayo ay lilikha ng file na pinangalanang app-routing.module.ts at idagdag ang mga sumusunod na code sa loob nito:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { LibraryDetailsComponent } from './library-details/library-details.component';
import { LibraryListComponent } from './library-list/library-list.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'detail/:library', component: LibraryDetailsComponent },
    { path: 'list/:search', component: LibraryListComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

Sisimulan natin sa pamamagitan ng pag-angkat ng iba’t-ibang Angular dependencies at iba pang bahagi na ating lilikhain mamaya. Anuman oras na ang mga gumagamit ay bibisita sa tinutukoy na daan sa loob ng routes array, ating ibibigay ang kaukulang bahagi sa kanila.

Ang tutuldok (: ) na naroon sa ikatlo at ika-apat na daan ay ginamit upang ipahiwatig na ang kapwa aklatan at hanapan ay mga placeholder para sa mas tiyak na pangalan ng aklatan at hanapan ng mga termino. Sa paraan ito, maiiwasan natin ang magtakda ng bagong daan para sa bawat aklatan at gamitin lamang ang pangkalahatan daan kung saan ay madali natin makukuha ang pangalan ng aklatan o ang hanapan ng termino.

Pag-update ng File na app.module.ts 

Pagkatapos lumikha ng ating LibraryService class at pagpapatupad ng lohika ng direksiyon, ang dapat na lang natin gawin ay i-update ang file ng app.module.ts. Ang file na ito ay ginamit ng Angular para makagawa at mag-bootstrap ng ating app. Kung bubuksan mo ang file na ito, mapapansin mo na ito ay hindi bakante. Ang Angular ay nakapag-angkat na ng ibang mga dependencies na kakailanganin natin upang lumikha ng ating app. Angular din ang mag-uupdate ng app na ito kinalaunan kapag nakalikha na tayo ng sarili nating bahagi gamit ang Angular CLI. Sa ngayon, ilagay ang mga sumusunod na code sa loob ng app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';

import { LibraryService } from './library.service';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [LibraryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Kailangan mo din mag-angkat ng BrowserModule para sa bawat Angular app kung saan ay tatakbo ito sa browser. Pag-angkat ng HttpClientModule ay nagbibigay sa atin ng daan para sa HttpClient at iba pang nauugnay na serbisyo na ginagamit natin sa loob ng LibraryService class para makakuha ng impormasyon tungkol sa iba’t-ibang aklatan. Ang angular ay nakapag-angkat na ng AppComponent class para sa atin. Sa ngayon, kailangan lang natin mag-import ng  LibraryService class at AppRoutingModule na ating tinukoy sa nakaraang seksiyon.

Pagkatapos angkatin ang mga kinakailangan dependencies, ginamit natin ang @NgModule na dekorador na kumukuha ng metadata object para sabihin sa Angular kung paano magtala at ilunsad ang ating application.

Ang declarations array ay ginamit upang tukuyin ang lahat ng mga klase ng bahagi na kakailanganin ng ating app. Sinusubukang gumamit ng isang bahagi na walang lista dito ay mag-reresulta ng kamalian. Sa ngayon, ang declarations array ay naglalaman lamang ng isang klase. Sa sandaling bumuo tayo ng mas maraming bahagi gamit ang Angular CLI, sila ay awtomatikong madadagdag sa listahan na ito.

Ang imports array ay ginamit upang tukuyin ang lahat ng mga modulo na kinakailangan ng ating app. Dapat mo lamang idagdag ang NgModule classes sa loob ng imports array. Sa usapin na ito, ang mga klase na ito ay ang mga BrowserModule, HttpClientModule, and AppRoutingModule.

Ginamit mo ang providers array para tulutan ang dependency injector na malaman ang tungkol sa iba’t-ibang serbisyo na kinakailangan ng ating app. Sa usapin na ito, tayo ay nagdadagdag lamang ng LibraryService class sa loob ng providers array.

Panghuling Pahayag

Nakapaglikha tayo ng tatlong magkakaibang files sa pagtuturong ito. Ang library.service.ts ay ginagamit upang tukuyin ang LibraryService class na may iba’t-ibang pamamaraan upang makakuha ng datos tungkol sa sari-saring mga aklatan. Ang app-routing.module.ts file ay ginamit upang maitago ang mga routing logic ng ating app. Itinatago natin ang impormasyon tungkol sa iba’t-ibang daan at ang mga nararapat na bahagi na kinakailangang maikarga para sa bawat daan sa loob ng routes array. Sa wakas, nakapag-update na tayo nang app.module.ts file para isama ang LibraryService class at ang AppRoutingModule na mayroon sa buong app.

Sa susunod na pagtuturo, maglilikha ka ng HomeComponent para sa ating Angular app para pahintulutan ang mga gumagamit na tukuyin sa hanapan ng termino o pangalan ng aklatan. Kung mayroon kang nais linawin na anuman sa pagtuturong ito, ipaalam mo lan sa akin sa mga komento.