On

Today I will start explaining in details the SharePoint 2013 application I built  I will start with my first published application ever which is Google Drive Import Beta

The Idea

I came up with the idea when I started to use SharePoint 2013 for the very first time and new about the newly introduced app platform, I was facing too much trouble using excel files I hosted over Google Drive, so It just hits me everyone should be able to migrate his office documents from Google Drive to SharePoint platform to enjoy the amazing experience of the Office Web Apps


First Version “SharePoint Hosted"

The first version supposed to be a beta version of the application to test drive the SharePoint hosted application, it was a pure JavaScript

 Prerequisites

  • Installation of the VS2012 is recommended , you can use the web-based application builder NAPA, but it's highly recommended to download and install VS2012 
  • Installation of the Microsoft Office Developer Tool for VS2012 can be easily obtained by Microsoft Web Platform Installer.
  • If you are using Windows 7 it has to be SP1


Steps

1.     Create new project

  


2.     Select  Office/SharePoint from the side navigation and then select App for SharePoint template



3.     Name your solution and your project also set the physical  Location for the solution and project.
4.     Point to the URL of the development environment you set up either locally or as in my case your SharePoint online developer website
Also select from the dropdown list the type of the SharePoint App which in our case in this beta version I used the  SharePoint-hosted application type 



The visual studio will try to connect to the site you already provided so it will prompt you for the credentials
5.     Press finish and wait for the visual studio to create the SharePoint App project
6.     This is what you will get after Visual Studio finish creating  your project



The files been created for you are the
·        Default.aspx
·        Elements.xml
·        Script Folder
o   _references.js
o   App.js
o   Elements.xml
o   jquery-1.7.1.intellisense.js
o   jquery-1.7.1.js
o   jquery-1.7.1.min.js
·        AppManifest.xml
·        packages.config

7.     Start Customizing the App properties
Open the AppManifest.xml it will open in the designer view like below



1.     Edit the application Title
2.     Edit the application Name
3.     Set the version Numberà this is very important as it must match the application details you are going to enter while submitting this application to the Office Store.
4.     Application Icon
5.     Start Page , So far we have only single ASPX webpage which is Default.aspx
6.     Query String it’s the parameters needed to be passed to this page , this will come in handy when walking through the Provider Hosted Application Type
Note: the application page you have is only ASPX page with no code behind.
8.     Start Adding the Logic

In Part II we will continue walking through the whole application implementation
Go to Part II