Is Azure DevOps THE way to deploy Infrastructure as code?

Why is Azure DevOps deployed at Infrastructure as Code Environments?

With DevOps people, processes and technology come together and the delivery of software is automated for a continuous value for your users. Deliver software faster and more reliably with Azure DevOps solutions, no matter how large your IT department is or what tools you use.

– Azure DevOps supports the business desire to be able to deliver functionality faster and faster.
– By deploying Azure DevOps you have full control over the configuration of the environment.
– Fully automated roll-out to development, staging and production.
– Infrastructure as Code can easily be reused
– Automate testing, security models in the pipeline or Azure DevOps.

How does Azure DevOps work in combination with Terraform?

When you have written Infrastructure as code in Terraform and you need to deploy the code to a Cloud Environment. Use Microsoft Azure DevOps to manage to code and structure.
For this case we have a Repository with a Branch named “Development” this branch is used for Azure DevOps Pipeline.

Add a Artifact for example Azure Repos …

cloudnation_terraform_iac01

The different stages can be designed from the Arftifact. Stage one is a KeyVault solution, which is first deployed to be able to manage identities in a secure way.

Then in Stage 2 the functionalities for the entire network are published and in the last step the complete Kubernetes Cluster is added to the environment.

When these 3 stages are deployed, the result is a complete infrastructure on Microsoft Azure with an open source Kubernetes Cluster.

cloudnation_terraform_iac

Tasks are defined as part of stages 1. In this example, exactly the terraform deployment flow is used. See figure terraform flow.

terraformworkflow

cloudnation_terraform_iac06

cloudnation_terraform_iac07

cloudnation_terraform_iac08

Azure DevOps contains thousands of predefined tasks that can be used as part of the stages. Terraform is also available from the marketplace. In this example, 2 types of tasks were used. A terraform task for specifying the terraform version and a task to support the flow description. 3 times the same task used with a different configuration. (init, plan and apply)

cloudnation_terraform_iac09

cloudnation_terraform_iac03

Once all tasks have been configured, the 3 stages can be completed with all tasks. A green or red status is shown for each step. Here it is immediately clear in one overview what the quality of the rollout around the environment has been implemented.
As configuration of the steps, the current azure subscription is linked to make sure that the right task is executed in the right environment.

cloudnation_terraform_iac04
cloudnation_terraform_iac02

There is also the possibility to reuse stages as a whole. There is a clone option in the Azure DevOps platform as shown below.

cloudnation_terraform_iac05

At this moment a complete pipeline has been set up for the roll-out on the development environment. As soon as the environment is staging and production available, the steps can be added with the right subscription and everything deployed in 1 full flow. It is possible to bring certain changes directly from development to production and to add automated tests.

 

cloudnation_terraform_iac

* If there are any questions about the configuration terraform as Infrastructure as Code please contact me

Benefits

The advantages of platform and software can be implemented from Azure DevOps

– more structure
– higher quality
– faster delivery
– automated testing

Finally, minimize human errors during deployments

“When the templates are ready in about 45 minutes there is a keyvault solution, a network with BastionHost, managed database, storage account and a fully kubernetes cluster deployed to Microsoft Azure Platform otherwise it will take days to deploy this with the same quality.

Quickly work with Azure DevOps and Terraform:
Microsoft Azure DevOps

Terraform

Advertisements

EAN Code Scanner in 15 minuten Office 365 PowerApp

Dit artikel beschrijft hoe je een Office 365 PowerApp kunt bouwen in 15 minuten wat in staat is een EAN Barcode te scannen, de waarde van de barcode vervolgens in een textbox te plaatsen om vervolgens te kunnen zoeken op een artikel naar de goedkoopste prijs.

IMG_2195IMG_2196

1.) Start met Bouwen van de PowerApp

Ontwikkelen van de PowerApp kan direct vanuit de webbrowser. https://web.powerapps.com PowerApps_EANcode01

Navigeer naar “Apps” en klik vervolgens op “+ Een app maken”.
PowerApps_EANcode02Selecteer daar “Telefoonindeling” of “Tabletindeling”. In dit voorbeeld gaan wij uit van een “Telefoonindeling” puur omdat de functionaliteit in deze demo ook geschikt is voor een Mobiel en een tablet weergave wordt best ok weergeven. Het aantal controls is ook beperkt voor deze app.

 

 

PowerApps_EANcode03

We voegen een “Label” toe door op invoegen te klikken en vervolgens bij eigenschappen “rechts” de “Tekst” aan te passen van “Text” naar “Product vergelijker”

Voeg een extra “Label” toe met een beschrijvende tekst bijv “Scan uw EAN streepjescode”.

PowerApps_EANcode04
Wij hebben er voor gekozen om een “Exit” knop toe te voegen om de “PowerApp” eenvoudig af te sluiten. Om ervoor te zorgen dat de app ook daadwerkelijk afsluit als er op “Exit” wordt gedrukt moet er een Fx commando worden meegeven namelijk “Exit()” zoals weergegeven in de afbeelding. Bij actie en dan het “OnSelect” event.

PowerApps_EANcode05
We gaan nu het control toevoegen wat de “Camera” activeert. Selecteer streepjescode.
PowerApps_EANcode06
Selecteer “EAN” als type barcode.

Voeg een textbox toe door “invoegen” > “Tekst” > “Tekstinvoer veld” te selecteren. Voeg bij “Default waarde” “Barcode1.Text” in wat naam van het barcode control is plus de waarde “.tekst” om value direct als input te gebruiken.

 

PowerApps_EANcode07
We gaan nu een “button” controle toevoegen namelijk “Zoeken”. Zodra deze geplaatst is moet er een actie aangekoppeld worden. We gebruiken het commando “Launch(“stringwebpagina”)” om vanuit de zoek button een webpagina te starten met de juiste “Eancode” als input parameter.

 

 

 

 

 

 

 

plak deze tekst “Launch(“https://topmerkenwinkelapp.azurewebsites.net/product/getproducts?eancode=”&TextInput2.Text)” als input in “OnSelect”.

Zet als default tekst “Zoeken” en sla uw “PowerApp” op.
PowerApps_EANcode08

Zodra de “PowerApp” is opgeslagen, en publiceer vervolgs uw “PowerApp” naar Office 365. Zodra hij een gepubliceerde versie heeft zal hij verschijnen in uw PowerApp Hub. zie:

PowerApps_EANcode09

 

 

 

Microsoft Whiteboard Preview tour guide.

Microsoft released the preview app “Microsoft Whiteboard”. You can download it from the Microsoft Store. The minimal requirements are a Microsoft Surface Pro with Windows 10 and a Microsoft Pen.

Microsoft Whiteboard

After installed the app, can you login with your Microsoft Office365 account. When your logged in can start to draw paint to the white board. See my example

 

mswhiteboard

After painting the whiteboard sessie you can save a whiteboard as a image, you can send a link to other colleague’s or clients for sharing.

menu options

You can more then one board with the arrow on the left side. You come to this screen when you see al the boards you have created on Microsoft Whiteboard Preview

create more boards

DevOps cultuur, wensen en technologie komen samen

Organisaties veranderen continue, het weken lang werken aan één applicatie en aan het einde opleveren naar de productie omgeving is niet meer van deze tijd. Tegenwoordig worden de behoeftes om “Time to Market” te versnellen en het continue uitleveren van nieuwe software steeds belangrijker. Twee populaire voorbeelden van DevOps zijn bijvoorbeeld Facebook en Office365 waar continue op dagelijkse basis wijzigingen aan het platform worden toegevoegd of bijgewerkt.

Om dit proces te kunnen ondersteunen moet een aantal factoren zijn ingeregeld.
website_DevOps_maingraphic

1 Plannen
2 Ontwikkelen
3 Testen
4 Deployment voorbereiden
5 Releasen
6 Feedback ontvangen
7 Optimaliseren
8 Meten

Tijdens het ontwikkel proces van een software applicatie wordt in de analyse fase functionaliteiten beschreven in een product backlog, door ontwikkelt, getest en opgeleverd. Tot zover nog niet heel veel nieuws, echter onderscheid DevOps zich door het verder kunnen meten en monitoren van de applicatie. Met de klant in gesprek om Feedback te verzamelen over de geleverde functionaliteit en het meten van de applicatie. Na een aantal weken is er inzage of er moet worden bijgestuurd of dat de functionaliteit volledig naar wens is. De omvang van functionaliteiten zijn overzichtelijk waardoor de applicatie snel in gebruik genomen kan worden.

itoperationdev
DevOps bevat het proces om ervoor te kunnen zorgen dat “Afdelingen” samen gaan werken. DevOps implementeren in uw organisatie zorgt ervoor dat mensen die onderdeel uit maken van projecten operationele kennis vergaren door samen te werken met de beheerorganisatie. Vanuit de projectenorganisatie worden nieuwe technologieën en kennis terug geleverd aan de beheerorganisatie . Op deze manier kan de samenwerking binnen de totale organisatie worden versterkt.

In traditionele ICT bedrijven zijn de bekende kreten als “het is over de schutting gegooid”, systemen zijn niet goed overgedragen een helaas vaak voorkomend probleem. DevOps zorgt voor een dusdanige Cultuur en mindset verandering dat het verschil tussen project en beheer kleiner wordt of zelfs verdwijnt.

544-devops

Tooling
Microsoft pretendeert alle tooling in huis te hebben om zowel “On-Premise” als “Cloud applicaties” te kunnen uitvoeren in het DevOps proces. Visual Studio met Team Foundation server in combinatie met Azure Services fungeren als hoofdrol in het kunnen uitvoeren in de vorm van een DevOps trajecten.

cloudtools

DevOps beschrijft werkzaamheden vanuit de Infrastructuur om tijdens de uitvoering meer te automatiseren en het vastleggen van versiebeheer over de infrastructuur. Het maken van Load testen, Unit testen en het volledige geautomatiseerd testen zijn hier zeker onderdeel van.

SharePoint 2013 On-premise reorder userprofile property page drag and drop

The order property control in SharePoint 2013 isn’t user friendly. I have a solution to ordering the SharePoint 2013 profile fields for on-premise with a drag and drop.

userprofile

okbutton

With a application page and the right rightss to write properties in the userprofile page can you drag and drop in your own portal. No central administration needed.

Files there are created:
– Create a SharePoint 2013 Farm Project
– Added a svc service this service write the order in property bag of the SharePoint site. This way is it posible to save a “concept version” when you use the “OK” button to save the userprofile service.

try
            {
                SPSecurity.RunWithElevatedPrivileges(() =>
                {
                    using (var site = new SPSite(GetSiteUrl()))
                    {
                        site.AllowUnsafeUpdates = true;
                        site.RootWeb.AllowUnsafeUpdates = true;
                        site.RootWeb.AllProperties[“ProfileSortOrder”] = item;
                        site.RootWeb.Update();
                    }
                });
            }
            catch
            {
            }

the javascript part

<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/redmond/jquery-ui.css” type=”text/css” media=”all” />

    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js” type=”text/javascript”></script>

    <script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js”
            type=”text/javascript”></script>

    <script type=”text/javascript”>

        $(function() {
            $(‘#sortable’).sortable({
                placeholder: ‘ui-state-highlight’,
                update: OnSortableUpdate
            });
            $(‘#sortable’).disableSelection();

            var progressMessage = ‘Saving changes…’;
            var successMessage = ‘Saved successfully!’;
            var errorMessage = ‘There was some error in processing your request’;
            var messageContainer = $(‘#message’).find(‘p’);

            function OnSortableUpdate(event, ui) {
                var order = $(‘#sortable’).sortable(‘toArray’).join(‘,’).replace(/id_/gi, ”);

                messageContainer.html(progressMessage);
                var serviceUri = “/_vti_bin/WVProfileOrder/UpdateProfileService.svc/SaveItems”;

                $.ajax({
                    type: ‘POST’,
                    url: serviceUri,
                    data: JSON.stringify(order),
                    contentType: ‘application/json; charset=utf-8’,
                    dataType: ‘json’,
                    success: OnSortableUpdateSuccess,
                    error: OnSortableUpdateError
                });
            }

            function OnSortableUpdateSuccess(response) {
                if (response != null) {
                    messageContainer.html(successMessage);
                }
            }

            function OnSortableUpdateError(xhr, ajaxOptions, thrownError) {
                messageContainer.html(errorMessage);
            }

        });

    </script>

 

The control

<asp:ListView ID=”ItemsListView” runat=”server” ItemPlaceholderID=”myItemPlaceHolder”>
           <LayoutTemplate>
           </LayoutTemplate>
           <LayoutTemplate>
               <asp:PlaceHolder ID=”myItemPlaceHolder” runat=”server”></asp:PlaceHolder>
           </LayoutTemplate>
           <ItemTemplate>
               <li class=”<%# Eval(“cssClass”) %>” id=’id_<%# Eval(“ItemID”) %>|<%# Eval(“ItemName”) %>|<%# Eval(“SectionDisplay”) %>’>
                   <%# Eval(“DisplayName”) %> – <%# Eval(“ItemName”) %> </li>
           </ItemTemplate>
       </asp:ListView>

 

site.AllowUnsafeUpdates = true;
                        site.RootWeb.AllowUnsafeUpdates = true;
                        SPContext.Current.Web.AllowUnsafeUpdates = true;
                        SPServiceContext context = SPServiceContext.GetContext(site);
                        var upcm = new UserProfileConfigManager(context);
                        int count = 0;

                        ProfileSubtypePropertyManager pcolEmployee =
                            upcm.ProfilePropertyManager.GetProfileSubtypeProperties(profileTypeName);
                        ArrayList allProps = pcolEmployee.PropertiesWithSection;
                        foreach (ProfileSubtypeProperty property in allProps)
                        {
                            if (!property.TypeProperty.IsVisibleOnEditor && !property.TypeProperty.IsVisibleOnViewer)
                            {
                                continue;
                            }
                           
                            try
                            {
                                item = new WvReOrderItem();
                                if (property.IsSection)
                                {
                                    item.SectionDisplay = true;
                                    item.CssClass = “ui-state-highlight”;
                                }
                                else
                                {
                                    item.SectionDisplay = false;
                                    item.CssClass = “ui-state-default”;
                                }

                                item.ItemID = count;
                                item.ItemName = property.Name;
                                item.ReOrderType = profileTypeName;
                                item.DisplayName = property.DisplayName;
                                items.Add(item);
                                count++;
                            }
                            catch (Exception exception)
                            {
                            }

I hope that this example helps you in the correct way, would you lik to have a example contact me at the contact information about this blog.

Use SharePoint 2013 with Less (Dynamic Style Sheet) (on-premise)

My Experience is when I build custom solutions with SharePoint 2013 that the design manager “Out-of-the-box” made design are easy. When I build a custom web part with custom style class to fix my design issues in a custom style sheet. The behavior is that when an administrator change the design that I used within my custom css file are not changed.

I have fixed this issue with .less.

version one Theme01:

image

version two Theme02:

image

I have nothing changed in my code, only change the theme and reset the MasterPage. My custom WebPart restyled the custom style automatically.

The output result in my HTML file are:

<script>
less.modifyVars({
‘@DisabledLines’: ‘rgba(58,86,96,1)’
});
</script>

The Software Architecture

image

The library I used for this is:
jquery-1.11.0.min.js
less-1.3.3.min.js

The instructure change iis manage has .less not as default mime type. you can use this commando with PowerShell to add this on every server in the farm.

add-webconfigurationproperty //staticContent -name collection -value @{fileExtension=’.less’; mimeType=’text/css’}

—————————————————————————————————–

We started with the SPColor file. The DisabledText has an value B1B1B1. We would like to use the color in the .less file on the client library.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:colorPalette isInverted=”false” previewSlot1=”BackgroundOverlay” previewSlot2=”BodyText” previewSlot3=”AccentText” xmlns:s=”http://schemas.microsoft.com/sharepoint/”&gt;
<s:color name=”DisabledText” value=”B1B1B1″ />

——————————————————————————————————

This methode get the color from the default spcolorfile. SharePoint overwrite everytime with an apply the default spcolor file. When you use this, you get the new colors from the site theme.

public static string GetColorCodeFromSpColorFile(SPSite site, string staticColorName)
{
    SPFile file = site.RootWeb.GetFile(site.RootWeb.ThemedCssFolderUrl + “/theme.spcolor”);

var color = SPColor.Open(file);
byte r = color.Colors[staticColorName].DefaultColor.R;
byte g = color.Colors[staticColorName].DefaultColor.G;
byte b = color.Colors[staticColorName].DefaultColor.B;
byte a = color.Colors[staticColorName].DefaultColor.A;
decimal alpha = decimal.Round((decimal) a/(decimal) 255, 2);
return string.Format(“rgba({0},{1},{2},{3})”, r, g, b, alpha.ToString().Replace(“,”,”.”));

}

——————————————————————————————————–

Best Practice is here to reuse the names that are used in the color file.

DisabledLines = SPThemeControlHelper.GetColorCodeFromSpColorFile(site, ColorFileContstants.ColorConstDisabledLines);

——————————————————————————————————-

In the master file head put the this code before reference the library.

<script>
less = {
async: false,
fileAsync: false,
dumpLineNumbers: “comments”,
relativeUrls: false
};
</script>

<script type=”text/javascript” src=”/_layouts/15/ProjectName/less-1.3.3.min.js”></script> ( we use an old library compatibility )

——————————————————————————————————–

Control to load in masterpage

<script>
less.modifyVars({
‘@DisabledLines’: ‘<%= DisabledLines %>’
});
</script>

.less file
/* Footer */
#footer {
background-color: @DisabledLines;
position:relative;
clear:both;
}