ChatGPT som utviklerverktøy

Unngå fillertekst

Inkluder "CODE ONLY" i prompts for å unngå fillertekst.

Eks

Create a simple hello world blazor component, with inline code. CODE ONLY.

Resulterer i:

<h1>Hello World</h1>

@code {
    protected override void OnInitialized()
    {
        Console.WriteLine("Hello from Blazor!");
    }
}

Generer egen pseudokode 🤯

Fikk ideen fra fireship

Man kan be ChatGPT om å generere egen pseudokode, tilpasset deg, for å definere kode. F.eks. ba jeg den om å lage et pseudospråk for Blazor komponenter, strukturert som en todo liste, hvor jeg kan spesifisere hvordan "code behind" skal fungere.
Da lagde den TodoBlaze, med utvidelsen ActionBlaze og ga følgende eksempel:

MyFormComponent:
  - Class: (my-form-class)

  MudContainer:
    MudForm:
      - Validation: (OnFieldChanged)
      -> OnValidSubmit: (HandleFormSubmit)

      MudTextField:
        - Label: (First Name)
        - Variant: (Variant.Text)
        - Required: (true)

      MudTextField:
        - Label: (Last Name)
        - Variant: (Variant.Text)
        - Required: (true)

      MudDatePicker:
        - Label: (Date of Birth)
        - Required: (true)

      MudSelect:
        - Label: (Country)
        - Required: (true)
        - Items: (countriesList)

      MudButton:
        - Type: (ButtonType.Submit)
        - Color: (Color.Primary)
        - Variant: (Variant.Contained)
        - Text: (Submit)

-> Initialize: (LoadCountries)
-> Method: (LoadCountries)
-> Method: (HandleFormSubmit)

Hvis jeg så ber den om å generere en blazor komponent med inline kode, spytter den ut følgende:

@using MudBlazor
@inject HttpClient Http

<MyFormComponent Class="my-form-class">
    <MudContainer>
        <MudForm Validation="OnFieldChanged" OnValidSubmit="HandleFormSubmit">
            <MudTextField Label="First Name" Variant="Variant.Text" Required="true"></MudTextField>
            <MudTextField Label="Last Name" Variant="Variant.Text" Required="true"></MudTextField>
            <MudDatePicker Label="Date of Birth" Required="true"></MudDatePicker>
            <MudSelect Label="Country" Required="true" Items="countriesList"></MudSelect>
            <MudButton Type="ButtonType.Submit" Color="Color.Primary" Variant="Variant.Contained" Text="Submit"></MudButton>
        </MudForm>
    </MudContainer>
</MyFormComponent>

@code {
    private List<string> countriesList = new List<string>();

    protected override async Task OnInitializedAsync()
    {
        await LoadCountries();
    }

    private async Task LoadCountries()
    {
        // Replace this with your logic for loading the list of countries.
        // Example: countriesList = await Http.GetFromJsonAsync<List<string>>("api/countries");
        countriesList = new List<string>
        {
            "United States",
            "Canada",
            "United Kingdom",
            "Germany",
            "France",
            "Spain",
            "Italy",
            "Australia",
            "Brazil",
            "India",
            // Add more countries as needed
        };
    }

    private async Task HandleFormSubmit()
    {
        // Add your form submission handling logic here.
        // Example: await Http.PostAsJsonAsync("api/formsubmit", formModel);
    }
}

Prøvde å lage en liten blazor komponent som viser en grid med bøker.

Generate a blazor component, with inline code, given the following pseudocode:
BookGrid:
  Grid:
	  - Books: (bookList)
	  
	  Book:
		  (book)
	      BookCover:
		    - Image: (book.img)
		  BookTitle:
			- Title: (book.title)
		  BookRating:
			- Rating: (book.rating)
			- OnClick: (SaveBookRating)

Fikk ut:

@using System.Collections.Generic

<BookGrid>
    <Grid>
        @foreach (var book in bookList)
        {
            <Book>
                <BookCover Image="@book.img"></BookCover>
                <BookTitle Title="@book.title"></BookTitle>
                <BookRating Rating="@book.rating" OnClick="SaveBookRating"></BookRating>
            </Book>
        }
    </Grid>
</BookGrid>

@code {
    private List<BookModel> bookList = new List<BookModel>();

    // Add your logic to load books here, or assign the bookList variable with a list of books.

    private void SaveBookRating(BookModel book, int rating)
    {
        // Add your logic to save the book rating here.
    }

    public class BookModel
    {
        public string img { get; set; }
        public string title { get; set; }
        public int rating { get; set; }
    }
}

Siden jeg ikke har implementert de forskjellige komponentene, ba jeg den om å erstatte de ikke implementerte komponentene med fungerende kode:

@using MudBlazor
@using System.Collections.Generic

<MudContainer>
    <MudGrid>
        @foreach (var book in bookList)
        {
            <MudGrid Item xs="12" sm="6" md="4" lg="3">
                <MudCard>
                    <MudCardMedia>
                        <MudImg Src="@book.img" Alt="@book.title" />
                    </MudCardMedia>
                    <MudCardContent>
                        <MudText Typo="Typo.h6">@book.title</MudText>
                    </MudCardContent>
                    <MudCardActions>
                        <MudRating Value="@book.rating" ValueChanged="@(v => SaveBookRating(book, (int)v))" />
                    </MudCardActions>
                </MudCard>
            </MudGrid>
        }
    </MudGrid>
</MudContainer>

@code {
    private List<BookModel> bookList = new List<BookModel>();

    // Add your logic to load books here, or assign the bookList variable with a list of books.

    private void SaveBookRating(BookModel book, int rating)
    {
        // Add your logic to save the book rating here.
        book.rating = rating;
    }

    public class BookModel
    {
        public string img { get; set; }
        public string title { get; set; }
        public int rating { get; set; }
    }
}

Etter å ha modifisert den bittelitt, og bedt ChatGPT om å hente ut bok omslag fra et API gitt boktittel, resulterte det i dette:
CleanShot 2023-04-06 at 14.52.17@2x.png