آموزش جامع ساخت نرم افزار آب و هوا برای آندروید + سورس کد برنامه

سلام به برنامه نویسان اندروید!

در این آموزش، ما با ساخت یک برنامه Android آب و هوا  که  وب سرویس آب و هوا نامیده می شود، برای نشان دادن شرایط آب و هوایی یک ناحیه به طور مثال Ariana، تونس (فقط یک مثال است) در خدمت شما هستیم.

اگر می خواهید وب سرویس  خودتان را ایجاد کنید، با این آموزش در پرتال فارسی سرا همراه باشید.

در انتهای این آموزش، لینک Github از کد منبع کامل را در اختیارتان قرار خواهیم داد، و به همراه آن موارد بیشتر (همه چیز با مثال توضیح داده می شود). ارائه داده می شود.

بیاین شروع کنیم !

برنامه آب و هوای برای آندروید

قبل از شروع کار، باید یک حساب کاربری در openweathermap ایجاد کنید تا یک کلید API دریافت کنید (اگر نمی خواهید این مرحله را انجام دهید، می توانید از مورد من استفاده کنید).

اگر با ایجاد پروژه های Android آشنا هستید، به مرحله بعدی بروید:

ابتدا یک پروژه Android ایجاد کنید


برای ایجاد یک پروژه Android، به قسمت File – New – New Projec بروید

       ایجاد پروژه جدید اندروید

سپس نام پروژه Android خود را وارد کنید. نام بسته به عنوان شناسه برنامه شما مورد استفاده قرار می گیرد، بنابراین سعی کنید یک اسم منحصر به فرد وارد کنید.

نام برنامه Android را وارد کنید

minimum SDK را انتخاب کنید، این گزینه بستگی به نسخه اندرویدی دارد که برنامه شما می تواند در آن اجرا شود.

در این مثال، برنامه ما در آندروید ۴.۰.۳ و بالاتر اجرا خواهد شد.

minimum SDK را انتخاب کنید
در آندروئید، یک Activity توسط یک کلاس جاوا و یک فایل XML تشکیل شده است: جاوا برای پردازش و XML برای interface.So، در این مرحله، ما اولین Activity را در برنامه ایجاد خواهیم کرد.

ایجاد Activity جدید
نام کلاس جاوا (Activity name) و نام فایل XML (Layout name) را وارد کنید:

در نهایت ! پروژه Android ما با موفقیت ایجاد شد.

هر پروژه آندروید از ۳ فایل اصلی تشکیل شده است:

مانیفست اندروید (فایل XML): این پرونده حاوی تمام اطلاعات مربوط به برنامه مانند فعالیتهایی است که در آن وجود دارد و مجوز برنامه
MainActivity (فایل JAVA)
–   activity_main.xml (فایل XML برای طرح “layout”)
–  build.gradle: شامل نسخه برنامه و تمام ملزومات آن است


اضافه کردن ملزومات برنامه

ما به ۲ الزام نیاز داریم. اول، Volley، یک کتابخانه است که درخواست های HTTP را ساده تر می کند.

و Glide، یک کتابخانه ای است که باعث می شود تصاویر را در برنامه راحت تر دانلود و نمایش دهد.

برای افزودن این کتابخانه ها، این فایل را برای build.gradle (Module: App) اضافه کنید

(می توانید آن را در بخش Gradle.Scripts پیدا کنید)

compile 'com.android.volley:volley:1.0.0'
compile 'com.github.bumptech.glide:glide:3.7.0'

 

پس از تغییر در فایل build.gradle، Gradle از شما می خواهد که همگام سازی پروژه انجام دهید، روی همگام سازی هم اکنون کلیک کنید تا ۲ کتابخانه را وارد کنید(IMPORT) شود.

Gradle نیاز به همگام سازی دارد

مجوز برنامه:

از آنجا که درخواست HTTP برای بازیابی شرایط آب و هوایی را ایجاد می کنیم، باید از کاربر INTERNET PERMISSION را درخواست کنیم.

ما همچنین باید بدانیم که آیا کاربر به اینترنت اتصال دارد یا خیر، بنابراین ما نیازمند اجازه دسترسی ACCESS NETWORK STATION خواهیم بود.

قبل از تگ برنامه، این را به AndroidManifest.xml اضافه کنید.

 

 


آماده سازی رابط کاربری گرافیکی

در رابط ما، ما ۲ TextViews برای نمایش درجه حرارت و آب و هوا و ۱ ImageView برای نشان دادن یک پس زمینه با توجه به شرایط آب و هوایی نیاز داریم. باز کردن activity_main.xml، این فایل توضیح می دهد که رابط کاربری ما چگونه خواهد بود.

اول، ما تصویر پس زمینه را تنظیم می کنیم، کل صفحه نمایش را پوشش می دهد (match_parent)

سپس، ما ۲ TextView را اضافه می کنیم

 

اکنون، از آنجا که GUI آماده است. بیایید شروع کنیم:


شروع به توسعه برنامه

همانطور که در بالا ذکر شد، یک صفحه نمایش با ۲ فایل ساخته شده است: JAVA و XML. بنابراین، حالا کلاس MainActivity را برای افزودن منطق کسب و کار business logic (بخشی از برنامه که نحوه پردازش داده ها را تعیین می کند) ویرایش می کنیم.

ابتدا، ما متغیرهایی را که ما نیاز داریم قرار می دهیم

// we"ll make HTTP request to this URL to retrieve weather conditions
String weatherWebserviceURL = "http://api.openweathermap.org/data/2.5/weather?q=ariana,tn&appid=2156e2dd5b92590ab69c0ae1b2d24586&units=metric";
//the loading Dialog
ProgressDialog pDialog;
// Textview to show temperature and description
TextView temperature, description;
// background image
ImageView weatherBackground;
// JSON object that contains weather information
JSONObject jsonObj;

سپس، آیتم های گرافیکی را که ما در بالا به آن متغیرها اضافه کردیم پیوند می دهیم

//link graphical items to variables
temperature = (TextView) findViewById(R.id.temperature);
description = (TextView) findViewById(R.id.description);
weatherBackground = (ImageView) findViewById(R.id.weatherbackground);
در حال حاضر، مهمترین بخش را شروع می کنیم که درخواست HTTP برای بازیابی شرایط آب و هوایی را بارگیری می کند و تصویر مناسب را بارگذاری می کند و آن را به عنوان پس زمینه تنظیم می کند.
// prepare and show the loading Dialog
pDialog = new ProgressDialog(this);
pDialog.setMessage("Please wait while retrieving the weather condition ...");
pDialog.setCancelable(false);
 pDialog.show();

// make HTTP request to retrieve the weather
JsonObjectRequest jsonObjReq = new JsonObjectRequest(Request.Method.GET,
        weatherWebserviceURL, null, new Response.Listener() {

    @Override
    public void onResponse(JSONObject response) {
        try {
            // Parsing json object response
            // response will be a json object


            jsonObj = (JSONObject) response.getJSONArray("weather").get(0);
            // display weather description into the "description textview"
            description.setText(jsonObj.getString("description"));
            // display the temperature
            temperature.setText(response.getJSONObject("main").getString("temp") + " °C");

            String backgroundImage = "";

            //choose the image to set as background according to weather condition
            if (jsonObj.getString("main").equals("Clouds")) {
                backgroundImage = "https://marwendoukh.files.wordpress.com/2017/01/clouds-wallpaper2.jpg";
            } else if (jsonObj.getString("main").equals("Rain")) {
                backgroundImage = "https://marwendoukh.files.wordpress.com/2017/01/rainy-wallpaper1.jpg";
            } else if (jsonObj.getString("main").equals("Snow")) {
                backgroundImage = "https://marwendoukh.files.wordpress.com/2017/01/snow-wallpaper1.jpg";
            }

            // load image from link and display it on background
           // We'll use the Glide library
            Glide
                    .with(getApplicationContext())
                    .load(backgroundImage)
                    .centerCrop()
                    .crossFade()
                    .listener(new RequestListener<String, GlideDrawable>() {
                        @Override
                        public boolean onException(Exception e, String model, Target target, boolean isFirstResource) {
                            System.out.println(e.toString());
                            return false;
                        }

                        @Override
                        public boolean onResourceReady(GlideDrawable resource, String model, Target target, boolean isFromMemoryCache, boolean isFirstResource) {
                            return false;
                        }
                    })
                    .into(weatherBackground);

            // hide the loading Dialog
            pDialog.dismiss();


        } catch (JSONException e) {
            e.printStackTrace();
            Toast.makeText(getApplicationContext(), "Error , try again ! ", Toast.LENGTH_LONG).show();
            pDialog.dismiss();

        }


    }


}, new Response.ErrorListener() {

    @Override
    public void onErrorResponse(VolleyError error) {
        VolleyLog.d("tag", "Error: " + error.getMessage());
        Toast.makeText(getApplicationContext(), "Error while loading ... ", Toast.LENGTH_SHORT).show();
        // hide the progress dialog
        pDialog.dismiss();
    }
});

// Adding request to request queue
AppController.getInstance(this).addToRequestQueue(jsonObjReq);

پس از آن، متوجه خواهیم شد که یک خطا به وجود آمده است، زیرا کلاس “AppController” را ایجاد نکردیم، بنابراین این کلاس را ایجاد می کنیم. به قسمت Packages خود بروید و کلاس “AppController” را اضافه کنید.

هدف از ایجاد این کلاس، ارائه یک نمونه واحد از “زمینه CONTEXT” است. اگر با جاوا آشنا باشید، AppController یک پیاده ساز الگوی طراحی Singleton است.

کلاس را باز کنید و کد زیر را اضافه کنید:

public class AppController {

    private static AppController mInstance;
    private static Context mCtx;
    private RequestQueue mRequestQueue;

    private AppController(Context context) {
        mCtx = context;
        mRequestQueue = getRequestQueue();
    }

    // if an instance is already create , it will return it . if no instance was created , it will create a new one then reurn it
    public static synchronized AppController getInstance(Context context) {
        if (mInstance == null) {
            mInstance = new AppController(context);
        }
        return mInstance;
    }

    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            mRequestQueue = Volley.newRequestQueue(mCtx.getApplicationContext());
        }
        return mRequestQueue;
    }

    public  void addToRequestQueue(@NonNull final Request request) {
        getRequestQueue().add(request);
    }

    public  void addToRequestQueueWithTag(@NonNull final Request request, String tag) {
        request.setTag(tag);
        getRequestQueue().add(request);
    }
}

تست و اجرای برنامه

هنگامی که ما برنامه را اجرا می کنیم، به طور خودکار یک درخواست HTTP ایجاد می کند و شرایط آب و هوایی فعلی را نمایش می دهد.

شما می توانید کد منبع کامل را از اینجا دریافت کنید: