नमस्ते! क्या आप एक News portal शुरू करना चाहते हैं? तो यह article आपकी बहुत मदद करेगा, जैसा कि मैंने अपने पिछले youtube tutorial में AI tools से News Web App शुरू करने के बारे में बताया था।
तो, इसके लिए आपको बहुत ज़्यादा skills की ज़रूरत नहीं है, क्योंकि यह Web News application HTML Language में code की जाएगी, और इसलिए इसमें CSS और Javascript का भी इस्तेमाल होगा, और इसके लिए हम Google AI Studio का इस्तेमाल करेंगे।
अब सवाल यह है कि हम इसे शुरू कैसे कर सकते हैं, क्योंकि सिर्फ HTML और CSS से तो काम नहीं चलेगा? तो, आपके इस सवाल का मेरा सबसे सही जवाब होगा Public API Keys का इस्तेमाल करना, जैसे कि Inshorts या किसी अन्य Platforms की।
AI का उपयोग करके News App कैसे बनाएं?
तो हम news culture में कदम रख रहे हैं, और अच्छी बात यह है कि news portal app शुरू करने के लिए आपको Journalist होने की ज़रूरत नहीं है, आपको बस इस बात का basic idea होना चाहिए कि news websites या apps कैसे काम करती हैं।
यहां मैं Google AI Studio के लिए एक Prompt share कर रहा हूं, जो आपको सभी ज़रूरी files और codes जैसे CSS, HTML आदि पाने में मदद करेगा। इसके बाद, आप इस code को अपने server पर host कर सकते हैं और आपका news portal live हो जाएगा।
News App Ai Prompt:
Create a fully functional, mobile-friendly Hindi news web app using only HTML, CSS, and JavaScript in a single file. The app should automatically fetch and display the latest Hindi news from a public API like Inshorts or any available alternative. It must feature a modern, clean, and responsive UI with rounded cards, shadow effects, and hover animations.
Include a horizontal scrollable or wrap-able button bar for different categories (national, politics, sports, entertainment, tech, world, etc.). On selecting a category, news should load dynamically. Each news card must have an image, title, short description, date, and a 'Read More' button linking to the full article.
✅ Add a stylish loading spinner while fetching news.
✅ Include error/fallback handling if API fails or internet is disconnected.
✅ Implement lazy loading for images to save mobile data.
✅ Support dark/light theme toggle with saved preference.
✅ Add smooth scrolling and a floating scroll-to-top button.
✅ Use semantic HTML with proper meta tags for SEO and mobile view.
✅ Ensure all features work without any external frameworks or libraries.AI News APP Complete Code
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="नवीनतम हिंदी समाचार - राष्ट्रीय, राजनीति, खेल, मनोरंजन, और भी बहुत कुछ।">
<meta name="keywords" content="हिंदी समाचार, ताज़ा खबर, भारत समाचार, राजनीति, खेल, मनोरंजन, प्रौद्योगिकी">
<title>हिंदी समाचार टुडे</title>
<style>
/* Global Variables & Resets */
:root {
--primary-color: #D32F2F; /* Red */
--secondary-color: #FFC107; /* Amber */
--text-color-light: #212121;
--bg-color-light: #f4f6f8;
--card-bg-light: #ffffff;
--text-color-dark: #e0e0e0;
--bg-color-dark: #121212;
--card-bg-dark: #1e1e1e;
--shadow-color: rgba(0, 0, 0, 0.1);
--font-family: 'Noto Sans Devanagari', 'Arial', sans-serif;
--border-radius: 8px;
--transition-speed: 0.3s;
--sticky-ad-height: 60px; /* Height of the sticky ad banner */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
background-color: var(--bg-color-light);
color: var(--text-color-light);
line-height: 1.6;
transition: background-color var(--transition-speed), color var(--transition-speed);
padding-bottom: var(--sticky-ad-height); /* Space for the sticky ad banner */
}
body.dark-theme {
--primary-color: #E57373;
--secondary-color: #FFD54F;
background-color: var(--bg-color-dark);
color: var(--text-color-dark);
--shadow-color: rgba(255, 255, 255, 0.05);
}
/* Header */
.app-header {
background-color: var(--primary-color);
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px var(--shadow-color);
position: sticky;
top: 0;
z-index: 1000;
}
.app-header h1 {
font-size: 1.5rem;
margin: 0;
}
.theme-toggle-btn {
background: none;
border: 1px solid white;
color: white;
padding: 0.5rem 0.8rem;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.9rem;
transition: background-color var(--transition-speed), color var(--transition-speed);
}
.theme-toggle-btn:hover {
background-color: white;
color: var(--primary-color);
}
/* Category Navigation */
.category-nav {
padding: 0.8rem 0.5rem;
background-color: var(--card-bg-light);
box-shadow: 0 1px 3px var(--shadow-color);
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
position: sticky;
top: 60px; /* Adjust if header height changes */
z-index: 999; /* Below header, above content */
}
body.dark-theme .category-nav {
background-color: var(--card-bg-dark);
}
.category-nav button {
background-color: transparent;
color: var(--text-color-light);
border: 1px solid var(--secondary-color);
padding: 0.5rem 1rem;
margin-right: 0.5rem;
border-radius: 20px;
cursor: pointer;
font-size: 0.9rem;
font-family: var(--font-family);
transition: background-color var(--transition-speed), color var(--transition-speed);
}
body.dark-theme .category-nav button {
color: var(--text-color-dark);
border-color: var(--secondary-color);
}
.category-nav button:hover, .category-nav button.active {
background-color: var(--secondary-color);
color: var(--bg-color-dark);
}
body.dark-theme .category-nav button:hover, body.dark-theme .category-nav button.active {
color: var(--bg-color-dark);
}
/* Main Content Area */
main {
min-height: calc(100vh - 250px - var(--sticky-ad-height)); /* Ensure content fills space above footer and ad */
}
/* News Container & Cards */
.news-container {
padding: 1rem;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.news-card {
background-color: var(--card-bg-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-color);
overflow: hidden;
transition: transform var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out;
display: flex;
flex-direction: column;
}
body.dark-theme .news-card {
background-color: var(--card-bg-dark);
}
.news-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 8px 16px var(--shadow-color);
}
.news-card img {
width: 100%;
height: 200px;
object-fit: cover;
background-color: #e0e0e0;
}
body.dark-theme .news-card img {
background-color: #333;
}
.news-card-content {
padding: 1rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.news-card h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
body.dark-theme .news-card h3 {
color: var(--primary-color);
}
.news-card p.description {
font-size: 0.9rem;
margin-bottom: 0.75rem;
flex-grow: 1;
}
.news-card .meta-info {
font-size: 0.8rem;
color: #757575;
margin-bottom: 0.75rem;
}
body.dark-theme .news-card .meta-info {
color: #aaa;
}
.news-card .read-more-btn {
display: inline-block;
background-color: var(--primary-color);
color: white;
padding: 0.6rem 1rem;
text-decoration: none;
border-radius: var(--border-radius);
font-size: 0.9rem;
text-align: center;
transition: background-color var(--transition-speed);
align-self: flex-start;
}
.news-card .read-more-btn:hover {
background-color: #A31F1F;
}
body.dark-theme .news-card .read-more-btn:hover {
background-color: #F08080;
}
/* Ad Placeholders */
.ad-placeholder {
background-color: #e9e9e9;
border: 1px dashed #ccc;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #777;
font-size: 0.9em;
border-radius: var(--border-radius);
box-shadow: 0 2px 4px var(--shadow-color);
}
body.dark-theme .ad-placeholder {
background-color: #2a2a2a;
border-color: #444;
color: #999;
}
.ad-slot-infeed {
/* This will be a grid item */
min-height: 250px; /* Typical height for a medium rectangle ad */
width: 100%; /* Takes full width of its grid cell */
margin-bottom: 1rem; /* Same as card gap */
}
.sticky-ad-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: var(--sticky-ad-height);
background-color: var(--card-bg-light);
border-top: 1px solid #ccc;
box-shadow: 0 -2px 5px var(--shadow-color);
z-index: 1001; /* Above content, below modal/popups if any */
display: flex;
align-items: center;
justify-content: center;
}
body.dark-theme .sticky-ad-banner {
background-color: var(--card-bg-dark);
border-top: 1px solid #333;
}
.sticky-ad-banner .ad-slot-banner {
width: 100%; /* Or specific ad unit width e.g. 320px for mobile banner */
max-width: 728px; /* Common leaderboard ad width */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0; /* Placeholder BG */
color: #555;
font-size: 0.8em;
}
body.dark-theme .sticky-ad-banner .ad-slot-banner {
background-color: #222;
color: #aaa;
}
/* Loading Spinner */
.loader-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
min-height: 200px;
}
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid var(--primary-color);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
body.dark-theme .loader {
border: 5px solid #444;
border-top: 5px solid var(--primary-color);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Error Message */
.error-message {
text-align: center;
padding: 2rem;
color: #D32F2F;
font-size: 1.1rem;
background-color: var(--card-bg-light);
margin: 1rem;
border-radius: var(--border-radius);
border: 1px solid #D32F2F;
}
body.dark-theme .error-message {
background-color: var(--card-bg-dark);
color: #E57373;
border-color: #E57373;
}
/* Scroll-to-Top Button */
#scrollToTopBtn {
display: none;
position: fixed;
bottom: calc(var(--sticky-ad-height) + 20px); /* Position above sticky ad */
right: 20px;
z-index: 999;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
box-shadow: 0 2px 5px var(--shadow-color);
transition: background-color var(--transition-speed), opacity var(--transition-speed);
opacity: 0.8;
}
#scrollToTopBtn:hover {
background-color: #A31F1F;
opacity: 1;
}
body.dark-theme #scrollToTopBtn:hover {
background-color: #F08080;
}
/* Footer & Attribution */
footer {
padding: 1rem;
text-align: center;
font-size: 0.9em;
border-top: 1px solid #e0e0e0;
background-color: var(--bg-color-light);
}
body.dark-theme footer {
border-top: 1px solid #333;
background-color: var(--bg-color-dark);
}
footer a {
color: var(--primary-color);
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* Responsive Adjustments */
@media (min-width: 768px) {
.news-container {
grid-template-columns: repeat(2, 1fr);
}
.app-header h1 {
font-size: 1.8rem;
}
.category-nav {
top: 68px; /* Adjust if header height changes on tablet */
}
/* Make in-feed ad span full width on multi-column layouts if desired */
.ad-slot-infeed.span-full {
grid-column: 1 / -1; /* Span all columns */
}
}
@media (min-width: 1024px) {
.news-container {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
</head>
<body>
<header class="app-header">
<h1>हिंदी समाचार</h1>
<button id="themeToggleBtn" class="theme-toggle-btn" aria-label="थीम बदलें">☀️</button>
</header>
<nav id="categoryNav" class="category-nav">
<!-- Category buttons will be dynamically inserted here -->
</nav>
<main>
<div id="loaderContainer" class="loader-container" style="display: none;">
<div class="loader"></div>
</div>
<div id="errorMessage" class="error-message" style="display: none;"></div>
<div id="newsContainer" class="news-container">
<!-- News cards and in-feed ads will be dynamically inserted here -->
</div>
</main>
<footer>
<p>
समाचार <a href="https://gnews.io/" target="_blank" rel="noopener noreferrer">GNews.io</a> द्वारा संचालित
</p>
</footer>
<div class="sticky-ad-banner">
<div class="ad-slot-banner">
<script type="text/javascript">
atOptions = {
'key' : '064733c0816f196483107bbe7b2be475',
'format' : 'iframe',
'height' : 90,
'width' : 728,
'params' : {}
};
</script>
<script type="text/javascript" src="//www.highperformanceformat.com/064733c0816f196483107bbe7b2be475/invoke.js"></script>स्थान
</div>
</div>
<button id="scrollToTopBtn" title="ऊपर जाएं">⇧</button>
<script>
const API_KEY = "6e7a95bb82eaa29880b909d4a9cf375f"; // WARNING: Insecure client-side key
const GNEWS_BASE_URL = 'https://gnews.io/api/v4/top-headlines';
const MAX_ARTICLES_PER_REQUEST = 10;
const INFEED_AD_INTERVAL = 5; // Show an in-feed ad after every 5 articles
const categories = [
{ name: 'प्रमुख समाचार', value: 'general' }, { name: 'राष्ट्रीय/राजनीति', value: 'nation' },
{ name: 'विश्व', value: 'world' }, { name: 'खेल', value: 'sports' },
{ name: 'मनोरंजन', value: 'entertainment' }, { name: 'टेक्नोलॉजी', value: 'technology' },
{ name: 'व्यापार', value: 'business' }, { name: 'विज्ञान', value: 'science' },
{ name: 'स्वास्थ्य', value: 'health' }
];
let currentCategory = categories[0].value;
const newsContainer = document.getElementById('newsContainer');
const categoryNav = document.getElementById('categoryNav');
const loaderContainer = document.getElementById('loaderContainer');
const errorMessageDiv = document.getElementById('errorMessage');
const themeToggleBtn = document.getElementById('themeToggleBtn');
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
// --- Theme Management ---
function applyTheme(theme) {
if (theme === 'dark') {
document.body.classList.add('dark-theme');
themeToggleBtn.textContent = '🌙';
} else {
document.body.classList.remove('dark-theme');
themeToggleBtn.textContent = '☀️';
}
}
function toggleTheme() {
const currentTheme = document.body.classList.contains('dark-theme') ? 'light' : 'dark';
applyTheme(currentTheme);
localStorage.setItem('newsAppTheme', currentTheme);
}
function loadThemePreference() {
const savedTheme = localStorage.getItem('newsAppTheme') || 'light';
applyTheme(savedTheme);
}
// --- Category Navigation ---
function createCategoryButtons() {
categories.forEach(category => {
const button = document.createElement('button');
button.textContent = category.name;
button.dataset.category = category.value;
if (category.value === currentCategory) button.classList.add('active');
button.addEventListener('click', () => handleCategorySelect(category.value));
categoryNav.appendChild(button);
});
}
function handleCategorySelect(categoryValue) {
if (currentCategory === categoryValue) return;
currentCategory = categoryValue;
fetchNews(currentCategory);
categoryNav.querySelectorAll('button').forEach(btn => {
btn.classList.toggle('active', btn.dataset.category === categoryValue);
});
}
// --- News Fetching and Display ---
async function fetchNews(categoryTopic) {
loaderContainer.style.display = 'flex';
errorMessageDiv.style.display = 'none';
newsContainer.innerHTML = '';
const url = `${GNEWS_BASE_URL}?topic=${categoryTopic}&lang=hi&country=in&max=${MAX_ARTICLES_PER_REQUEST}&apikey=${API_KEY}`;
try {
const response = await fetch(url);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(`API अनुरोध विफल: ${response.status} ${response.statusText}. ${errorData.errors ? errorData.errors.join(', ') : ''}`);
}
const data = await response.json();
if (data && data.articles && data.articles.length > 0) {
displayNews(data.articles);
} else {
showError('इस श्रेणी में कोई समाचार नहीं मिला।');
}
} catch (error) {
console.error('समाचार लाने में त्रुटि:', error);
showError(`समाचार लोड करने में असमर्थ। ${error.message}`);
} finally {
loaderContainer.style.display = 'none';
}
}
function createInFeedAdElement() {
const adElement = document.createElement('div');
adElement.classList.add('ad-placeholder', 'ad-slot-infeed');
// Optional: Make it span full width on larger screens if your grid supports it
// if (window.innerWidth >= 768) adElement.classList.add('span-full');
adElement.innerHTML = `
<!-- In-Feed Ad Code Goes Here (e.g., 300x250) -->
इन-फ़ीड विज्ञापन स्थान
`;
return adElement;
}
function displayNews(articles) {
articles.forEach((article, index) => {
const card = document.createElement('article');
card.classList.add('news-card');
const img = document.createElement('img');
img.alt = article.title || 'समाचार छवि';
img.dataset.src = article.image || 'https://via.placeholder.com/400x200.png?text=कोई+छवि+नहीं';
img.classList.add('lazy-image');
img.onerror = function() {
this.onerror=null;
this.src='https://via.placeholder.com/400x200.png?text=छवि+नहीं+मिली';
this.classList.remove('lazy-image');
};
const contentDiv = document.createElement('div');
contentDiv.classList.add('news-card-content');
const title = document.createElement('h3');
title.textContent = article.title || 'शीर्षक उपलब्ध नहीं';
const description = document.createElement('p');
description.classList.add('description');
let shortDesc = article.description || article.content || '';
shortDesc = shortDesc.replace(/\[\+\d+\s*chars\]/gi, '').trim();
description.textContent = shortDesc ? shortDesc.substring(0, 150) + (shortDesc.length > 150 ? '...' : '') : 'विवरण उपलब्ध नहीं।';
const metaInfo = document.createElement('div');
metaInfo.classList.add('meta-info');
let formattedDateTime = 'समय अज्ञात';
if (article.publishedAt) {
const publishedDate = new Date(article.publishedAt);
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
const timeOptions = { hour: '2-digit', minute: '2-digit' };
formattedDateTime = `${publishedDate.toLocaleDateString('hi-IN', dateOptions)}, ${publishedDate.toLocaleTimeString('hi-IN', timeOptions)}`;
}
metaInfo.textContent = `प्रकाशित: ${formattedDateTime} | स्रोत: ${article.source.name || 'अज्ञात'}`;
const readMoreLink = document.createElement('a');
readMoreLink.classList.add('read-more-btn');
readMoreLink.href = article.url || '#';
readMoreLink.target = '_blank';
readMoreLink.rel = 'noopener noreferrer';
readMoreLink.textContent = 'और पढ़ें';
contentDiv.appendChild(title);
contentDiv.appendChild(description);
contentDiv.appendChild(metaInfo);
contentDiv.appendChild(readMoreLink);
card.appendChild(img);
card.appendChild(contentDiv);
newsContainer.appendChild(card);
// Add in-feed ad placeholder
if ((index + 1) % INFEED_AD_INTERVAL === 0 && index < articles.length -1 ) { // Don't add after the very last item
newsContainer.appendChild(createInFeedAdElement());
}
});
observeLazyImages();
}
function showError(message) {
errorMessageDiv.textContent = message;
errorMessageDiv.style.display = 'block';
}
// --- Lazy Loading for Images ---
let imageObserver;
function observeLazyImages() {
const lazyImages = Array.from(document.querySelectorAll('img.lazy-image[data-src]'));
if (!imageObserver) {
imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.onload = () => img.classList.remove('lazy-image');
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, { rootMargin: "0px 0px 200px 0px" });
}
lazyImages.forEach(img => imageObserver.observe(img));
}
// --- Scroll-to-Top Button ---
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
};
scrollToTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// --- Initialization ---
document.addEventListener('DOMContentLoaded', () => {
loadThemePreference();
themeToggleBtn.addEventListener('click', toggleTheme);
createCategoryButtons();
fetchNews(currentCategory);
if (!navigator.onLine) {
showError('आप ऑफ़लाइन हैं। कृपया अपना इंटरनेट कनेक्शन जांचें।');
}
window.addEventListener('offline', () => showError('इंटरनेट कनेक्शन टूट गया। बाद में पुनः प्रयास करने के लिए ऑनलाइन वापस आएं।'));
window.addEventListener('online', () => {
errorMessageDiv.style.display = 'none';
if (newsContainer.children.length === 0 && !loaderContainer.style.display.includes('flex')) {
fetchNews(currentCategory);
}
});
});
</script>
</body>
</html>अब आपको https://gnews.io/ की official API Key का उपयोग करके recent news के आधार पर latest article launch और generate करने होंगे, और यह web app सभी news को auto update करेगी।
यह एक fully automated process होने वाला है, इसलिए आपको हर एक news को publish या review करने की ज़रूरत नहीं पड़ेगी।
