How to create Android WebView App

(Creating Android Webview App) – اینڈرائیڈ ویب ویو ایپ بنانا
اینڈرائیڈ ویب ویو ایپ  بنانا ایک ایسا ٹاسک ہے جو بہت آسان بھی ہے اور فائیور اور دوسری فری لانسر ویب سائیٹس پر اس طرح کے چھوٹے موٹے دس پندرہ ڈالر کے پروجیکٹس بھی ملتے رہتے ہیں اینڈرائیڈ ڈویلپرز کو کہ “ہماری ویب سائیٹ کے لیے ایک اینڈرائیڈ ویب ویو ایپ بنا دیں”.

اینڈرائیڈ ویب ویو ایپ  ایک گھنٹے سے بھی کم ٹائم میں بن جاتی ہے اور اگر کوئی بالکل نیا بھی ہے تو اس آرٹیکل کو پڑھنے اور پریکٹس کرنے کے بعد آسانی سے اینڈرائیڈ سٹوڈیو میں ایک اینڈرائیڈ ویب ویو ایپ بنا کر کلائنٹ کو دے کر دس پندرہ ڈالر آرام سے کما سکتا ہے . یا آپ خود اپنی ویب سائٹ کی اینڈرائیڈ ویب ویو ایپ بنا سکتے ہیں اور پلے سٹور پرپبلش کر سکتے ہیں.

(What is Android WebView App) ویب ویو ایپ کیا ہوتی ہے؟

جس طرح آپ اپنے فون میں فائر فاکس، کروم یا کوئی بھی براؤزر کھول کر اس میں ایک یا ایک سے زیادہ ویب سائٹس کھول سکتے ہیں اسی طرح اینڈرائیڈ ویب ویو ایپ بھی ایک ایسی ایپ ہوتی ہے جس میں ایک ویب سائٹ کھولنے کی سہولت ہوتی ہے . بس اس میں اور براؤزر کی ایپ میں یہ فرق ہوتا ہے کہ اس میں آپ کوئی ایک ویب سائٹ کا یو آر ایل یا ایڈریس کوڈنگ کرتے وقت ڈال دیتے ہیں اور جو یوزر بھی اس ایپ کو انسٹال کر کے اپنے فون میں اوپن کرتا ہے تو آٹومیٹک آپ کی ویب سائٹ اوپن ہو جاتی ہے اور اس ایپ کا مقصد صرف اور صرف ایک ویب سائٹ کھولنا ہی ہوتا ہے جس ویب سائٹ کے لیے وہ بنائی گئی ہے اور یہ ویب سائٹ کا ایڈریس یوزر تبدیل نہیں کر سکتا . یہ اس ایپ کی کوڈنگ یا پروگرامنگ کرتے وقت آپ جو ایڈریس ایک بار دے دیں گے وہ ہمیشہ کے لیے فکس ہو جائے گا .

 (Why Android WebView App) اینڈرائیڈ ویب ویو ایپ کیوں فائدہ مند ہے؟

ایک ریسرچ کے مطابق آج کل ستر اسی فیصد ویب سائٹ ٹریفک سمارٹ فون سے آتی ہے اور بہت سے لوگ براؤزر کھول کر سائٹ کھولنا مشکل سمجھتے ہیں. اس کی نسبت پلے سٹور سے ایپ ڈاؤن لوڈ کر کے اس کو استعمال کرنا بہت سے یوزرزکو بہت دلچسپ ٹاسک لگتا ہے . اس لیے جب آپ اپنی ویب سائٹ کی ایک ویب ویو ایپ بناتے ہیں تویوزرز کو ایک ایپ مل جائے گی جس کے ذریعے ان کو آپ کی ویب سائٹ اوپن اور براؤز کرنا آسان ہو جائے گا اور آپ کو اپنی ویب سائٹ کی ٹریفک بڑھانے میں کافی مدد ملے گی

 (Android WebView App Requirments) اینڈرائیڈ ایپ کے لیے سسٹم ریکوائرمنٹ؟

آپ کے پاس ایک عام سا پی سی یا لیپ ٹاپ ہو اور اس کی ریم کم سے کم چار جی بی ہو تب بھی اینڈرائیڈ سٹوڈیو اس پر چل جاتا ہے لیکن سپیڈ بہت سست ہوتی ہے اس کی اور بہت زیادہ لوڈنگ ٹائم لیتا ہے . میرا مشورہ یہ کہ آپ کا پی سی یا لیپ ٹاپ کم سے کام کور ٹو ڈو اور ریم چھ یا آٹھ جی بی ہو تو یہ اینڈرائیڈ سٹوڈیو کے لیے ٹھیک ہے .

اینڈرائیڈ سٹوڈیو ڈاؤن لوڈ اور انسٹال کرنے کا سارا طریقہ میں  ایک اور آرٹیکل میں سمجھاؤں گا اور اس کو یہاں لنک کر دوں گا .

(Creating New Project for Android WebView App) نیا پروجیکٹ بنانا

آپ کا پہلا کام ہے اینڈرائیڈ سٹوڈیو کو اوپن کر کے نیو پروجیکٹ بنائیں . سکرین شاٹس میں نیچے دے رہا ہوں نیا پروجیکٹ بنانے کے لیے .


android-new-projectandroid-new-project

android-new-projectandroid-new-projectandroid-new-projectandroid-new-projectandroid-new-projectandroid-new-projectandroid-new-project

 (Error in Android WebView App) کوئی ایرر آ جائے پروجیکٹ بناتے وقت تو؟

یہ ایک عام سی بات ہے کہ اینڈرائیڈ سٹوڈیو میں پروجیکٹ بناتے وقت کوئی ایرر آ گیا اور لوڈنگ ایرر دے کر رک گئی . اس کی وجہ عام طور پر کسی ایک یا ایک سے زیادہ فائلز کا موجود نہ ہونا، یا ان کے ورژنز میں مطابقت نہ ہونا ہوتا ہے .

اگر کوئی ایرر وغیرہ نہیں ہوگا آپ کے اینڈرائیڈ سٹوڈیو میں تو آپ کو لوڈنگ ختم ہونے کے بعد یہ سکرین نظر آئے گی . تاہم اگر کوئی ایرر وغیرہ آتا ہے تو آپ وہ ایرر کاپی کر کے گوگل میں پیسٹ کر کے stackoverflow.com سے اس کا حل ڈھونڈھ سکتے ہیں یا اسی پوسٹ کے نیچے کمنٹ میں پوسٹ کر سکتے ہیں میں کوشش کروں گا کہ آپ سب کے اس بارے کچھ بھی ایرر یا مسئلے ہوں تو ان کو حل کر سکوں .

 (Environment for Android WebView App) اینڈرائیڈ سٹوڈیو کا انوائرمنٹ

اینڈرائیڈ سٹوڈیو کا انوائرمنٹ اگر آپ کو کچھ نیا یا اجنبی سا لگے توگھبرانے کی ضرورت نہیں میں چیزوں کو بہت سادہ رکھوں گا اور اس بارے ایک اور آرٹیکل لکھو کر سمجھاؤں گا انوائرمنٹ کے بارے میں کہ کونسی فائل کہاں ہوتی ہے اور اس کا مقصد کیا ہوتا ہے اور آپ کو عام طور پر کس کس فائل میں کوڈنگ کرنی ہوتی ہے . اور وہ آرٹیکل یہاں پر لنک کر دوں گا .

  (What to do for Android WebView App) اس وقت ہم نے کیا کرنا ہے؟

اس وقت ہمیں صرف دو فائلز میں کوڈنگ کرنی ہے ایک تو جاوا فائل ہے مین ایکٹوٹی ڈاٹ جاوا  جو کہ  جاوا کے فولڈ میں ہوتی ہے اور دوسری ایکس ایم ایل فائل ہے جو ریس (آر ای ایس) کے اندر لے آؤٹ کے فولڈ ر میں ہوتی ہے . سب سے پہلے ہم ایکس ایم ایل فائل میں جاکر ایک پیج یا ایک سکرین یا ایک ایکٹوٹی کو ڈیزائن کرتے ہیں کہ اس کا انٹر فیس کیا ہوگا .

 (XML Code for Android WebView App) ایکس ایم ایل فائل میں ڈیزائن کوڈ شامل کرنا

لیفٹ سائیڈ پر آر ای ایس  کے فولڈر کے اندر جا کر لے آؤٹ کے فولڈر میں ایکٹوٹی مین ڈاٹ ایکس ایم ایل فائل پر ڈبل کلک کریں آپ کے سامنے یہ سکرین آئے گی اس میں آپ نے نیچے ڈیزائن کے ساتھ موجود ٹیکسٹ کی ٹیب پر کلک کرنا ہے


android-xml-layout

 

ٹیکسٹ کی ٹیب پر کلک کرنے کے بعد آپ کے سامنے کچھ اس طرح کی سکرین آئے گی .

 

android-xml-layout

 

اگر آپ کو ایچ ٹی ایم ایل کا تھوڑا بہت پتہ ہے تو آپ کو آئیڈیا ہو گیا ہوگا کہ اس ایکس ایم ایل فائل میں لکھا گیا کوڈ ٹیگ میں لکھا ہوا ہے . ایکس less than < and greater than >ایم ایل میں بھی ایچ ٹی ایم ایل کی طرح ٹیگز استعمال ہوتے ہیں جو میتھ کے سائن

کو استعمال کر کے لکھے جاتے ہیں .

ٹیکسٹ ویو والے ٹیگ کو میں ریموو کر دیتا ہوں اور اوپر والے لے آؤٹ میں بھی تھوڑی سے تبدیلی کرتا ہوں اور اب یہ کوڈ کچھ اس طرح سے نظر آئے گا آپ کو . آپ بھی اس کو دیکھ کر بالکل ایسے ہی یہ تبدیلیاں کر لیں . صرف وہ والی لائن آپ نے چینج نہیں کرنی جس کے ساتھ

لکھا ہوا ہے . tools:context

android-linear-layout

رائیٹ سائیڈ پر آپ کو اپنی ایپ کی سکرین کا انٹر فیس نظر آ رہا ہوگا اور جو جو تبدیلیاں آپ ایکس ایم فائل میں کرتے جائیں گے وہ آپ کو نظر آتی جائیں گی اس سکرین کے انٹر فیس پر .

 (XML Coding for Android WebView App) ویب ویو کا ایکس ایم ایل کوڈ شامل کرنا

اب ہم نے ویب ویو کا کوڈ شامل کرنا ہے جو بالکل چھوٹا سا کوڈ ہے میں ادھر لکھتا ہوں آپ یہاں سے کاپی کر کے اپنی ایکس ایم ایل فائل میں ایڈ کر سکتے ہیں .

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/web"
    />

یہ بالکل چھوٹا سا اور سادہ سا چار لائنوں کا کوڈ ہے ویب ویو کا . پہلی لائن میں ویب ویو لکھیں گے ٹیگ سٹارٹ کر کے جس میں ڈبلیو اور وی کیپیٹل میں ہیں اور اگلی لائن میں چوڑائی یعنی وڈتھ اور اگلی لائن میں لمبائی یعنی ہائیٹ کتنی ہو وہ ہم ڈیفائن کرتے ہیں . اور چوتھی لائن میں اس ویب ویو کو ایک آئی ڈی یعنی ایک نام دیتے ہیں جس کو ہم جاوا کی کوڈنگ میں استعمال کریں گے پھر ویب ویو کا ٹیگ کلوز کر دیں .

 

android-webview-xml

 

(match_parent)  ایکس ایم ایل میں بس اتنا ہی لکھنا ہے ہم نےایک ویب ویو بنایا ہے جس کی لمبائی چوڑائی میچ پیرنٹ

 رکھی ہے یعنی فل سکرین . اب ہم جاوا میں جا کر تھوڑا سا کوڈ شامل کریں گے .  اینڈرائیڈ ویب ویو ایپ کے لیے یہ سب سے اہم حصہ ہے .

 (Java Code for Android WebView App) مین ایکٹوٹی میں جاوا کوڈ شامل کرنا

جاوا فائل جیسا کہ میں نے آپ کو پہلے بتایا مین ایکٹوٹی ڈاٹ جاوا کے نام سے ہوتی ہے اور یہ جاوا کے فولڈر میں ہوتی ہے . پروجیکٹ کے لیفٹ سائیڈ پر ٹری سٹرکچر میں دیکھیں آپ کو جاوا کا فولڈر نظر آئے گا

 

android-mainactivity-java

 

آپ لیفٹ سائیڈ پر جاوا کے فولڈر کو اوپن کر کے اس کے اندر اپنی ایپ کے پیکج نیم(جو پروجیکٹ بناتے وقت رکھا گیا تھا بائی ڈیفالٹ) اس پر کلک کر کے مین ایکٹوٹی ڈاٹ جاوا فائل اوپن کر سکتے ہیں . فائل اوپن کرتے ہی آپ کے سامنے کچھ اس طرح کی کوڈنگ آئے گی .

onCreate() سب سے اوپر ایپ کا پیکج نیم ہوگا . اس کے بعد امپورٹ سٹیٹمنٹ اس کے بعد مین ایکٹوٹی جاوا کلاس کا کوڈ ہوگا . اس کے بعد

 کا میتھڈ یا فنکشن ہوگا . ان باتوں کی اگر آپ کو سمجھ نہ آئے تب بھی گھبرانے کی کوئی ضرورت نہیں . آپ نے کرنا صرف یہ ہے کہ

 والی لائن سے اوپر یہ ایک لائن کوڈ کی پیسٹ کرنی ہے . @Override

WebView web;

دبا کر نیچے جو کوڈ دیا ہے میں نے وہ پیسٹ کرنا ہے .   Enter والی لائن کے بعد  دو تین بار  SetContentView  اور اس کے بعد

web = (WebView) findViewById(R.id.web);
web.getSettings().setJavaScriptEnabled(true);
web.setWebViewClient(new WebViewClient() {
    ProgressDialog pd;

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        Toast.makeText(MainActivity.this, "Something not right", Toast.LENGTH_SHORT).show();

    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        if (pd == null) {
            pd = new ProgressDialog(MainActivity.this);
            pd.setMessage("Loading, Please wait");
            pd.show();
        }
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        pd.dismiss();
        super.onPageFinished(view, url);
    }
});

web.loadUrl("https://www.LearningisArt.com");

(Adding import Statements for Android WebView App) امپورٹ سٹیٹمنٹ ایڈ کرنا

یہ سب پیسٹ کرنے کے بعد آپ کے پاس سرخ رنگ کی بہت سی وارننگز اور ایررز شو ہوں گے جیسا کہ نیچے سکرین شاٹ میں نظر آ رہا

ہوگا آپ کو .

 

android-webview-code

 

گھبرانے کی ضرورت نہیں. ہم نے کچھ امپورٹ سٹیٹمنٹ ایڈ کرنی ہیں کوڈ میں اور یہ سب ٹھیک ہو جائے گا. ایک طریقہ تو یہ ہے امپورٹ سٹیٹمنٹ لکھنے کا کہ اوپر امپورٹ والی لائن پر جا کر ہاتھ سے ٹائپ کریں. اس سے آسان طریقہ ایک اور ہے کہ جو جو لفظ بھی سرخ رنگ میں ہے یعنی اس پر ایرر ہےاس کے اوپر کرسر لا کر کلک کریں کرسر اس لفظ کے اندر بلنک کرنا شروع کر دے گا اور ساتھ ہی بلیو کلر میں آٹو امپورٹ کا آپشن آئے گا جس کے ساتھ آلٹ انٹر کا شارٹ کٹ بھی ہوگا . جیسا کہ نیچے سکرین شاٹ میں آپ کو نظر آئے گا .

 

android-auto-import

 

 آپ نے جب یہ بلیو آپشن سامنے آئے تو آلٹ انٹر ایک ساتھ دبا کر آٹو امپورٹ کر دینا ہے اس فائل کو . یا ہو سکتا ہے آلٹ انٹر پریس کرتے ہی آپ کو ایک چھوٹا سا مینو شو ہو اس میں سب سے اوپر آپشن امپورٹ کلاس کا ہوگا اس پر کلک کر دین . اس طرح کرتے ہی  وہ فائل آٹو  امپورٹ ہو جائے گی اور یہ ریڈ کلر کا ایرر ختم ہو جائے گا . ایسے ہی آپ نے ہر اس جگہ کرنا ہے جہاں کوئی لفظ سرخ رنگ کا ہو گیا ہے . جو کوڈ میں نے اوپر دیا ہے اس میں آپ کوچار فائلز کو امپورٹ کرنا ہے ایک ویب ویوکلاس، ایک پراگریس ڈائیلاگ، ایک بٹ میپ اور ایک ٹوسٹ بس یہ چار فائلز امپورٹ کرتے ہی آپ کو کوڈ سے سارے ایرر ختم ہو جائیں گے جیسا کہ نیچے والے سکرین شاٹ میں نظر آئے گا .

 

android-webview-code

 

اگر کسی وجہ سے ایرر ختم نہ ہوں تو آپ کو امپورٹ والی لائنز خود ٹائپ کرنی ہوں گی تاکہ ساری فائلز ٹھیک طرح سے امپورٹ ہو جائیں. یہ امپورٹ سٹیٹمنٹ کس طرح لکھنی ہے اس کے لیے نیچے والا سکرین شاٹ دیکھیں اور بالکل ایسے ہی سب ٹائپ کر دیں.

 

android-import-webview

 

(Adding Permissions for Android WebView App) انٹر نیٹ کی پرمشن ایڈ کرنا

اینڈرائیڈ میں فون کے فیچرز استعمال یا ایکسس کرنے کے لیے ان کی پرمشن ایڈ کرنا پڑتی ہے . اس کے لیے اینڈرائیڈ مینی فسٹ فائل میں پرمشن والی لائن ایڈ کرنی ہوتی ہے . اینڈرائیڈ ویب ویو ایپ میں ہم صرف ڈیوائس کا انٹرنیٹ استعمال یا ایکسس کریں گے تو اس کے لیے انٹرنیٹ کی پرمشن ایڈ کرنا ہوگی . پرمشن ایڈ کرنے کے لیے اینڈرائیڈ مینی فسٹ فائل اوپن کریں جو جاوا کے فولڈر سے اوپر آپ کو نظر آئے گی . نیچے سکرین شاٹ دیکھیں .

 

android-manifest

 

 

مینی فسٹ فائل اوپن کرنے کے بعد آپ یہ لائن ایپلیکیشن ٹیگ سے پہلے پیسٹ کر دیں .

<uses-permission android:name="android.permission.INTERNET"/>

یہ لائن ایڈ کرنے کے بعد آپ کی مینی فسٹ فائل کچھ اس طرح نظر آئے گی . نیچے سکرین شاٹ دیکھیں .

 

android-permission-internet

 

 

(Build and Run our Android WebView App) اپنی ایپلیکیشن کو رن کرنا

اب ہماری اینڈرائیڈ ویب ویو ایپ تیار ہے . یہ سب کرنے کے بعد اب آپ نے اپنی ایپ کو رن کرنا ہے. اس کے لیے آپ کے پاس ایک اینڈرائیڈ فون ہونا چاہیے. ڈیٹا کیبل کے ذریعے اپنا فون پی سی یا لیپ ٹاپ کے ساتھ اٹیچ کریں اور اس کے ڈرائیورز آپ کے پی سی یا لیپ ٹاپ میں انسٹال ہونے چاہیے خاص طور پر اے ڈی بی ڈرائیورز وہ آپ کو آپ کے فون کے ماڈل کے مطابق مطلوبہ کمپنی کی ویب سائیٹ سے مل جائیں گے. فون اٹیچ کرنے کے بعد جب اینڈرائیڈ سٹوڈیو اس فون کو پک کر لے گا تو یہ سکرین سامنے آئے گی.

 

android-deployment-target

 

ڈیوائسز کی لسٹ میں سے اپنا فون سلیکٹ کر کے او کے کریں گے تو اینڈرائیڈ سٹوڈیو آپ کی اس اینڈرائیڈ ویب ویو کو آپ کے فون پر انسٹال کرنا شروع کر دے گا. ایک دو منٹ کی لوڈنگ کے بعد ایپ آپ کے فون پر انسٹال ہو کر خود ہی رن ہو جائے گی اور سکرین آپ کے سامنے آ جائے گی.
اگر سارا کچھ ٹھیک ہو گیا ہے تو آپ کی ایپ پر وہ ویب سائٹ لوڈ ہونا شروع ہو جائے گی جس کا یو آر ایل کوڈ کی آخری لائن پر لکھا ہے. اس کوڈ میں میری ویب سائٹ کا یو آر ایل لکھا ہے آپ اس کو تبدیل کر کے کوئی بھی ویب سائٹ یا اپنی ویب سائٹ کا یو آر ایل لکھ سکتے ہیں. ویب سائٹ لوڈ ہونے کے لیے آپ کے فون کا وائی فائی یا انٹرنیٹ آن ہونا لازمی ہے .

 (Testing our Android WebView App) ایپ کو ٹیسٹ کرنا

اپنی اینڈرائیڈ ویب ویو بنا کر فون پر انسٹال اور رن کرنے کریں .   اگر آپ کا انٹرنیٹ کنکشن آف ہوا تو پیج ناٹ فاؤنڈ کا ایرر آئے گا .   انٹرنیٹ کنکشن آن کرنے کے بعد یہ ایپ رن کریں .   تو آٹومیٹ وہ ویب سائٹ لوڈ ہو جائے گی جس کا یو آر ایل آپ نے جاوا کوڈ کی آخری لائن پر لکھا ہوگا .

میں نے یہ اینڈرائیڈ ویب ویو ایپ اسی آرٹیکل کے لکھتے وقت بنائی اور اپنے فون ایل جی وی یو 3 پر چلا کر ٹیسٹ کی ہے اس کا سکرین شاٹ نیچے دیکھ سکتے ہیں آپ .

 

اینڈرائیڈ ویب ویو ایپ

 (Please Give Your Feedback for Android WebView App) آپ کا فیڈ بیک
اس آرٹیکل کو لکھتے وقت بہت مشکل پیش آئی. اردو کے ساتھ ساتھ انگلش ملا کر ٹائپ کرنا کتنا مشکل ہے یہ وہ لوگ جانتے ہیں جو اردو انگلش کمپوزنگ وغیرہ کرتے ہیں یا کرتے رہے ہیں. اور ساتھ بائیس تئیس سکرین شاٹ وہ بھی فل سکیل میں لگانا بھی پیج کی لوڈنگ سپیڈ کو کم کر دیتا ہے. اور یہ کہ مجھے آئیڈیا نہیں کہ جو بھی اس آرٹیکل کو پڑھ رہا ہے اس کا اینڈرائیڈ کے بارے میں کتنا نالج ہے اس لیے ہو سکتا ہے اس آرٹیکل میں بہت زیادہ غلطیاں ہوں.
انسان اپنی غلطیوں سے ہی سیکھتا ہے اس لیے آپ سے درخواست ہے کہ اگر آپ اس آرٹیکل کو پڑھ کر عملی طور پر ویب ویو ایپ بنائیں تو نیچے کمنٹ میں اپنی رائے ضرور دیں کہ آپ کو اس آرٹیکل سے کتنی مدد ملی اور یہ کہ اس میں کون کون سی بہتریوں کی گنجائش ہے اور کہاں کہاں کوئی غلطی ہے تاکہ میں پھر اس کو اپ ڈیٹ کر کے بہتر سے بہتر بنا سکوں.

 (What is Next after Android WebView App) آگے کیا آئے گا؟
اینڈرائیڈ ویب ویو ایپ بنانے کے آرڈر اکثر مجھے فائیور پر ملتے رہتے ہیں اس لیے میں نے پہلا آرٹیکل اسی پر لکھا ہے . اینڈرائیڈ پر اس طرح کے آرٹیکلز کا سلسلہ جاری رہے گا اور میری کوشش ہے کہ ساتھ ساتھ پروگرامنگ لینگوئجز کو بھی سٹارٹ کروں تاکہ جن کہ جاوا یا سی پلس پلس وغیرہ کا اردو میں کوئی خاص مددگار مواد نہیں ملتا ان کو فائدہ ہو سکے اور وہ اپنی سکل بنا کر یا بہتر کر کے آن لائن کام کر . کے روزگار حاصل کر سکیں.

Leave a Comment