اليوم لربما موضوع بعيد عن الاخبار التي نعرفها في عرب #أندرويد اليوم سوف نقوم بتقديم درس لاطلما اراد العديد من المبرمجين عملة لمواقعم الشخصية ولكن يجدون صعوبة في هذا الامر طبعاً برمجة تطبيقات نظام #أندرويد تعتمد بشكل كلي على لغة Java والبعض يستطيع برمجتها بلغات اخرى ولكن الافضل برمجة التطبيقات في هذة اللغة اللي قمت بدكرها من سابق .
درس اليوم عبارة عن متصفح بسيط وصفحة اخرى يوجد بها معلومات عن التطبيق ، الفكرة من الدرس هوا كيفية انشاء التطبيق لمواقعنا بشكل اساسي وكيفية عرضها وليس تطبيق متكامل بالاصل هي الفكرة وبعد ذلك تستطيع تطوير الفكرة بشكل كامل بما يناسبك .
للتنوية : البرنامج المستخدم في برمجة تطبيقات الاندرويد بشكل عام هوا eclipse تستطيع الحصول علية بشكل مجاني طبعاً مع تنزيل حزمة SDK المناسبة لبيئة التطوير الخاصة بك
أولاً : نقوم بفتح برنامج eclipse ونقوم بعمل مشروع جديد بالذهاب الى التالي :-
File > New > Android Application Project
تانياً : نقوم بتمسية مشروعنا كما نريد حيت موضح بالصورة التالية:-
- Application Name :WebAndroid
- Project Name : WebAndroid
- Package Name : net.androidar.aburetaj.Tutorial
بعد الانتهاء من الخطوة الاولى يجب علينا ان ننتقل الان الى تظمين الاكواد في تطبيقنا اولاً يجب علينا الدهاب الى ملف MainActivity.java ونقوم بإضافة الكود التالي :-
package net.androidar.aburetaj.Tutorial; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class MainActivity extends Activity { // Declare Variables Button Standardbtn; Button Custombtn; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Get the view from activity_main.xml setContentView(R.layout.activity_main); // Locate buttons in activity_main.xml Standardbtn = (Button) findViewById(R.id.standard); Custombtn = (Button) findViewById(R.id.custom); // Capture first Button click Standardbtn.setOnClickListener(new OnClickListener() { public void onClick(View arg0) { // Open StandardWebView.class Intent intent = new Intent(MainActivity.this, StandardWebView.class); startActivity(intent); } }); // Capture second Button click Custombtn.setOnClickListener(new OnClickListener() { public void onClick(View arg0) { // Open CustomWebView.class Intent intent = new Intent(MainActivity.this, CustomWebView.class); startActivity(intent); } }); } }
بعد تظمين الخطوة السابقة وتصحيح الاخطاء إن ظهرت ننتقل الى اضافة ملف ملف Android.xml لتصميم واجة العرض عن طريق الذهاب الى مجلد res > layout بالضغط على الزر الايسر على الماوس ويتم إضافة الملف Android.xml ويتم تسميتة activity_main كما هوا موضح بالصورة التانية :-
تستطيع ان تقوم بسحب الادوات واعادة كتابة الكود ولكن يفضل كتابة الكود يدوياً لكي لانقع في اي اخطاء في التطبيق وتكون النتيجة كما في الصورة التالية:-

الان الخطوة التي يجب علينا القيام بها وهي عملية عرض الـWebView نقوم بإضافة Class جديد عن طريق الخطوات File > New > Class ونقوم بتسمية الـ Class بهذا الاسم StandardWebView.java وطبعاً يجب ان نتأكد ان يكون اسم package الخاص بالتطبيق والذي هوا net.androidar.aburetaj.Tutorial بعد إنشاء ملف Java نقوم بكتابة الكود التالي :-
package net.androidar.aburetaj.Tutorial; import android.webkit.WebChromeClient; import android.webkit.WebView; import android.webkit.WebViewClient; import android.os.Bundle; import android.app.Activity; import android.view.Window; public class StandardWebView extends Activity { // Declare Variables WebView webview; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Prepare the progress bar requestWindowFeature(Window.FEATURE_PROGRESS); // Get the view from webview.xml setContentView(R.layout.webview); // Locate the WebView in webview.xml webview = (WebView) findViewById(R.id.webview); // Enable Javascript to run in WebView webview.getSettings().setJavaScriptEnabled(true); // Allow Zoom in/out controls webview.getSettings().setBuiltInZoomControls(true); // Zoom out the best fit your screen webview.getSettings().setLoadWithOverviewMode(true); webview.getSettings().setUseWideViewPort(true); // Load URL webview.loadUrl("https://android-gate.com"); // Show the progress bar webview.setWebChromeClient(new WebChromeClient() { public void onProgressChanged(WebView view, int progress) { setProgress(progress * 100); } }); // Call private class InsideWebViewClient webview.setWebViewClient(new InsideWebViewClient()); } private class InsideWebViewClient extends WebViewClient { @Override // Force links to be opened inside WebView and not in Default Browser public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } } }
ملاحظة مهمة
webview.loadUrl("https://android-gate.com");
[note]هذا الكود اختصاصة عرض صفحة الويب المراد فتحها نقوم بتعديلها الى الرابط الذي نريدة [/note]
والان نقوم بإنشاء Class جديد ايضاً نقوم بتسميتة CustomWebView مع التأكد من اسم package الخاص بالتطبيق وكما ذكرتة في النقطة السابقة والنقطة الاولى بعد الانشاء نقوم بإذراج الكود التالي :-
package net.androidar.aburetaj.Tutorial; import android.os.Bundle; import android.app.Activity; import android.webkit.WebView; public class CustomWebView extends Activity { // Declare Variables WebView webview; String htmlcodes; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webview); webview = (WebView) findViewById(R.id.webview); // Custom HTML Codes htmlcodes = "Arabic lessons in Android Application Programming By AbuRetaj (CoderAden)"; // Load the HTML Codes in WebView webview.loadData(htmlcodes, "text/html", "UTF-8"); } }
طبعاً الكود السابق هوا خاص بزر المعلومات الموجود في الصورة السابقة وعند الضغط علية يحولنا على صفحة فيها معلومات اكتب ما شئت في هذة الصفحة
// هذا الكود المتخصصص في الكتابة وهوا عبارة عن وسوم HTML يمكن ان تقوم بما تريد بة htmlcodes = "Arabic lessons in Android Application Programming By AbuRetaj (CoderAden)";
اما الخطوة الان لتشغيل ملف “المعلومات” وعرضة لنا في تطبيقنا يجب علينا انشاء ملف Android.xml في مجلد layout < res وبالزر الايمن نقوم بإنشاء ملف Android.xml ونقوم بتسمتية webview ونقوم بتضمين الكود التالي فية :-
< ?xml version="1.0" encoding="utf-8"?>
الخطوة التالية لإضافة اللغة العربية او اي لغة تريدها حسب المتوفر من اللغات الموجودة نذهب الى ملف strings وندخل الى مصدر strings ونقوم بكتابة الاكواد التالية بعد وسم
WebView Tutorial Hello world! Settings Standard WebView Custom WebView
صور لتطبيقنا :-
اعتذر لعذم رفع الدرس الى حسابنا في YouTube لوجود مشاكل في الرفع في واخد فترة طويلة وارجو ان يكون الدرس واضح وسوف نتابع سلسلة دروس لبرمجة تطبيقات الاندرويد لكافة المستويات حيت هذا الدرس للفئة المتوسطة
درس رائع وفي ميزان حسناتك سوف اقوم بالتطبيق شكراً لك
شكرا لك أخي شرح واضح وسهل التطبيق