Crear Cloud Service desde Azure PowerShell automaticamente: Anexo


Luego de haber construido gran parte del backend necesario para crear nuestro proveedor de servicios basado en Microsoft Azure lo que nos queda es hacerle un Frontend y así automatizar más las operaciones, así que comencemos.

Lo primer es definir un marcador apropiado para esta operación, el resultado se puede ver en la primera imagen de esta entrada.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cloud builder.</title>

    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">

	<link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet">

	<style id="holderjs-style" type="text/css"></style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="site-wrapper">
      <div class="site-wrapper-inner">
        <div class="cover-container">
          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">cloud builder.</h3>
              <ul class="nav masthead-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contacto</a></li>
              </ul>
            </div>
          </div>

          <div class="inner cover">
            <h1 class="cover-heading">Creación de Cloud Services</h1>            
			<br/><br/><br/>
           <form role="form" name="myform" method="post">
			  <div class="form-group">
			    <label for="InputName">Ingrese el nombre del servicio</label>
			    <br/>
			    <input type="text" class="form-control" name="InputName" id="InputName" placeholder="nombre">
			  </div>
			</form>
			<br/><br/>
            <p class="lead">
              <a href="javascript:sendForm()" class="btn btn-lg btn-default">CREAR <img src="http://i.imgur.com/wwx9MzT.png" alt="Upload Cloud" width="35" style="position:relative;top:-5px;"></a>
            </p>
          </div>
          <div class="mastfoot">
            <div class="inner">
              <p><img src="http://i.imgur.com/knK1nMO.png" alt="Powered by Microsoft Azure"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    
    <!-- Latest compiled and minified JavaScript -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

	<script>
		function sendForm()
		{
			document.myform.submit();
		}
	</script>
  </body>
</html>

Listo, ahora solo queda hacer el motor del backend en Node.js

 var express = require("express");
 var bodyParser = require('body-parser');
 var app = express();
 
app.use(bodyParser());

 /* serves main page */
 app.get("/", function(req, res) {
    res.sendfile('/public/index.html')
 });
 
  app.post("/", function(req, res) { 
    /* some server side logic */
    var name = req.body['InputName'];
    
	var file = 'C:\\Users\\thEpisode\\Documents\\Scripts\\Create.ps1';
	var params = ' –Name ' + name + 
				' –publish –PathCredentials C:\\Users\\thEpisode\\Documents\\Scripts\\Credentials\\BizSpark-6-16-2014-credentials.publishsettings';
	var exec = require('child_process').exec;
	var child = exec('powershell.exe ' + file + params, function( error, stdout, stderr) 
    {
       if ( error != null ) {
            console.log(stderr);
            // error handling & exit
       }
       console.log(stdout);

       res.send(stdout);

    });
  });
 
 /* serves all the static files */
 app.get(/^(.+)$/, function(req, res){ 
     console.log('static file request : ' + req.params);
     res.sendfile( __dirname + req.params[0]); 
 });
 
 var port = process.env.PORT || 5000;
 app.listen(port, function() {
   console.log("Listening on " + port);
 });

Todo esto puede quedar en una carpeta llamada “www” y el frontend en “public”