DEV Community: Shane Kunz

On Having a Clean Digital Workspace

Shane Kunz — Sun, 05 Apr 2020 19:39:09 +0000

We often put a lot of focus on keeping our physical workspaces clean. We remove clutter, tidy up cords, remove dust/spills, etc, but we often don't put a lot of emphasis on cleaning our digital lives.

The Importance of Digital Cleanliness

For anyone in an IT position, having a clean digital workspace can save you incalculable time and stress. The less files you have on you desktop, the more clear minded you can make yourself. You might not realize it, but looking at those files a few hundred times over the course of a few weeks can stress you out.

When I start new jobs I create a new /projects folder near the root. Any requirements docs, important emails, or notes get filed away in the correct folder. So when business analysts, project managers, or other developers ask questions about a specific project, I often have the information to help them.

Take time to narrow done the tools and bookmarks you rely on. Your bookmark tool should only have the links you use regularly. You can often delete programs you no longer use, startup less processes, or consolidate multiple old programs into one new multi-use program. Also, do you really need to have 25 browser tabs open? It may be time to let go, and feel the thrill of permanently deleting your junk and clutter.

Digital Minimalism

Realize that life is more about saying no than saying yes. Your life will consist of countless opportunities, but what really matters is saying no to the garbage, and saying yes to the diamonds. Organizing your digital life can help you focus on the stuff that really matters.

I Finally Found The Perfect Linux Distro

Shane Kunz — Mon, 03 Feb 2020 08:39:05 +0000

I've used MAC and Windows a lot, but I never got into Linux. That all changed 2 days ago.

I installed Pop!_OS overwriting my Windows installation, and have no regrets so far.

Pop!_OS was made with developers in mind. Many popular development tools are pre installed. Downloading and installing other popular tools is easy using the Pop!_Shop, or by following along with simple Ubuntu installation instructions.

Here are some of the reasons it's awesome:

It comes pre installed with AMD/Nvidia GPU drivers that have Vulkan & OpenGL support.
All Windows games are now available on Linux because of new easy to install tools. The Pop!_Shop allows you to download apps like Steam with Proton, Lutris, and Wine in one click.
The Linux Terminal is better than cmd for coding. VS Code works perfectly and is available in one click using the Pop!_Shop.
All the Windows apps you use are likely already available (like Steam, Spotify, and Discord) via the Pop!_Shop.
The UI is much simpler than Windows, but more powerful than Windows.
It's much faster and less bloated than Windows.
It takes up less hard drive space than Windows.

You can install Pop!_OS onto a flash drive with balenaEtcher in just a few clicks.

Scraping Yelp and Facebook with Node. Displaying data with ASP.NET Core

Shane Kunz — Mon, 27 Jan 2020 06:30:12 +0000

I spent today adding a feature to StunodsPizza.com's homepage to show all their positive customer reviews. We wanted to fix up their web branding today and add the reviews feature in expectation for the slow winter season.

You can find the scraping code here: https://github.com/shaneMLK/scrape-facebook-and-yelp-reviews.

Steps

Scrape all positive reviews from a Yelp and Facebook page with a Node.js script.
- This includes grabbing the reviewer's name, avatar image, review text, and source of the review (Yelp or Facebook) and generating a .sql insert script.
Create a database schema and insert all the data into a Azure database.
On the front end, show all the reviews in a Swiper.js carousel on the homepage using Razor.
- I want them to be randomly shuffled on page load.

Step 1: Scrape the data with Node.js.

I started with a git repo I had used recently hacker-DOM's github-by-stars project.

The result was this: scrape-facebook-and-yelp-reviews.

You have to download the pages you want to scrap using browser dev tools. The reason for this is to grab any data dynamically loaded on the client side. You then run the program against the HTML files (npx nodemon index.js), and out will come SQL insert statements you can put in a database. You can also upload the avatar images to something like Azure storage or S3 AWS buckets to grab the images on a production site.

For example, I visited the company's Facebook page, inspect the page with the inspector, right clicked on the root <html> tag and clicked "copy" -> "Outer HTML". I pasted that into a file named FacebookReviews_1-26-2020.html in a folder /html_scr. I made sure the file was referenced correctly in the /src/retreiveFacebookReviews.js file on line 7. The project uses a library called cherrio, that allows us to access the DOM of the html file as if we were using jQuery. Line 8 sets this up const $ = cheerio.load(res).

I ran npx nodemon index.js to generate .sql insert scripts I need to setup the database schema.

Step 2: Setup your reviews database schema with Entity Framework and a Azure database.

In my ASP.NET Core project within a /Models/ReviewContext.cs file, I put the following code:

using Microsoft.EntityFrameworkCore;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace MyProject.Models
{
    public class ReviewContext : DbContext
    {
        public ReviewContext (DbContextOptions<ReviewContext> options)
            : base(options)
        { }
        public DbSet<Review> Reviews { get; set; }

    }

    public class Review
    {
        public int Id { get; set; }
        public int UserId { get; set; }
        // UserId turned out unnecessary
        public string ReviewText { get; set; }
        public string UserName { get; set; }
        public string Source{ get; set; }
    }
}

Side note that within the Startup.cs in the ConfigureServices method, I have the following line...

services.AddDbContext<ReviewContext>(options => 
options.UseSqlServer(
Configuration.GetValue<string>("AppSettings:StorageConnectionString")));

... which allows me to keep my Azure database connection string in my appSettings.json as StorageConnectionString. This string will now be what entity framework uses to update the database schema.

I run dotnet ef migrations add "ReviewsMigration" to create a migration. A migration is just a list of un-run steps to update a database.

Then I run dotnet ef database update to actually update the database's schema. Note that if you have a appSettings.Development.json, the update will run on that file's StorageConnectionString, not appSettings.json's StorageConnectionString field.

Step 3: Display the reviews on the front end using Razor.

Within /Views/Shared/_Layout.cshtml I include the Swiper.js javascript and styles.

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

The _Layout.cshtml file is what wraps all my views. The method @RenderBody() is where my inner views will render.

I edited my Index function in the HomeController to pass all the reviews to the Views/Home/Index.cshtml view by using return View(_context.Reviews.ToList().Shuffle());. But in order to have access to the database context, we need to use dependency injection. At the top of the HomeController class we use the following code to tell ASP.NET to pass the database context.

        private readonly ReviewContext _context;

        public HomeController(ReviewContext context)
        {
            _context = context;
        }

The shuffle method is an static extension method to the IList type which is declared outside the HomeController class but within the same file. It simply randomizes the order of the reviews:

   public static class ShuffleExtension{
        public static IList<T> Shuffle<T>(this IList<T> list)  
        {  
            Random rng = new Random();
            int n = list.Count;  
            while (n > 1) {  
                n--;  
                int k = rng.Next(n + 1);  
                T value = list[k];  
                list[k] = list[n];  
                list[n] = value;  
            }
            return list;
        }
    }

At the top of the homepage view (/Views/Home/Index.cshtml) I write @model List<Review> to declare that the view is expecting a list of reviews. Our reviews carousel is going to be a separate partial view block, so we render it using @await Html.PartialAsync("_ReviewsBlock", Model) within the /Views/Home/Index.cshtml.

Within the /Views/_Shared/_ReviewsBlock.cshtml, I grab some AppSettings values and declare that the block is expecting a list of reviews as well.

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@model List<Review>
@{
    var AzureBlobStorageAccountName = Configuration.GetSection("AppSettings")["AzureBlobStorageAccountName"];
    var AzureBlobStorageContainer_Users = Configuration.GetSection("AppSettings")["AzureBlobStorageContainer_Users"];
}

The appSettings.json values are just from Azure's blob storage service. I have a container just for user avatar images on the reviews. I've allowed the blob storage container to be accessed anonymously. I upload the images straight from the node project's /output folder to the Azure container. I can then access them all from the view like so... https://@(AzureBlobStorageAccountName).blob.core.windows.net/@(AzureBlobStorageContainer_Users)/@("user_review_img_" + review.UserName.Replace(" ", "_") + ".jpg")".

I used the Swiper.js get started guide to craft the carousel.

The main html structure is

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

... and Swiper handles a lot of the styling for us with these classes.

I loop through the reviews and render carousel slides:

@foreach (var review in Model)
{
    <div class="swiper-slide">
    . . . 
    </div>
}

Within the carousel I can display the review data using @review.UserName, @review.Source, and @review.ReviewText.

Lastly, there's a <script> tag to initialize the carousel after the page is done loading...

<script>
    $(document).ready(function(){
        var mySwiper = new Swiper ('.image-slide .swiper-container', {
            direction: 'horizontal',
            loop: true,
            slidesPerView: 1,
            autoplay: {
                delay: 3000,
            },
        });
    });
</script>

I specify .image-slide .swiper-container as the selector to make sure it doesn't conflict with other .swiper-containers on the page.

After some styling with some heavy use of CSS Flexbox, I think the result turned out simple and effective.

Setting up an ASP.NET Core Restaurant Website with a Vue.js Online Ordering Page.

Shane Kunz — Sun, 26 Jan 2020 12:30:55 +0000

I went ahead and installed .NET Core 2.2. I used a starter pizza related bootstrap 4 theme from colorlib for base CSS, with the only license requirement being a link to colorlib in the footer.

Once I had customized the pages and stylings, I started to build a Vue.js powered online ordering page. I used entity framework to build a database schema in an MS SQL Azure database.

I downloaded the Vue.js library file and put it in the /wwwroot/js which I include in the /Views/Order/index.cshtml file at the bottom as:

<script  src="~/js/vue.js"></script>
<script  src="~/js/orderpage.js"></script>

Views/Order/index.cshtml is the root Vue.js Template.

I initialize the root Vue.js instance in the /wwwroot/js/orderpage.js file with a function call similar to this:

var  app  =  new  Vue({
    el:  '#app'
)};

In the Vue.js initialization function call above, I set the data, computed, filters, methods, and a mounted life-cycle hook.

This is how the order page Vue.js app looks with the styling and after the Vue initialization has finished:

I include
<script src="https://js.stripe.com/v3/"></script>
in the /Views/Shared/_Layout.cshtml.

On the second step, checkout, if a user has selected credit as payment, a stripe credit card input appears because of the inclusion of following logic at the bottom of /wwwroot/js/orderpage.js:

$(document).ready(function () {
    stripe  =  Stripe($('#StripeApiKey').val());
    var  elements  =  stripe.elements();
    card  =  elements.create('card');
    card.mount('#card-element');
    card.addEventListener('change', function (event) {
        var  displayError  =  document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent  =  event.error.message;
        } else {
            displayError.textContent  =  '';
        }
    });
});

The checkout step looks like this:

The Controllers/OrderController.cs houses all of the Ecommerce logic and APIs. I should probably split it into smaller files, but I haven't felt the need to yet.

The public IActionResult PlaceOrder(OrderParam order, bool pos = false) method is the entry point to placing an order. This method calls a lot of private methods, because if all the code was in one method, it would be too long. It does data validation based on certain options the customer selected. If the customer selected delivery, it will ask Google Map's API if the distance between the customer and the restaurant is less than a certain amount of miles.

The method private bool ValidateOrderPrices(OrderParam order, bool isPOS) validates the user's supplied cart prices to see if they match the prices in the database. isPOS tells the method if it should expect a delivery fee.

I charge the customer via Stripe if the customer selected the credit payment type and they are on the customer facing website online ordering system (http://stunodspizza.com/order)

The following code creates a Stripe charge:

var  options  =  new  ChargeCreateOptions
{
    Amount  =  Convert.ToInt32(order.total*100),
    Currency  =  "usd",
    Description  =  "Stunod's Charge for "+order.email,
    Source  =  order.stripeToken,
    ReceiptEmail  =  order.email,
    Metadata  =  metadata
};
var  service  =  new  ChargeService();
try{
    Charge  charge  =  service.Create(options);
}catch(Exception  exception){
    return  Json(new{Success  =  false, Message="Unable to process credit/debit card."});
}

If the user did not select credit as a payment method, or the Stripe payment was successful, the order is saved to the database using the method private int SaveOrderToDatabase(OrderParam order, bool placedOnPOS).

The PlaceOrder method also generates emails by using replace string methods on text files for dynamic data. If the business has emails listed in the /appSettings.json, they will receive receipt emails. The customer will also receive an email receipt if a customer email was supplied in the order.

Text messages are also sent to business and/or customers via a simple Twilio API.

Within the PlaceOrder method, a PDF is generated with certain thin width dimensions using the library PdfSharp. This PDF gets sent via HTTPS to a python development flask server. The server gets booted by the client by double clicking a .sh file on a raspberry pi desktop. The .sh script also runs a noip library for use as a DDNS service. This allows the web app on Azure to send the PDF receipt to a URL that stays aware of the printer's router's IP address. The python development flask server receives, downloads, and prints the PDF receipt using CUPS and a nice print driver for the restaurant's TM-T20II POS Thermal Receipt Printer connected to the raspberry pi via USB. If you're interested in the printer setup, please check out the raspberry-pi/README.md when I release the source code at the end of this dev.to series.

Coming up next: a Vue.js CLI App walkthrough and tutorial

I walk you through building a web app that's a full point of sale, a
order history management app. a sales reporting app, and a Ecommerce CMS with
functionality for editing hours and menu items. The whole projects is in
a nested folder setup with the Vue
CLI. When we run yarn build it will
place our Vue app in the /Views/POS/index.cshtml with its assets in
the /wwwroot/js and /wwwroot/css folders. Both our
development and production builds will be able to hit API functions in
the /Controllers/OrderController.cs by use of the
/pizza-pos/vue.config.js.