Створення додатку Генератор випадкових цитат — чудовий спосіб вивчити програмування, створюючи практичний продукт. Цей посібник пояснює кроки, які я зробив для створення додатку, з детальними фрагментами коду, щоб допомогти початківцям зрозуміти процес на рівні коду.
Огляд проєкту
Додаток отримує випадкові цитати за допомогою публічного API, відображає їх на екрані та дозволяє користувачам копіювати чи ділитися цитатами. Ми розглянемо кроки створення цього додатку та обговоримо логіку за кодом.
Крок 1: Створення структури HTML
Перший крок — створення HTML-розмітки для додатку. Ось базова структура:
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quotes Generator</title>
</head>
<body>
<div class="container">
<h1>Random Quotes Generator</h1>
<p>"Randomness is not the absence of order, but the presence of possibilities."</p>
<p>Quote will appear here</p>
<p>Author unknown</p>
<button>New Quote</button>
<footer>
<p>Credit: Quotes API</p>
<p>Built with ♥ from Dev</p>
</footer>
</div>
</body>
</html>
Цей код визначає структуру додатку, включаючи елементи для відображення цитати, кнопки для отримання нових цитат і піктограми для функцій копіювання та спільного використання.
Крок 2: Вирішення проблем з CORS за допомогою проксі-сервера
Щоб отримувати цитати з зовнішнього API, потрібно вирішити проблему з CORS (Cross-Origin Resource Sharing). Це можна зробити за допомогою простого Express.js проксі-сервера.
proxy.js:
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();
// Enable CORS
app.use(cors());
// Define a route for proxying API requests
app.get("/api/quote", async (req, res) => {
try {
const response = await fetch("https://qapi.vercel.app/api/random");
const data = await response.json();
res.json(data);
} catch (error) {
res.status(500).json({ error: "Failed to fetch data from API" });
}
});
const PORT = 4000;
app.listen(PORT, () => console.log(`Proxy server running on http://localhost:${PORT}`));
Цей код працює як локальний проксі для отримання цитат з API та обходу обмежень CORS.
Крок 3: Отримання цитат за допомогою JavaScript
Додаток отримує нову цитату при натисканні на кнопку "New Quote".
Ось як працює логіка:
index.js:
const quote = document.querySelector(".quote");
const author = document.querySelector(".author");
async function generateQuote() {
const url = 'http://localhost:4000/api/quote';
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const result = await response.json();
quote.textContent = result.quote || "Цитата недоступна.";
author.textContent = result.author || "Автор невідомий";
} catch (error) {
console.error("Помилка при отриманні цитати:", error);
quote.textContent = "Не вдалося отримати цитату. Спробуйте ще раз пізніше.";
}
}
Цей скрипт отримує дані з проксі-сервера та оновлює інтерфейс додатку, відображаючи отриману цитату та автора.
Крок 4: Додавання функції копіювання
Щоб користувачі могли копіювати цитати, ми використовуємо Clipboard API.
copyQuote.js:
async function copyQuote() {
try {
let quote = document.querySelector(".quote").textContent;
let author = document.querySelector(".author").textContent;
await navigator.clipboard.writeText(`${quote} - ${author}`);
alert("Контент скопійовано в буфер обміну");
} catch (error) {
console.error('Не вдалося скопіювати:', error);
}
}
Коли користувач натискає піктограму копіювання, цитата та автор копіюються в буфер обміну.
Крок 5: Додавання функції поділитися
Navigator API дозволяє користувачам ділитися цитатами.
Створення додатку Генератор випадкових цитат — це чудовий спосіб вивчити програмування, створюючи щось практичне. У цьому посібнику я поясню кроки, які я використав для створення додатку, включаючи детальні фрагменти коду, щоб допомогти початківцям зрозуміти процес на рівні коду.
Огляд проекту
Додаток отримує випадкові цитати за допомогою публічного API, відображає їх на екрані та дозволяє користувачам копіювати або ділитися цитатами. Ми розглянемо етапи створення цього додатку та обговоримо логіку за кодом.
Крок 1: Налаштування структури HTML
Першим кроком є створення HTML-макету для додатку. Ось базова структура:
index.html:
<html>
<head>
<title>Random Quotes Generator</title>
</head>
<body>
<div class="quote-box">
<div class="quote">Quote will appear here</div>
<div class="author">Author unknown</div>
<button class="quote-button">New Quote</button>
<button class="copyquote">Copy</button>
<button class="sharequote">Share</button>
</div>
<footer>
<p>Built with ♥ from Dev</p>
</footer>
</body>
</html>
Цей код визначає структуру додатку, включаючи елементи для відображення цитати, кнопки для отримання нових цитат та піктограми для функцій копіювання та поділу.
Крок 2: Обробка проблем з CORS за допомогою проксі-сервера
Щоб отримувати цитати з зовнішнього API, потрібно обробити проблему CORS (Cross-Origin Resource Sharing). Це можна зробити за допомогою простого Express.js проксі-сервера.
proxy.js:
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();
// Дозволити CORS
app.use(cors());
// Визначити маршрут для проксування API запитів
app.get("/api/quote", async (req, res) => {
try {
const response = await fetch("https://qapi.vercel.app/api/random");
const data = await response.json();
res.json(data);
} catch (error) {
res.status(500).json({ error: "Не вдалося отримати дані з API" });
}
});
const PORT = 4000;
app.listen(PORT, () => console.log(`Proxy server running on http://localhost:${PORT}`));
Цей код виступає як локальний проксі для отримання цитат з API та обходу обмежень CORS.
Крок 3: Отримання цитат за допомогою JavaScript
Додаток отримує нову цитату, коли користувач натискає кнопку "New Quote".
index.js:
const quote = document.querySelector(".quote");
const author = document.querySelector(".author");
async function generateQuote() {
const url = 'http://localhost:4000/api/quote';
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const result = await response.json();
quote.textContent = result.quote || "Цитата недоступна.";
author.textContent = result.author || "Автор невідомий";
} catch (error) {
console.error("Помилка при отриманні цитати:", error);
quote.textContent = "Не вдалося отримати цитату. Спробуйте ще раз пізніше.";
}
}
Цей скрипт отримує дані з проксі-сервера та оновлює інтерфейс додатку, відображаючи отриману цитату та автора.
Крок 4: Додавання функції копіювання
Щоб користувачі могли копіювати цитати, ми використовуємо Clipboard API.
copyQuote.js:
async function copyQuote() {
try {
let quote = document.querySelector(".quote").textContent;
let author = document.querySelector(".author").textContent;
await navigator.clipboard.writeText(`${quote} - ${author}`);
alert("Контент скопійовано в буфер обміну");
} catch (error) {
console.error('Не вдалося скопіювати:', error);
}
}
Коли користувач натискає піктограму копіювання, цитата та автор копіюються в буфер обміну.
Крок 5: Додавання функції поділитися
Navigator API дозволяє користувачам ділитися цитатами.
У цьому прикладі ми будемо ділитися цитатами через WhatsApp.
shareQuote.js:
async function shareQuote() {
let quote = document.querySelector(".quote").textContent;
let author = document.querySelector(".author").textContent;
const quoteContent = `${quote} - ${author}`;
const message = encodeURIComponent(quoteContent);
if (window.screen.width < 768 || navigator.userAgent.match(/Android|iOS/)) {
window.open(`whatsapp://send?text=${message}`, '_blank');
} else {
window.open(`https://web.whatsapp.com/send?text=${message}`, '_blank');
}
}
Цей скрипт адаптує функціональність поділу як для мобільних, так і для настільних пристроїв.
Крок 6: Стилізація додатку
За допомогою CSS ми стилізуємо додаток, щоб він виглядав привабливо і був адаптивним.
html, body {
background: rgb(171,129,205);
background: linear-gradient(0deg, rgba(171,129,205,1) 0%, rgba(34,42,104,1) 100%);
margin: 0;
padding: 0;
height: 100%;
}
main {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title, .subheading {
align-items: center;
text-align: center;
color: #fafffd
}
.subheading {
align-items: center;
text-align: center;
color: #fa824c
}
p {
text-align: center;
}
.quote-generator, .quote-box, .footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 100 auto;
margin-top: 50px;
}
.quotebox {
width: 300px auto;
height: 200px auto;
margin-top: 100px;
padding: 10px;
border: 2px solid #9fd356;
overflow: auto;
border-radius: 20px;
}
.quote {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 100 auto;
color: #fafffd;
}
.quote-button {
padding: 15px;
margin: 15px;
border-radius: 5px;
background-color: #e2adf2;
color: black;
font-size: larger;
}
.copyquote, .sharequote {
display: flex;
}
.author {
color: #9fd356;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
height: 200px;
margin: 200px;
}
.footer-left {
font-size: 20px;
float: center;
}
.footer-right {
margin-top:20px;
float:center;
}
a.menu:hover {
border-radius: 2px;
font-size: 20px;
}
.icon-style {
height:60px;
margin-left:20px;
margin-top:5px;
}
.icon-style:hover {
background-color: #ab81cd;
padding:5px;
border-radius: 15px;
transition: 0.5s;
transition-duration: 0.25s;
color: azure;
}
Крок 7: Запуск додатку
Додаток можна створити з наведеного прикладу коду. Альтернативно, ви можете виконати наступні кроки для спроби запуску додатку.
Щоб запустити додаток, виконайте наступні кроки:
Клонувати репозиторій:
git clone https://github.com/devendran-m/quotes-generator.git
Перейдіть до папки проекту:
cd quotes-generator
Встановіть залежності:
npm install
Запустіть проксі-сервер:
cd quote-generator/src/server
node proxy.js
Відкрийте файл index.html в браузері:
Використовуйте кнопку "New Quote", щоб отримати нові цитати, копіюйте їх за допомогою іконки копіювання або діліться через WhatsApp за допомогою іконки поділитися.
Генератор випадкових цитат
Висновок
Цей посібник демонструє, як створити додаток для генератора випадкових цитат, охоплюючи основні етапи, такі як отримання даних з API, обробка CORS та реалізація функцій копіювання та поділу.
- Зрозуміти інтеграцію API та проблеми з CORS.
- Ознайомитися з браузерними API, такими як Clipboard та Navigator.
- Попрактикуватися в основах JavaScript.
Успіхів у програмуванні! Я є учнем і буду радий почути відгуки від спільноти та досвідчених розробників. Ваші пропозиції дуже важливі для мене, і я прагну вчитися та вдосконалюватися.
Ви можете звернутися до мене!
Перекладено з: Building a Random Quotes Generator: A Step-by-Step Guide with Code