SharePoint 2013: Develop SharePoint 2013 apps with NAPA

Recently I got rolled off from a SharePoint 2010 project for few weeks. So, I decided to spend some of my free time on SharePoint 2013. Since apps are a new concept in SP 2013 I decided to create some sample apps. I did not make any production apps as I am yet to get allocated on a project which uses SP 2013 apps. In this series of blog posts I will try to share my learnings.
This series will consist of following posts:
Develop SharePoint 2013 apps with NAPA
Access data in Host web
Isolated App domain Setup Issues
Create SharePoint Hosted App in Visual Studio
Provider Hosted App Development Prerequisites
App Event Receivers
Remote Event Receivers

As I started working on SP 2013, I realized I did not need either VM or Visual Studio to work on basic apps. Office 365 and NAPA makes it possible to work on apps without having to bother about VMs, visual studio etc.
Excerpts from MSDN about Office 365 and NAPA
Use an Office 365 Developer Site as a development and testing environment to shorten your setup time and start creating, testing, and deploying your apps for Office and SharePoint. Deploy the "Napa" Office 365 Development Tools to this preconfigured SharePoint site and you also get a head start on developing SharePoint-hosted apps, and apps for Office documents and mail items, without installing Visual Studio 2012 and Office Developer Tools for Visual Studio 2012 on your development computer. With an Office 365 Developer Site, you get an isolated app domain for SharePoint-hosted apps, preconfigured to use OAuth, so that you can use the Windows Azure Access Control Service (ACS) for authenticating and authorizing provider-hosted apps for SharePoint that are deployed to this site.

Getting Started:
Go to the Office 365 link and sign up for a free developer site. Once you complete all the steps, click on "Build Apps" link in Office 365 admin center as shown:

Build Apps

Inside the developer site one can perform several tasks like creating lists, sub sites etc. In the home page click on "Get tools to build apps" as shown:

Get Tools

You will be redirected to the page where you can install NAPA.

NAPA Tools

The NAPA app will appear in Site Contents after its installation is completed:

NAPA APP IN SITE CONTENTS

Click on it to create a new app. Select "App for SharePoint" and give it a name in the next screen as shown and click on Create:

App for SharePoint

You will see a VS IDE like screen as shown:

Sample APP

The code in the app consists of JavaScript client object model (JSOM). The app consists of pages, scripts, image etc. If you look at the OOB generated code for the app, you will notice there is a div which contains a paragraph element inside it. As mentioned in comments, its content will change based on the code in the app.js file. Now open the App.js file from the scripts folder and observe that the JSOM code is replacing the content of paragraph with current user name. Click on the "Run" icon on the left side in the vertical bar. The app will start deploying:

Deploy APP

This is how the app looks:

APP

Close the app and go back to the code. Let's create a button in the app, which when clicked will give us the Title of the web. Place the following code just below the existing div tag in the default.aspx page:

<div>
        <button id="getWebTitle">Get web title</button>
</div>

Next open the app.js file and add a web object on the top, below user object

var web = context.get_web();

Add following code below getUserName method in $(document).ready function:

$("#getWebTitle").click(function (event) {
         getWebProperties();
         event.preventDefault();
    });

The code above attaches the click event to the button and calls getWebProperties() method. Finally add the code to get the Title of the web:

function getWebProperties() {       
    context.load(web);
    context.executeQueryAsync(onWebPropsSuccess, onWebPropsFail);
}

function onWebPropsSuccess(sender, args) {
    alert('Title of the web is: ' + web.get_title());
}

function onWebPropsFail(sender, args) {
    alert('Failed to get web. Error: ' + args.get_message());
}

Launch the app by clicking on "Run". Click on the button to get the Title of the web:

Web Title

Notice from the screenshot above that the Title of the web is "MyFirstApp". This is same as the name of the APP. However, on the extreme left you will notice that the name of the site is "Applied Information Services Team Site". In SharePoint 2013 Apps, there is a concept of APP webs and Host webs. When an app is installed a sub site is created for it. This is called APP web whereas the parent site which hosts the app is known as Host Web.
Access data in Host web article will explain how to work with data in Host Web application.