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”
Reverse Bytes 