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

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

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

आरंभिक सेटअप

ऐप में पूर्वावलोकन

टाइप करने के लिए कोई सर्वर कमांड नहीं है। editor की ऊपरी बार में globe आइकन पर टैप करें (या menu में Open in DevBrowser) और PocketCode फ़ाइल को अपने बिल्ट-इन DevBrowser में खोलता है, जिसे आपके फ़ोन पर ही एक छोटा static server परोसता है। DevBrowser एडिटर से खुलने वाला फ़ुल-स्क्रीन ब्राउज़र है, उसके बगल का कोई पैनल नहीं।

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

1. New Project पर टैप करें
2. कोई टेम्पलेट चुनें: HTML, React, Vue, TypeScript, Next.js, या React + Node जैसा फ़ुल-स्टैक टेम्पलेट
3. प्रोजेक्ट पूर्ण संरचना के साथ उत्पन्न होता है

सभी 15 प्रोजेक्ट टेम्पलेट मुफ़्त हैं। React और Vue टेम्पलेट अपनी libraries CDN (unpkg.com) से लोड करते हैं, इसलिए उन्हें कनेक्शन चाहिए; Next.js और फ़ुल-स्टैक टेम्पलेट फ़ोन पर कोड लिखने के लिए हैं, build करने के लिए नहीं।

पूर्वावलोकन

लेआउट

DevBrowser पूरी स्क्रीन लेता है। उसका DevTools पैनल portrait में पेज के नीचे और landscape में पेज के दाईं ओर खुलता है (</> बटन पर टैप करें), और आप हैंडल खींचकर उसे 25% से 80% के बीच बदल सकते हैं। editor का अपना Split view (Ctrl+\) एक read-only दूसरा pane है, live preview नहीं।

रीलोड

फ़ाइल हाथ से save करने पर पेज रीलोड नहीं होता: ब्राउज़र में reload पर टैप करें। पेज अपने आप तभी रीलोड होता है जब AI एजेंट कोई फ़ाइल लिखता है। इस पेज के साथ आज़माएँ:

<!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

DevBrowser में सात DevTools टैब हैं:

• Console: पेज के logs पढ़ें और JavaScript चलाएँ
• Network: HTTP अनुरोधों की निगरानी करें
• Storage: पेज जो डेटा सहेजता है
• Elements: DOM का read-only snapshot; पेज पर किसी element पर टैप करके उसे ढूँढें। यहाँ DOM संपादित नहीं किया जा सकता
• CSS: CSS लिखें और पेज पर लागू करें, या उसके rules देखें
• Perf: लोड metrics और resources की सूची
• Audit: प्रदर्शन, accessibility, best practices, SEO और PWA की 47 जाँचों वाला स्थानीय heuristic, Lighthouse नहीं

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

ब्राउज़र menu में एक device profile चुनें (21 presets और Responsive)। profile सिर्फ़ user agent और viewport का आकार बदलता है:

viewport की लंबी भुजा 1600 CSS पिक्सेल पर सीमित है, इसलिए 1920 × 1080 वाला profile 1600 × 900 पर दिखता है।

फ़्रेमवर्क कोड के उदाहरण

ये उदाहरण npm imports और build चरणों का इस्तेमाल करते हैं। PocketCode में npm बंडल नहीं है, इसलिए आप इन्हें फ़ोन पर build नहीं कर सकते; React और Vue टेम्पलेट इसके बजाय CDN builds (Babel के साथ React 18, Vue 3) इस्तेमाल करते हैं, और नीचे की Tailwind classes को Tailwind की अपनी CDN script या build चाहिए।

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>

डिप्लॉय करना

PocketCode में npm और npx बंडल नहीं हैं, इसलिए लोकल npm install -g vercel जैसा कोई चरण नहीं है। डिप्लॉय Backend Manager से होते हैं: अपना होस्टिंग अकाउंट जोड़ें (Vercel, Netlify, Cloudflare और अन्य — कुल 33 सेवाएँ) और फ़ोन से डिप्लॉय शुरू करें और उन्हें देखें। Free प्लान में एक बार में एक डिप्लॉय चलता है; रोलबैक और लाइव लॉग्स Pro हैं।

अगर आप git से पुश करना चाहें, तो बिल्ट-इन Git टूल्स से कमिट करें और अपने होस्ट को रिपॉज़िटरी से build करने दें, या SSH से किसी सर्वर से कनेक्ट होकर वहाँ से डिप्लॉय करें।

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

1. सापेक्ष इकाइयों का उपयोग करें: rem, em, %, vw/vh
2. मोबाइल-फ़र्स्ट: पहले मोबाइल के लिए डिज़ाइन करें
3. Tailwind CSS: छोटी स्क्रीन पर डेवलपमेंट के लिए आदर्श
4. छोटे कंपोनेंट: संक्षिप्त और मॉड्यूलर फ़ाइलें
5. ऑटो-सेव: यह डिफ़ॉल्ट रूप से चालू है (हर 2 सेकंड), पर DevBrowser अपने आप रीलोड नहीं होता: save के बाद reload पर टैप करें

---

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