瑞克和莫蒂 API

API
Components
Store
Types
从外部 API 获取数据，并通过条件和循环在组件中展示。
瑞克和莫蒂探索器 (集 1)
返回学院

Project Introduction

This tutorial covers integration of an external API (Rick and Morty) to display a list of characters in stylized cards with Luna Park.

1. Data Preparation

Rick and Morty API

  1. Go to Rick and Morty API
  2. Characters section to list all characters
  3. Examine the structure: results containing character data
  4. Copy the API URL: https://rickandmortyapi.com/api/character

2. Data Fetching

Main Page Configuration

  1. Create a Main page
  2. Add logic with Manual Play (test button)
  3. Create a Fetch node with the API URL
  4. Ctrl + Space after execution to see the data

Fetch Testing

  • Before click: "Undefined" (normal)
  • After clicking Manual Play: complete API data visible

3. Automatic Data Typing

Type Generation

  1. Click on the Fetch block
  2. Custom Types Type Generate
  3. Automatic type generation for the entire API response

Character Type Creation

  1. Copy the generated structure for one character (object with id, name, status, etc.)
  2. New Type name "Character"
  3. Right-click Paste to paste the copied structure

4. Store Configuration

Global Data Structure

  1. In the Store, create a "Characters" schema
  2. Type: Array of Character (array of characters)
  3. Empty list by default

Store Population

  1. Return to Main page
  2. Spread the API JSON to extract "results"
  3. GetNewStore SetProperty
  4. Target: store, Property: "Characters", Value: results
  5. Connect to execution with Manual Play

5. Card Component

Basic Properties

  1. Create a Card component
  2. Three properties:
    • image (string): image URL
    • name (string): character name
    • status (string): alive/dead/unknown

Default Values

Use Rick Sanchez data for testing:

  • Image: Rick's image URL
  • Name: "Rick Sanchez"
  • Status: "Alive"

Component Structure

  1. Main Block (container)
  2. Media for image (source = reactive image property)
  3. Custom Text for name (variable = name property)
  4. Status Component (to be created) for status

6. Status Component with Conditions

Status Component Creation

  1. New component with status property (string, default "Alive")
  2. Use Template with If condition

Conditional Logic

Template 1: if status equals "Alive"

  • Green background (success lightest)
  • Readable white text

Template 2: if status equals "Dead"

  • Red background (error)

Template 3: if status equals "Unknown"

  • Gray background

Integration in Card

  1. Select Status component in Card
  2. status property reactive link to Card's status property

7. Complete List Display

Loop Over Data

  1. Main page Template with For
  2. Iterate over newstore.characters
  3. Card component in the loop

Dynamic Data Binding

For each Card property:

  • Image: template.value.image
  • Name: template.value.name
  • Status: template.value.status

All cards display with their respective data.

8. Advanced Styling

Card Component Style

Main Block:

  • Background: lightest token
  • Width: 200px, Height: 260px
  • Display: flex, Direction: column
  • Border radius for rounded corners
  • Overflow hidden

Status Positioning:

  • Card: position: relative
  • Status: position: absolute
  • Inset top/left for positioning
  • Padding, border radius, slight rotation

Media and Text:

  • Height/width 100% for image
  • Display flex center for name
  • Font bold

Main Grid Style

Main Page:

  • Display: flex with wrap
  • Gap for spacing
  • Justify content center
  • Padding for breathing room

Technical Concepts

API Integration

  • Fetch: external data retrieval
  • Spread: object property extraction
  • SetProperty: global store update

Types and Store

  • Automatic generation of types from API
  • Global store for data sharing
  • Typed arrays for collections

Conditional Components

  • Templates with If: conditional display
  • Reactive properties: dynamic binding
  • Reusability: same component, different data

Loops and Display

  • Template with For: iteration over collections
  • template.value: access to current element
  • Responsive grids with flexbox

Final Result

Complete application displaying all Rick and Morty characters in a grid of stylized cards, with colored statuses and automatic updates from the API.