DEV Community: Pikachu⚡

How to maximize your Azure for Students benefit and reduce spend.

Pikachu⚡ — Thu, 08 Sep 2022 20:36:31 +0000

Azure for students is a benefit availed to ongoing students whereby you get $100 worth of free credit to build and experiment with the cloud. As a student the credits are invaluable but how do you make sure you take advantage of the benefit, maximize it as well as reduce your spend? In this blog we will cover how you can optimize costs, use available services and tools to plan and monitor your spend. At the end, you will maximize efficiency while using the cloud.

Take advantage of free services available

There are over 25 free services you can use with your student subscription. To access all the free services available, go to Azure Education Hub.

Under the Azure free services, you will be able to check out all the services such as Virtual Machines, Static Web Apps, Azure Functions, Text to Speech and many more you can provision for free.

Plan your technical requirements using the Azure Pricing Calculator

As you set out to do a new project, one of the key things in planning is integral when you are using the cloud. The Azure Pricing Calculator enables you to accurately estimate your Cloud spend.

Scenario: For instance, if you would want to start on a Machine Learning project, you will need to utilize Azure Machine Learning service. On the pricing calculator select the service and customize the resource based on resource type, usage time as well as location. Once done, you will get an estimate of the service. If you require more services, you can add them to the estimate and finally you will be able to estimate the cost for the project.

Using Azure Policy to create limitations.

Azure policy helps you to enforce standards and is most useful when setting compliance rules. When it comes to setting price limitations, Azure Policy will be the perfect place to start. There are already built-in policy definitions for common use cases to help you get started. As you are pIanning your project, you can use Azure Policy to create limitations for the size or tiers for your resources. Learn how you can Configure Azure policy.

Efficiently making use of managed services to lower costs.

Let’s say you would like to deploy your portfolio website. You might want to deploy your application using a Virtual Machine (VM), which comes with the cost of administration such as maintaining the operating system and the underlying software. However, you don’t need to go the extra mile, you can use a managed service in our case the Azure Web App Service.

Monitor and Analyze your Spend using Cost Management

We have dived in on how you can plan and ensure the services you deploy are of a lower cost. How then do you monitor and analyze your spend? Microsoft Cost Management contains tools to help you plan, analyze and reduce your spending. Cost Management can be found on your homepage. Once selected, go to your subscription where you can view you expenditure.

Using cost management, you can analyze your costs by analyzing trends and through the Azure Advisor, you will receive recommendations on best practices. For example, I have just created an Azure Machine Learning Resource as well as a storage account. The cost overview will be as below:

Once I start utilizing the services for a project, it will give me a forecast of future expenses as shown below:

As it shows, the forecast indicates a usage of up to $80 by the next month. As a student, as you have only $100 dollars, this will mean your credits will be depleted before the end of the year. As a remedy, you can:

Consult Azure Advisor on your dashboard to see any cost reducing strategies
Create a budget and alerts to ensure that you do not deplete your credits
Create additional policies to ensure you pick the most affordable options for different services
Configure alerts based on your spending such as notifications when you reach a particular amount or based on your usage if you are likely to reach a particular threshold
Constantly check and review your spending to aid you in decision making
Finally, delete or pause resources you are not using, more on this expounded below.

_While using cost management, data might vary depending on the resource type hence some services will be updated earlier than others. As for cost and usage data in cost management it may take around 8-24 hours for them to fully reflect. _

Delete or pause resources when not in use to avoid unnecessary spending

Once you are done using any of your resources, ensure that they no longer use your credits by deleting all unused resources or pausing them. A great best practice here is creating a resource group for all your projects. In turn once you are done with the project you can just delete the entire resource group instead of deleting the resources one by one.

Summary and resources

This blog is aimed at ensuring that you use your Azure for Students benefits in such a way that it will maximize your benefit but reduce your spend. Curious to learn more on cost in the cloud? You can utilize the resources below:

How to move your React website from localhost to the internet

Pikachu⚡ — Fri, 02 Sep 2022 09:03:24 +0000

Scenario

Let us say you have been building your website for a while now and it is time to show the world what you have been working on. One of the best ways to achieve this is by hosting your site using Azure Static Web Aps (SWA). In this blog, I will take you step by step through deploying your site for the world to see.

The first question in your mind might be, what is Static Web Apps?

Static Web Apps is an Azure Service that you can use to build and deploy your web applications.

It automates deployment directly from your repository, for instance with GitHub.

Web applications built using libraries and frameworks like Angular, React, Svelte, Vue, or Blazor where no server-side rendering is required are referred to as Static Web Apps. These apps include HTML (Hyper Text Markup Language), CSS, JavaScript, and image assets that make up the application. Using the Azure SWA, you can easily deploy your applications.

Prerequisites

In addition to Azure SWA, we now have the Static Web Apps CLI, whereby you can integrate Azure Static Web Apps from Local Development. In this tutorial I will do a demo on how you can start using Azure Static Web Apps CLI. When you are done, you will be able to deploy your web application. In order to complete this tutorial, you will need:

An Azure subscription, get a free students account here
Visual Studio Code installed, install one here

QuickStart – Local development

Once you have built your react app, run it locally using npm start. If you are new to React you can follow the step-by-step tutorial to build your first app.

Now, onto the SWA CLI. First, you will need to install the CLI using either npm or yarn on the terminal. Using npm, you can:
- Install SWA CLI globally: npm install -g /static-web-apps-cli
- Or install SWA CLI locally withing the project: npm install -D /static-web-apps-cli
Make sure the CLI is installed by running swa –version

Once done, you can now go ahead and deploy your application by running swa on the terminal. By running it will generate a configuration for you, build your project then ask you if you want to deploy your application to Azure.
Once the configuration is generated as shown below, go ahead and accept the configuration which will trigger the build to start.
After the build is concluded, you can proceed and deploy your application. Connect the project to your Azure tenant. Once it has access to your subscription, go ahead and create a new application and give it a name.
And voila, your application is on the internet, and you can now share it with your friends!

Summary

In simple steps, we have moved our application from the local host to the web. Regardless of the framework you are using, you can easily deploy it to the internet. Learn more about the Static Web Apps CLI and how you can configure your deployment here. Eager to learn more on Azure Static Web Apps? The learning path below will help you get going:

Azure Static Web Apps - Learn | Microsoft Docs

Here is a short clip that goes over the steps above.

@bethanyjep how to move your react app from local host to the Internet. docs: https://aka.ms/swaCLI #students #Azure #SWA #React ♬ original sound - Pikachu 🐣

How to connect Azure Synapse to Power BI for data visualization.

Pikachu⚡ — Thu, 01 Sep 2022 09:29:54 +0000

Azure Synapse Analytics

The first question on your mind, well that is if you are unfamiliar with Azure Synapse Analytics is, what is Azure Synapse?

Azure Synapse Analytics is an analytics service that enables you

to bring together data integration, warehousing, and big data analytics.

Using Azure Synapse Analytics, you can query data using serverless of dedicated options at scale! The platform enables you to ingest, explore, prepare, transform and manage data for all your visualization and machine learning needs.

Microsoft Power BI

Understanding your data is key in enabling you to leverage the insights in decision making. Power BI is your go to smart analytics tool that will not only keep your data secure but give you insights using data visualization leveraging on its in-built AI capabilities.

Truly bringing together Azure Synapse Analytics and Power BI will be a match made in heaven for all your data analytics needs.

Prerequisites

How then can we connect Azure Synapse Analytics and Power BI to maximize the best of both worlds. When you are done, you will be able to deploy your web application. In order to complete this tutorial, you will need:

An Azure subscription, get a free students account here
Free Power BI account, sign in here and download the desktop application.

QuickStart – Creating an Azure Synapse Resource

Log in to the Azure Portal and create a new Azure Synapse Analytics Resource
Fill in the details as shown below, then review and create your Azure Synapse Resource.
- Subscription: Your Azure Subscription here
- Resource Group: create new with a unique name
- Region: West Europe
- Resource Group: create new with a unique name
- Select Data Lake Storage Gen2: from subscription
- Account Name: create new with a unique name
- File system name: create new with a unique name
Once the resource is deployed, go to the workspace URL where you will be able to access the Azure Synapse Analytics Workspace

Data – Ingesting Data to Azure Synapse Analytics

In this step, we will utilize data from Kaggle. The data is of Mobile Specification and prices scrapped from Gadget360 website.
To connect the data to Power BI, you will need to load your data into a dedicated SQL Pool. Select manage on the menu, then under SQL pools create a new pool.
Once on the Azure Synapse workspace, click on ingest data and select Built-in copy task with the cadence set as run once now.
In the next step on the source, the source type will be HTTP. Set up a new connection with the base URL as the data link. Set the authentication as anonymous and then go ahead and create the data source.
Under source data store and file format settings, leave all the details as default. Next, the destination, select the destination type as SQL Pool and connect to the SQL pool you just created in the Synapse workspace.
Under column mapping, ensure all the columns are assigned to the correct data type.
Under settings in the data Pipeline, choose bulk insert and leave the rest as default.
You have now successfully ingested your data. To confirm this, go to data and under tables in the new SQL pool you create, you will find the file and a list of columns it contains.

Visualization – Set up a connection to Power BI and visualize your data

Head back to the dashboard and click on visualize, you will then be able to create a connection to Power BI.
Under managed, go to linked services and click on the Power BI Workspace that you just created then select New Power BI dataset to connect to the SQL pool:
Select the SQL pool you created as the data source and download your data file.
Open the file you have just downloaded in your Power BI Desktop application. Select Microsoft account on the left and ensure you are signed into your Microsoft account to ease the authentication process.
Select the dataset we just created and click load to create the dataset. You can either import the dataset to copy the data into Power Bi or DirectQuery which will connect to the data source live if you are streaming.
You can go ahead and review your dataset in Power BI and once satisfied, click on publish, to publish your dataset.
Head back to Azure Synapse and click on refresh, you should see the dataset you just published there.
You have now successfully published your dataset and you can use it to build and publish reports in Azure Synapse Studio.

Summary

In simple steps, we have ingested our data to Azure Synapse, prepared it and connected the data to Power BI for visualization. Eager to learn more on Power BI and Azure Synapse? The learn modules below will help you get going:

How to get a Microsoft Certification for Free as a Student.

Pikachu⚡ — Thu, 28 Jul 2022 14:57:37 +0000

This post was initially published at the Educator Blog

Certifications are a way to stand out from the rest. Other than boosting your confidence, certifications can help you land a new job, get a promotion or even attract more clients. Microsoft certification offers numerous opportunities, not just for developers but also low code citizen developers. As a student, you can jump start your career with free fundamental certifications.

Which certifications can you do for free?

There are 8 certifications you can do for free as a student. The certifications help you build up and sharpen your skills on various technologies such as Cloud, Artificial Intelligence, Power Platform and Microsoft 365. Additionally, you get to build up on technical depth in different industry roles such as security. Below are some of the popular certifications you can take:

AZ-900: Microsoft Azure Fundamentals
DP-900: Microsoft Azure Data Fundamentals
AI-900: Microsoft Azure AI Fundamentals
SC-900: Microsoft Security, Compliance, and Identity Fundamentals
PL-900: Microsoft Power Platform Fundamentals
MS-900: Microsoft 365 Fundamentals

What is the Certification Process?

Create your account on Microsoft Learn

The first place to start your certification is Microsoft Learn. Microsoft Learn contains a collection of learning paths and modules to skill you up on different technology areas as well as soft skills. The platform is comprehensive and will get you well on your way to certification. Once on the landing page, click sign in the top right and sign up to the platform using your Microsoft account.

Pick and prepare for a certification of your choice

Microsoft Fundamental certifications are based on different technology areas and industry roles. To get started, you need to identify and select the right path for you. Remember, you can still come back and do the other certification exams at a future date. Once you select the certification of your choice, take time to prepare and skill up on the selected area.

Verify your student status and claim your benefits.

You have selected your certification of choice, prepared yourself for the exam, now it is time to verify your student status and sit for the exam for free. As part of the initiative, you get free Microsoft Official practice tests to prepare and a free exam voucher.

The free certification initiative is managed by Cloud Ready Ltd on behalf of Microsoft. Therefore, the first step is to sign up to their site using your Microsoft Account.

Enter your university and country details to confirm you are a student as well as consent to currently being a student and Cloud Ready privacy policy.

Once done, you will still need to verify your status as a student on the next page.

You will be required to either submit identifying documents or verify using your students’ email. Refer to the FAQ or reach out to support in case you have any issues verifying your identity.

Once your student status is verified, you are now ready to start your journey to get certified. Take time, go through the resources, take the practice test and ensure you are well prepared for the test before taking the main exam.

Sit for the exam and become Microsoft Certified!

You have prepared for the exam, done the practice tests and are now ready to sit for the exam. On the exam day, ensure you are well prepared, have stable internet connection, and proper identification documents.

Showcase your achievement.

It is now time to celebrate your success. Once you have successfully passed your exam, you will receive a digital badge. Share the badge with your networks and add it to your LinkedIn profile.

You are now certified, what next?

Certifications help you stand out and open you up to more opportunities. Whether you are starting out in your career or looking for a career shift, certifications guide you in the right direction. Below are some success stories from past individuals who got certified:

This post was initially published at the Educator Blog

Creating a Colour Picker App using Flask & Azure Computer Vision Service

Pikachu⚡ — Wed, 16 Mar 2022 00:00:00 +0000

I recently did a talk on how you can analyse images with the Azure Computer Vision Service. While preparing for the talk, I was excited about all the different use cases of the computer vision and decided to go ahead and build a simple app to demonstrate use case of the computer vision service.

What are we building?

As a designer I am always stumped trying to decide the right colour for a brand. As I explored the different use cases for Azure Computer Vision service, I came across detecting colour schemes in images. Using Computer Vision Service, you can extract dominant and accent colours in different images to provide sample colours you can use for the different brands.

💡 Intrigued, I decided to go ahead and build a simple colour picker application with Flask and Azure.

For this tutorial, we will create simple colour picker to help you create the perfect brand colour that perfectly matches your favourite images. I will cover how to build an end-to-end build of the application under the following topics:

Hello World in Flask
Deploying your App on Azure Web Apps
Provisioning a Computer Vision Resource
Build a Colour Picker with Flask App and Azure Cognitive Services

Prerequisites

If you are just starting out with Azure and Flask, this is for you. To complete this tutorial, you’ll need:

Foundational GitHub and python knowledge
Python and Visual Studio Code installed on your computer
Access to Microsoft Azure

Hello World in Flask

Flask is a backend web framework written in Python. Unlike Django, flask is easy to set up and get started with as a beginner. In this section, I will show you how you can create a simple Hello World web application in Flask.

First, create a new folder and open it in Visual Studio Code. Once in Visual Studio, follow the steps below:
Create a virtual environment. venv is a python module that enables you to create isolated Python environments that own its own copy of python and python libraries. This allows you to work on multiple projects at the same time. To create a virtual environment, type in the command below in your terminal.
```
py -m venv env
```
- Next, activate the virtual environment using the code below:
```
env\Scripts\activate
```
- Once you have successfully created the virtual environment, you will need to install the dependencies and libraries to use in your project. To do this, first create a new file named requirements.txt. In this file add the libraries you will need to install, in our case that will be flask. Next, install requirements using the command below:
```
pip install -r requirements.txt
```
- Now that you are all set, we can dive into creating our hello world app. Create a new file app.py. In this file we will add our flask code to print Hello World. Add the code below:
```
#Importing the Flask class from flask
from flask import Flask

app = Flask(__name__)
@app.route("/")
def helloWorld():
    return "Hello World"
```
Below is a detailed explanation of the code you have just written:
- First, we import Flask class.
- Next, we assign the imported Flask module to our core application
- Using @app.route, we indicate which path we will access the app.
- The helloWorld function tells us what we want rendered in the browser
- We then run the application locally to ensure we can see Hello World on our browser. On the terminal, type the command flask run to deploy the application. Once the app successfully runs, you will be able to access it at http://127.0.0.1:5000/
```
flask run
```
- Before we go to the next step, upload the code to GitHub. GitHub enables you to not only track changes in you make in your applications but also using GitHub Actions you can automate future deployments. You can do this directly on Visual Studio Code. On your right, select source control and publish your code to GitHub as shown below:

Deploying your app on Azure Web App

To share our application publicly, we will need to deploy it. Azure Web Apps not only enables us to deploy our web applications but also grants us continuous deployment from Azure DevOps, GitLab, GitHub and many other sources. In this section, we will cover how you can deploy your web application on Azure using Azure Web Apps.

First, sign into the Azure Portal with your Microsoft Account and create a new resource.

Click on Web App. If you cannot be able to find it, go ahead and search for it in the search bar.

Create your web app using the configurations below:

Subscription: Your subscription
Resource group:
- Select Create new
- Name: colour-picker-app
Name: A unique value, such as colour-picker-2343
Publish: Code
Runtime stack: Python 3.9
Operating System: Linux
Region: select a region close to you
App Service Plan:
- Linux Plan: create new, name colour-picker
- Sku and size: change size to Free F1

Select Review + Create then select Create to create you web app. It will take a few minutes to create your web app.

On your resource dashboard, you will see the application URL. Click to see what you have deployed.
Your web app is now running but you are yet to add content. As we have already published our code on GitHub, click on the deployment centre to publish your code.

In this stage, we will get our code from GitHub build our pipeline with GitHub Actions.

Source: GitHub
Authenticate connection to your GitHub Account
Organization: If you have multiple organizations select the organization where you saved you repository
Repository: Connect to the repository you just created, in our case: flask-app-deploy
Branch: master
- Select Save. Your application will be deployed in the background. You can check out the deployment progress under logs or on GitHub under actions. Once deployment is done, go ahead and refresh your website URL.

Now that our website has deployed successfully 👇, the next step is to provision a Computer Vision Resource that will help us analyse our image.

Provisioning a Computer Vision resource

Computer Vision is a field in Artificial Intelligence that allows applications to gain insights on digital images or videos. Azure pre-trained computer vision service provides pre-built computer vision capabilities. In this next step, we will provision an Azure Computer Vision Resource:

Let’s go back to the Azure Portal whereby we will create a Computer Vision resource.

Create the computer vision resource
- Subscription: Your subscription.
- Resource group: Select or create a new resource group.
- Region: Choose a region close to you
- Name: Enter a unique name for the computer vision service.
- Pricing tier: Free F0 (20 Calls per minute, 5K Calls per month)
- Ensure you select: By checking this box I certify that I have reviewed and acknowledge the all the terms above.
Select Review and create then Create your resource. Once the resource is deployed, you will be able go get you API keys and endpoint. We will use the endpoint to access the resource and the API key to authenticate our connection.

The Computer Vision service analyses the image and provides the: dominant colours, accent colour, whether an image is black and white and the image metadata. The response is in JSON as shown below. In the next step, we will add features to our Flask application to be able to return an image’s colour scheme.

{'color': {'accentColor': '322419',
  'dominantColorBackground': 'Brown',
  'dominantColorForeground': 'Brown',
  'dominantColors': ['Brown', 'Grey'],
  'isBWImg': False,
  'isBwImg': False},
 'metadata': {'format': 'Jpeg', 'height': 900, 'width': 600},
 'requestId': '36ab3b0a-06e5-4704-a43a-4020c03115b7'}

Build a Colour Picker with Flask App and Azure Cognitive Services

Create the application front-end using HTML

Create a new folder named templates.
Under the new templates folder, add a new file called index.html. In the file add the HTML code below. We are creating a URL field where one will paste the image URL to generate colours in the image. Additionally, a core concept is the input name ImageSelected which we will use in our model.

<!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.0">
    <title>Colour Pallette</title>
</head>
<body>
    <h1>Colour Picker from Image</h1>
    <form class="container" id="form1" method="POST" >
      <label for="imageURL" class="label">Paste Image URL</label> <br/>
      <div class="formInput">
        <input type="url" name="ImageSelected" placeholder="https://" id="">
        <input type="submit" class="button" value="Generate Colours"/>
      </div>
      </form>
</body>
</html>

Under the templates folder, we will also add a new file palette.html. This file will render the output of the model. Add the code below to the new file you just created. One thing to note in the code below is the parameters enclosed by {{ }}. For example, the parameter {{ dominantCOLOURS }} tells Flask to render the results from the model as plain text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/static/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>Colour Picker</h1>
        <h2><strong>Results</strong> </h2>
        <div class="imageResults">
            <div>
                <img src="{{ImageSelected}}" alt="" srcset="">
            </div>
            <div class="imageDesc">
                <p><strong>Dominant Colours:</strong> {{ dominantCOLOURS }}</p>
                <p><strong>Accent Colour:</strong> {{ accentCOLOUR }}</p>
                <p><strong>Is the image Black & White:</strong> {{ blackWHITE }}</p>
            </div>
        </div>

        <div>
            <strong>Try another image: </strong>
            <a href="/"><button class="button">New Image</button></a>
        </div>
    </div>
</body>
</html>

Style the code with CSS

To style the HTML, we will be using CSS. Create a new folder named static. In the new folder create the file style.css then add the code below.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
    font-family: 'Outfit', sans-serif;
}
h1{
    text-align: center;
}
.label{
    text-align: left;
    margin: 5px;
}

.formInput{
    display: flex;
    flex-direction: column;
    justify-content:center;
}
img{
    width: 200px;
    height: auto;
    padding: 15px;
    border-radius: 20px;
}
.imageResults{
    display: flex;
    flex-direction: row;
    background-color: #dff5f4;
    border-radius: 10px;
    width: 60%;
    margin-bottom: 20px;
}
input{
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}
.button{
    padding: 8px;
    margin: 0px 5px;
    background-color: #027a75;
    color: #fff;
    border: none;
    border-radius: 5px;
}
@media screen and (max-width: 720px) {
    .imageResults {
      display: flex;
      flex-direction: column;
      background-color: #dff5f4;
      border-radius: 10px;
      width: 100%;
      margin-bottom: 20px;
    }
    .imageDesc{
        padding-left: 15px;
    }
    img{
        padding: 10px;
        width: 90%;
    }
  }

Link the CSS code you just created to your HTML file by adding the code below to the <head> <head/> in both your HTML files.

<link rel="stylesheet" href="/static/style.css">

Once you have completed the frontend part of the app, the next step is to render the index.html file.

from flask import Flask, request, render_template

Next, let us go ahead and deploy our index.html , We will reuse some the code we created early but instead of returning just a simple sentence we will render the html template. Additionally, we will add “GET“ method to retrieve data in the HTML file.

@app.route("/", methods=["GET"])
def home():
    return render_template("index.html")

Next, we add and call the model on app.py by creating a new function. In our route, we will use the “POST” method as we will read the image URL in the form, pass it though our model and update the image with the colour scheme. Once the function is defined, we then go ahead and read the data from the form.

@app.route('/', methods=['POST'])
def colourPicker():
    imageSelected = request.form['ImageSelected']

API keys and endpoints should be private to prevent access to your resources. Therefore, before we add our API, we will create a .env file. In this file, we will add our keys and endpoints.

KEY=add your primary key here
ENDPOINT=add your endpoint here
LOCATION=add your resource location here

In your requirements.txt file, add python-dotenv. After reinstalling the requirements.txt file, go ahead and add the code below. This will enable us to load values in the .env file we have created.

import os, uuid

from dotenv import load_dotenv
load_dotenv()

Once you have imported your key and endpoint, add the code below to the colourPicker() function. The code will be used to access your endpoint.

        key = os.environ['KEY']
    endpoint = os.environ['ENDPOINT']
    location = os.environ['LOCATION']

    path = '/vision/v3.1/analyze'
    constructedURL = endpoint + path

    headers = {'Ocp-Apim-Subscription-Key': key}
    params = {'visualFeatures': 'Color'}
    data = {'url': str(imageSelected)}

    headers = {
        'Ocp-Apim-Subscription-Key': key,
        'Ocp-Apim-Subscription-Region': location,
        'Content-type': 'application/json',
        'X-ClientTraceId': str(uuid.uuid4())
        }

Next, we make an API call using post on requests then retrieve the JSON response.

        response = requests.post(constructedURL, headers=headers, params=params, json=data)
    response.raise_for_status()
    analysis = response.json()

Once the JSON response is generated, we will then render the palette template to display the response from the Computer Vision Service.

    return render_template(
        'palette.html',
        ImageSelected=str(imageSelected),
        dominantCOLOURS=analysis['color']['dominantColors'],
        accentCOLOUR=analysis['color']['accentColor'],
        blackWHITE=analysis['color']['isBWImg']
    )

Final Result

Hooray, our app is now done ⌛. Go ahead and test the application. I have deployed mine at https://colourpicker.azurewebsites.net/, here you will paste the image URL the generate the colour scheme.

Below are our results and image! Go ahead, push your code to GitHub and share the application you have created to the world.

What’s next?

Live Site: https://colourpicker.azurewebsites.net/
GitHub Repo: https://github.com/BethanyJep/colour-picker-app

💡 Now I can easily generate brand colour schemes in just a few seconds

The application is a basis of many ways you can analyze images and get results using Azure Computer Vision Services. I will continue exploring Flask and add additional functionalities to our app such as the ability to upload an image directly from your laptop. What other fun ways can you customize the app?

Resources:

Now that you have gone on this project journey with me, you can go out and check the following resources for further reading:

Getting Started with Power Automate

Pikachu⚡ — Sat, 19 Feb 2022 16:23:13 +0000

Do you have emails that you want to send out to event registrants? Is it manually tasking to send each of them one by one? Fear not, Power Automate is here to save time and rescue you from doing repetitive tasks repeatedly. One of the joys of having a Microsoft 365 Account is the ability to automate workflows, display applications and analyse data while linking the different apps together. In this guide, I will take you through some automations and processes we made use of as a Game of Learners Ambassadors. Additionally, I will include resources to guide you in your next steps.

Automated Flow: Connecting Forms to Excel

As a community manager, most of the time, you will find yourself collecting data from participants. Some case scenarios for this include RSVP for events, feedback on ongoing programs, registration for different programs and so on and so forth. Let’s take the case for Game of Learners Season applications. As the data streams in over a period of time, you might need to evaluate the data collected or contact the participants. Therefore, you will require to connect the data from the forms to an excel file. How do you do this? Here are the steps involved:

Step 1: go to Power Automate and create a new flow. (Click the create button on your left)

*Step 2: * Create an automated cloud flow. The flow will be triggered automatically when one responds to the form.

Step 3: A flow has a trigger followed by different actions. As you create the flow, indicate the trigger, and give your flow a name

Step 4:

Once your flow is created, you are redirected to continue developing your flow. The designer allows you to add new steps and state what happens at each stage. First, the flow starts when a response is submitted to your form. Therefore, the first step is to indicate which form you want to automate

Step 5: In our case, we’re automating the Game of Learners Season 3 form. We want the flow to run whenever a new response is submitted. Therefore, the next step is to call the response details from the form. This is an action to fetch the responses submitted through the form

Step 6: Once you get the responses, you add them to your excel form. In our case, we will be using the GOL Sn3 Applications Excel file. You will be required to connect to your one drive. As I have the fields in the excel file already existing, I will match the responses to the corresponding fields. In case you do not have an existing excel file, create a new file then add the different fields as columns. After that, convert the excel sheet into a table and connect to the file.

Step 8: You can now test your flow to check if it is working.

Templates: Using pre-existing flows

You do not have to create all your flows from scratch. There are some existing templates you can use to automate your work. For instance, let’s say you want to send emails to learners from the excel file you created above. How do you go about it? Head over to Power Automate, on your left select Templates and search for one that enables you to send emails from a selected excel form. From there you can customize the flow to meet your needs.

Instant Cloud Flow: Sending emails

Once a participant has registered for the event, you might want to reach out to them in future to update them on the event progress. Therefore, the next flow we will be creating will be sending emails. I have created a video for this. Check it out at:

Resources and Next Steps

Learn more on Power Automate Documentation and Microsoft Learn at https://docs.microsoft.com/en-us/power-automate/
Watch Power Automate YouTube Channel: https://www.youtube.com/c/MicrosoftFlow/featured
Build your flows: https://us.flow.microsoft.com/en-us/
Join the power platform community: https://powerusers.microsoft.com/t5/Microsoft-Power-Automate/ct-p/MPACommunity

In my next tutorial, I will cover:

Sending and Signing NDAs via email, once someone sign it updates excel file

Design Case Study: Viusasa Redesign

Pikachu⚡ — Sat, 17 Apr 2021 09:40:36 +0000

every designer has a case study of their design, here is my first.

!Disclaimer I was not hired by Viusasa nor did I receive any payment for the project

I first published this study at: https://bethanyjep.live/blog/viusasa-case-study/

Background

As I started exploring UI/UX design, I became completely lost at some point. One evening, after creating my first multi-page design from scratch, I decided to send a LinkedIn message to Kelvin Kamau to review my design. Fast-forward a few months later, he pushed me to try and redesign an existing app: Viusasa. The Case Study was conducted between August-early December 2020.

Viusasa is a Kenyan digital platform, like YouTube. It distributes a wide range of content. Some of the content includes TV, Radio, news, music, education and other video content. The application was recently revamped, after this Case Study. The revamp included new services such as bill payments, games, shopping and more have. Its greatest offering is it avails content in Kiswahili, English and vernacular languages. All in all, Viusasa lets you consume content on the go, on any device be it Android, Apple or your personal computer.

Role

In this project, I acted as both the User Experience Researcher as well as the designer. Being my first personal project, I did the research, set my own timelines and ensured all designs were ready.

The project was done during COVID-19 period therefore I could not carry out in-person research rather I used online tools and techniques to carry out research.

Design Goal

To incentivize more people to use the Viusasa App
To promote the consumption of local content provided on the Viusasa App
To ease adoption and use of the Viusasa App

Usability testing

First, I evaluated the app on its ease of use using Heuristic Evaluation. Heuristic evaluation uses 10 core principles to determine interface ease of use. I used six out of the ten rules and here is the outcome of my evaluation:

One can clearly tell what is going on
- On onboarding, it is unclear what the site is all about: do you watch the shows? Or is it a renting site?
- The home page is very vague, there are no buttons to tell you what next
- Low contrast on most links, buttons and texts which hinder visibility
Consistency in design elements

Design is very inconsistent throughout the site:

- Buttons have different shades of red
- Navigation bar varies from page to page
- Video/playlist icon is variant, depending on the page

Recognition rather than recall

No clear steps on what to do on the landing page on what next
Users are able to get the help they may need
- There is little text on the whole site
- A new user may not understand some terms used for instance data pass, or cannot easily identify the video they may want to view.
- Another issue is while logging in, you are greeted with advertisements but no clear information on what the site is about.
- The help menu item leads you to a blank contact us page
Design is minimalistic and appealing

One great (or not so great if you don’t understand what is happening) thing about the site is the absence of a lot of unnecessary text.

However, there are too many unnecessary elements:

- Broken image links on articles
- Unnecessary links on the menu which just refreshes the page when clicked for instance: language links like Embu, Kamba
- Too much empty space

Users have control over their actions

Can users navigate out of a place they do not want to be?

- When signing up/registering for an account, there is no clear way out

A more clear presentation on the application heuristic evaluation is found here.

User Research

Having taken Open Classrooms course on conducting user and design research, I embarked in putting into practice what I learnt.

We conduct user research sessions to build empathy for our users and to gain insight that will drive feature development.

On the Apple store, the app has 22 ratings with an average of 2.4 out of 5. There are also 6 reviews, some notable reviews include:

The Android Application has more reviews, with over 20, 970+ ratings, totalling to an average of 3.7 out of 5. Moreover, the application has over one million downloads. The most notable reviews include:

From the research, most of the application users are found on the Android app and the ratings are not very favourable.

User Persona

A persona is a fictional character that best represents your current customer or your target user. Viusasa's audience is not really depicted in their products. However, from their marketing campaigns, I identified two persona groups as below:

Viusasa offers data-pass, a way to use the application without buying data bundles, on two products. One a popular Kenyan Soap, Maria and for students to access its education bundle

Persona-1: Students who use Viusasa as a revision tool

Name: 'Mwakideu'

Age: 13

Occupation: Student

Location: Eldoret

Tagline: As a student, I want to study so that I can pass my exams

Experience Level: Well versed with mobile technology and can easily navigate the app

Frustrations: Schools are closed, Bored as they cannot play out with their friends

Goals: Revise and catch up on their studies

Persona-2: Young ladies, between 18-30 years who use Viusasa to catch up on their latest shows and soaps.

Name: 'Wanjiku'

Age: 26

Occupation: house manager

Location: Nairobi

Frustrations: Once she is done with their chores, she is bored and turns to her phone for entertainment.

Goals: Catch up with her latest shows and find activities she can occupy her time with

Formulated Research Questions

How much time they spend on their phones/laptops?
How do they access the internet: WiFi or Data Bundles?
Do they watch movies? If yes - when, what time and why?
Which sites do they visit? Do you need to pay to access the sites?

User Journey [Design Architecture]

A user journey is used to map how the user interacts with the product.

First, the user Logs-in or signs-up to the application → At the home page the user can view top shows and news → from here a user can choose to a) view more shows or news → b)select a specific article and read news there-in → c) select a show where if it is a series can be able to select a single episode but if is a movie will be prompted to pay to watch the movie → d) search for what he/she wants.

Wireframing

Wireframing consists of sample illustrations on how you would like the application to look. Here are sample low-fidelity wireframes used in the project:

Mood-boarding

A mood board is a collection of designs used to help you gain insights of what your final design may possibly look like. Here is part a mood board I created

existing applications

design inspiration from Dribbble and Behance

Final Design

Below are final design samples

Prototype

The final prototype can be found at https://www.figma.com/proto/R3MLwwWOd8wR0EWLEQdeuG/Viusasa-Project?node-id=14%3A2&viewport=-349%2C439%2C0.09093504399061203&scaling=scale-down

Outcomes and Learnings

During the redesign was I realized the company had already revamped their application. It was a big blow as the whole application changed and I was almost done with my project. Yet, I decided to complete and my initial designs.

I learnt new skills including User Research, Usability Testing using Heuristic Evaluation, Wireframing and Prototyping.

Do you need your current application revamped? Reach out to me on LinkedIn.

Nevertheless, Pikachu! Coded in 2021!

Pikachu⚡ — Tue, 16 Mar 2021 20:59:34 +0000

My most recent achievement was… I will be speaking at Microsoft Reactor TelAviv. It's not an achievement yet, but that's how I view my achievements; my next big thing!

Advocating for myself looks like… creating. Building and breaking code or designs or communities gives me confidence and (re)builds up my self-esteem.

My biggest goal is… my mission. Recreating stories, enhancing lives. We'll definitely need another blog post to dive into this.

My advice for allies to support underrepresented folks who code is... create. Create the space you want to be. Create the future you want to see :).