SharePoint 2013 Work with user profile properties in apps for SharePoint

 SharePoint 2013 Work with user profile properties in apps for SharePoint
http://code.msdn.microsoft.com/office/SharePoint-2013-Work-with-99d43c17
vs2012 -> file -> new -> project c# -> office/SharePoint -> apps -> apps for SharePoint 2013 -> "SP_UserProfiles_js"

SP_UserProfiles_js -> Scripts -> Right Click -> Add -> Existing Item -> "SP.UserProfiles.js"

SP_UserProfiles_js -> Pages -> Default.aspx
Add Javascript "SP.UserProfiles.js" reference to "PlaceHolderAdditionalPageHead" placeholder in Default.aspx page

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <script type="text/javascript" src="../Scripts/App.js"></script>

    <script type="text/javascript" src="../Scripts/SP.UserProfiles.js"></script>

</asp:Content> 

SP_UserProfiles_js -> Pages -> Default.aspx
Add custom code to "PlaceHolderMain" placeholder in Default.aspx page

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>

        <p id="message">

            initializing...

        </p>

    </div>

    <div>

        <input id="listProfiles" type="button" value="Get My Profile" />

        <div id="profileList"></div>

    </div>

</asp:Content>

SP_UserProfiles_js -> Scripts -> App.js
Add Custom javascript code to App.js file

'use strict';

var context;

var peopleMgr;

var profileProperties;

var context = SP.ClientContext.get_current();

var user = context.get_web().get_currentUser();

$(document).ready(function () {

    getUserName();

    context = SP.ClientContext.get_current();

    $('#listProfiles').click(function () { listProfilesClick(); });

});

function getUserName() {

    context.load(user);

    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

}

function onGetUserNameSuccess() {

    $('#message').text('Hello ' + user.get_title());

}

function onGetUserNameFail(sender, args) {

    alert('Failed to get user name. Error:' + args.get_message());

}

function listProfilesClick() {

    peopleMgr = new SP.UserProfiles.PeopleManager(context);

    context.load(peopleMgr);

    profileProperties = peopleMgr.getMyProperties();

    context.load(profileProperties);

    context.executeQueryAsync(

        function () {

            $('#profileList').children().remove();

            var publicDiv = document.createElement("div");

            publicDiv.setAttribute("style", "float:none;padding:5px;");

            if (peopleMgr.get_isMyPeopleListPublic()) {

                publicDiv.appendChild(document.createTextNode("Your followers and those you follow are publicly visible"));

            }

            else {

                publicDiv.appendChild(document.createTextNode("Your followers and those you follow are not publicly visible"));

            }

            $('#profileList').append(publicDiv);

            var accountName = profileProperties.get_accountName();

            var accountDiv = document.createElement("div");

            accountDiv.setAttribute("style", "float:none;padding:5px;");

            accountDiv.appendChild(document.createTextNode("Your account: " + accountName));

            $('#profileList').append(accountDiv);

            var displayName = profileProperties.get_displayName();

            var displayNameDiv = document.createElement("div");

            displayNameDiv.setAttribute("style", "float:none;padding:5px;");

            if (displayName != null) {

                displayNameDiv.appendChild(document.createTextNode("Your display name: " + displayName));

            }

            else {

                displayNameDiv.appendChild(document.createTextNode("Your display name has not been set"));

            }

            $('#profileList').append(displayNameDiv);

            var myPicture = profileProperties.get_pictureUrl();

            var pictureDiv = document.createElement("div");

            pictureDiv.setAttribute("style", "float:none;padding:5px;");

            if (myPicture == null) {

                pictureDiv.appendChild(document.createTextNode("You have not set your picture"));

            }

            else {

                var myImage = document.createElement("img");

                myImage.setAttribute("src", myPicture);

                myImage.setAttribute("title", "You are a rare beauty!");

                myImage.setAttribute("alt", "Me, me, and me, me, me!");

                pictureDiv.appendChild(myImage);

            }

            $('#profileList').append(pictureDiv);

            var myProfileLink = peopleMgr.get_editProfileLink();

            var editProfileLink = document.createElement("a");

            editProfileLink.setAttribute("href", myProfileLink);

            editProfileLink.setAttribute("title", "Edit your profile");

            editProfileLink.setAttribute("target", "_blank");

            editProfileLink.appendChild(document.createTextNode("[Your Profile ] "));

            $('#profileList').append(editProfileLink);

            var myPersonalSite = profileProperties.get_personalUrl();

            var personalLink = document.createElement("a");

            personalLink.setAttribute("href", myPersonalSite);

            personalLink.setAttribute("title", "Go to your personal site");

            personalLink.setAttribute("target", "_blank");

            personalLink.appendChild(document.createTextNode("[Your Personal Site] "));

            $('#profileList').append(personalLink);

            var myPublicPersona = profileProperties.get_userUrl();

            var publicLink = document.createElement("a");

            publicLink.setAttribute("href", myPublicPersona);

            publicLink.setAttribute("title", "View your public persona");

            publicLink.setAttribute("target", "_blank");

            publicLink.appendChild(document.createTextNode("[Your Public Persona]"));

            $('#profileList').append(publicLink);

        },

        function (sender, e) {

            $('#profileList').children().remove();

            $('#profileList').append(docume.createTextNode(e.get_message()));

        });

}

SP_UserProfiles_js -> double click "AppManifest.xml"
Go to Permission tab in "AppManifest.xml" file and set "Scope" as "User Profile(Social)" and assign Permission as "Read"
Scope                                  Permission
----------------------------            -------------------
User Profile(Social)           Read

SP_UserProfiles_js -> Right Click -> Deploy

Thank You.