Building you first cloud hosted app on Office 365 – Using Napa

I was eavesdropping on one of the so called ‘Technical Elevator Conversations’

I heard “NAPA”.

Did some Googling, sorry some Binging as well and started to assimilate some of the information available on MSDN and other blogs. Fell in love instantly! What’s fascinating about this is, you could develop & deploy  from the scratch a complete ‘Cloud hosted App’ via browser and mere JavaScript. You would be surprised that it took less than ten minutes for the whole thing.

I thought to keep it simple and started of creating a simple temperature conversion tool, which run on simple JavaScript and some lines of  HTML. After all, the whole idea is to use NAPA and create an app. So I quickly borrowed few lines of code from W3C schools and used it in my app.

Note: There are so many blogs and MSDN articles out there explaining Napa in great detail. I just made an attempt to keep it as simple as possible, just to give you a glimpse of what Napa is all about and get some first introduction to it.

Following is what I did

  1. Create or use existing SharePoint 2013 site on Office 365 portal
    Note: If you do not have an Office 365 account you could easily activate one with you MSDN subscription. If you do not have an MSDN subscription, you may sign up for Office 365 for home to start and exploring some of the features.
  2. Once you have your SharePoint 2013 site up and running you would navigate to Site Contents and click ‘add an app’ as highlighted below
  3. Go to SharePoint Store by click the link as highlighted below.Snap2
  4. Search for ‘Napa’ and you should find an app ‘Napa Office 365 Development Tools’. Go ahead and install it.Snap3
  5. Once the install is finished you should find in your ‘Site Contents’. You may click on it to start using ‘Napa’ or by clicking ‘Build an app’ option available on the home screen. Please see below, for both of these options.
    Option 1:
    Snap4 Option 2:Snap5
  6. Kick off the app creating by clicking ‘Add New Project’
  7. You will be prompted with options to create a different kind of app, choose ‘App for SharePoint’ and give your app a name.Snap7
  8. Once you completed the above step, you are now officially on ‘Napa’ and can start coding. As I mentioned in the beginning, I borrowed the following code from W3C schools which helps with temperature conversions from Celsius to Fahrenheit and vice-versa.Snap8
  9. That is you are almost done, click Publish icon as highlighted in the screen capture. This should prepare the package, deploy and launch the app.
  10. This is how the ‘Temperature Converter’ app looks like. Nothing fancy two text boxes and few lines of JavaScript.Snap10
  11. This app should now show up in your Site Contents, please see highlighted.Snap11
  12. Congratulate your self for building the first cloud hosted app and get a brew.

Leave a Reply