学习

eFolio Week 9 & 10 - 0% · Jimmy Huang's Blog

2025 年 10 月 10 日

eFolio Week 9 & 10 - 0%

本页目录· 15 条

Grading criteria
Grade: 2/2
eFolio Task 9.1
Screenshot 1
Screenshot 2
eFolio Task 9.2
Screenshot set 1
AddBook2View.vue
BookList2.vue
eFolio Task 10.1
Screenshot set 1
Screenshot set 2
eFolio Task 10.2
Screenshot set 1
Screenshot set 2

文件命名: efolio_Week9-10_FullName_SID.pdf

Grading criteria

任务	未提供（0 分）	已提供（0.5 分）
Rubric eFolio Week 9 Task 9.1	你未完整提交以下截图：• 截图组 1：Firebase 上已部署的函数，且能清楚显示你的帐号信息• 截图组 2：运行中项目能够获取图书数量的代码与浏览器界面	你已完整提交以下截图：• 截图组 1：Firebase 上已部署的函数，且能清楚显示你的帐号信息• 截图组 2：运行中项目能够获取图书数量的代码与浏览器界面
Rubric eFolio Week 9 Task 9.2	你未完整提交以下截图：• 截图组 1：浏览器与 VS Code 代码，展示你能向 Firestore 添加新图书条目且所有数据通过 Functions 自动转为大写；你需自行决定最佳展示方式	你已完整提交以下截图：• 截图组 1：浏览器与 VS Code 代码，展示你能向 Firestore 添加新图书条目且所有数据通过 Functions 自动转为大写；你需自行决定最佳展示方式
Rubric eFolio Week 10 Task 10.1	你未完整提交以下截图：• 截图组 1：代码与浏览器，展示当前定位天气• 截图组 2：代码与浏览器，展示 API 页面中的计数器数量	你已完整提交以下截图：• 截图组 1：代码与浏览器，展示当前定位天气• 截图组 2：代码与浏览器，展示 API 页面中的计数器数量
Rubric eFolio Week 10 Task 10.2	你未完整提交以下截图：• 截图组 1：代码与浏览器，展示可按城市查询天气（例如输入 “Clayton, AU” 显示摄氏度温度及天气图标）• 截图组 2：代码与浏览器，展示在导航至 `GetAllBookAPI` 页面时可将所有图书以 JSON 格式显示	你已完整提交以下截图：• 截图组 1：代码与浏览器，展示可按城市查询天气（例如输入 “Clayton, AU” 显示摄氏度温度及天气图标）• 截图组 2：代码与浏览器，展示在导航至 `GetAllBookAPI` 页面时可将所有图书以 JSON 格式显示

Grade: 2/2

eFolio Task 9.1

Screenshot 1

Screenshot 2

eFolio Task 9.2

Screenshot set 1

AddBook2View.vue

BookList2.vue

eFolio Task 10.1

Screenshot set 1

Screenshot set 2

eFolio Task 10.2

Screenshot set 1

Screenshot set 2

html

<template>
  <div id="app">
    <h1>Book Counter</h1>
    <button @click="getBookCount">Get Book Count</button>
    <p v-if="count !== null">Total number of books: {{ count }}</p>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      count: null,
      error: null
    }
  },
  methods: {
    async getBookCount() {
      try {
        const response = await axios.get('https://xxxxxxxxxxxxxx.app')
        this.count = response.data.count
        this.error = null
      } catch (error) {
        console.error('Error fetching book count:', error)
        this.error = error
        this.count = null
      }
    }
  }
}
</script>

html

<template>
  <div>
    <h1>Add Book 2 (Using Firebase Functions)</h1>
    <p>This page uses Firebase Functions to add books with automatic capitalization.</p>

    <form @submit.prevent="addBook">
      <div>
        <label for="isbn">ISBN:</label>
        <input type="text" v-model="isbn" id="isbn" required />
      </div>
      <div>
        <label for="name">Book Name:</label>
        <input type="text" v-model="name" id="name" required />
      </div>
      <div>
        <label for="author">Author:</label>
        <input type="text" v-model="author" id="author" required />
      </div>
      <div>
        <label for="year">Publication Year (optional):</label>
        <input type="number" v-model="year" id="year" />
      </div>
      <button type="submit" :disabled="loading">
        {{ loading ? 'Adding Book...' : 'Add Book via Function' }}
      </button>
    </form>

    <div
      v-if="message"
      :class="messageClass"
      style="margin-top: 20px; padding: 10px; border-radius: 4px"
    >
      {{ message }}
    </div>

    <!-- Display BookList2 component below the form -->
    <BookList2 />
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'
import BookList2 from '../components/BookList2.vue'

export default {
  setup() {
    const isbn = ref('')
    const name = ref('')
    const author = ref('')
    const year = ref('')
    const loading = ref(false)
    const message = ref('')
    const messageClass = ref('')

    const addBook = async () => {
      loading.value = true
      message.value = ''

      try {
        const functionUrl = 'https://xxxxxxxxxxxxxxxxx.run.app'

        const bookData = {
          isbn: isbn.value,
          name: name.value,
          author: author.value,
          year: year.value || null
        }

        const response = await axios.post(functionUrl, bookData)

        // Clear form
        isbn.value = ''
        name.value = ''
        author.value = ''
        year.value = ''

        message.value = response.data.message + ' - All text has been capitalized!'
        messageClass.value = 'success-message'
      } catch (error) {
        console.error('Error adding book via function:', error)
        message.value =
          'Error adding book. Please check the console and make sure the Firebase Function URL is correct.'
        messageClass.value = 'error-message'
      } finally {
        loading.value = false
      }
    }

    return {
      isbn,
      name,
      author,
      year,
      loading,
      message,
      messageClass,
      addBook
    }
  },
  components: {
    BookList2
  }
}
</script>

html

<template>
  <div>
    <h1>Books Added via Firebase Functions (Capitalized Data)</h1>
    <div v-if="books.length === 0">
      <p>No books added via Firebase Functions yet. Add some books using the form above!</p>
    </div>
    <ul v-else>
      <li v-for="book in books" :key="book.id">
        {{ book.name }} - Author: {{ book.author }} - ISBN: {{ book.isbn
        }}<span v-if="book.year"> - Year: {{ book.year }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import db from '../firebase/init.js'
import { collection, query, where, getDocs } from 'firebase/firestore'

export default {
  setup() {
    const books = ref([])

    const fetchBooks = async () => {
      try {
        const q = query(collection(db, 'books'), where('author', '!=', ''))
        const querySnapshot = await getDocs(q)
        const booksArray = []

        querySnapshot.forEach((doc) => {
          const bookData = doc.data()
          if (
            bookData.author &&
            (bookData.name === bookData.name?.toUpperCase() ||
              bookData.author === bookData.author?.toUpperCase())
          ) {
            booksArray.push({ id: doc.id, ...bookData })
          }
        })

        books.value = booksArray
      } catch (error) {
        console.error('Error fetching function-processed books: ', error)
      }
    }

    onMounted(() => {
      fetchBooks()
    })

    const refreshBooks = () => {
      fetchBooks()
    }

    return {
      books,
      refreshBooks
    }
  }
}
</script>

javascript

<template>
  <div class="container">
    <div class="header">
      <h1>WEATHER APP</h1>
      <div class="search-bar">
        <input type="text" v-model="city" placeholder="Enter city name" class="search-input" />
        <button @click="searchByCity" class="search-button">Search</button>
      </div>
    </div>
  </div>
  <main>
    <!--If there are no data returned, then skip rendering the information-->
    <div v-if="weatherData">
      <!--Display the weather data attribute returned from API
          Example of API data: https://openweathermap.org/current-->
      <h2>{{ weatherData.name }}, {{ weatherData.sys.country }}</h2>
      <div>
        <!--The image source of of the weather icon will be coming from a function called iconUrl
                which will be shared in script later-->
        <img :src="iconUrl" alt="Weather Icon" />
        <p>{{ temperature }} °C</p>
      </div>
      <!-- weather[0] means the current weather, the way we need to obtain data depends on how
          the API JSON data looks-->
      <span>{{ weatherData.weather[0].description }}</span>
    </div>
  </main>
</template>

<script>
// The info section in 10.1.1 provided detailed information about this package
import axios from 'axios'

const apikey = 'xxxxxxxxxxxxxxxxxxxx'

export default {
  name: 'App',
  data() {
    return {
      city: '',
      weatherData: null,
      hourlyForecast: [],
      dailyForecast: []
    }
  },
  //computed is a property that is used to define a property that
  //is dependent on other data properties.
  //If we using a more easy to understand words to understand the concept:
  //the derived value such as temperature automatically update when the relevant value change.
  computed: {
    //There are multiple way to obtain the data in Celsius format.
    //Calculation by yourself like below after data is retireved or via API parameters

    //Example of adding additional units requirement, if you choose this, remember to change section 3.1
    //https://api.openweathermap.org/data/2.5/weather?lat=XXX&lon=-XXX.15&appid={API key}&units=metric
    temperature() {
      return this.weatherData ? Math.floor(this.weatherData.main.temp - 273) : null
    },
    //Get the current weather icon using the API link
    iconUrl() {
      return this.weatherData
        ? `http://api.openweathermap.org/img/w/${this.weatherData.weather[0].icon}.png`
        : null
    }
  },
  //There are two steps involved in this,
  //step 1: identify current location
  //step 2: after identify, get the weather data straight based on the current location.
  mounted() {
    this.fetchCurrentLocationWeather()
  },
  methods: {
    //Async in a easy to understand way means the method will run in backend thread,
    //And it won't occupy the main thread, so the user experience is still smooth
    async fetchCurrentLocationWeather() {
      //The navigator.geolocation object is part of the Web API provided by modern web browsers
      //Please note this function is not belongs to Vue or openweather.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(async (position) => {
          const { latitude, longitude } = position.coords
          //API link to obtain the current weather based on the current location browser identified
          const url = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apikey}`
          //await means wait for the fetchWeatherData method to complete before proceeding
          await this.fetchWeatherData(url)
        })
      }
    },
    async fetchWeatherData(url) {
      try {
        const response = await axios.get(url)
        //Returned data from API is stored as JSON file in weatherData
        this.weatherData = response.data
      } catch (error) {
        console.error('Error fetching weather data:', error)
      }
    }
  }
}
</script>

html

<template>
  <pre>{{ jsondata }}</pre>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      jsondata: null,
      error: null
    }
  },
  methods: {
    async getBookCountAPI() {
      try {
        const response = await axios.get('https://xxxxxxxxxxxx.run.app')
        this.jsondata = response.data
        this.error = null
      } catch (error) {
        console.error('Error fetching book count:', error)
        this.error = error
        this.count = null
      }
    }
  },
  mounted() {
    this.getBookCountAPI()
  }
}
</script>

html

<template>
  <div class="container">
    <div class="header">
      <h1>WEATHER APP</h1>
      <div class="search-bar">
        <input type="text" v-model="city" placeholder="Enter city name" class="search-input" />
        <button @click="searchByCity" class="search-button">Search</button>
      </div>
    </div>
  </div>
  <main>
    <!--If there are no data returned, then skip rendering the information-->
    <div v-if="weatherData">
      <!--Display the weather data attribute returned from API
          Example of API data: https://openweathermap.org/current-->
      <h2>{{ weatherData.name }}, {{ weatherData.sys.country }}</h2>
      <div>
        <!--The image source of of the weather icon will be coming from a function called iconUrl
                which will be shared in script later-->
        <img :src="iconUrl" alt="Weather Icon" />
        <p>{{ temperature }} °C</p>
      </div>
      <!-- weather[0] means the current weather, the way we need to obtain data depends on how
          the API JSON data looks-->
      <span>{{ weatherData.weather[0].description }}</span>
    </div>
  </main>
</template>

<script>
// The info section in 10.1.1 provided detailed information about this package
import axios from 'axios'

const apikey = 'xxxxxxxxxxxxxxxx'

export default {
  name: 'App',
  data() {
    return {
      city: '',
      weatherData: null,
      hourlyForecast: [],
      dailyForecast: []
    }
  },
  //computed is a property that is used to define a property that
  //is dependent on other data properties.
  //If we using a more easy to understand words to understand the concept:
  //the derived value such as temperature automatically update when the relevant value change.
  computed: {
    //There are multiple way to obtain the data in Celsius format.
    //Calculation by yourself like below after data is retireved or via API parameters

    //Example of adding additional units requirement, if you choose this, remember to change section 3.1
    //https://api.openweathermap.org/data/2.5/weather?lat=XXX&lon=-XXX.15&appid={API key}&units=metric
    temperature() {
      return this.weatherData ? Math.round(this.weatherData.main.temp) : null
    },
    //Get the current weather icon using the API link
    iconUrl() {
      return this.weatherData
        ? `http://api.openweathermap.org/img/w/${this.weatherData.weather[0].icon}.png`
        : null
    }
  },
  //There are two steps involved in this,
  //step 1: identify current location
  //step 2: after identify, get the weather data straight based on the current location.
  mounted() {
    this.fetchCurrentLocationWeather()
  },
  methods: {
    //Async in a easy to understand way means the method will run in backend thread,
    //And it won't occupy the main thread, so the user experience is still smooth
    async fetchCurrentLocationWeather() {
      //The navigator.geolocation object is part of the Web API provided by modern web browsers
      //Please note this function is not belongs to Vue or openweather.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(async (position) => {
          const { latitude, longitude } = position.coords
          //API link to obtain the current weather based on the current location browser identified
          const url = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apikey}&units=metric`
          //await means wait for the fetchWeatherData method to complete before proceeding
          await this.fetchWeatherData(url)
        })
      }
    },
    async fetchWeatherData(url) {
      try {
        const response = await axios.get(url)
        //Returned data from API is stored as JSON file in weatherData
        this.weatherData = response.data
      } catch (error) {
        console.error('Error fetching weather data:', error)
      }
    },
    async searchByCity() {
      if (this.city.trim() === '') {
        alert('Please enter a city name')
        return
      }

      try {
        // API URL to search weather by city name with metric units for Celsius
        const url = `http://api.openweathermap.org/data/2.5/weather?q=${this.city}&appid=${apikey}&units=metric`
        await this.fetchWeatherData(url)
      } catch (error) {
        console.error('Error searching weather by city:', error)
        alert('City not found. Please check the city name and try again.')
      }
    }
  }
}
</script>

html

<template>
  <div class="container mt-4">
    <h1>All Books - JSON Data</h1>

    <div v-if="loading" class="text-center">
      <p>Loading books...</p>
    </div>

    <div v-else-if="error" class="alert alert-danger">
      <p>Error: {{ error }}</p>
    </div>

    <div v-else-if="books">
      <p class="mb-3">Total books: {{ books.length }}</p>
      <pre class="bg-light p-3 rounded">{{ JSON.stringify(books, null, 2) }}</pre>
    </div>

    <div v-else>
      <p>No books found.</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'GetAllBookAPI',
  data() {
    return {
      books: null,
      loading: false,
      error: null
    }
  },
  methods: {
    async getAllBooks() {
      this.loading = true
      this.error = null

      try {
        const response = await axios.get('https://xxxxxxxxxxx.cloudfunctions.net/getAllBooks')
        this.books = response.data.books || response.data
        this.loading = false
      } catch (error) {
        console.error('Error fetching all books:', error)
        this.error = error.message || 'Failed to fetch books'
        this.loading = false
      }
    }
  },
  mounted() {
    this.getAllBooks()
  }
}
</script>

<style scoped>
pre {
  max-height: 600px;
  overflow-y: auto;
  font-size: 0.9em;
}
</style>