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

پنج شنبه ۱ آذر ۱۴۰۳ | ۱۲:۱۷:۱۰

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

۱۳۹۹/۸/۱۲ دوشنبه

(2)

(0)

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

آموزش پروژه محور رایگان اندروید

به نام خدا

آموزش برنامه نویسی اندروید
آموزش پروژه محور ساخت اینستاگرام
موضوع:پیاده سازی صفحه جستجو
جلسه: نوزدهم
مدرس : محمد مهدی طاهری

عرض سلام و وقت بخیر خدمت شما کاربران عزیز سایت جاواپرو
امیدوارم هرجا که هستید حالتون خوب باشه و ایام به کامتون باشه
دوره آموزشی اینستاگرام هم کم کم داره به ایستگاه های پایانی خودش نزدیک میشه و یک یا دو جلسه دیگر بیشتر باقی نمانده است اما خبر خوب اینه که طبق قولی که از مدیریت محترم سایت جاواپرو جناب مهندس زارعی عزیز دریافت کردیم قراره این دوره به صورت ویدیو نیز در اختیار شما کاربران عزیز سایت جاوا پرو قرار بگیرد امیدواریم این دوره بتونه تاثیر مثبتی توی اینده شغلی شما داشته باشه و همچنین با حمایت از ما به عمر جاواپرو اضافه تر کنید.

خب وارد بحث اصلیمون بشیم
این جلسه قراره که پروفایل کاربرمون رو ویرایش کنیم.
پروژه مون رو باز میکنیم و بدون معطلی میریم به Edit_Profile_Activity
قبل از هر کاری چون تو دیتابیسمون فیلد phone برای شما تلفن نداریم پس به لایه همین اکتیویتی یعنی activity_edit_profile.xml میریم و EditText مربوط به phone رو حذف میکنیم چون فیلد اون رو توی دیتابیس تعریف نکردیم.

اینستاگرام رو که باز میکنیم و به صفحه ویرایش میریم ابتدا دقت کرده باشید در ابتدا تمام اطلاعات فعلی کاربر نمایش داده میشه که اگر هر مورد رو خواست ویرایش رو انجام بده مثلا فقط میخواد bio رو تغییر بده و کاری به بقیه ایتم ها نداشته باشه

خب چیکار میکنیم؟

یه متد مینویسیم و یه درخواست به سرور میدیم و بهش میگیم سرور جان هرچی که توی دیتابیس داری رو بفرس برای ما.
قبل از اون چندتا متغیر که در ادامه هم نیاز داریم تعریف میکنیم به این شکل:

Uri filePath;
Bitmap bitmap;
String filename;
RequestQueue queue;
SharedPreferences preferences;

نمونه کد 1

در قسمت onCreate باید SharedPrefrences و RequestQueue رو مقدار دهی کنیم به این شکل:

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

نمونه کد 2

حالا متد یک متد به اسم LoadData() مینویسیم و یک درخواست به سرور میدیم که اطلاعات کاربر رو بفرسه برامون
متد باید از نوع get باشد چون میخوایم اطلاعات از سرور بگیریم
بنده کد کلی متد رو میذارم و بعد توضیح میدم که از چه قرار هست:

public void loaddata() {
final JsonArrayRequest request = new JsonArrayRequest(Request.Method.GET, Server.server_address + "geteditdata.php", null, new Response.Listener<JSONArray>() {
@Override
public void onResponse(JSONArray response) {
try {
for (int i = 0; i < response.length(); i++) {
JSONObject obj = response.getJSONObject(i);
if (obj.getString("username").equals(preferences.getString("username", null))) {
bio.setText(obj.getString("bio"));
email.setText(obj.getString("email"));
username.setText(obj.getString("username"));
name.setText(obj.getString("fullname"));
preferences.edit().putString("id", obj.getString("id")).apply();
Picasso.get().load(Server.server_address + obj.getString("image")). into (user_profile);
}

}
} catch (Exception e) {
Toast.makeText(Edit_Profile_Activity.this, e.toString(), Toast.LENGTH_SHORT).show();
}
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Toast.makeText(Edit_Profile_Activity.this, error.toString(), Toast.LENGTH_SHORT).show();
}
});
queue.add(request);
}

نمونه کد 3

یک در خواست از نوع get و با کمک فایل geteditdata.php به سرور میفرستیم و از سرور میخوایم که یک ارایه از json که کل اطلاعات کاربرامون هست رو بهمون بده
حالا تو کل این ارایه هرجا که username برابر اسم کاربرمون بود که موقع ثبت نام وارد کرده یعنی تمام اطلاعات برای کاربر ما هست پس بیا همه رو قرار بده توی این فیلدهایی که ما داریم.
ایدی کاربر رو هم ذخیره میکنیم توی sharedprefrences چون باهاش کارداریم و در اخر هم با استفاده از کتابخانه پیکاسو و ادرس عکسی که از سرور میاد رو ست میکنیم روی تصویر کاربرمون.
این متد رو در onCreate فراخوانی میکنیم به این شکل:

try {
loaddata();
} catch (Exception e) {

}

نمونه کد 4

توی trycatch هم گذاشتم که اطلاعات دریافتی از سرور اگر null بود برنامه کرش نکنه.
حالا میریم و فایل geteditdata.php رو که توی پوشه سرورمون باید بسازیم رو برنامه نویسی میکنیم.

<?php

header("Content-type: applicationjson");
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','instagram');

$cnn = mysqli_connect(HOST,USER,PASS,DB);

if (!$cnn) {
die("Connection failed" );
}
$stmt=$cnn->prepare(" select id, username, email, image, bio, fullname from user");
$stmt-> exec ute();
$stmt->bind_ result ($id, $username, $email ,$image, $bio, $fullname);
$user=array();
while($stmt->fetch()){
$temp=array();
$temp['id']=$id;
$temp['username']=$username;
$temp['email']=$email;
$temp['image']=$image;
$temp['bio']=$bio;
$temp['fullname']=$fullname;
array_push($user,$temp);
}
echo json_encode($user);
mysqli_close($cnn);

نمونه کد 5

همانطور که از نمونه کد 4 مشخص است دریافت اطلاعات کاربران دقیقا مانند دریافت پست ها انجام میشود که در ان ابتدا به دیتابیس متصل میشویم
بعد کوئری دریافت را به دیتابیس اعمال میکنیم
و سپس اطلاعات دریافت شده را در یک ارا قرار میدهیم و بعد ارایه را به صورت json به سمت کلاینت میفرستیم.
برنامه رو اجرا میکنیم و میبینیم که اطلاعات دریافتی ما از سمت سرور در اپلیکیشن نمایش داده میشود.

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

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

نمونه کد 6

متد get_image() برداشتن عکس از حافظه رو برامون انجام میده و کد درخواست هم 1 هست
یعنی هر وقت ما به برنامه میگیم کد درخواست 1 منظورمون برداشتن عکس از حافظه هست.

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

private void RequestImagePermissions() {
ActivityCompat.requestPermissions(Edit_Profile_Activity.this, new String[]{READ_EXTERNAL_STORAGE, CAMERA, WRITE_EXTERNAL_STORAGE}, 2);
}

نمونه کد 7

بنده درخواست دسترسی دوربین رو هم فعال کردم که اگر شما خواستید اپلیکیشن دلخواهتون رو توسعه بدید و از دوربین استفاده کنید نیز مشکلی نداشته باشید.
کد درخواست متد فوق نیز 2 هست که در اینده ازش استفاده میکنیم.
متد بعدی رو که باید برنامه نویسی کنیم تبدیل bitmap به 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);
}

نمونه کد 8

متد موجود در نمونه کد 7 یک bitmap دریافت میکند و آن را کمپرس میکند و سپس به یک رشته انکد میکند و برمیگرداند.
حالا باید دو متد 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);
if (requestCode == 1 && result Code == result _OK && data.getData() != null) {
filePath = data.getData();
try {
bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath);
user_profile.setImageBitmap(bitmap);
filename = new File(data.getData().getPath()).getName();
} catch (IOException e) {
e.printStackTrace();
}
}
}

نمونه کد 9

توی متد فوق(نمونه کد8) میایم یک bitmap از عکسی که انتخاب کردیم دریافت میکنیم و روی عکس کاربرمون قرار میدیم.
متغیر filename رو با اسم عکس مقدار دهی میکنیم که به سرور ارسال کنیم و در سرور با این اسم ذخیره بشه.
حالا باید یه ctrl+o دیگه رو هم بزنیم و onRequsetPermissions result رو هم override کنیم

@Override
public void onRequestPermissions result (int requestCode, @Nullable String[] permissions,@Nullable int[] grant result s) {
super.onRequestPermissions result (requestCode, permissions, grant result s);
if (requestCode == 2) {
if (grant result s.length > 0 && grant result s[0] == PackageManager.PERMISSION_GRANTED) {
get_image();
} else {
RequestImagePermissions();
}
}
}

نمونه کد 10

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

حالا وقتی ما میخوایم روی عبارت change profile photo کلیک شد
عکس از حافظه انتخاب بشه
پس رویداد کلیک براش تعریف میکنیم و متد درخواست دسترسی حافظه رو درونش صدا میزنیم به این شکل: