वेबव्यू का वर्कफ़्लो

पब्लिश करने की तारीख: 28 फ़रवरी, 2014

वेब डेवलपमेंट की सबसे अच्छी बात यह है कि इसमें कई तरह के टूल उपलब्ध होते हैं. इनका इस्तेमाल करके, अपने वर्कफ़्लो को बेहतर बनाया जा सकता है.

इनमें से एक टूल का उदाहरण Grunt है. यह एक JavaScript टास्क रनर है, जिसकी मदद से अपने वेब ऐप्लिकेशन पर टास्क तय किए जा सकते हैं. जैसे, Sass को कॉम्पाइल करना और लाइव सर्वर शुरू करना. इसके अलावा, प्रोडक्शन के लिए तैयार बिल्ड बनाने से पहले, इमेज को कंप्रेस करना, JavaScript को छोटा करना, और JSHint को चलाना.

Yeoman एक टूल है, जो वेब ऐप्लिकेशन बनाने, बायलरप्लेट जनरेट करने, Bower और npm से लाइब्रेरी लाने, और पहले से तय किए गए टास्क के साथ Grunt फ़ाइल बनाने में मदद करता है.

इस ट्यूटोरियल में, Yeoman का इस्तेमाल करके एक नया बुनियादी वेब ऐप्लिकेशन बनाया जाता है. इसके बाद, अपना वेब ऐप्लिकेशन बनाने के लिए, Android Studio के बिल्ड सिस्टम (Gradle) को Grunt के साथ इंटिग्रेट किया जाता है. आपको ब्राउज़र में अपने ऐप्लिकेशन की जांच करने के लिए, एक स्थानीय लाइव रीलोड सर्वर लॉन्च करने के लिए, Grunt टास्क भी सेट अप करने होंगे. इससे, हर बार एचटीएमएल, सीएसएस या JavaScript फ़ाइल में बदलाव करने पर, आपको पेज को मैन्युअल तौर पर रीफ़्रेश करने की ज़रूरत नहीं पड़ेगी.

ज़रूरी शर्तें

शुरू करने से पहले, आपको कुछ ज़रूरी शर्तें पूरी करनी होंगी:

1. Yeoman इंस्टॉल करें: https://github.com/yeoman/yeoman/wiki/Getting-Started
2. Android Studio इंस्टॉल करें: https://developer.android.com/sdk/installing/studio.html

पहला चरण. वेबव्यू की मदद से, Android Studio में नया प्रोजेक्ट बनाना

शुरू करने की गाइड में, ऐसा करने का पूरा तरीका बताया गया है.

दूसरा चरण. वेब ऐप्लिकेशन के कॉन्टेंट के लिए सबडायरेक्ट्री बनाना

प्रोजेक्ट बनाने के बाद, एक नई टॉप लेवल डायरेक्ट्री बनाएं. Android Studio में, प्रोजेक्ट फ़ोल्डर पर राइट क्लिक करें और नया > डायरेक्ट्री चुनें.

डायरेक्ट्री को webapp नाम दें.

तीसरा चरण. अपनी नई डायरेक्ट्री में Yeoman प्रोजेक्ट बनाना

टर्मिनल cd में, प्रोजेक्ट की webapp डायरेक्ट्री पर जाएं.

cd <path-to-project>/webapp/

इसके बाद, Yeoman की मदद से नया वेब ऐप्लिकेशन बनाएं:

yo webapp

प्रोजेक्ट के विकल्प चुनने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें. आपकी मशीन पर npm को इंस्टॉल करने के तरीके के आधार पर, आपको sudo npm install चलाना पड़ सकता है.

अगले चरण पर जाने से पहले, यहां दिया गया निर्देश चलाकर ऐप्लिकेशन की जांच करें:

grunt server

आपके ब्राउज़र में एक नया टैब खुलेगा. यह टैब, Grunt से शुरू किए गए लोकल सर्वर से कनेक्ट होगा. अगर प्रोजेक्ट में मौजूद किसी एचटीएमएल, सीएसएस या JavaScript फ़ाइल में बदलाव किया जाता है, तो पेज अपने-आप रीलोड और अपडेट हो जाता है.

grunt build को चलाने पर, एक नई डायरेक्ट्री dist बन जाती है. साथ ही, आपके वेब ऐप्लिकेशन को इस फ़ोल्डर में कंप्रेस, ऑप्टिमाइज़, और प्रोडक्शन के लिए तैयार किया जाता है.

चरण 4. Gradle बिल्ड को कॉन्फ़िगर करना

अपनी webapp डायरेक्ट्री में, build.gradle नाम की एक नई फ़ाइल बनाएं.

अपनी नई build.gradle फ़ाइल में, ये चीज़ें जोड़ें:

import org.apache.tools.ant.taskdefs.condition.Os

task buildWebApp(type: Exec) {
  executable = Os.isFamily(Os.FAMILY_WINDOWS) ? "grunt.cmd" : "grunt"
  args = ["build"]
}

इससे buildWebApp नाम का एक नया टास्क बन जाएगा. साथ ही, यह टास्क पहले से तय किए गए टाइप Exec का होगा. इसके बाद, मौजूदा ओएस के आधार पर, Exec में executable वैरिएबल को काम के grunt कमांड पर सेट करें. args को "build" पर सेट किया गया है, जिसका मतलब है कि grunt build को कमांड लाइन पर चलाया जा रहा है. आखिर में, सबसे ऊपर मौजूद इंपोर्ट का इस्तेमाल, Os.isFamily(Os.FAMILY_WINDOWS) का इस्तेमाल करने के लिए किया जाता है.

इस नए टास्क का इस्तेमाल करने से पहले, हमें प्रोजेक्ट को नई build.gradle फ़ाइल के बारे में बताना होगा.

रूट डायरेक्ट्री में settings.gradle खोलें और यह लाइन जोड़ें:

include ':webapp'

पाँचवाँ चरण. Android ऐप्लिकेशन बनाते समय अपना वेब ऐप्लिकेशन बनाना

वेब ऐप्लिकेशन को बिल्ड करें और फिर ऐप्लिकेशन को अपने Android ऐप्लिकेशन की assets डायरेक्ट्री में कॉपी करें.

नीचे दिए गए कोड को Android ऐप्लिकेशन build.gradle फ़ाइल में कॉपी करें:

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

आइए, इसकी हर चीज़ की जांच करते हैं.

task copyWebApplication

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

यह Copy टास्क, आपके ऐप्लिकेशन को webapp/dist डायरेक्ट्री से कॉपी करता है. हमें फ़ाइलों को src/main/assets/www में कॉपी करना है. अगर ज़रूरी डायरेक्ट्री मौजूद नहीं है, तो यह टास्क ज़रूरी फ़ाइल स्ट्रक्चर भी बनाता है.

task deleteWebApplication

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

मिटाने का यह टास्क, assets/www डायरेक्ट्री में मौजूद सभी फ़ाइलों को मिटा देता है.

copyWebApplication.dependsOn

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

इसकी पहली लाइन से पता चलता है कि copyWebApplication, हमारे वेब ऐप्लिकेशन की build.gradle फ़ाइल के buildWebApp टास्क पर निर्भर है.

दूसरी लाइन से पता चलता है कि deleteWebApplication टास्क पर निर्भरता है.

दूसरे शब्दों में, assets डायरेक्ट्री में किसी भी फ़ाइल को कॉपी करने से पहले, पक्का करें कि हम वेब ऐप्लिकेशन बना लें और assets डायरेक्ट्री के मौजूदा कॉन्टेंट को भी मिटा दें.

android.applicationVariants.all

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

यह टास्क, आपके ऐप्लिकेशन के हर वर्शन के लिए, आपके प्रोजेक्ट के सभी बिल्ड की डिपेंडेंसी बताता है. यहां यह copyWebApplication को चलाने के लिए, assemble टास्क पर डिपेंडेंसी सेट करता है.

assemble टास्क, प्रोजेक्ट का आउटपुट इकट्ठा करते हैं. इसलिए, वेब ऐप्लिकेशन को पहले Android प्रोजेक्ट में कॉपी करना होगा.

छठा चरण. पक्का करना कि सब कुछ ठीक से काम कर रहा है

Android Studio में, आपके Android ऐप्लिकेशन src फ़ोल्डर में कोई assets डायरेक्ट्री नहीं होनी चाहिए.

index.html पेज का इस्तेमाल करने के लिए, वेबव्यू को सेट करें:

mWebView.loadUrl("file:///android_asset/www/index.html");

चलाएं पर क्लिक करें और अपने ऐप्लिकेशन को बिल्ड होने दें. आपको www सबडायरेक्ट्री में, अपने वेब ऐप्लिकेशन के साथ assets डायरेक्ट्री दिखेगी.

सातवां चरण. लाइव सर्वर बनाना और लाइव रीलोड करना

लाइव रीलोडिंग की सुविधा, वेब ऐप्लिकेशन में तुरंत बदलाव करने के लिए काफ़ी मददगार हो सकती है. इसे चालू करने के लिए, अपने ऐप्लिकेशन के लिए दो "प्रॉडक्ट फ़्लेवर" बनाए जा सकते हैं: एक लाइव सर्वर वर्शन और एक स्टैटिक वर्शन. इसमें वेब कॉन्टेंट को Android ऐप्लिकेशन में पैकेज किया जाता है.

अपने Android ऐप्लिकेशन के build.gradle में, android एलिमेंट के आखिर में ये लाइनें जोड़ें:

android {
  ...
  defaultConfig {
    ...
  }
  productFlavors {
    staticbuild {
      packageName "com.google.chrome.myapplication"
    }

    liveserver {
      packageName "com.google.chrome.myapplication.liveserver"
    }
  }

}

Gradle अब आपको अपने ऐप्लिकेशन का एक वर्शन, लाइव सर्वर पैकेज के नाम और एक सामान्य पैकेज के नाम के साथ बनाने की सुविधा देता है. यह देखने के लिए कि यह काम करता है या नहीं, Gradle फ़ाइलों के साथ प्रोजेक्ट सिंक करें पर क्लिक करें. यह विकल्प, सबसे ऊपर मौजूद बार में चालू करें बटन के बगल में होता है.

इसके बाद, Android Studio के सबसे नीचे बाएं कोने में मौजूद बिल्ड वैरिएंट देखें. इससे आपको यह पता चलता है कि आपके ऐप्लिकेशन के कौनसे वर्शन बनाए जा सकते हैं.

हर productFlavor के लिए, डीबग और रिलीज़ वर्शन होते हैं. ये वर्शन, Gradle के लिए Android प्लग इन आपको डिफ़ॉल्ट रूप से देता है. इससे यह तय होता है कि बिल्ड, डीबग बिल्ड होना चाहिए या Play Store पर डिप्लॉय करने के लिए रिलीज़ बिल्ड.

अब आपके पास दो वर्शन हैं, लेकिन फ़िलहाल वे अलग-अलग काम नहीं करते.

चरण 8. लाइव सर्वर से लोड करना

अब, अपने ऐप्लिकेशन को कॉन्फ़िगर करें, ताकि वह आपके बनाए गए प्रॉडक्ट के फ़्लेवर के आधार पर, कोई दूसरा यूआरएल लोड कर सके.

आपके Android ऐप्लिकेशन में, सभी प्रॉडक्ट फ़्लेवर के लिए सामान्य फ़ाइलें src/main में मौजूद होती हैं. किसी प्रॉडक्ट फ़्लेवर के लिए खास कोड या रिसॉर्स जोड़ने के लिए, src में एक और डायरेक्ट्री बनाएं. इस डायरेक्ट्री का नाम, productFlavor जैसा ही होना चाहिए. जब उस बिल्ड वैरिएंट के लिए बिल्ड किया जाता है, तो Gradle और Android प्लग इन, src/main में मौजूद फ़ाइलों के साथ इन अतिरिक्त फ़ाइलों को मर्ज कर देते हैं.

यूआरएल को स्ट्रिंग रिसॉर्स के तौर पर तय करें और हार्ड कोड किए गए यूआरएल के बजाय, अपने कोड में उस रिसॉर्स का इस्तेमाल करें.

1. src/liveserver और src/staticbuild फ़ोल्डर बनाएं.

2. liveserver फ़ोल्डर में, res नाम का नया फ़ोल्डर बनाएं. इसमें values नाम का सब-फ़ोल्डर भी बनाएं. इसके अंदर, config.xml नाम की फ़ाइल बनाएं. staticbuild फ़ोल्डर के लिए भी यही तरीका दोहराएं.

3. अपनी कॉन्फ़िगरेशन फ़ाइलों में, src/liveserver/res/values/config.xml में ये लाइनें जोड़ें:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
     <string name="init_url">https://<Your Local Machine IP Address>:9000</string>
   </resources>
   

   src/staticbuild/res/values/config.xml में यह ब्लॉक जोड़ें:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
     <string name="init_url">file:///android_asset/www/index.html</string>
   </resources>
   

4. अपने वेबव्यू को इन कॉन्फ़िगरेशन फ़ाइलों से init_url का इस्तेमाल करने के लिए सेट करें.

   mWebView.loadUrl(getString(R.string.init_url));
   

5. liveserver/AndroidManifest.xml में AndroidManifest.xml नाम की एक नई फ़ाइल बनाएं और ये लाइनें जोड़ें:

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="https://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

   इससे liveserver बिल्ड के लिए, इंटरनेट की अनुमति जुड़ जाती है.

6. webapp/Gruntfile.js में जाकर, यह ढूंढें:

   connect: {
     options: {
       port: 9000,
       livereload: 35729,
       // change this to '0.0.0.0' to access the server from outside
       hostname: **'localhost'**
     },
     ...
   }
   

   localhost को 0.0.0.0 से बदलें, ताकि आपके लोकल सर्वर को लोकल नेटवर्क से ऐक्सेस किया जा सके:

   connect: {
     options: {
       port: 9000,
       livereload: 35729,
       // change this to '0.0.0.0' to access the server from outside
       hostname: '**0.0.0.0'**
     },
     ...
   }
   

किए गए बदलावों की जांच करने के लिए:

1. लाइव सर्वर शुरू करने के लिए:

   grunt server
   

2. Android Studio में, बिल्ड वैरिएंट सेक्शन में, LiveserverDebug चुनें. इसके बाद, चालू करें पर क्लिक करें.

   आपके पास अपने एचटीएमएल, सीएसएस, और JavaScript कॉन्टेंट में बदलाव करने की सुविधा होनी चाहिए. साथ ही, ब्राउज़र में बदलाव तुरंत दिखने चाहिए.

अब आपके पास अपने ऐप्लिकेशन के दो वर्शन होंगे: Grunt सर्वर से लाइव रीलोड वाला डेवलपमेंट वर्शन और Android ऐप्लिकेशन में स्थानीय तौर पर पैकेज किया गया स्टैटिक वर्शन.