Engenho &amp; Engenhocas

Agile Framework Imagem Projecto

Critérios para detalhar User Stories

Para ler

Carreira

Queimar até à exaustão - Saúde Segurança e Higiene no trabalho

Para ler

Azure Cloud Desenvolvimento Imagem

Azure API Gateway

Para ler

Um sistema Azure que fornece APIs a aplicações externas deve usar uma Gateway para essas APIs, a Azure API Gateway. A API Gateway permite organizar e publicar as APIs do sistema, públicas ou protegidas, disponibilizando-as a programadores, parceiros, clientes e mesmo clientes internos se for caso disso. A API Gateway tem a infra-estrutura e monitorização necessárias à disponibilização de uma API mediante pagamento.

A Gateway deve ser pensada como proxy ou nível de indirecção entre os clientes e as operações de todas as APIs.

A Gateway tem um portal que pode ser usado para publicar, gerir e monitorizar as APIs do sistema, e um outro portal para os clientes se autenticarem, criarem as suas chaves de acesso, reportar incidentes ou problemas e ler a documentação das APIs.

Pré-requisitos

Pressupõe-se a criação de Azure Function do tipo HTTP Trigger com o nível de autorização configurado com o valor Function.
No exemplo, GetName.

public static class GetName
    {
        [FunctionName("GetName")]
        public static async Task<HttpResponseMessage> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)]HttpRequestMessage req, TraceWriter log)
        {
            log.Info("C# HTTP trigger function processed a request.");

            // parse query parameter
            string name = req.GetQueryNameValuePairs()
                .FirstOrDefault(q => string.Compare(q.Key, "name", true) == 0)
                .Value;

            // Get request body
            dynamic data = await req.Content.ReadAsAsync<object>();

            // Set name to query string or body data
            name = name ?? data?.name;

            return name == null
                ? req.CreateResponse(HttpStatusCode.BadRequest, "Please pass a name on the query string or in the request body")
                : req.CreateResponse(HttpStatusCode.OK, "Hello " + name + ", you are great!");
        }
    }

Pressupõe-se a criação de uma instância de API Management do Azure. Para exemplo, testingapisclopes.

Criação da definição OpenAPI (Swagger)

Depois de testar a função, seleccionar a opção Integrate da nova função e indicar os verbos HTTP permitidos.
Na Function App desta nova função, seleccionar Platform Features e API Definition. É apresentada a página para definição da API (Swagger) idêntica à seguinte. Na API Definition, seleccionar o valor Function.

Seleccionar Generate API definition template > Save.

O Azure varre a Function App à procura das funções do tipo HTTP Trigger e usa a informação do functions.json para gerar a definição OpenAPI.
Uma vez gerada a template da definição, completa-se com os metadados das operações e das estruturas de dados e grava-se.

Testar a OpenAPI

Na opção Manage da nova função, copiar a chave definida por omissão (default key) para as chaves do host (Host Keys).
Voltar à página de Definição da API (Function App Name > Platform features > API definition) e no painel da direita seleccionar change authentication, colar a chave definida por omissão e seleccionar authenticate.
Testar a operação através da acção Try this operation e verificar o output.

Importação da API para o API Management

Como a Function App está protegida por uma chave, há que criar uma entrada do tipo Named Value e aplicar a política set-query-parameter policy para que a chave seja adicionada automaticamente quando a Function App é invocada a partir do APIM. A Gestão de APIs distingue as APIs pelo respectivo sufixo. Por exemplo, functionappapi.

Testar a nova API APIM no portal do Azure

Seleccionar a API recém criada, escolher o separador Test e seleccionar o método a testar. GetName, por exemplo. A página apresenta os campos para os parâmetros de consulta, como por exemplo name. A página também apresenta os campos para os cabeçalhos. Um dos campos de cabeçalho é "Ocp-Apim-Subscription-Key", para a chave de subscrição do produto que está associado esta API. Quem cria a instância APIM é administrador por omissão, pelo que a chave é automaticamente preenchida.
Uma vez conferidos os campos, seleccionar Send.
O Back-end responde com 200 OK e o corpo da resposta.

Testar a nova API APIM no portal do Programador

Seleccionar a API a testar e o método a testar. A página também apresenta os campos para os cabeçalhos. Um dos campos de cabeçalho é "Ocp-Apim-Subscription-Key", para a chave de subscrição do produto que está associado esta API. Quem cria a instância APIM é administrador por omissão, pelo que a chave é automaticamente preenchida.
Depois de conferidos os campos, seleccionar Try It.
Uma vez invocada a operação, o portal do programador apresenta o status da resposta, os cabeçalhos da resposta e o corpo ou conteúdo da resposta.

Exemplo de pedido HTTP

GET https://testingapisclopes.azure-api.net/functionappapi/api/GetName?name=48 HTTP/1.1
Host: testingapisclopes.azure-api.net
Ocp-Apim-Subscription-Key: fc1767dcf0b448ce9c9d6d3cfcea5739

Referências: Import an API from a Function App now available in the APIs blade, Create an OpenAPI definition for a function, Importar e publicar a sua primeira API

ASP.NET Desenvolvimento Framework Web

Desabilitar caixa de selecção em ASP.NET Web Forms

Para ler

A framework ASP.NET Web Forms está orientada para a programação declarativa e baseada em controlos, à semelhança das WinForms e WPF/XAML/Silverlight.

Os controlos renderizam o HTML automaticamente e podem ser personalizados ou customizados através da configuração de propriedades e estilos.

O controlo nativo <asp:checkbox runat="server"></asp:checkbox> renderiza o HTML <input type="checkbox" />.

Problema

Apresentar a caixa de selecção apenas para leitura poderia ser conseguido através da propriedade readonly do controlo, assim

<asp:checkbox id="CheckBox1" readonly="true" runat="server"></asp:checkbox>

no entanto, resulta no seguinte HTML

<span readonly="true"><input id="CheckBox1" name="CheckBox1" type="checkbox" /></span>

que não desabilita a caixa de selecção.

Solução

Juntar ao controlo a propriedade enabled com o valor false.

<asp:checkbox enabled="false" id="CheckBox1" runat="server"></asp:checkbox>

renderiza o seguinte HTML

<span disabled="disabled"><input disabled="disabled" id="CheckBox1" name="CheckBox1" type="checkbox" /></span>

Teste

Referências: ASP.NET Overview, HTML <input /> Tag

Engenhocas Estratégia

Nova estrutura de silício abre portões aos computadores quânticos

Para ler

Carreira Transformação Digital

Trabalhadores desenvolvem competências digitais pelos próprios meios

Para ler

ASP.NET Backbone.js Framework Imagem Web

Backbone.js sem espinhas em ASP.NET Web Forms

Para ler

Backbone.js - A espinha dorsal de aplicações web from Henrique Gogó

Backbone.js é uma biblioteca MV* de JavaScript com uma interface JSON RESTful e permite preparar as aplicações JS com uma espinha dorsal de Models, Views, Collections e Events resolvendo vários problemas do código esparguete ou spaghetti code.

Exemplo de uma lista de Hellos

index.html


<!DOCTYPE HTML>
<html>
<head>
    <title>Hello World Part 2</title>
    <meta charset="UTF-8">
</head>

<body>
    <div class="wrapper">

        <h1>Greetings</h1>

        <div id="otherDiv"></div>

        <ul id="helloListWithTemplate">
            <script type="text/template" id="hello-template">
                Hello, {{name}}
            </script>
        </ul>
       
    </div>

    <!-- JQuery Backbone.js -->
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script src="Scripts/libs/underscore-1.8.3.min.js"></script>
    <script src="Scripts/libs/backbone-1.3.3.min.js"></script>
    <script src="Scripts/grettings.js"></script>

</body>
</html>

grettings.js (dados locais em memória)


// Backbone.js
$(document).ready(function () {

    ///
    ///Model Class Area
    ///
    var Hello = Backbone.Model.extend({

        idAttribute: 'id',

        defaults: function () {
            return {
                id: "",
                name: "default"
            };
        }

    });


    ///
    ///Collection Class Area
    ///
    var HelloList = Backbone.Collection.extend({
        model: Hello,

    });



    ///
    ///View Class Area
    ///

    var HelloViewUsingTemplate = Backbone.View.extend({

        tagName: 'li',

        model: Hello,

        templateSettings: _.templateSettings = {
                      interpolate : /\{\{(.+?)\}\}/g
                      evaluate : /\{(.+?)\}/g; 
                     };

        //template: _.template($('#hello-template').html()),

        template: $("#hello-template").html(),

        render: function () {

            //$(this.el).html(this.template(this.model.attributes));

            var local_template = _.template(this.template);
            this.$el.html(local_template(this.model.attributes));

            return this;
        }

    });

    var HelloListViewUsingTemplate = Backbone.View.extend({

        el: '#helloListWithTemplate',

        initialize: function () {

            this.render();

        },

        render: function () {
            this.$el.html();

            this.collection.each(function (helloModel) {

                var helloViewUsingTemplate = new HelloViewUsingTemplate({
                    model: helloModel
                });

                this.$el.append(helloViewUsingTemplate.render().el);

            }.bind(this));

            return this;

        }

    });



    ///
    ///Model instances Area
    ///

    var helloCollection = new HelloList([{ "id": 1, "name": "Local value 1" }, { "id": 2, "name": "Local value 2" }, { "id": 3, "name": "Local value 3" }], { model: Hello });

    //create a new hello collection view instance
    var hellolistviewusingtemplate = new HelloListViewUsingTemplate({
        collection: helloCollection
    });


    //JQuery
    $('#otherDiv').html('This line does nothing.
');

});

Relacionado: Backbone.js sem espinhas

Referência: Introduction to Backbone.js, Using Underscore.js with ASP.NET