SwiftUI Anime App with Animechan API: Fun, Fast & Fabulous! 🌟🤩⚔️

Hey there, anime fans and SwiftUI developers! Today, we’re going to create a fun and easy-to-use anime app that will display random quotes from your favorite shows using the Animechan API! 🚀

Get ready to laugh with some light anime jokes and enjoy this 5-minute read. Let’s dive in and build our very own anime-quote-dispenser! 😂

Getting Started: Setting Up the Project 🏁

First, create a new SwiftUI project in Xcode, and give it a fitting name — like “AnimeQuotes” or “QuoteDōjō”! 🥋

Now, let’s get our hands on those juicy anime quotes by using the Animechan API. We’ll be using two endpoints:

1. Random quote: https://animechan.vercel.app/api/random

2. Random quote from a specific anime: https://animechan.vercel.app/api/random/anime?title=naruto

More information about the API can be found at https://animechan.vercel.app.

Networking Like a Ninja 🐱‍👤

It’s time to create a networking layer to fetch quotes from the Animechan API. Let’s create a QuoteAPI class:

import Foundation

class QuoteAPI {
    let baseURL = "https://animechan.vercel.app/api"
    
    func getRandomQuote(completion: @escaping (AnimeQuote?) -> Void) {
        let urlString = "\(baseURL)/random"
        fetchData(urlString: urlString, completion: completion)
    }
    
    func getRandomQuote(fromAnime title: String, completion: @escaping (AnimeQuote?) -> Void) {
        let urlString = "\(baseURL)/random/anime?title=\(title)"
        fetchData(urlString: urlString, completion: completion)
    }
    
    private func fetchData(urlString: String, completion: @escaping (AnimeQuote?) -> Void) {
        guard let url = URL(string: urlString) else {
            completion(nil)
            return
        }
        
        URLSession.shared.dataTask(with: url) { data, response, error in
            if let data = data, error == nil {
                let quote = try? JSONDecoder().decode(AnimeQuote.self, from: data)
                completion(quote)
            } else {
                completion(nil)
            }
        }.resume()

Great, we’ve got our networking ninja ready for action! 🌟

Building the UI: Displaying Quotes Like a Boss 📱

Let’s create an engaging user interface to display the quotes. We’ll start with a simple QuoteCard view:

import SwiftUI

struct QuoteCard: View {
    let quote: AnimeQuote

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(quote.anime)
                .font(.title)
                .bold()
                .foregroundColor(.red)

            Text("\"\(quote.quote)\"")
                .font(.headline)
                .italic()

            Text("- \(quote.character)")
                .font(.subheadline)
                .fontWeight(.medium)
                .foregroundColor(.gray)
        }
        .padding()
        .background(Color(.systemGray6))
        .cornerRadius(10)
        .shadow(radius: 5)
    }
}

Now, let’s create the main ContentView:

import SwiftUI

struct ContentView: View {
    @State private var quote: AnimeQuote?
    @State private var animeTitle: String = ""
    private let quoteAPI = QuoteAPI()

    var body: some View {
        VStack {
            TextField("Enter anime title", text: $animeTitle)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            if let quote = quote {
                QuoteCard(quote: quote)
            } else {
                Text("No quote yet")
                    .font(.headline)
                    .foregroundColor(.gray)
            }

            Spacer()

            Button(action: fetchRandomQuote) {
                Text("Get Random Quote")
                    .bold()
                    .padding()
                    .background(Color.red)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
        .onAppear(perform: fetchRandomQuote)
    }

    private func fetchRandomQuote() {
        if animeTitle.isEmpty {
            quoteAPI.getRandomQuote { fetchedQuote in
                DispatchQueue.main.async {
                    self.quote = fetchedQuote
                }
            }
        } else {
            quoteAPI.getRandomQuote(fromAnime: animeTitle) { fetchedQuote in
                DispatchQueue.main.async {
                    self.quote = fetchedQuote
                }

This ContentView contains a TextField for the user to input an anime title, displays the fetched quote using QuoteCard, and has a button to fetch a new quote. Our app is now ready to roll! 🎉

Wrapping Up: Anime App Extraordinaire 🏆

Congratulations! You’ve successfully created an anime-quote-fetching SwiftUI app using the Animechan API! 🎊 Your app is now filled with wisdom (and occasional hilarity) from your favorite anime characters! 🤣

So go on, give yourself a pat on the back and share your newfound anime-quote knowledge with the world! 🌍