Dev Diary Entry 1: Azure Web App with MVC WebAPI, Angular and Azure DocumentDb


Introduction

This is the first time that I have tried writing a developer diary. So I would really appreciate it if you could let me know if you find it useful.

I find when I start building an Azure based application that I forget what I had to do the last time.

At the moment, my career has been working a lot with SharePoint and I want to move over to doing more Azure stuff. However, until I actually start doing more Azure applications then the process of building applications in Azure is not going to flow.

So this diary is for me to remind myself of what I did, plus I want to be completely transparent. When I find a problem or hit a blocker (no matter how stupid it is) I am going to try explain what it was, what I tried to do to fix it and hopefully the final fix.

It should be interesting to see where the application goes.

 

So what are we going to build?

Well currently I use a product called Microsoft InfoPath to manage my invoices to customers. InfoPath is no longer being worked on and Microsoft have said that it will not be supported after 2023 I thought why don’t I build something that a find useful and use that as an experience to learn. So here we are.

So we are going to build an Invoice management system, which allows someone to create, edit, view and publish an Invoice as a PDF into a SharePoint Online document library.

There are a load of other things that I am thinking about that would be useful, like reminders to send out invoices and being able to integrate with time management applications like Toogle and create invoices from those data endpoints.

 

 

Architecture

The application is going to be built in two parts:-

  • Client side Angular SPA application served by Azure Web Apps.
  • Azure hosted WebAPI MVC application using Azure Document Db to host the content

Invoice Form App Architecture

The application will use Azure AD as the authentication and authorisation engine. For monitoring, errors, statistics we will use Application Insights and both the Angular and MVC components will use the same Application Insight key so that we keep all the monitoring together.

 

Learning

Before I started the application I wanted to do some reading on Angular, Azure Document Db as I have never built anything with these technologies before.

I am using Angular 1.0 at Angular 2.0 is still in development. I have made the choice to build the client side using JavaScript rather than TypeScript. Though I am likely to convert over to TypeScript but thought that process would be interesting to capture.

So this is my reading list before I start:-

 

Development Environment

I am building this application with Visual Studio Code for the client side and Visual Studio 2015 for the MVC Web API component.

I wanted to build something with Visual Studio Code so that I learnt more about Node, Node Package Manager, Bower, Gulp etc.

I don’t really know what all those things are but we will find out!

 

Next Steps

So the next steps are to create the solutions for the Angular application and the MVC Web API.

That will explained in the next entry.

 

Thanks for reading.

Simon


Updated with SharePoint 2010 Version of Script

Doy's Microsoft 365 and Azure Dev Blog

Update: 10th June 2012

A few people have posted comments about the script not working for SharePoint 2010. This code was built for SharePoint 2007. However I have been through the code and an updated version can be found below.

Apologies that it has taken a while to respond.

The SharePoint 2010 Code version works slightly differently and uses the jQuery Live method and JavaScript OnMouseOver event to update the PDF’s a tags.

Introduction

One of our clients wanted a way to ensure that Adobe PDF’s did not open in the current browser window.

By default a PDF opened into Adobe Acrobat will open in the current browser window.

This presents a usability problem as user’s lose the reference to the site they were in also other applications, such as Word and Excel, do not behave in this way.

How Acrobat opens a document…

View original post 704 more words