Before I go into depth, let's discuss what SharePoint Add-Ins actually are! By definition, Add-Ins are self-contained extensions, which means the code written for the Add-ins will not reside on the SharePoint server. There is a lot of additional definition documentation already available out there, so feel free to keep digging if you want more information about the theory. So what are we going to learn about in this blog? From my perspective, what matters is, your approach to developing an Add-In. So if you are a beginner and wondering how and where to start, then you are at right place. So let's dive in!

Step 1-Approach:

Wait! - You have selected SharePoint Hosted Add-In, which means that what your add-in requires can be done with JavaScript and does not require any third party platform or database or any server side code. If it does, then my friend, your approach should be towards Provider Hosted Add-In.

After, you are sure about your requirements, let's take the next small step, which is deciding on a development environment. There are two options for development. You can develop Add-Ins in Visual Studio 2012 and later versions or in Napa O365 development tool. I always prefer Visual Studio, due to the comfort level I have with it.

Step 2-Let's get Practical:

In Visual Studio 2015, create your first SharePoint Hosted Add-In, as follows:

Go to File -> New -> Project.

Give it a meaningful Name, which will be a solution name also and click OK.

After that, Visual Studio will ask for URL of SharePoint developer site. If you haven't configured SharePoint Developer Site yet, you can click on this link.

Select SharePoint-hosted and click Next

It will prompt for your O365 login, which will enable Finish button and click Finish.

Visual Studio 2015 will open the solution for your Add-In.

Here, I have expanded Pages & Scripts.

Step 3-Understanding anatomy of Solution Folder:

As a newbie, it is preferable to have knowledge of the whole folder structure and all files in there, but to start with, you can focus on some, which are highlighted below.

Default.aspx: This page defines the look and feel of your add-In, so it contains stylings and tags.

App.js: This is the default JavaScript file, which will define the business logic that defines the purpose of your add-in. In other words, all JavaScript code will be written here.

AppManifest.xml: This is where properties and metadata information for the add-in is stored. The best thing is, it is in interactive format, so don’t really have to worry about all xml tags or code. Another most important feature of AppManifest.xml is, it is used to set app permissions, which is the basic requirement for every SharePoint Add-In.

There are other files, apart from these 3, but they require knowledge as you advance gradually in Add-In development.

Step 4- Code and Test:

SharePoint provides you with basic code, when you create the Add-In. You can use it or Paste the code below in App.js

This code retrieves information of the current user's title and email.

'use strict';

ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage()

{

var context = SP.ClientContext.get_current();

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

$(document).ready(function () {

getUserName();

});

function getUserName() {

context.load(user);

context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

}

function onGetUserNameSuccess() {

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

}

function onGetUserNameFail(sender, args) {

alert('Failed to get user name. Error:' + args.get_message() + 'This is my first SharePoint Add In');

}

}

Testing: To test or debug Add-In just hit Start button. The Add-In will be in debug mode. You can set breakpoints before debugging.

Step 4- Deployment:

Deployment of SharePoint Hosted Add-In is pretty easy.

Right Click on SharePoint Project--> Publish

In the success dialog box , select Package the app. This creates your add-in package, which can be uploaded to App catalog site.

In the upcoming blogs, I would be going through how to make cross domain calls and permissions that are an integral part of Add-Ins.