جلسه شانزدهم | ساخت برنامه شبیه به اینستاگرام

شنبه ۱ دی ۱۴۰۳ | ۱۷:۴۹:۵۰

آموزش برنامه نویسی » آموزش ساخت برنامه ای شبیه به اینستاگرام » آموزش برنامه نویسی اندروید »

۱۳۹۹/۲/۱۴ یکشنبه

(3)

(0)

جلسه شانزدهم | ساخت برنامه شبیه به اینستاگرام | پست گذاشتن

آموزش پروژه محور ساخت اندروید ساخت برنامه ای شبیه به اینستاگرام

سلام و عرض ادب خدمت شما همراهان همیشگی جاواپرو

امیدوارم حال دلتون خوب و ایام به کامتون باشه

جلسه امروز که شانزدهمین جلسه ای هم هست که در خدمت شما هستیم با آموزش پست گذاشتن در خدمت شما هستیم
این جلسه حائز اهمیت زیادی هست و از اون میتونید در انواع اپلیکیشن ها بهره ببرید پس پله به پله با بنده جلو بیاید تا متوجه کلیات موضوع بشید.

ابتدا میریم به AddPostActivity که قبلا در جلسات گذشته ساختیم و ui اون رو هم طراحی کردیم.

ما میخوایم وقتی روی تصویر کلیک شد از حافظه گوشیمون عکس رو انتخاب کنیم و به همراه کپشن و لوکیشنمون که مینویسیم اون رو پست کنیم تا درون سرور جای بگیره.

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

اما قبل از اینکه کاربر اجازه بده باید برنامه هم اجازه دسترسی رو داشته باشه.

برای اینکه اجازه دسترسی داشتن به حافظه گوشی رو بدیم

مثل اجازه دسترسی اینترنت که جلسات قبل دادیم به manifestsAndroidManifest.xml میریم و این دسترسی رو بهش اضافه میکنیم:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" >

دسترسی 1

حالا به اکتیویتیمون برمیگردیم و 4 تا متد مینویسیم.

ابتدا متد درخواست دسترسی را به این شکل مینویسیم:

private void RequestImagePermissions() {
ActivityCompat.requestPermissions(AddPostActivity.this,new String[]{READ_EXTERNAL_STORAGE}, 20);
}

نمونه کد 1

این متد یک درخواست دسترسی برای خواندن اطلاعات از حافظه خارجی با شماره 20 به کاربرمون ارسال میکنه که اگر کاربر قبول کنه اجازه داریم که عکس از گوشی کاربر انتخاب کنیم ولی اگر قبول نکرد این امکان رو ما نداریم.
اما جریان این عدد 20 چیه، اصلا چرا 20؟
ببینید فرض کنید شما قراره اجازه چندین دسترسی رو از کاربر بگیرید
مثلا دسترسی به برداشتن فایل یا ذخیره فایل یا هر چیز دیگه ای
بعد یجا باید چک کنیم که کاربر دسترسی داده یا نداده تا بعد بتونیم کارمون رو انجام بدیم
اونجایی که باید چک کنیم که جلوترم پیاده سازی میکنیم با همین عدده کار داره و به ما میگه اقا کد درخواست شما چنده؟
اون متدی که قراره چک کنه وقتی بهش میگیم کد درخواست من 20 هست خودش میدونه که ما درخواست برای دسترسی به خواندن حافظه خارجی داریم
صرفا هم نباید 20 باشه
هر عددی که دوست دارید شما میتونید انتخاب کنید.
بریم متد برداشتن عکس از حافظه رو هم پیاده سازی کنیم:

private void get_Image() {
Intent intent = new Intent(Intent.ACTION_GET_CONTENT).setType("image*");
startActivityFor result (intent, 10);
}

نمونه کد 2

برای برداشتن عکس از خواص intent استفاده میکنیم و بهش میگیم تو میتونی هرچیزی که از نوع image هست رو از تو گوشی انتخاب کنی.
عدد 10 هم داستانش مثل همون 20 هستش بعد باید یجا چک بشه که تصویر انتخاب شده یا نه پس اینجا یه عدد دلخواه میذاریم برای کد درخواست که من 10 گذاشتم.
حالا متغیرهایی را که نیاز داریم باید تعریف کنیم
پس درون کلاس به این شکل این متغیر ها رو تعریف میکنیم:

Uri filePath;
Bitmap bitmap;
String filename;

نمونه کد 3

حالا میریم و دوتا متد اندروید استودیو رو باید override کنیم که موفق یا ناموفق بودن درخواست ها رو مورد بررسی قرار بدیم.
ابتدا موفق بودن برداشتن عکس
کلید های ترکیبی ctrl+o رو بزنید و تایپ کنیدonActivity result و این متد رو override کنید به این شکل:

@Override
protected void onActivity result (int requestCode, int result Code, @Nullable Intent data) {
super.onActivity result (requestCode, result Code, data);

}

نمونه کد 4

حالا در این متد باید موفقیت آمیز بودن یا نبودن برداشتن عکس را مدیریت کنیم.

@Override
protected void onActivity result (int requestCode, int result Code, @Nullable Intent data) {
super.onActivity result (requestCode, result Code, data);
if (requestCode == 10 && result Code == result _OK && data.getData() != null) {
filePath = data.getData();
try {
bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath);
userimage.setImageBitmap(bitmap);
filename = new File(data.getData().getPath()).getName();
share.setEnabled(true);
} catch (IOException e) {
e.printStackTrace();
}
}
}

نمونه کد 5

مطابق نمونه کد 5 میگیم اگر کد درخواست 10 بود(کد درخواست 10 مربوط به برداشتن عکس بود) و نتیجه هم تایید شده بود و همچنین دیتایی که میگیریم خالی نبود
بیا متغیر filepath رو قرار بده دیتایی که از این intent میگیری
بعد توی trycatch واسه اینکه خطای زمان اجرایی پیش نیاد
بیا اون bitmap که ساختیمو به وسیله این دیتایی که گرفتی مقدار دهی کن و بعدشم روی این عکسه که توی لایه مون هست ست کن.
اما ما برای اینکه عکس رو بخوایم تو سرورمون ذخیره کنیم نیاز داریم که اسم عکس رو هم داشته باشیم.
پس اسم عکس رو هم در متغیر filename ذخیره میکنیم تا بعدا به سرور ارسال کنیم برای ذخیره شدن.
و دکمه share حالا میتونه فعال بشه برای ارسال.
خب حالا باید وضعیت دسترسی رو هم مورد بررسی قرار بدیم
پس یک بار دیگه ctrl+o رو میزنیم و این بار متد onRequestPermission result رو override میکنیم.
من همین ابتدا کد کلشو میذارم که ساده هست و بعد هم توضیح میدم خدمتتون

@Override
public void onRequestPermissions result (int requestCode, @NonNull String[] permissions, @NonNull int[] grant result s) {
if (requestCode == 20) {
if (grant result s.length > 0 && grant result s[0] == PackageManager.PERMISSION_GRANTED) {

get_Image();

} else {
RequestImagePermissions();
}
}
}

نمونه کد 5

مطابق نمونه کد 6 میگیم اگر کد درخواست 20 بود پس یعنی درخواست دسترسی به حافظه برای برداشتن عکس هست
حالا میگیم اگر درخواست تایید شد از سمت کاربر متد get_Image که نوشتیم رو فراخونی کن
اگر کاربر رد کرد باز باید درخواست بدیم برای برداشتن عکس و تا زمانی که درخواست رو تایید نکرده ما اجازه برداشتن عکس رو نداریم.
حالا میخوایم وقتی روی عکس کلیک شد بتونیم عکس رو از تو گوشیمون انتخاب کنیم
پس برای عکس رویداد کلیک تعریف میکنیم و متد درخواست دسترسی رو بهش پاس میدیم به این شکل:

userimage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
RequestImagePermissions();
}
});

نمونه کد 6

یک متد دیگه هم لازم داریم که bitmap رو بگیره و تبدیل کنه به string و بهمون string رو برگردونه
این متد یک عکس رو میگیره و به string انکد میکنه و String یک عکس رو بهمون میده که به سرور به صورت String ارسال کنیم عکس رو و مجددا در سمت سرور اون String رو دیکد کنیم و به فرمت عکس در بیاریم

public String imgToString(Bitmap bitmap) {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, baos);
byte[] imgBytes = baos.toByteArray();
return Base64.encodeToString(imgBytes, Base64.DEFAULT);
}

نمونه کد 7

حالا باید به سرور درخواست بدیم و اطلاعات رو برای ذخیره شدن بفرستیم به سرورمون.
اما قبلش باید یک جدول دیگه توی دیتابیسمون برای نگهداری پست هامون بسازیم
پس شبیه ساز سرور رو راه اندازی میکنیم و به ادرس localhostphpmyadmin میریم:

آموزش پروژه محور اندروید ساخت سیستم قرار دادن پست در اینستاگرام

پس از انتخاب new(تصویر 1 ) سپس به تصویر (2) میریم:

آموزش پروژه محور برنامه نویسی اندروید ساخت برنامه ای شبیه به اینستاگرام

ابتدا اسم جدول را post قرار میدهیم و سپس اسم و نوع ستون ها را مطابق بنده وارد نمایید و روی save کلیک کنید تا جدول ما ساخته بشه.
بعد دوباره به android studio برمیگردیم و درخواست به سرور رو برنامه نویسی میکنیم.
ابتدا در قسمت onCreate دو متغیر که برای درخواست به سرور و همچنین ارسال پارامتر به سرور نیاز داریم رو تعریف و مقدار دهی میکنیم به این شکل:

final RequestQueue queue = Volley.newRequestQueue(this);
final SharedPreferences preferences = getSharedPreferences("shp", MODE_PRIVATE);

نمونه کد 8

خب حالا می‌خوایم وقتی روی share کلیک شد درخواست به سرور ارسال بشه و اطلاعات پست جدید درون دیتابیس ذخیره
بشه پس رویداد کلیک رو برای share تعریف میکنیم به این شکل:

share.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

});

نمونه کد 9

پس از اون با volley به سرور درخواست میدیم
چون روال کار مثل قبل هس و شما با روش کار اشنایی دارین بنده از همین ابتدا تمام کد رو میذارم و بعد توضیح میدم خدمتتون:

share.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
StringRequest upload = new StringRequest(Request.Method.POST, Server.server_address + "newpost.php", new Response.Listener<String>() {
@Override
public void onResponse(String response) {
if (response.contains("done")) {
Toast.makeText(AddPostActivity.this, "new post uploaded!", Toast.LENGTH_SHORT).show();
startActivity(new Intent(AddPostActivity.this, MainActivity.class));
finish();

} else {
Toast.makeText(AddPostActivity.this, "failed", Toast.LENGTH_SHORT).show();
}

}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Toast.makeText(AddPostActivity.this, "unable connect to server", Toast.LENGTH_SHORT).show();
}
}
) {
@Override
protected Map<String, String> getParams() {
Map<String, String> params = new HashMap<>();
params.put("image", imgToString(bitmap));
params.put("location", location.getText().toString());
params.put("caption", caption.getText().toString());
params.put("name", filename);
params.put("username", preferences.getString("username", null));
return params;
}
};
queue.add(upload);

}
});

نمونه کد 10

مجددا یک درخواست از نوع String به فایل newpost.php که در سرورمون هست ارسال میکنیم و با اون تعدادی پارامتر که از کاربر میگیریم و username که قبلا در sharedprefrences ذخیره کردیم رو میفرستیم.
ارور احتمالی از سمت سرور رو هم با یک Toast مدیریت میکنیم.
و در قسمت پاسخ دریافتی از سرور اگر پاسخ با موفقیت بود که به کاربر این رو میگیم و به MainActivity میریم
اگر هم نه که به کاربر میگیم که پاسخ دریافتی از سمت سرور موفقیت آمیز نبود.
حالا میریم و سمت سرور رو برنامه نویسی میکنیم.
به ادرس فایل های سرورمون میریم و یک فولدر به نام images برای نگهداری عکس ها درونش و همچنین یک فایل php
جدید به نام newpost.php برای برنامه نویسی سمت سرور میسازیم.
ابتدا تگ php رو باز میکنیم و اتصال به دیتابیس رو برقرار میکنیم:

<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
define('HOST','localhost');
define('USER','root');
define('PASS','');
define nn = mysqli_connect(HOST,USER,PASS,DB);
if (!$conn) {
die("Connection failed" );
}
{
('DB','instagram');
$co

نمونه کد 11
پس از اون اطلاعات ارسال از سمت کاربر رو در متغیرهایی که تعریف میکنیم ذخیره میکنیم:

$image = $_POST["image"];
$location = $_POST["location"];
$caption = $_POST["caption"];
$name = $_POST["name"];
$username = $_POST["username"];

نمونه کد 12

حالا باید ادرس پوشه مون رو تعریف کنیم و اطلاعاتی که از کاربر گرفتیم رو هم به دیتابیس وارد کنیم:

image file directory
$target = "images$name";

insert data to database
$stmt = $conn->prepare(" insert into post (username ,caption ,image ,location ) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $username, $caption, $target, $location);

نمونه کد 13

حالا باید پاسخمون رو به کاربر ارسال کنیم و عکسمون رو هم در پوشه images ذخیره کنیم:

if( $stmt-> exec ute()){
put image in images folder
file_put_contents($target,base64_decode($image));
echo "done";
}else{
echo "fail";
}

نمونه کد 14

به این ترتیب سمت سرور ما برنامه نویسی شد.
بنده ابتدا تمام کد هم سمت سرور و هم سمت کلاینت رو میذارم
و بعد با همدیگه برنامه رو تست میکنیم
سمت سرور:

ادامه جلسه 16 آموزش ساخت برنامه شبیه اینستاگرام با اندروید را

به صورت پی دی اف در لینک زیر دانلود کنید.

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

ادامه حیات سایت جاواپرو به حمایت مالی (دونیت) از طرف شما کاربر عزیز بستگی دارد....