ساخت صفحه ورود به حساب کاربری در اندروید به همراه api
یک آموزش کامل و قدم به قدم برای طراحی و ایجاد یک صفحه ورود زیبا به صورت کامل به همراه آموزش ارتباط با سرور و دیتابیس از کیومرث دولوپر
دلیل فارسی نوشته نشدن محتوای این پروژه مبنی بر کپی کردن آن از وبسایت های خارجی نمیباشد به دلیل ضبط ویدیو برای
کانال یوتیوب سایت مجبور به انگلیسی نوشتن محتوای این پروژه بودیم
آموزش فوق که در حال مشاهده آن هستید به زبان جاوا و پی اچ پی نشوته شده است
سمت اندروید آن با جاو و سمت وب ان با پی اچ پی
از توضیحات بیشتر در مورد این آموزش خود داری میکنم تا بریم سراغ آموزش
در صورتی بروز هر گونه مشکل میتونید با ما در تلگرام و یا صفحه ارتباط با ما در سایت در ارتباط باشید همچنین ویدیو کامل این آموزش رو از یوتیوب در انتهای همین صفحه میتونید ببینید
نحوه ایجاد صفحه ورود برای اندروید به همراه کد های سرور
آموزش رایگان ایجاد فرم ورود به حساب کاربری به همراه ای پی ای برای اندروید
در اولین مرحله یه پروژه به اسم دلخواه ایجاد کنید
ساخت صفحه ورود به حساب کاربری در اندروید به همراه api
بعد از تکمیل شدن بیلد گردل و .. فایل build.gradle پروژه خود را باز کنید
و دو تا کتابخونه فوق را به بخش dependencies اضافه کنید
dependencies {
implementation 'com.android.volley:volley:1.2.1'
implementation 'androidx.cardview:cardview:1.0.0'
}
قدم بعدی ایجاد منو برای نویگیشن منوی پایین برنامه هست
وارد پوشه res پروژه شده و کلیک راست و سپس New و بعدش Directory رو بزنید اسم دایرکتوری رو menu بزارید و اوکی کنید
داخل پوشه منو که ایجاد کردید بر روی New کلیک کرده و Menu Resource File را بزنید اسمش رو منو یه هر چی دلتون میخواد بزارید
داخل فایل منو که ایجاد کردید کد های زیر رو بزارید
قبل از قرار داد کد های زیر در فایل منو در داخل فولدر drawable پروژه دو عکس برای منوی خود قرار بدید تا در کد های منو جایگزین کنید
همچنین میتونید عکس و بگراند های استفاده شده ما در پروژه را از این لینک دریافت کنید
دانلود کرده و محتوا را در drawable قرار دهید
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/nav_login"
android:title="Login"
android:icon="@drawable/login_"/>
<item android:id="@+id/nav_register"
android:title="Register"
android:icon="@drawable/register_"/>
</menu>
قدم بعدی ایجاد لایوت های برنامه
در مسیر res>layout سه لایوت با اسم های زیر ایجاد کنید که به همراه activity_main.xml میشه چهار لایوت
- activity_home
- login_activity
- register_activity
- activity_main (از قبل موجود است)
به ترتبیب به هر لایوت کد های زیر را اضافه کنید
کد های لایوت activity_main
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_navigation">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:itemActiveIndicatorStyle="@android:color/transparent"
app:itemBackground="@drawable/nav_item_bg"
app:menu="@menu/navmenu"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
کد های لایوت activity_home
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".home"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="20sp"
android:text="name"
android:padding="5dp"/>
<TextView
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="20sp"
android:text="name"
android:padding="5dp"/>
<TextView
android:id="@+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="20sp"
android:text="name"
android:padding="5dp"/>
<Button
android:id="@+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="logout"
android:layout_margin="10dp"/>
</LinearLayout>
کد های لایوت login_activity
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@drawable/header">
<TextView
android:id="@+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textSize="40sp"
android:textStyle="bold"
android:gravity="center"
android:text="Login"
android:textColor="@color/white"/>
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/txt_title"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="60dp"
android:layout_height="60dp"
app:cardCornerRadius="35dp"
android:padding="5dp"
android:layout_margin="5dp"
app:cardElevation="5dp">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/user_name_"
android:layout_margin="10dp"/>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="60dp"
app:cardCornerRadius="35dp"
android:padding="5dp"
android:layout_margin="5dp"
app:cardElevation="5dp">
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/ed_username"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:hint="user name"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="60dp"
android:layout_height="60dp"
app:cardCornerRadius="35dp"
android:padding="5dp"
android:layout_margin="5dp"
app:cardElevation="5dp">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/pass_"
android:layout_margin="10dp"/>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="60dp"
app:cardCornerRadius="35dp"
android:padding="5dp"
android:layout_margin="5dp"
app:cardElevation="5dp">
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/ed_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:hint="password"
android:inputType="textPassword"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="40dp"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:id="@+id/cd_login"
android:layout_width="200dp"
android:layout_height="45dp"
app:cardCornerRadius="35dp"
android:padding="5dp"
app:cardBackgroundColor="#F682AA"
android:layout_margin="5dp"
app:cardElevation="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Login"
android:layout_gravity="center"
android:gravity="center"
android:textSize="25sp"
android:textStyle="bold"/>
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/txt_forgot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginTop="5dp"
android:text="Forgot Password?"
android:layout_gravity="center"
android:gravity="left"
android:textColor="@color/white"
android:textSize="18sp"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
کد های لایوت register_activity
<?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>
فایل color.xml پروژه را باز کنید و رنگ زیر رو اضافه کنید
<color name="mycolor">#F19BB9</color>
کار ما با بخش طراحی تموم شد الان باید ویو زیر را در صفحه نمایش خود داشته باشید
خب اگه تصویر بالا رو داشتید که باید بگم افرین و درست پیش رفتیدالان فایل مانیفست برنامه خود را باز کنید و مجو اینترنت رو بهش اضافه کنید
<uses-permission android:name="android.permission.INTERNET"/>
قدم بعدی ایجاد کلاس هاست
در کنار کلاس MainActivity پروژه سه پکیج جدید با اسم های زیر ایجاد کنید
- fragment
- model
- util
داخل پکیج فرگمنت دو فرگمنت با اسم های زیر ایجاد کنید
- LoginFragment
- RegisterFragment
داخل پکیج مدل یه کلاس با اسم User ایجاد کنید
و همچنین داخل util دو کلاس با اسم های زیر ایجاد کنید
- SharedPrefs
- AppUtils
و در خارج از پکیج ها در کنار MainActivity یه کلاس جدید به اسم home ایجاد کنید
اگه به درستی ایجاد کرده باشید باید تصویر زیر رو داشته باشید
در زیر کد های مورد نظر هر کلاس را در کلاس مربوطه قرار دهید
کد های کلاس MainActivity
package com.qmarsdev.techblaxlogin;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MenuItem;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationBarView;
import com.qmarsdev.techblaxlogin.fragment.LoginFragment;
import com.qmarsdev.techblaxlogin.fragment.RegisterFragment;
import com.qmarsdev.techblaxlogin.util.SharedPrefs;
public class MainActivity extends AppCompatActivity {
BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SharedPrefs prefs= new SharedPrefs(this);
if(prefs.check_login()){
startActivity(new Intent(MainActivity.this,home.class));
finish();
}
bottomNavigationView = findViewById(R.id.bottom_navigation);
bottomNavigationView.setBackground(null);
getSupportFragmentManager().beginTransaction().replace(R.id.main_frame,new LoginFragment()).commit();
bottomNavigationView.setOnItemSelectedListener(selected_item);
}
private NavigationBarView.OnItemSelectedListener selected_item = new NavigationBarView.OnItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int item_ = item.getItemId();
if(item_ == R.id.nav_login){
getSupportFragmentManager().beginTransaction().replace(R.id.main_frame,new LoginFragment()).commit();
return true;
}
else if(item_ == R.id.nav_register){
getSupportFragmentManager().beginTransaction().replace(R.id.main_frame,new RegisterFragment()).commit();
return true;
}
return false;
}
};
}
کد های کلاس home
package com.qmarsdev.techblaxlogin;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.qmarsdev.techblaxlogin.util.SharedPrefs;
public class home extends AppCompatActivity {
TextView name,username,email;
Button logout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
SharedPrefs prefs = new SharedPrefs(this);
name = findViewById(R.id.name);
username = findViewById(R.id.username);
email = findViewById(R.id.email);
logout=findViewById(R.id.btn_logout);
name.setText("Name: "+prefs.get_user("name"));
username.setText("Username: " +prefs.get_user("username"));
email.setText("Email: "+prefs.get_user("email"));
logout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prefs.logout();
startActivity(new Intent(home.this,MainActivity.class));
finish();
}
});
}
}
کد های کلاسSharedPrefs
package com.qmarsdev.techblaxlogin.util;
import android.content.Context;
import android.content.SharedPreferences;
import com.qmarsdev.techblaxlogin.model.User;
public class SharedPrefs {
private static final String SHARED_PRF_NAME = "techblax";
private static final String USER_NAME = "username";
private static final String EMAIL = "email";
private static final String NAME = "name";
private static Context ctx;
SharedPreferences sharedPreferences;
public SharedPrefs(Context context) {
sharedPreferences = context.getSharedPreferences(SHARED_PRF_NAME,Context.MODE_PRIVATE);
ctx = context;
}
public void setLoginstate(boolean state){
SharedPreferences.Editor editor = sharedPreferences.edit();
editor.putBoolean("login_status",state);
editor.apply();
}
public boolean check_login(){
boolean status = sharedPreferences.getBoolean("login_status",false);
return status;
}
public void set_login_data(User user){
SharedPreferences.Editor editor = sharedPreferences.edit();
editor.putString(NAME,user.getName());
editor.putString(USER_NAME,user.getUsername());
editor.putString(EMAIL,user.getEmail());
editor.apply();
}
public String get_user(String s){
return sharedPreferences.getString(s,"");
}
public void logout(){
SharedPreferences.Editor editor = sharedPreferences.edit();
editor.clear();
editor.apply();
}
}
کد های کلاس AppUtils
package com.qmarsdev.techblaxlogin.util;
public class AppUtils {
public static final String root_u="http://10.0.2.2/loginform/";
public static final String main_url=root_u+"api.php?apicall=";
}
کد های کلاس User
package com.qmarsdev.techblaxlogin.model;
public class User {
public String name;
public String username;
public String email;
public User(String name, String username, String email) {
this.name = name;
this.username = username;
this.email = email;
}
public User() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
کد های کلاس RegisterFragment
package com.qmarsdev.techblaxlogin.fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
import com.qmarsdev.techblaxlogin.R;
public class RegisterFragment extends Fragment {
public RegisterFragment() {
}
public static RegisterFragment newInstance(String param1, String param2) {
RegisterFragment fragment = new RegisterFragment();
Bundle args = new Bundle();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.register_activity, container, false);
}
}
کد های کلاس LoginFragment
package com.qmarsdev.techblaxlogin.fragment;
import android.content.Intent;
import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatEditText;
import androidx.cardview.widget.CardView;
import androidx.fragment.app.Fragment;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;
import com.android.volley.AuthFailureError;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.qmarsdev.techblaxlogin.R;
import com.qmarsdev.techblaxlogin.home;
import com.qmarsdev.techblaxlogin.model.User;
import com.qmarsdev.techblaxlogin.util.AppUtils;
import com.qmarsdev.techblaxlogin.util.SharedPrefs;
import org.json.JSONException;
import org.json.JSONObject;
import java.lang.reflect.Method;
import java.util.HashMap;
import java.util.Map;
public class LoginFragment extends Fragment {
AppCompatEditText username,password;
CardView login;
TextView forgot;
RequestQueue queue;
public LoginFragment() {
}
public static LoginFragment newInstance(String param1, String param2) {
LoginFragment fragment = new LoginFragment();
Bundle args = new Bundle();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.login_activity, container, false);
queue = Volley.newRequestQueue(getContext());
username = v.findViewById(R.id.ed_username);
password = v.findViewById(R.id.ed_password);
login = v.findViewById(R.id.cd_login);
forgot = v.findViewById(R.id.txt_forgot);
login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String user_ = username.getText().toString();
String pass_ = password.getText().toString();
if(TextUtils.isEmpty(user_)){
username.setError("enter your username!");
username.requestFocus();
return;
}
if(TextUtils.isEmpty(pass_)){
password.setError("enter your password!");
password.requestFocus();
return;
}
StringRequest request = new StringRequest(Request.Method.POST, AppUtils.main_url+"login", new Response.Listener<String>() {
@Override
public void onResponse(String response) {
setdata(response);
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Toast.makeText(getActivity(), "unable to connect to server!", Toast.LENGTH_SHORT).show();
}
}){
@Nullable
@Override
protected Map<String, String> getParams() throws AuthFailureError {
Map<String,String> params = new HashMap<>();
params.put("username",user_);
params.put("password",pass_);
return params;
}
};
queue.add(request);
}
});
return v;
}
private void setdata(String response) {
try {
JSONObject jsonObject = new JSONObject(response);
String result = jsonObject.getString("res");
if (result.equals("ok")){
User user=new User();
user.setName(jsonObject.getString("name"));
user.setEmail(jsonObject.getString("email"));
user.setUsername(jsonObject.getString("username"));
SharedPrefs prefs = new SharedPrefs(getContext());
prefs.setLoginstate(true);
prefs.set_login_data(user);
startActivity(new Intent(getActivity(), home.class));
getActivity().finish();
}else {
Toast.makeText(getActivity(), ""+result, Toast.LENGTH_SHORT).show();
}
} catch (JSONException e) {
throw new RuntimeException(e);
}
}
}
ممنون که تا این جای کار رو همراه بودید
یه چن قدم دیگه مونده که مربوط به سروره و بهش میگن api همون طور که تو کد های بالا دیدید من از شبیه ساز زمپه ومپه چه کوفتیه استفاده کردم جهت آموزش و آدرس سرور رو در کلاس AppUtils اگه مشاهده کنید آدرس محلیه
روی سرور پیاده کردید ادرس سرور یا دامنتون رو در اونجا جایگزین کنید
خوب داخل پوشه www شبیه ساز زمپ در درایو که نصب کردید منم از درایو c استفاده کردم
یه پوشه به اسم دلخواه بسازید من در این آموزش از اسم loginform استفاده کردم
هر چی دوست داشتید بزارید ولی داخل کلاس AppUtils هم ایدیت کنید هر چی گذاشتین
داخل این پوشه سه تا فایل درست کنید سه تا فایل php با نوت پد یا هر ابزاری که دوست داشتید با اسم های زیر
- api.php
- config.php
- function.php
و به ترتیب کد های هر فایل رو داخل بزارید و سیو کنید
کد های فایل api.php
<?php
require 'function.php';
header("Content-Type: application/json");
$response = array();
if (isset($_GET['apicall'])){
switch ($_GET['apicall']){
case 'login':
$username = $_POST['username'];
$password = $_POST['password'];
if (!empty($username) && !empty($password)){
$json_array = login_user($username,$password);
echo json_encode($json_array);
}
break;
default;
$response['error'] = true;
$response['message'] = 'Invalid Operation Called';
}
}
کد های فایل config.php
<?php
session_start();
const servername = "localhost";
const username = "root";
const password = "";
const dbname = "loginform";
// Create connection
$mainDB = mysqli_connect(servername, username, password,dbname);
// Check connection
if ($mainDB->connect_error) {
die("Connection failed: " . $mainDB->connect_error);
}
mysqli_query($mainDB,"SET NAMES 'utf8'");
کد های فایل function.php
<?php
require_once 'config.php';
function SQLiInsert($Table_Name, $Inseted_Data)
{
global $mainDB;
$fields = array_keys($Inseted_Data);
$values = array_map(array($mainDB, 'real_escape_string'), array_values($Inseted_Data));
mysqli_query($mainDB, "INSERT INTO $Table_Name(" . implode(",", $fields) . ") VALUES ('" . implode("','", $values) . "');") or die(mysqli_error($mainDB));
}
function SQLiSelect($Table_Name, $Condition = "", $What_Row = "*")
{
global $mainDB;
$qry = "SELECT " . $What_Row . " FROM " . $Table_Name . " " . $Condition . "";
return mysqli_query($mainDB, $qry);
}
function isLoginExit($username,$password){
$query = SQLiSelect("login","WHERE username='".$username."' AND password='".$password."' Limit 1");
if(mysqli_num_rows($query) > 0){
return true;
}
return false;
}
function login_user($username,$password){
$json = array();
$canlogin = isLoginExit($username,$password);
if($canlogin){
$query = SQLiSelect("login","WHERE username='".$username."' Limit 1");
$result = mysqli_fetch_array($query);
$data = array(
'id'=>$result['id'],
'name'=>$result['name'],
'email'=>$result['email'],
'username'=>$result['username'],
'res' => 'ok'
);
$json = $data;
}else{
$data = array(
'res' => 'User Name Not Exist'
);
$json = $data;
}
return $json;
}
خوب بریم سراغ مرحله آخر کار که کد هاشو نوشتید اما کار نمیکنه
وارد phpmyadmin بشید یه دیتابیس به اسم loginform ایجاد کنید این اسمو نمیخواید اسم دلخواهتو بزن اما داخل فایل config.php ویرایش یادت نره داخل دیتابیس یه جدول با 5 فیلد با اسم های زیر بسازید
- id تیک اتواینکریمنت رو بزنید براش
- username ورچر
- password ورچر
- name ورچر
- email ورچر
خوب تمام
آموزش رایگان ساخت صفحه ورود برای اندروید
امیدوارم از این آموزش استفاده لازم رو برده باشید
همچنین ویدیو کامل آموزش ساخت این پروژه رو از پایین این صفحه و یا این لینک میتونید تماشا کنید
برای تماشا از روشن بودن قند شکن مطمئن شوید