parse.com এপিআই ব্যাবহার করে একটি সাধারণ জাভাস্ক্রিপ্ট ওয়েব অ্যাপ তৈরি


ভূমিকা

মোবাইল বা অন্যান্য ফ্রন্টএন্ড প্ল্যাটফর্মের জন্য অ্যাপ ডেভেলপমেন্টের সময় প্রায় অর্ধেকেরও বেশি সময় দিতে হয় ব্যাকএন্ডে অর্থাৎ ওই অ্যাপ এর জন্য ডাটাবেজ তৈরি, সার্ভার সাইড লজিক ডিপেন্ডেণ্ট অ্যাপ তৈরি, ফ্রন্টএন্ডের জন্য এপিআই প্রোভাইডার তৈরি এবং সর্বোপরি সেই সার্ভারটা ম্যানেজমেন্ট এর জন্য টিম তৈরি। এসব কিছু অন্য একটা নির্ভরযোগ্য মাধ্যমের কাছ থেকে পেয়ে গেলে আপনার মনোযোগ তখন শুধু থাকবে ফ্রন্টএন্ড অ্যাপ তৈরিতে। এরকম একটি [ব্যাকএন্ড অ্যাজ অ্যা সার্ভিস] হচ্ছে parse.com

এটা একধারে একটি অবজেক্ট বেজড ডাটা স্টোরিং প্ল্যাটফর্ম, JSON এবং অন্যান্য ফরম্যাটের ডাটা প্রোভাইডার এবং ফাইল স্টোরিং প্ল্যাটফর্ম সাথে আছে বিল্টইন রোল ভিত্তিক ইউজার ডাটা ম্যানেজমেন্ট ফিচার। আরও আছে এটার মধ্যে থেকেই পুষনোটিফিকেশন, ইন্সটলেশন ম্যানেজমেন্টের জন্য সহজ পদ্ধতি (যদি এখানে স্টোর করা ডাটা দিয়ে একটি মোবাইল অ্যাপ বানাতে চান সেজন্য)।

সবচেয়ে মজার ব্যাপার হচ্ছে এটা একটা ফ্রি সার্ভিস (৩০ এপিআই কল পার সেকেন্ড), ফেসবুকের তত্ত্বাবধানে থাকা একটি কোম্পানি এবং মোটামুটি সব রকম সফটওয়্যার ডেভেলপমেন্ট প্ল্যাটফর্মের জন্য parse এর লাইব্রেরী/এসডিকে আছে ।

আমাদের সিরিজ পোস্টের মাধ্যমে আমরা এদের জাভাস্ক্রিপ্ট SDK ব্যাবহার করে একটি ক্লায়েন্ট সাইড অ্যাপ ডেভেলপ শুরু করবো। অর্থাৎ আমাদের এই অ্যাপটি ডাটা স্টোর, এক্সেস এবং ম্যানিপুলেট করার জন্য parse.com কে ব্যাবহার করবে। আর জাভাস্ক্রিপ্ট SDK ব্যাবহার করে parse এর সাথে যোগাযোগ করবে। আর তাই আমরা আমাদের অ্যাপটি কোন সার্ভারে হোস্ট করতে বাধ্য না কারন আমাদের কোন সার্ভার সাইড স্ক্রিপ্ট লাগবে না। ঠিক এ কারনে আমরা এটিকে github -এ একটি পেজ টাইপ রিপোজিটোরি হিসেবে হোস্ট করবো যেখানে স্ট্যাটিক HTML, javascript, css ফাইল ছাড়া আর কিছুই থাকবে না। যদিও parse এও কন্টেন্ট হোস্ট করার অপশন আছে কিন্তু সেটা আমরা করবো না। আমরা অ্যাপটি github -এ হোস্ট করবো যাতে এটাতে সবাই কন্ট্রিবিউট করতে পারে এবং github খুব সুন্দর ভাবে আমাদের অ্যাপটি তাদের পেজ সার্ভার দিয়ে সার্ভ করতে পারে।

Screen Shot 2014-09-08 at 1.44.38 AM

Demo

parse.com এ অ্যাকাউন্ট খোলা ও অ্যাপ সেটআপ করা

প্রথমেই parse.com এ গিয়ে একটি অ্যাকাউন্ট খুলুন। এরপর https://www.parse.com/apps/ অ্যাড্রেসে গেলে এবং আপনার অ্যাকাউন্টের আন্ডারে কোন অ্যাপ না থাকলে নিচের মত একটি উইন্ডো আসবে,
1

নাম হিসেবে দিন bloodmap. কেন এই ধরনের নাম সেটা নিয়ে এখন মাথা না ঘামালেও চলবে 🙂 Create app বাটনে ক্লিক করলে পরের স্ক্রিনে নিচের মত একটি ইনফো উইন্ডো পাবেন যেখানে অ্যাপ আইডি এবং বিভিন্ন প্ল্যাটফর্মের কিছু কি পাবেন।
2

এখান থেকে Application ID এবং Javascript Key দুটি নোট করে রাখুন। এখন Data Browser বাটনে ক্লিক করুন যাতে করে আমরা আমাদের অ্যাপ এর ডাটাবেজ অর্থাৎ ডাটা ক্লাস গুলো দেখতে এবং ম্যানেজ করতে পারি। ওই পেজের উপরের দিকে কিছু মেনু ট্যাবের মধ্যে Settings নামের একটি ট্যাব পাবেন। সেখানে ক্লিক করুন এবং কিছু সেটিং পরিবর্তন করে নিন (অপশনাল)। যেমন,
3
Allow client class creation অপশন অফ করে আমরা ক্লায়েন্ট সাইড থেকে সরাসরি ক্লাস বা সহজ ভাবে বলতে গেলে ডাটা টেবিল তৈরির পথ বন্ধ রাখবো। আবার নিচের মত করে,
4
আমরা ইউজার রেজিস্ট্রেশনের সময় তার ইমেইল ভেরিফাই করার অপশন অন করে নিতে পারি। এতে করে রেজিস্ট্রেশন পেজ থেকে ইমেইল এবং পাসওয়ার্ড নিয়ে ইউজার ক্লাস/টেবিলে স্টোর করার সময় parse থেকে স্বয়ংক্রিয় একটি ইমেইল চলে যাবে ইউজারের ওই ইমেইল অ্যাড্রেসে এবং সেটা ভেরিফাই না করা পর্যন্ত আমাদের Data Browser এ যদি ওই ইউজার এর ডাটা চেক করি তাহলে সেখানে তার ইমেইল ফিল্ডে unverified দেখা যাবে। অর্থাৎ সিম্পল এই অপশনটি এনাবেল করে আমরা আমাদের অ্যাপ এর জন্য ইউজারদের ইমেইল ভেরিফিকেশন এর ঝামেলা খুব সহজেই দুর করলাম।
আপনার মনে প্রশ্ন আসতে পারে, ইউজার ডাটা সেভ করার তো কোন ডাটা ক্লাস বা টেবিল চোখে পরছে না আমাদের অ্যাপের Data Browser ট্যাবের আন্ডারে। parse এর ধরন মোতাবেক ডাটা গুলো নিয়ন্ত্রিত হয় Parse.Object ক্লাসের মাধ্যমে। এই Parse.Object গুলো JSON কম্প্যাটিবল কি-ভ্যালু Pair (জোড়া) ধরনের ডাটা সংরক্ষণ করে। এই ধরনের ডাটা স্ট্রাকচার স্কিমা বিহীন অর্থাৎ আমাকে আগেই জানতে হবে না সেখানে কোন “কি” বা কলামের অস্তিত্ব আছে কি নাই। কি-ভ্যালু জোড়া বানিয়ে আর সেগুলো set মেথডের মাধ্যমে ঠিক করেও একটি ডাটা সেট পুষ/সেভ করা যায়। যদি, আমরা এই ডাটা স্ট্রাকচারে posts নামের একটি টেবিল বা ডাটা ক্লাস তৈরি করতে চাই তাহলে আমাদের কে Parse.Object এর একটা সাবক্লাস বানাতে হবে Parse.Object.extend("posts") এভাবে। সে আলোচনায় আমরা পরে আসবো যখন আমাদের অ্যাপের জন্য সেরকম ক্লাস (কাস্টম) লাগবে। আমাদের প্রয়োজনীয় ক্লাস গুলোকে কাস্টম বললাম কারন parse কিছু ডাটা ক্লাস বানিয়েই রেখেছে কিছু কমন ডাটা ম্যানিলুপেশন এর কথা মাথায় রেখে। সেরকম একটি হচ্ছে Parse.User যেটা Parse.Object এরই একটি সাবক্লাস। তাই আমরা ইউজার সাইনআপ, সাইনইন, সাইনআউট এরকম কাজের জন্য এই বিল্টইন ডাটা ক্লাসকেই ব্যাবহার করবো একটু পরেই। নিচের স্ক্রিন থেকে New Class বাটনে ক্লিক করুন,
5
তাহলে নিচের মত আরেকটি উইন্ডো আসবে যেখানে সিলেক্ট করুন User এবং Create Class বাটনে ক্লিক করুন,
6
এরপরের স্ক্রিন দেখতে হবে এরকম,
7
এখানে দেখতেই পাচ্ছেন ইউজার টেবিলের জন্য কিছু কলাম রেডি হয়ে আছে। এখন সেগুলোতে ডাটা ঢুকানো আমাদের কাজ। বলে রাখা ভালো, কাস্টম ডাটা ক্লাস বানালেও কমন কিছু কলাম তৈরি করে দেয় parse. যেমন objectid, createdAt, updatedAt ইত্যাদি।

ফ্রন্ট এন্ড অ্যাপ এর কাঠামো তৈরি

এই টিউটোরিয়াল অ্যাপটির সোর্স কোড দেখলেই বুঝতে পারবেন এটাতে শুধু একটা index.html পেজ এবং UI জেনারেটের জন্য twitterbootstrap 3.2.0 সাথে ফর্ম ভ্যালিডেশনের জন্য boostrapValidator ব্যাবহার করা হয়েছে। আর jQuery.

ফাইল স্ট্রাকচার

Screen Shot 2014-09-07 at 6.06.20 PM

index.html পেজের ফুল মার্কআপ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bloodmap :: একটি ওপেনসোর্স ওয়েব সার্ভিস</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrapValidator -->
    <link href="assets/css/bootstrapValidator.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="assets/css/custom.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Parse Javascript SDK -->
    <script src="https://www.parsecdn.com/js/parse-1.2.19.min.js"></script>    
  </head>
    <div class="container-fluid">
      <div class="row bloodmap-profile">
        <div class="col-md-4 col-md-offset-4">
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="http://placehold.it/50x50" alt="Profile Picture">
            </a>
            <div class="media-body">
              <h4 class="media-heading">স্বাগতম আপনাকে!</h4>
              <span id="fetchedEmail"></span>
              <button type="button" class="btn btn-danger btn-xs" id="sign-out">সাইন আউট করুন</button>
            </div>
          </div>
        </div>  
      </div>      
      <div class="row bloodmap-sign-box">
        <div class="col-md-4 col-md-offset-4">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li class="active">
              <a href="#sign-in" role="tab" data-toggle="tab">সাইন ইন</a>
            </li>
            <li><a href="#sign-up" role="tab" data-toggle="tab">সাইন আপ</a></li>
            <li><a href="#privacy" role="tab" data-toggle="tab">গোপনীয়তা</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div class="tab-pane active" id="sign-in">
              <form class="form-horizontal" role="form" id="sign-in-form" 
                data-bv-message="সঠিক তথ্য দিন"
                data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
                data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
                data-bv-feedbackicons-validating="glyphicon glyphicon-refresh" >
                <div class="alert" style="display: none;"></div>
                <div class="form-group">                  
                  <div class="col-sm-offset-1 col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="ইমেইল অ্যাড্রেস" 
                    data-bv-notempty="true"
                    data-bv-notempty-message="ইমেইল অ্যাড্রেস বাধ্যতামূলক"
                    data-bv-emailaddress="true"
                    data-bv-emailaddress-message="ইমেইল অ্যাড্রেসটি সঠিক নয়" >
                  </div>
                </div>
                <div class="form-group">                  
                  <div class="col-sm-offset-1 col-sm-10">
                    <input type="password" class="form-control" id="password" name="password" placeholder="পাসওয়ার্ড" 
                    data-bv-notempty="true"
                    data-bv-notempty-message="পাসওয়ার্ড বাধ্যতামূলক" >
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-1 col-sm-10">
                    <button type="submit" class="btn btn-primary btn-block">সাইন ইন করুন</button>
                  </div>
                </div>
              </form>
            </div>
            <div class="tab-pane" id="sign-up">
              <form class="form-horizontal" role="form" id="sign-up-form"
                data-bv-message="সঠিক তথ্য দিন"
                data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
                data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
                data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
                <div class="alert" style="display: none;"></div>
                <div class="form-group">                  
                  <div class="col-sm-offset-1 col-sm-10">
                    <input type="email" class="form-control" id="signup-email" name="signup-email" placeholder="ইমেইল অ্যাড্রেস" 
                    data-bv-notempty="true"
                    data-bv-notempty-message="ইমেইল অ্যাড্রেস বাধ্যতামূলক"
                    data-bv-emailaddress="true"
                    data-bv-emailaddress-message="ইমেইল অ্যাড্রেসটি সঠিক নয়" >
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-1 col-sm-10">
                    <input type="password" class="form-control" id="signup-password" name="signup-password" placeholder="পাসওয়ার্ড" 
                    data-bv-notempty="true"
                    data-bv-notempty-message="পাসওয়ার্ড বাধ্যতামূলক"
                    data-bv-identical="true"
                    data-bv-identical-field="confirm-password"
                    data-bv-identical-message="পাসওয়ার্ড এবং কনফার্ম পাসওয়ার্ড এক রকম হয়নি">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-1 col-sm-10">
                    <input type="password" class="form-control" id="confirm-password" name="confirm-password" placeholder="পাসওয়ার্ড কনফার্ম করুন" 
                    data-bv-notempty="true"
                    data-bv-notempty-message="কনফার্ম পাসওয়ার্ড বাধ্যতামূলক"

                    data-bv-identical="true"
                    data-bv-identical-field="signup-password"
                    data-bv-identical-message="পাসওয়ার্ড এবং কনফার্ম পাসওয়ার্ড এক রকম হয়নি">
                  </div>
                </div>                
                <div class="form-group">
                  <div class="col-sm-offset-1 col-sm-10">
                    <button type="submit" class="btn btn-primary btn-block">সাইন আপ করুন</button>
                  </div>
                </div>
              </form>

            </div>
            <div class="tab-pane" id="privacy">
              <p>এটি একটি ওপেনসোর্স ওয়েব সার্ভিস যা এই টিউটোরিয়াল কোর্সের উদাহরণ হিসেবে ডেভেলপ করা হচ্ছে জাভাস্ক্রিপ্ট এবং parse.com এপিআই এর উপর ভিত্তি করে</p>
              <p>এখানে ইনপুট হিসেবে নেয়া আপনার তথ্য গুলো এনকোডেড এবং গোপন অবস্থায় থাকে। কোনভাবেই এই তথ্য অন্য মাধ্যমে হস্তান্তর হয় না।</p>
              <p>এটি ভবিষ্যতে পাবলিক ওয়েব সার্ভিস হিসেবে লঞ্চ হতে পারে।</p>
            </div>
          </div>          
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
    <!-- bootstrapValidator -->
    <script src="assets/js/bootstrapValidator.min.js"></script>
    <!-- js for doing parse interactiions from the client app (js app) -->
    <script src="assets/js/main.js"></script>

  </body>
</html>

আমরা যে সিঙ্গেল পেজ অ্যাপটি বানাচ্ছি সেটার পুরো মার্কআপ উপরের মত। দেখে নেই কি কি আছে এই মার্কআপে। প্রথমেই twitterbootstrap এর নিয়ম অনুযায়ী এর স্ক্রিপ্ট গুলো ইম্পোর্ট করা আছে। এর নিচে আমাদের একটু কাস্টম CSS নেয়া হয়েছে। তার পর পরেই parse এর জাভাস্ক্রিপ্ট লাইব্রেরী ইনক্লুড করা হয়েছে।
27 থেকে 40 নাম্বার লাইন পর্যন্ত একটি div ব্লক আছে যেটা আমরা ইউজার লগইন হবার পরেই শুধুমাত্র দেখাবো। 41 থেকে 136 নাম্বার পর্যন্ত একটি ট্যাব বেজড UI করা আছে যেখানে একধারে একটি সাইন ইন ফর্ম, একটি সাইন আপ ফর্ম এবং একটি প্রাইভেসি টেক্সট দেখানোর ব্যাবস্থা করা হয়েছে। এরপরেই jQuery, bootstrap এর লাইব্রেরী এবং গুরুত্বপূর্ণ main.js যেখানে আমরা parse এর সাথে যোগাযোগের সব কোড লিখব এসগুলো ইম্পোর্ট করা হয়েছে।

custom.css স্ক্রিপ্টের কোড

.bloodmap-sign-box {
	margin-top: 50px;
}

.tab-pane {
	padding-top: 20px;
}

কিছুই না শুধু আমাদের মুল UI কে একটু উপর থেকে মার্জিন দেয়া হয়েছে।

main.js স্ক্রিপ্টের প্রথম স্টেজের কোড

Parse.initialize("kZ6KW0ZZud5.....zzhiHEwS9TV7", "wKyOvv9aL3Y.....BSA9aosK1Bf3CP");

$(document).ready(function () {
	$('form').bootstrapValidator();
});

এটা হচ্ছে আমাদের main.js এর প্রাথমিক অবস্থা। প্রথমেই Parse ইনিশিলালাইজ করা হয়েছে Application ID এবং Javascript Key কে প্যারামিটার হিসেবে পাস করে দিয়ে। তারপর আমরা আমাদের দুইটি ফর্ম (সাইন ইন এর জন্য একটি, সাইন আপের জন্য একটি) কে boostrapValidator দিয়ে ভ্যালিডেট করার ব্যাবস্থা করেছি। এক্ষেত্রে এর জন্য প্রয়োজনীয় HTML5 ডাটা অ্যাট্রিবিউট গুলো আমাদের ফর্মের মার্কআপের সাথে জুড়ে দেয়া হয়েছে (খেয়াল করুন input, form এলিমেন্ট গুলো)। ঠিক এভাবেই পুরো অ্যাপটি ব্রাউজারে রান করালে আমরা একটি ট্যাব বেজড UI দেখতে পাবো যেখানে সাইন ইন বা সাইন আপ করার ফর্ম থাকবে এবং সেগুলোতে ইনপুট ডাটা ভ্যালিডেশন সেট করা থাকবে।

parse এ তৈরি ইউজার টেবিলে ডাটা সেভ করা অর্থাৎ সাইন আপ করা

এখন আমরা আমাদের main.js এর jQuery এর ডকুমেন্ট রেডি চেকের মধ্যে নিচের কোড ব্লক যুক্ত করব,

	$('#sign-up-form').bootstrapValidator().on('success.form.bv', function(e) {
        // Prevent submit form
        e.preventDefault();
        var $form     = $(e.target);
        var email = $('#signup-email').val();
        var username = $('#signup-email').val();
        var password = $('#signup-password').val();

        var user = new Parse.User();
		user.set("username", username);
		user.set("password", password);
		user.set("email", email);
		 
		user.signUp(null, {
		  success: function(user) {
		    console.log("Success: " + user.id);
		    $form.find('.alert').removeClass().addClass('alert alert-success').html('সাইন আপ সম্পন্ন হয়েছে। এখন পাসের ট্যাবে সাইন ইন করতে পারেন!').show();
		  },
		  error: function(user, error) {
		  	$form.find('.alert').removeClass().addClass('alert alert-danger').html('কিছু একটা সমস্যা হয়েছে। ভিন্ন তথ্য দিয়ে আবার চেষ্টা করুন').show();
		    console.log("Error: " + error.code + " " + error.message);
		  }
		});
    });

এখানে 1 থেকে 7 নাম্বার লাইন পর্যন্ত সাইন আপ ফর্মকে ভ্যালিডেট করে সেটার সাবমিশনের সময় ইউজার এর ইনপুট দেয়া ইমেইল, পাসওয়ার্ড জমা করা হচ্ছে email, password, username ভ্যারিয়েবলের মধ্যে। email এবং username হিসেবে আমরা ইমেইলকেই সেট করছি।
এরপর ৯ নাম্বার লাইনে আমরা Parse.User() থেকে একটি user অবজেক্ট তৈরি করছি। এরপর এর set মেথডের মাধ্যমে আমরা username, password এবং email কি -এর ভ্যালু হিসেবে ফর্ম থেকে পাওয়া ভ্যালু গুলো সেট করছি। আর 14 নাম্বার লাইনে খুব সহজেই ইউজার সাইনাপের কাজ সেরে ফেলছি user.signUp() মেথডের মাধ্যমে। এই মেথডের দুটি রিটার্ন ব্লক success এবং error কে কাজে লাগিয়ে সাইনআপ সম্পন্ন হবার ম্যাসেজ দেখাচ্ছি একটি HTML এলিমেন্টকে শো করানোর মাধ্যমে।

ইউজার সাইন ইন করা

main.js এর ডকুমেন্ট রেডি চেক করার ব্লকের মধ্যে আমরা সাইন ইন ম্যানেজ করার জন্য নিচের কোড ব্লক ইউজ করবো,


	$('#sign-in-form').bootstrapValidator().on('success.form.bv', function(e) {
        // Prevent submit form
        e.preventDefault();
        var $form     = $(e.target);
        var email = $('#email').val();
        var password = $('#password').val();

		Parse.User.logIn(email, password, {
		  success: function(user) {
		    console.log(user);
		    $form.find('.alert').removeClass().addClass('alert alert-success').html('সাইন ইন সম্পন্ন হয়েছে।').show();
		    location.reload();
		  },
		  error: function(user, error) {
		    console.log("Error: " + error.code + " " + error.message);
		    $form.find('.alert').removeClass().addClass('alert alert-danger').html('কিছু একটা সমস্যা হয়েছে। ভিন্ন তথ্য দিয়ে আবার চেষ্টা করুন').show();
		  }
		});
    });

এখানেও ঠিক আগের মত সাইন ইন ফর্ম থেকে ভ্যালিড ডাটা রিসিভ করে সেগুলো লোকাল ভ্যারিয়েবলের মধ্যে রেখে Parse.User.logIn কলের মাধ্যমে parse এর কাছে সাইন ইন রিকোয়েস্ট পাঠানো হচ্ছে। যেখানে email এবং password কে প্যারামিটার হিসেবে দেয়া হচ্ছে। আর এখানেও দুই রিটার্ন ব্লক ব্যাবহার করে সাইন ইন সম্পন্ন হলে কারেন্ট ডকুমেন্ট রিলোড করছি আর কোন এরর হলে একটা এরর ম্যাসেজ দেখাচ্ছি সাইন ইন ফর্মের উপর।

ইউজারকে সাইন আউট করা

parse API ব্যাবহার করে সাইন আউট করা একদম সহজ। এর জন্য দরকার শুধু Parse.User.logOut() কে কল করা। নিচের কোড ব্লকটি আমরা ব্যাবহার করেছি লগআউট সম্পন্ন করে ইউজারকে পুনরায় সাইনইন এবং সাইনআপ ফর্ম দেখানোর জন্য,

    $('#sign-out').click (function () {
    	Parse.User.logOut();
    	if(Parse.User.current() == null) {
    		$('.bloodmap-profile').hide('slow');
    		$('.bloodmap-sign-box').show();
    	}
    });

ইউজার লগইন সেশন ধরে রাখা

ব্রাউজারে একজন লগডইন ইউজারের ইনফরমেশন ধরে রাখার ব্যাবস্থাও করে parser। অনেকটা সার্ভার সাইড সেশনের মত। আর তাই আমরা আমাদের ডকুমেন্ট লোডের শুরুতেই চেক করে নেব কারেন্ট কোন ইউজার লগইন অবস্থায় আছে কিনা,

	var currentUser = Parse.User.current();
	if (currentUser) {
	    console.log(currentUser);
	    $('#fetchedEmail').html(currentUser.get('email'));
	    $('.bloodmap-sign-box').hide();
	} else {
	    console.log(currentUser);
	    $('.bloodmap-profile').hide();
	    $('.bloodmap-sign-box').show();
	}

যদি কোন ভ্যালিড ইউজার লগইন ইনফো থাকে তাহলে আমরা ওই ইউজার এর ইমেইল অ্যাড্রেসটি দেখাবো আমাদের index.html ফাইলের 27-40 নাম্বার লাইনের মার্কআপ শো করার মাধ্যমে। আর কেউ লগডইন না পাওয়া গেলে আমরা সাইনইন-সাইনআপ ফর্ম দেখাবো।

নিচে পুরো main.js এর কোডটি দেয়া হল

Parse.initialize("kZ6KW0ZZud5Z.....rBwzzhiHEwS9TV7", "wKyOvv9.....HIBSA9aosK1Bf3CP");

$(document).ready(function () {
	var currentUser = Parse.User.current();
	if (currentUser) {
	    console.log(currentUser);
	    $('#fetchedEmail').html(currentUser.get('email'));
	    $('.bloodmap-sign-box').hide();
	} else {
	    console.log(currentUser);
	    $('.bloodmap-profile').hide();
	    $('.bloodmap-sign-box').show();
	}

	$('#sign-up-form').bootstrapValidator().on('success.form.bv', function(e) {
        // Prevent submit form
        e.preventDefault();
        var $form     = $(e.target);
        var email = $('#signup-email').val();
        var username = $('#signup-email').val();
        var password = $('#signup-password').val();

        var user = new Parse.User();
		user.set("username", username);
		user.set("password", password);
		user.set("email", email);
		 
		user.signUp(null, {
		  success: function(user) {
		    console.log("Success: " + user.id);
		    $form.find('.alert').removeClass().addClass('alert alert-success').html('সাইন আপ সম্পন্ন হয়েছে। এখন পাসের ট্যাবে সাইন ইন করতে পারেন!').show();
		  },
		  error: function(user, error) {
		  	$form.find('.alert').removeClass().addClass('alert alert-danger').html('কিছু একটা সমস্যা হয়েছে। ভিন্ন তথ্য দিয়ে আবার চেষ্টা করুন').show();
		    console.log("Error: " + error.code + " " + error.message);
		  }
		});
    });

	$('#sign-in-form').bootstrapValidator().on('success.form.bv', function(e) {
        // Prevent submit form
        e.preventDefault();
        var $form     = $(e.target);
        var email = $('#email').val();
        var password = $('#password').val();

		Parse.User.logIn(email, password, {
		  success: function(user) {
		    console.log(user);
		    $form.find('.alert').removeClass().addClass('alert alert-success').html('সাইন ইন সম্পন্ন হয়েছে।').show();
		    location.reload();
		  },
		  error: function(user, error) {
		    console.log("Error: " + error.code + " " + error.message);
		    $form.find('.alert').removeClass().addClass('alert alert-danger').html('কিছু একটা সমস্যা হয়েছে। ভিন্ন তথ্য দিয়ে আবার চেষ্টা করুন').show();
		  }
		});
    });

    $('#sign-out').click (function () {
    	Parse.User.logOut();
    	if(Parse.User.current() == null) {
    		$('.bloodmap-profile').hide('slow');
    		$('.bloodmap-sign-box').show();
    	}
    });
});

এই সিরিজ পোস্টটির পরের চ্যাপ্টারে আমরা ইউজারদের রোল ম্যানেজমেন্ট এবং তাদের প্রোফাইলে ডাটা স্টোরের জন্য কাস্টম ডাটা ক্লাস তৈরি ও ব্যাবহার দেখবো।

Advertisements

মন্তব্য করুন

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / পরিবর্তন )

Twitter picture

You are commenting using your Twitter account. Log Out / পরিবর্তন )

Facebook photo

You are commenting using your Facebook account. Log Out / পরিবর্তন )

Google+ photo

You are commenting using your Google+ account. Log Out / পরিবর্তন )

Connecting to %s