This post contains few important screenshots of Office 365 SharePoint app development using Napa.

Napa is a free Office 365 app which brings a development environment within the browser, though this not enough for most of the advanced developments this is quite handy it has debug mode, intellisense and other cool features. And also you can download your project to your machine along with all the deployment settings and edit in your Visual Studio as well. Napa is a good place for a beginner to start and to do quick tweaks in the code.

Once you activate your Office 365 account you can start jump into development (your Office 365 subscription should be Microsoft Office 365 Enterprise Developer).

Since all the developers do not have the subscription I captured few screenshots and put it here.

1) First you have to install Napa in your Office 365. It’s free.

2) You select what app you are going to develop.

3) Napa opens the app template for you in the browser.

As you can see in the left hand side we have a toolbox (thin gray layer) with commands for debug, run in local Visual Studio, Publish and more. Next to that another thick light gray bar which serves the purpose of the Solution Explorer of the VS. Here the SP app have a file named App.js. This is the startup file for our SP apps. Then we can have our custom ASPX pages as we want.

When I click the debug, a pop up comes to show the progress of packaging and deploying for the debug. (as shown in the screen).

4) First Run

The template is configured to print the logged in username in the app, this code is set in the App.js. So when I ran the app without making any changes in the code I got the above screen.

5) Editing and Debugging

I edited the code and put some controls and ran the app. Wow I’m a techie now 😛

6) Connecting to Local Visual Studio to download the project

When you try to connect to the local VS the above popup is shown, and you can choose your preferred language and continue. (Wait, if I were to select the language now so far I developed the app. The point is when you create a project in Napa it creates the project for you based on the JavaScript development. – Remember I get the App.js) So when I try to import my project to the local VS and edit it asks what is my preferred language of development.

When you first import a project from Office 365 Napa we need some additional plugins to be installed in our local machine. This is mostly based on what pre installed VS configurations. But need not to worry MS Web Platform installer will take of your download.

Forget the web parts and develop the Apps. 🙂

I think along with Office 365 and SharePoint MS has framed their development sector ‘Office Development’ properly. Earlier though we say Office Development, SharePoint development was going in a different way and Office module development was going in another way. Now things are merged not only in words but also by the scenarios and environments as well.