Android से पूर्ण वेब डेवलपमेंट: HTML, CSS और JavaScript

अपने फ़ोन से प्रोफ़ेशनल वेबसाइट बनाएँ। PocketCode के साथ रियल-टाइम पूर्वावलोकन, एकीकृत DevTools और सीधा डिप्लॉय।

Android से पूर्ण वेब डेवलपमेंट

PocketCode आपके Android डिवाइस को एक संपूर्ण वेब डेवलपमेंट वातावरण में बदल देता है। PC की आवश्यकता के बिना वेबसाइट बनाएँ, पूर्वावलोकन करें और डिप्लॉय करें।

आरंभिक सेटअप

स्थानीय डेवलपमेंट सर्वर

PocketCode में एक स्थानीय HTTP सर्वर शामिल है जो अपने आप शुरू हो जाता है:

# Starts when opening a web project
# Accessible at http://localhost:3000
pocket-server start --port 3000 --hot-reload

वेब प्रोजेक्ट बनाना

New Project पर टैप करें
Web App टेम्पलेट चुनें
फ़्रेमवर्क चुनें (Vanilla, React, Vue, आदि)
प्रोजेक्ट पूर्ण संरचना के साथ उत्पन्न होता है

रियल-टाइम पूर्वावलोकन

स्प्लिट व्यू

स्क्रीन को एडिटर और पूर्वावलोकन के बीच बाँटें:

ऊर्ध्वाधर: एडिटर ऊपर, पूर्वावलोकन नीचे
क्षैतिज: एडिटर बाएँ, पूर्वावलोकन दाएँ (टैबलेट)
फ़्लोटिंग: पूर्वावलोकन एक आकार-बदलने योग्य फ़्लोटिंग विंडो के रूप में

हॉट रीलोड

परिवर्तन अपने आप पूर्वावलोकन में दिखाई देते हैं:

<!DOCTYPE html>
<html>
	<head>
		<title>My App</title>
		<style>
			.hero {
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				background: linear-gradient(135deg, #1a1a2e, #16213e);
				color: white;
			}

			.title {
				font-size: clamp(2rem, 5vw, 4rem);
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="hero">
			<h1 class="title">Hello World!</h1>
		</div>
	</body>
</html>

डेवलपर टूल

एकीकृत DevTools

PocketCode में Chrome DevTools जैसे डेवलपर टूल शामिल हैं:

Elements: DOM का निरीक्षण और संपादन करें
Console: JavaScript निष्पादित करें और लॉग देखें
Network: HTTP अनुरोधों की निगरानी करें
Responsive: विभिन्न आकारों पर परीक्षण करें

रिस्पॉन्सिव परीक्षण

विभिन्न डिवाइसों पर अपनी साइट का पूर्वावलोकन करें:

डिवाइस	चौड़ाई	ऊँचाई
iPhone SE	375px	667px
iPhone 14	390px	844px
iPad	768px	1024px
Desktop	1920px	1080px

समर्थित फ़्रेमवर्क

React

import { useState } from "react";

function Counter() {
	const [count, setCount] = useState(0);

	return (
		<div className="p-4">
			<p className="text-2xl">{count}</p>
			<button
				onClick={() => setCount(count + 1)}
				className="px-4 py-2 bg-blue-500 rounded"
			>
				Increment
			</button>
		</div>
	);
}

Vue

<template>
	<div class="p-4">
		<p class="text-2xl">{{ count }}</p>
		<button @click="count++" class="px-4 py-2 bg-green-500 rounded">
			Increment
		</button>
	</div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

Vanilla + Tailwind

<div class="min-h-screen bg-gray-900 flex items-center justify-center">
	<div class="bg-gray-800 rounded-xl p-8 shadow-2xl max-w-md w-full">
		<h2 class="text-2xl font-bold text-white mb-4">Login</h2>
		<input
			type="email"
			placeholder="Email"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-4"
		/>
		<input
			type="password"
			placeholder="Password"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-6"
		/>
		<button class="w-full p-3 bg-blue-600 rounded-lg text-white font-semibold">
			Sign In
		</button>
	</div>
</div>

सीधा डिप्लॉय

Vercel

# Install CLI
npm install -g vercel

# Deploy
vercel --prod

Netlify

# Install CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

GitHub Pages

# Configure in package.json
{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

# Deploy
npm run deploy

मोबाइल वेब डेवलपमेंट के लिए सुझाव

सापेक्ष इकाइयों का उपयोग करें: rem, em, %, vw/vh
मोबाइल-फ़र्स्ट: पहले मोबाइल के लिए डिज़ाइन करें
Tailwind CSS: छोटी स्क्रीन पर डेवलपमेंट के लिए आदर्श
छोटे कंपोनेंट: संक्षिप्त और मॉड्यूलर फ़ाइलें
ऑटो-सेव: निरंतर हॉट रीलोड के लिए ऑटो-सेव सक्षम करें

PocketCode के साथ आप अपने Android से संपूर्ण वेबसाइट बना सकते हैं। एक लैंडिंग पेज से लेकर एक जटिल वेब एप्लिकेशन तक, सब कुछ आपकी हथेली से संभव है।

Android से पूर्ण वेब डेवलपमेंट: HTML, CSS और JavaScript