In order to build SharePoint apps using “Napa” you need the following
When your Office 365 account is created and all artifacts are provisioned, you need a developer site. A developer site is a new site template in SharePoint 2013 which allows you to install apps that are explicitly marked as developer tools, Napa is one of these apps. To create a new site collection you have to navigate to your tenant’s administration site and open up the SharePoint administration.
Figure 1: Navigate to SharePoint Online Administration
Figure 2: Create a new private site collection
After provisioning the recently created developer site, you have to navigate to the site. Within the site open up the Site Content page and navigate to the SharePoint Store. When opening up the SharePoint Store from a developers site, only dev related apps are shown. Continue w/ installing Napa from the SharePoint store.
Figure 3: Filtered SharePoint Store
Creating a simple app w/ Napa
Because Napa is an immersive full page app, you have to launch it from the Site Contents page.
Figure 4: Launch Napa from the Site Contents page
After providing a proper name for the new SharePoint app you can proceed by clicking create.
Figure 5: Create a new app using the Napa app :)
Napa is offering a lightweight but great web based IDE for building SharePoint apps. As you can see there is syntax-highlighting for all common web languages such as HTML, JS, CSS and of course ASP.NET.
As you can see on the bottom left it’s powered by Visual Studio, looks like a huge step direction cloud based IDE :D #spoiler
Figure 6: The Napa online IDE
In this example I’ll create an part app, so we have to change the app properties, within the app properties you should also provide proper descriptions, names and images for your app.
Figure 7: Napa properties page
After setting the properties you can start w/ writing your code using all the common web languages.Only a few lines of JavaScript are required to gather the most recent images from Flickr containing the #SPC11 tag.
Figure 8: Sample Flickr API call
The ClientWebPart.aspx will be rendered when you’ve added the part app to any SharePoint site. So we have to reference the required JS scripts and add some HTML for presenting the images to the user.
Figure 9: HTML UI components
After publishing the app to your SharePoint developer site you can add the app to the SharePoint site, as you’ve done it in SP 2010 w/ legacy web parts.
Figure 10: Adding part apps to a SharePoint site
Finally the app will be rendered if anyone is hitting the website and the JS request pulls out all the images from Flickr.
Figure 11: SPC11 Flickr part app in action
SharePoint development has never been easier and never been more standardized than w/ the new SharePoint 2013 app model.
app developers, app developers, app developers