Hello World Application in SharePoint Store Apps

Introduction

In this article we will see how to develop our first app using "Nappa Office 365 Tools" in SharePoint 2013.

Steps

First we need to create a Site Collection with the "Developer Site" template. See:

ShrStrApps1.jpg

Once the site collection has been created, click the SharePoint store link and we will get the following message:

ShrStrApps2.jpg

Just select any language and we will see the "Napa Office 365 Development Tools" app and "Add" this app to our site. See:

ShrStrApps3.jpg

While adding this Napa app, it'll ask for credential verification. It'll be a hotmail/live id. See:

ShrStrApps4.jpg

Once the "Napa" app has been added in our site, we will see the following message:

ShrStrApps5.jpg

We'll see the same app will be in the Site Content also, the same place we see all the apps of the particular site. See:

ShrStrApps6.jpg

Click the "Napa" app; it'll redirect to the Welcome page with various choices of apps. Just select SharePoint Apps.

ShrStrApps7.jpg

Once we select the SharePoint Apps, it'll redirect to the "Napa" Cloud development site as shown below. We'll see the bread crumb as Office 365 --> Napa-->SharePointApp1 which means that SiteName--> Napa-->App Name.

By default we will see the following set of files in our application:

ShrStrApps8.jpg

We can able add/remove any files in our application. See:

ShrStrApps9.jpg

In our app we just want to display the logged in user name, let's make it simple. See:

ShrStrApps10.jpg

After doing the coding, we can run our application as shown below. It'll open our app in a new browser window. In addition to that we have also opened our app from VS 2012.

ShrStrApps11.jpg

We will see the installation steps, once its completed we will see our application in a separate window.

ShrStrApps12.jpg

ShrStrApps13.jpg

If we want to publish our app, select the publish option in the bottom-left icon and complete it.

ShrStrApps14.jpg

ShrStrApps15.jpg

Once it's published we will see our application in the App Packages. Like WSP files 2013 we have a new format with an .APP extension.

ShrStrApps16.jpg

We can find the published app in our Site Contents page. See:

ShrStrApps17.jpg

If we open the app will see our Application Pages. See:

ShrStrApps18.jpg

Summary

"Napa" is a free app for SharePoint. Since "Napa" is web based, you don't need to install anything on your machine to start developing for Office and SharePoint. Just fire up your browser and start coding. As your application matures and you need more advanced tools, you can seamlessly switch to the more powerful, fully featured Visual Studio IDE, and continue developing there.