برمجة تطبيق الوصفات بطريقة سهلة

السلام عليكم و رحمة الله تعالى و بركاته.
★★★ تقديم:
الكثير من الإخوة مطوري تطبيقات الهاتف المحمول الخاصة بالأندرويد يجدون صعوبة في البرمجة والتعديل على تطبيق  Recipes، و لهذا ارتأيت أن أقوم بتبسيطه و تسهيل التعامل معه ، من حيث تصميمه و برمجته و تسهيل التحكم في إعداداته.
و سيتم الشرح بالصوت والصورة و ذلك على شكل أشرطة فيديو في قناتي على اليوتوب.

 رابط تحميل الكود السورس - 
كود سورس الخاص باكليبس+ كود سورس الخاص باندرويد استوديو+ documentation

 https://sellfy.com/p/z5sX/

★★★ سير العمل:
★★★طريقة إنشاء تصميم صفحات Layout.
★★★طريقة برمجة صفحات التطبيق.
★★★طريقة إضافة إعلانات أدموب Admob.
★★★ طريقة إعداد مقاسات التطبيق من أجل تناسبه مع جميع شاشات أجهزة الأندرويد.
★★★إستخدام أدوات التحليل و القياس :طريقة إدخال منصة firebase إلى التطبيق.
★★★طريقة ريسكين التطبيق:
   ★طريقة تغيير المحتوى.
   ★طريقة تغيير الـ Package.
   ★ طريقة استخراج الـ APK.
   ★طريقة تحويل الكود المستخرج من أندرويد استوديو إلى كود سورس يعمل على إكليبس.
   ★طريقة رفع التطبيق الى google play.
بسم الله، نبدأ:
★★★التصميم
التطبيق يحتوي على 3 صفحات أولها هي:
★ صفحة شاشة البداية splash_screen:
 هذه الصفحة تظهر في البداية و يدوم ظهورها مدة معينة و تحتوي على صورة تظهر في كامل الشاشة ثم عند انقضاء مدة الظهور يتم الانتقال إلى صفحة جميع الوصفات.
★صفحة جميع الوصفات all_recipes:
هذه الصفحة  تحتوي على صور الوجبات الغذائية و عند الضغط على الصورة التي تريدها يتم الانتقال إلى صفحة الوصفة المنفردة.
 ★صفحة الوصفة المنفردة single_recipe:  
هذه الصفحة تحتوي على صورة الوجبة في الأعلى وتحتها اسم الوصفة و مقاديرها و كيفية تحضيرها
و يمكن للمستخدم من خلال هذه الصفحة الانتقال للوصفة التالية عن طريق السحب لليسار أو الانتقال للوصفة السابقة عن طريق السحب لليمين.
 ★من أجل اختصار الوقت قمت سابقا بإنجاز تصميم ملفات Layout، و سنكتفي فقط بشرح كيفية التحكم فيه  بأكواد الجافا وهذا هو أهم شيء، و هذه هي أكواد xml الخاصة بالتصميم و هي مصمة فقط للظهور بشكل جيد على الأجهزة ذات القياسات 480*800:hdpi لأن تعديل المقاسات من أجل تناسب التطبيق مع جميع مقاسات الأجهزة سيكون في درس منفصل، و هذه هي الأكواد:

★كود صفحة splash_screen:

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</RelativeLayout>

كود صفحة all_recipes:

 
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="95dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:id="@+id/l1">
            </LinearLayout>
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="95dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="6dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:id="@+id/l2">
            </LinearLayout>
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="95dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="6dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:id="@+id/l3">
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

كود صفحة single_recipe:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="8dp"
    android:background="#0800ff">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/scrollView" >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="280dp"
                android:layout_height="220dp"
                android:layout_gravity="center"
                android:id="@+id/meal" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text=""
      android:id="@+id/recipe"
      android:textStyle="bold"
      android:lineSpacingExtra="10dp"
      android:textColor="#ffffff"
      android:textSize="30sp"
      android:padding="10dp"
      android:gravity="right" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

هذا لمن أراد التعلم، في حين سأضع لكم أيضا رابط الكود السورس الخاص بأندرويد استوديو والخاص بإكليبس  في الوصف أسفل الفيديو من أجل استغلاله  وتعديله حسب ما يناسبكم.
★★★ البرمجة:
★ بالنسبة للأكواد الأساسية فقد قمت بالبحث عنها في موقع Stackoverflow  و قمت بتنظيمها لتصبح جاهزة للاستخدام، و هي كالتالي:

 ★ كود إعداد عداد عكسي CountDownTimer:

 
new CountDownTimer(X, Y) {
public void onTick(long millisUntilFinished) {}
public void onFinish() {Z}}
.start();

★ كود إخفاء الشريط العلوي من الشاشة:

this.getWindow().setFlags(WindowManager.
        LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);

★ كود تغيير خط نص معين:


Typeface typeface = Typeface.
createFromAsset(getAssets(),"fonts/font.ttf");
textview.setTypeface(typeface);

★ كود إعداد قائمة:

 @Override
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.menu_name, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.menu_item_id) {
        }
        return super.onOptionsItemSelected(item);
    }

★ كود فتح تطبيق في Google Play Store  من أجل تقييمه:

 
Intent rateIntent = new Intent(Intent.ACTION_VIEW,
Uri.parse("market://details?id=com.X.X"));
startActivity(rateIntent);


★ كود الحصول على عدد الملفات التي توجد في مجلد ما موجود في مجلد Assets:

int files_number=getActivity().getAssets().list("folder_name").length;

★ كود وضع مصدر الصورة من ملف في مجلد Assets:

 
final InputStream inputstream = getAssets().open("image_path");
Drawable drawable = Drawable.createFromStream(inputstream, null);
image.setImageDrawable(drawable);
image.setTag(image_number);

★ كود تغيير طول و عرض عنصر ما:

 
final LinearLayout.LayoutParams layoutparams = new LinearLayout.
LayoutParams(layout_width,layout_height);

★ كود تغيير الهوامش الخاصة بعنصر ما:

 
layoutparams.setMargins(left, top, right, bottom);

★ كود القيام بأمر ما عند الضغط على زر الرجوع للخلف:

 
 public void onBackPressed(){
        //Do Something

    }

★ كود إظهار رسالة من نوع Toast:

 
Toast.makeText(Activity.this, "Something",
Toast.LENGTH_LONG).show();

★ كود الانقال إلى Activity معينة مع إرسال متغير معين:

 
Intent intent = new Intent(from_activity.this,to_activity.class);
intent.putExtra("element_name",element_value);
startActivity(intent);

★ كود استقبال متغير عددي من Activity معينة :

 
int element_name=getIntent().getIntExtra("element_name", 0);

★ كود مشاركة نص ما :

 
Intent sharingIntent = new Intent(android.content.Intent.ACTION_SEND);
sharingIntent.setType("text/plain");
sharingIntent.putExtra(android.content.Intent.EXTRA_SUBJECT,"");
sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT, "");
startActivity(Intent.createChooser(sharingIntent, "Share via:"));

★ كود ملف الجافا: OnSwipeTouchListener الذي يمكن من اكتشاف السحب لليمين و اليسار و الأعلى و الأسفل:

 
package com.recipes.app;

import android.content.Context;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;

public class OnSwipeTouchListener implements 
        View.OnTouchListener {

    private GestureDetector gestureDetector;

    public OnSwipeTouchListener(Context c) {
        gestureDetector = new GestureDetector(c, new 
                GestureListener());
    }

    public boolean onTouch(final View view, final MotionEvent
            motionEvent) {
        return gestureDetector.onTouchEvent(motionEvent);
    }

    private final class GestureListener extends GestureDetector.
            SimpleOnGestureListener {

        private static final int SWIPE_THRESHOLD = 100;
        private static final int SWIPE_VELOCITY_THRESHOLD = 100;

        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }


        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2,
                   float velocityX, float velocityY) {
            boolean result = false;
            try {
                float diffY = e2.getY() - e1.getY();
                float diffX = e2.getX() - e1.getX();
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (Math.abs(diffX) > SWIPE_THRESHOLD &&
        Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffX > 0) {
                            onSwipeRight();
                        } else {
                            onSwipeLeft();
                        }
                    }
                } else {
                    if (Math.abs(diffY) > SWIPE_THRESHOLD &&
     Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffY > 0) {
                            onSwipeDown();
                        } else {
                            onSwipeUp();
                        }
                    }
                }
            } catch (Exception exception) {
                exception.printStackTrace();
            }
            return result;
        }
    }

    public void onSwipeRight() {
    }

    public void onSwipeLeft() {
    }

    public void onSwipeUp() {
    }

    public void onSwipeDown() {
    }
}

★ كود القيام بأمر أمر عند السحب إلى اليسار أو اليمين و ذلك باستعمال ملف الـ OnSwipeTouchListener:

 
element_name.setOnTouchListener(new OnSwipeTouchListener(this) {
@Override
public void onSwipeLeft()
{
// Do Something
}
@Override
public void onSwipeRight()
{
// Do Something
}
});

★ كود تعريف قائمة :

 
String[] string_name=getResources().getStringArray(R.array.array_id);

★ كود إزاحة الصفحة إلى اليمين:

 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="-100%p" android:toXDelta="0%p" >
</translate>
</set>

★ كود إزاحة الصفحة إلى اليسار:

 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="100%p" android:toXDelta="0%p" >
</translate>
</set>

★ كود تشغيل Animation معينة من مجلد anim:

 
View view = findViewById(R.id.view_id);
Animation animation = AnimationUtils.
loadAnimation(getApplicationContext(),
R.anim.animation_name);
animation.setDuration(200);
view.startAnimation(animation);

★ كود الحصول على طول و عرض شاشة الجهاز:

 
Display display = getWindowManager().
getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();

★ كود إظهار نافذه منبثقة قابلة للتخصيص باعتماد ملف Layout:

 
  final Dialog alert = new Dialog(this);
        alert.requestWindowFeature(Window.
        FEATURE_NO_TITLE);
        alert.setContentView(R.layout.closing_dialog);
        alert.setCancelable(false);
        Button yes=(Button)alert.findViewById(R.id.yes);
        Button no=(Button)alert.findViewById(R.id.no);
        no.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                alert.cancel();
            }
        });
        yes.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        alert.getWindow().setLayout(window_width, window_height);
        alert.show();

★ كود تخصيص نافذة منبثقة:

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingRight="10dp"
    android:paddingLeft="10dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:background="#f200ff">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="الخروج من التطبيق"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:gravity="center"
        android:background="#ffff00"
        android:textStyle="bold"
        android:textColor="#ff0000"
        android:textSize="30sp"
        android:layout_marginBottom="20dp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="نعم"
        android:id="@+id/yes"
        android:background="#ffff00"
        android:textStyle="bold"
        android:textSize="30sp"
        android:textColor="#ff0000"
        android:paddingRight="5dp"
        android:paddingLeft="5dp"
        android:layout_below="@+id/textView2"
        android:layout_alignLeft="@+id/textView2"
        android:layout_alignStart="@+id/textView2"
        android:layout_marginLeft="30dp" />
    <TextView
        android:layout_gravity="right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="هل أنت متأكد من رغبتك في الخروج من التطبيق؟"
        android:id="@+id/textView2"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:textSize="30sp"
        android:padding="15dp"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:background="#0400ff"
        android:layout_marginBottom="18dp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="لا"
        android:id="@+id/no"
        android:background="#ffff00"
        android:textStyle="bold"
        android:textSize="30sp"
        android:textColor="#ff0000"
        android:paddingRight="5dp"
        android:paddingLeft="5dp"
        android:layout_below="@+id/textView2"
        android:layout_alignRight="@+id/textView2"
        android:layout_alignEnd="@+id/textView2"
        android:layout_marginRight="30dp" />
</RelativeLayout>

★★★ إضافة الإعلانات: سنقتصر فقط على شبكة أدموب الإعلانية:
    ★ طريقة إضافة إعلان البانر banner ads.
    ★ طريقة إضافة الإعلان البيني interstitial ads.
★★★ إستخدام أدوات التحليل و القياس: منصة firebase:
    ★ طريقة إدراج الإحصائيات.
    ★ طريقة  إدراج إرسال تقارير أخطاء التطبيق أو توقفه عن العمل على الأجهزة التي يشتغل عليها.

 و هذه هي الأكواد الخاصة بإضافة الإعلانات و منصة Firebase:

 ★ كود إضافة Google Play Services إلى التطبيق:

 
classpath 'com.google.gms:google-services:3.0.0'
compile 'com.google.firebase:firebase-ads:9.4.0'
apply plugin: 'com.google.gms.google-services'

 ★ كود إضافة تصريحات الولوج للأنترنت:

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

★ كود إعداد إعلانات Admob:

 
<meta-data 
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version"/>

<activity android:name="com.google.android.gms.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden
|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
android:theme="@android:style/Theme.Translucent" />


 ★ كود إضافة إعلان Banner (كود XML):

 
<HorizontalScrollView
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:id="@+id/admob_banner">
    <com.google.android.gms.ads.AdView
    android:id="@+id/adView"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ads:adSize="BANNER"
    ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>
</HorizontalScrollView>


★ كود إضافة إعلان Banner (كود JAVA):

 
MobileAds.initialize(getApplicationContext(), 
"ca-app-pub-3940256099942544~3347511713");
AdView mAdView = (AdView) findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);

★ كود القيام بأمر ما عندما يصبح إعلان Banner جاهزا للعرض:

 
mAdView.setAdListener(new AdListener() {
@Override
public void onAdLoaded() {
//Do Something
}});

★ كود إعداد إعلان من نوع Interstitial:

 
InterstitialAd mInterstitialAd;
mInterstitialAd = new InterstitialAd(this);
mInterstitialAd.
setAdUnitId("ca-app-pub-3940256099942544/1033173712");
mInterstitialAd.setAdListener(new AdListener() {
@Override
public void onAdClosed() {
requestNewInterstitial();}});
requestNewInterstitial();

★ كود طلب إعلان Interstitial جديد بعد إغلاق الإعلان القديم:

 
private void requestNewInterstitial(){
AdRequest adRequest = new AdRequest.Builder().build();
mInterstitialAd.loadAd(adRequest);}

★ كود إظهار إعلان Interstitial:

 
if (mInterstitialAd.isLoaded()){
mInterstitialAd.show();}


★ كود إضافة منصة Firebase الخاصة بالإحصائيات:

 
 compile 'com.google.firebase:firebase-core:9.2.1'

★ كود إضافة منصة Firebase الخاصة بإرسال تقارير الأخطاء و توقف التطبيق:

compile 'com.google.firebase:firebase-crash:9.4.0'

★★★طريقة ريسكين التطبيق:
      ★ طريقة تغيير الصور و الأيقونة.
      ★ طريقة استخراج صور السكرين شوت من أندرويد استوديو.
      ★ طريقة تغيير المحتوى.
      ★ طريقة تغيير Package.
      ★ طريقة استخراج Apk من أندويد استوديو.
      ★ طريقة تحويل الكود السورس المستخرج من أندرويد استوديو إلى كود سورس يشتغل على إكليبس.
      ★ طريقة استخراج Apk من إكليبس.
      ★ طريقة رفع التطبيق الى قوقل بلاي.
والسلام عليكم ورحمة الله تعالى و بركاته.

ليست هناك تعليقات:

إرسال تعليق

جميع الحقوق محفوظة لمدونة برمجة وتطوير التطبيقات والألعاب التربوية