Building Pokefetch: نوع یاب پوکمون با Angular و PokeAPI

ek3nk4r 2023-05-23

0 40 خواندن این مطلب 10 دقیقه زمان میبرد

Building Pokefetch: نوع یاب پوکمون با Angular و PokeAPI

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این پست وبلاگ، نحوه ساخت یک برنامه وب به نام Pokefetch را با استفاده از آن بررسی خواهیم کرد زاویه ای و PokeAPI باز کردن API. هدف ما ایجاد یک رابط کاربر پسند است که به کاربران امکان می دهد نام یک پوکمون را وارد کرده و فوراً نوع مربوط به آن را بازیابی کنند.

در طول این پست وبلاگ، ما به راه‌اندازی یک پروژه Angular، یکپارچه‌سازی PokeAPI، مدیریت ورودی کاربر، ایجاد درخواست‌های HTTP و نمایش داده‌های نوع پوکمون بازیابی شده در یک صفحه وب خواهیم پرداخت. ما مؤلفه‌ها و خدمات Angular را برای ایجاد یک تجربه کاربری یکپارچه بررسی می‌کنیم.

بنابراین، توپ‌های Poké خود را بگیرید و در این سفر هیجان‌انگیز به ما بپیوندید تا Pokefetch را بسازیم، یک برنامه وب که قدرت Angular و PokeAPI را ترکیب می‌کند تا اطلاعات از نوع Pokmon را به نوک انگشتان شما برساند.

بیا شروع کنیم!

فهرست مطالب

راه اندازی Angular

برای ساخت پروژه Pokefetch خود، ابتدا باید Angular را در محیط توسعه خود راه اندازی کنیم. برای شروع مراحل زیر را دنبال کنید:

مرحله 1: Angular CLI را نصب کنید

Angular یک ابزار رابط خط فرمان (CLI) ارائه می دهد که ایجاد، مدیریت و ساختن را آسان می کند. ترمینال یا خط فرمان خود را باز کنید و دستور زیر را برای نصب Angular CLI به صورت سراسری اجرا کنید:

npm install -g @angular/cli

این دستور آخرین نسخه Angular CLI را روی دستگاه شما نصب می کند.

مرحله 2: یک پروژه Angular جدید ایجاد کنید

هنگامی که Angular CLI نصب شد، می توانیم با اجرای دستور زیر یک پروژه Angular جدید ایجاد کنیم:

ng new pokefetch
cd pokefetch

این دستور یک پروژه Angular جدید با نام “پوک واک” را در فهرستی با همین نام قرار دهید و در آن پیمایش کنید. Angular CLI ساختار پروژه را راه اندازی می کند، وابستگی ها را نصب می کند و فایل های اولیه را تولید می کند.

ایجاد پوشه کامپوننت و سرویس:

در Angular، کامپوننت‌ها بخش‌های مختلف رابط کاربری برنامه ما را نشان می‌دهند، در حالی که سرویس‌ها منطق تجاری و بازیابی داده‌ها را مدیریت می‌کنند. بیایید پوشه های لازم را برای سازماندهی اجزا و خدمات خود ایجاد کنیم.

دو پوشه با نام ایجاد کنید components و services در مسیر src/app.

مرحله 3: پیکربندی Tailwind CSS

ما از Tailwind CSS برای استایل برنامه خود استفاده خواهیم کرد. پیکربندی Tailwind CSS در برنامه شما بسیار ساده است. می توانید از وب سایت رسمی Tailwind CSS دیدن کنید یا یکی از وبلاگ های قبلی من را در همین مورد بخوانید:

راه اندازی Tailwind CSS در Angular Application

با این کار، راه اندازی اولیه پروژه به پایان می رسد و می توانیم با پروژه شروع کنیم، اما قبل از آن، اجازه دهید یک مرور کلی از پروژه Pokefetch شامل اهداف و ویژگی های آن را ببینیم.

مرحله 4: راه اندازی اولیه CSS برای برنامه

اجازه دهید مقداری CSS بنویسیم تا یک پیکربندی پیش فرض در سطح برنامه داشته باشیم. برای این

در زیر کد ساده ای برای نوشتن آمده است app.component.html برای راه اندازی CSS

<div class="h-screen w-screen bg-gray-400">
</div>

در اینجا، ما از سه کلاس Tailwind استفاده می کنیم، دو کلاس برای ارتفاع و عرض کامل صفحه و آخری برای تنظیم رنگ پس زمینه خاکستری.

معرفی پروژه Pokefetch

بررسی اجمالی پروژه

We have a simple application to display Pokemon type in an intuitive card.

پیش نمایش Pokefetch

در نوار جستجو، نام پوکمون را وارد کرده و ضربه بزنید جستجو کردن. نوع پوکمون بر روی یک کارت کوچک همانطور که در تصویر نشان داده شده است نمایش داده می شود.

این پروژه را می توانید در: Pokefetch مشاهده کنید

مقدمه ای بر PokeAPI

PokeAPI یک API باز قدرتمند و جامع است که داده های گسترده ای را در مورد جهان پوکمون ارائه می دهد. این یک مرکز مرکزی برای دسترسی به اطلاعات در مورد گونه‌های پوکمون، حرکات، توانایی‌ها، انواع و موارد دیگر است.

با PokeAPI، توسعه دهندگان به راحتی می توانند داده های مرتبط با پوکمون را در برنامه ها و پروژه های خود ادغام کنند. API یک معماری RESTful را ارائه می دهد که به ما امکان می دهد درخواست های HTTP را برای بازیابی اطلاعات خاص یا انجام پرس و جوهای پیچیده انجام دهیم. چه به جزئیاتی در مورد نوع، توانایی ها یا زنجیره تکامل پوکمون نیاز داشته باشید، PokeAPI شما را تحت پوشش قرار داده است.

Our Pokefetch project will leverage the ***PokeAPI to fetch Pokémon type information based on user input***.

ایجاد کامپوننت نوار ناوبری

بیایید ساخت برنامه خود را با بالاترین مؤلفه، یعنی شروع کنیم نوار ناوبری.

تولید مولفه Navbar

ng generate component components/navbar

Angular CLI فایل های لازم را ایجاد می کند و ساختار پروژه را به روز می کند. فایل های تولید شده شامل:

navbar.component.ts: فایل TypeScript حاوی منطق و عملکرد جزء ناوبری است.
navbar.component.html: فایل قالب HTML که ساختار و طرح بندی مولفه نوار ناوبری را تعریف می کند.
navbar.component.css: فایل CSS که به شما امکان می دهد به مؤلفه نوار ناوبری استایل دهید.
navbar.component.spec.ts: فایل تست یاس برای نوشتن موارد تست روی کامپوننت نوار ناوبری.

پوشه ای به نام ایجاد کنید images در مسیر src/app/assets/images. از این پوشه برای قرار دادن تمام تصاویر ما که ممکن است در برنامه استفاده شود استفاده می شود. برای شروع، ما یک تصویر Pokeball SVG را برای استفاده در نوار ناوبری خود قرار می دهیم.

تصویر را از اینجا دانلود کنید: Pokeball SVG.

برای برنامه خود، ما فقط از یک فایل قالب استفاده خواهیم کرد زیرا برای استایل سازی از Tailwind CSS استفاده می کنیم و مورد آزمایشی Jasmine تمرکز این وبلاگ نیست.

کد الگوی نوار ناوبری

<nav class="flex items-center justify-between flex-wrap bg-teal-400 p-4">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <img
      src="../../../assets/images/pokeball.svg"
      alt="Pokeball"
      class="w-10 h-10 mr-0.5"
    />
    <span class="font-semibold text-xl tracking-tight">Pokemon</span>
  </div>
</nav>

عنصر

رنگ پس‌زمینه و padding را در قالب ذکر شده در بالا تنظیم می‌کند. داخل یک ظرف انعطاف پذیر با تصویر آرم (pokeball.svg) و متن “Pokemon” با استفاده از اندازه فونت و وزن فونت خاص. کلاس ها flex، items-center، justify-between، و flex-wrap چیدمان و تراز نوار ناوبری را کنترل کنید.

در نهایت، برای اطمینان از اینکه جزء نوار ناوبری در برنامه رندر شده است، آن را باز کنید app.component.html فایل واقع در src/app پوشه و اضافه کنید <app-navbar></app-navbar> جایی که می خواهید نوار ناوبری ظاهر شود را تگ کنید.

<div class="h-screen w-screen bg-gray-400">
  <app-navbar></app-navbar>
</div>

برنامه خود را شروع کنید، و مولفه نوار ناوبری را در صفحه وب خود خواهید دید.

ng serve

پیاده سازی سرویس PokeAPI

برای واکشی داده‌های نوع پوکمون از PokeAPI، باید یک سرویس را در پروژه Pokefetch خود ایجاد و پیاده‌سازی کنیم. در اینجا مراحل تولید و استفاده از سرویس PokeAPI آمده است:

ایجاد سرویس PokeAPI

برای تولید سرویس PokeAPI با استفاده از Angular CLI دستور زیر را اجرا کنید:

ng generate service service/pokemon

توجه داشته باشید: اینو چک کن PokemonService و HttpClientModule وارد می شوند app.module.ts فایل. اگر نه، آن را به این شکل وارد کنید:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { PokemonService } from './service/pokemon.service';

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

درک درخواست های HTTP با Angular HttpClient

را HttpClient ماژول در Angular به ما اجازه می دهد تا درخواست های HTTP را به API های خارجی ارسال کنیم. با واردات HttpClientکلاس از '@angular/common/http' ، ما به روش هایی برای ارسال درخواست های GET، POST، PUT، DELETE و غیره دسترسی داریم.

فراخوانی PokeAPI برای واکشی نوع پوکمون

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

@Injectable({
  providedIn: 'root'
})
export class PokemonService {

  constructor(private http: HttpClient) { }

  getPokemonType(name: string): Observable<string> {
    name=name.toLowerCase();
    return this.http.get<any>            (`https://pokeapi.co/api/v2/pokemon/${name}`).pipe(
      map(response => response.types[0].type.name)
    );
  }
}

ما وابستگی های لازم را در این سرویس وارد می کنیم: Injectable و HttpClient از جانب @angular/core و @angular/common/http، به ترتیب. را getPokemonType متد یک نام پوکمون را به عنوان ورودی می گیرد و یک قابل مشاهده را برمی گرداند که نوع پوکمون را منتشر می کند.

ما نام را به حروف کوچک od تبدیل می کنیم زیرا API فقط از نام های کوچک پشتیبانی می کند و از آن استفاده می کند HttpClient برای ارسال یک درخواست GET به PokeAPI. سپس پاسخ API برای استخراج اولین نوع پوکمون ترسیم می شود.

اکنون می‌توانیم این سرویس را به اجزای خود تزریق کنیم و از آن استفاده کنیم getPokemonType روشی برای واکشی اطلاعات نوع پوکمون بر اساس ورودی کاربر.

رندر کردن پوکمون تایپ کنید در کامپوننت جستجوی پوکمون

در مولفه Pokemon-Search، ما از سرویس PokeAPI برای واکشی نوع پوکمون بر اساس ورودی کاربر استفاده خواهیم کرد. با وارد کردن و تزریق PokemonService، می‌توانیم به طور یکپارچه نوع پوکمون را بازیابی کرده و در قالب کامپوننت رندر کنیم. بیایید به اجرای این قابلیت بپردازیم.

ایجاد کامپوننت جستجوی پوکمون

دستور زیر را در Angular CLI اجرا کنید:

ng generate component components/pokemon-search

این دستور فایل های لازم را برای کامپوننت ایجاد می کند و ساختار پروژه را مانند Navbar به روز می کند.

استفاده خواهیم کرد pokemon-search.component.ts برای استفاده از سرویس ایجاد شده قبلی استفاده کنید.

وارد کردن و تزریق PokemonService

برای استفاده از PokemonService در کامپوننت Pokemon-Search، باید آن را وارد و تزریق کنیم. در اینجا مراحل وارد کردن و تزریق PokemonService است:

باز کن pokemon-search.component.ts فایل واقع در src/app/components پوشه
PokemonService را با افزودن خط زیر در بالای فایل وارد کنید:
```
import { PokemonService } from '../../services/pokemon.service';
```
در PokemonSearchComponent کلاس، یک خاصیت به نام را اعلام کنید pokemonType از نوع رشته برای ذخیره نوع پوکمون واکشی شده:
```
pokemonType: string;
```
در سازنده، PokemonService را با افزودن پارامتر زیر تزریق کنید:
```
constructor(private pokemonService: PokemonService) { }
```

متدی به نام ایجاد کنید search در PokemonSearchComponent کلاس برای مدیریت عملکرد جستجو:

search() {
  this.pokemonService.getPokemonType(this.searchTerm).subscribe(
    (type: string) => {
      this.pokemonType = type;
    },
    (error: any) => {
      console.log(error);
    }
  );
}

اینگونه است که pokemon-search.component.ts تمام تغییرات را بررسی خواهد کرد:

import { Component, OnInit } from '@angular/core';
import { PokemonService } from '../../service/pokemon.service';
@Component({
  selector: 'app-pokemon-search',
  templateUrl: './pokemon-search.component.html',
  styleUrls: ['./pokemon-search.component.css']
})
export class PokemonSearchComponent implements OnInit {

  pokemonType: string;

  constructor(private pokemonService: PokemonService) { }

  ngOnInit(): void {
  }
  searchTerm: string;

  search() {
             this.pokemonService.getPokemonType(this.searchTerm).subscribe(
      type => {
        this.pokemonType = type;
      },
      error => console.log(error)
    );
  }
}

تغییرات را در قسمت ذخیره کنید pokemon-search.component.ts فایل.

با وارد کردن و تزریق PokemonService، ما بین مولفه Pokemon-Search و عملکرد ارائه شده توسط سرویس ارتباط برقرار می کنیم. را search روش از PokemonService تزریق شده برای واکشی نوع پوکمون بر اساس استفاده می کند searchTerm. نوع واکشی شده سپس در ذخیره می شود pokemonType ویژگی.

در مرحله بعد، ما این قابلیت را در قالب مولفه Pokemon-Search ادغام خواهیم کرد.

واکشی نوع پوکمون و نمایش آن در قالب

برای واکشی نوع پوکمون با استفاده از سرویس Pokemon و نمایش آن در قالب، مراحل زیر را دنبال کنید:

باز کن pokemon-search.component.html فایل واقع در src/app/components پوشه

کد زیر را برای ایجاد فرم جستجو اضافه کنید:

<div class="flex justify-center mt-20">
  <form class="flex items-center">
    <input
      type="text"
      placeholder="Search Pokemon"
      [(ngModel)]="searchTerm"
      name="searchTerm"
      class="py-2 px-10 rounded-l-md focus:outline-none"
    />
    <button
      type="submit"
      (click)="search()"
      class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r-md"
    >
      Search
    </button>
  </form>
</div>

این کد یک فرم جستجو با یک فیلد ورودی و یک دکمه ایجاد می کند. را ngModel دستورالعمل برای اتصال مقدار فیلد ورودی به searchTerm ویژگی جزء

کد زیر را برای نمایش نوع پوکمون واکشی شده اضافه کنید:
```
<div class="flex justify-center mt-10">
  <div
    *ngIf="pokemonType && pokemonType.length > 0"
    class="max-w-sm rounded overflow-hidden shadow-lg"
  >
    <div class="flex items-center flex-col px-6 py-4 bg-green-300">
      <div class="font-bold text-xl mb-2">Type</div>
      <p class="text-gray-700 text-base">
        {{ pokemonType }}
      </p>
    </div>
  </div>
</div>
```
این کد یک محفظه با پس زمینه سبز نشان می دهد که در هنگام نمایش داده می شود pokemonType دارایی دارای ارزش است در داخل ظرف، نوع پوکمون واکشی شده با استفاده از نشان داده می شود {{ pokemonType }} نحو درونیابی

یادداشت مهم: برای استفاده از اتصال دو طرفه داده با ngModel در مؤلفه Pokemon-Search، باید FormsModule را در فایل app.module.ts وارد کنیم.

باز کن app.module.ts فایل واقع در src/app پوشه و وارد کنید FormsModule با افزودن خط زیر در بالای فایل:
```
import { FormsModule } from '@angular/forms';
```
در imports آرایه ای از @NgModule دکوراتور، اضافه کنید FormsModule به عنوان یکی از ماژول های وارد شده:
```
imports: [
  // Other imported modules
  FormsModule
],
```
تغییرات را در قسمت ذخیره کنید pokemon-search.component.html فایل.

هنگامی که یک کاربر نام پوکمون را وارد می کند و روی دکمه جستجو کلیک می کند search() متد راه اندازی می شود که the را فراخوانی می کند getPokemonType() روش از PokemonService. نوع پوکمون واکشی شده در ذخیره می شود pokemonType ویژگی و در قالب نمایش داده می شود.

در نهایت، انتخابگر را برای استفاده از مولفه Pokemon-Search در فایل app.component.html اضافه کنید.

<div class="h-screen w-screen bg-gray-400">
  <app-navbar></app-navbar>
  <app-pokemon-search></app-pokemon-search>
</div>

فایل را ذخیره کنید و صفحه وب خود را بررسی کنید.

وویلا! را پوکیفچ برنامه آماده برای استفاده است.

نتیجه

در پایان، پروژه Pokefetch یک درک اساسی از ساخت یک برنامه Angular ارائه می دهد که انواع پوکمون را با استفاده از PokeAPI واکشی و نمایش می دهد.

با این حال، توجه به این نکته مهم است که این پروژه نقطه شروعی برای مبتدیان است. فضای زیادی برای ارتقاء از نظر عملکرد و ظاهر وجود دارد. به عنوان مثال، می‌توانید ویژگی‌های اضافی مانند نمایش اطلاعات دقیق پوکمون یا بهبود رابط کاربری با استایل CSS را پیاده‌سازی کنید.

با دنبال کردن این آموزش، مبتدیان یاد گرفته‌اند که چگونه خدمات را یکپارچه کنند، تماس‌های API برقرار کنند و از فرم‌ها برای ورودی کاربر استفاده کنند. این پروژه پایه ای برای کاوش بیشتر می گذارد و به مبتدیان این امکان را می دهد که به ساخت برنامه های Angular پیشرفته تر ادامه دهند.

من دوست دارم از شما بشنوم! نظرات ارزشمند شما به من کمک می کند تا پروژه را بهبود بخشم و در آینده پیشرفت کنم. همچنین، آیا می خواهید وبلاگ بعدی را در مورد نوشتن موارد تست برای برنامه ای که در اینجا ساخته ایم بخوانید؟ در نظرات به من اطلاع دهید.

می توانید کد منبع کامل پروژه Pokefetch را در مخزن GitHub من پیدا کنید. با خیال راحت از مخزن بازدید کنید، نظر بدهید یا در پروژه مشارکت کنید.

مخزن GitHub: Pokefetch Repo

علاوه بر مخزن GitHub، من پروژه Pokefetch را نیز برای شما میزبانی کرده ام تا آن را کشف کنید. شما می توانید به نسخه زنده پروژه در این آدرس دسترسی داشته باشید: Pokefetch را امتحان کنید

با خیال راحت آن را امتحان کنید و بازخورد ارزشمند خود را ارائه دهید!

ek3nk4r 2023-05-23

0 40 خواندن این مطلب 10 دقیقه زمان میبرد