Category Archives: Uncategorized

Ionic: Getting Started

https://enappd.com/blog/qr-code-and-barcode-scanning-with-ionic-capacitor/127/

 

 

In this post we’re going to take a look at setting up Ionic for development. We will install it, create a new project, break down the project, and run it locally.

Before we start however, I recommend you run through my nvm post in order to follow along a bit easier. To make sure we are using the same version of npm.

So you might be wondering what it Ionic? Ionic is …. WHAT IS IT?

New App

Magic Mirror

Apologies this post has taken longer than I expected to get out. Its a bit different from the others as its about a specific project.

I decided to give making the Magic Mirror a go. It was my first (and I expect not my last) DIY project and I must say I really enjoyed doing it. I’ve been wanting to do it for a while but as with many people the first road block instantly made me move onto the next thing to do. Not very productive right?

So this time round when the urge to make it took me I put myself on the spot, I told my fiance I’d make it for her as a gift for her birthday, though I didn’t tell her exactly what it was only that I was making something myself.

So what is the Magic Mirror? If you haven’t checked out the above link I’d recommend you do they can probably explain it better than me. Essentially it’s a mirror that gives you information, be it the time, weather, news headlines, and a lot more. The image below shows my end product :

Magic Mirror

What I needed to make the Magic Mirror was:

  • A Monitor
  • A Raspberry Pi
  • A Frame
  • A Two-way / See through mirror
  • Wood
  • Tools

The Monitor

The monitor I used was Iiyama ProLite E2207WS, mainly because I’ve had it for years and wasn’t doing anything with it.

Monitor

First thing I needed to do was get the frame off it, which wasn’t as bad as I thought it would be. Was quite worried I’d end up damaging the buttons but it worked out well. You do definitely need to be careful not to damage them as you may not be able to use the monitor if you do.

Monitor – No Frame
Monitor – Buttons

If you don’t have a monitor lying around make sure you get one where the HDMI connector would not be facing the wall. They should be facing towards the floor if the monitor was standing up right. Another useful option for the monitor would be to ensure it has a USB port capable of powering a Raspberry Pi, that way you only need to worry about one cable. Unfortunately for me my monitor did not have a USB port so I have two cables on display.

Raspberry Pi

I think it’s recommended you use the Raspberry Pi 3 to make the Magic Mirror but again I had a Raspberry PI 2 Model B+ lying about the house that I wanted to do something with. So instead of buying a new Raspberry Pi I just used that instead (and now have an excuse to get the Pi 3). There wasn’t really much to this bit to be fair, those behind the Magic Mirror software make it very easy to get things installed and moving, this is what you need to do:

Update OS

Generally its considered best practice to ensure your OS is up to date before you get started.

Install MagicMirror²

Open a bash terminal

Run the following:

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

This will pull down and install everything we need to get the MagicMirror up and running. Once complete you should be presented with the MagicMirror UI.

The next thing you can do is modify the configuration slightly to better suit your needs. For example

  • Update the news feeds to a provider of your choice
  • Update the weather to your location or one you are interested in
  • Update the Calendar to your own
  • You can also add additional modules:
    • For information on this please check out the GitHub page here

Now finally for the Pi we need to make sure the Magic Mirror starts for us on boot. It is recommended to use PM2 for this.

Setting up PM2

First, we need to install it; so run the following from terminal:

sudo npm install -g pm2

Second, we need ensure PM2 starts on boot; run:

pm2 startup

Once that is finished, run the command it shows you.

Next up we need to add a start script for our Magic Mirror, it is recommended to put this script in the Magic Mirror directory (and its just cleaner)

cd ~
vi mm.sh 

If you’re not experienced with ‘vi’ try ‘nano‘ instead. Now we want to add our startup commands

cd ~/MagicMirror
DISPLAY=:0 npm stat

Save and close vi. Ensure script is executable by running:

chmod a+x mm.sh

Now lets start MagicMirror using PM2; run:

pm2 start mm.sh

MagicMirror should now start up. Once it does press the super key + tab to navigate back to your terminal and run the following to ensure PM2 starts your MagicMirror on boot.

pm2 save

That’s it, our software side of things is complete next up lets check out the Mirror itself.

The Mirror

The mirror was one of the things that stopped me going forward in the past. I’d spoken to a local Mirror shop and they made it sound like getting the two way sheet/glass was going to be really difficult. Annoyingly if I’d just taken a look on the web I’d have found it. This time round I took to Amazon a tried to hunt something down, luckily I found a seller called Sign Materials Direct who sold something along the lines that I needed.

Unfortunately they didn’t sell it the size I needed as the sheet needs to match the monitor. Luckily, again, however someone had had a similar issue as me and had asked the question about customisation. Turns out they can cut the material to “any shape or size” you need. So I got in touch with them at the email address in the link (who got back to me very quickly) and within a few days I had my custom cut sheet that fit perfectly.

If you’re in the UK I would highly recommend you give them a try, I was really happy with the price and speed.

Also best to add I’m not affiliated with Sign Materials Direct, just a happy customer.

Custom Cut Acrylic Mirror

The Frame

At first I was thinking I might make the frame myself as I was going to have to make a housing unit to put the monitor in and then attach it to the frame anyway. Then I realised, I am neither a carpenter nor an artist and threw that idea a way.

We have a large Mirror in our living room and thought getting a matching frame would look quite good. So off to the local Mirror shop I went again, that’s where the larger mirror came from, and that was a no go as their supplier doesn’t do custom sizes. But moving on anyway I gave the internet a go and found a company who make custom frames and thought they looked really nice. So I got the frame from there.

Frame

Now I was a bit worried about was may be I’d measured something wrong or had typed something wrong, made a “school boy error” or one of the pieces didn’t fit right etc. But nope it was all good, the frame and Mirror fit perfectly.

Frame and Mirror

The Wood

The next step was to get some decent wood and cut it to house the monitor and Raspberry Pi. I didn’t have a saw so this was a pretty good excuse to get an over the top tool for the job right?

The wood I used was Redwood planed timber, apparently normally used for door frames. But did the job quite nicely in this instance. Unfortunately I didn’t take any pictures for that part which may have been the most interesting, wood cuttings everywhere and a large circular saw.

Anyway I ended up with a bit more than I needed, mainly because I cut one piece slightly too small so had to go buy some more. Though I’m sure I’ll be needing to cut it for a shelf or something… or to just cut it. So got the wood cut to the right size, screwed the pieces together, and painted the whole thing white. Eventually, once dried, got the housing unit attached to the back of the frame with perhaps a few too many screws than was needed but better safe than sorry right?

One thing I would add if you decided to do this yourself, I can’t imagine the unit would get too hot but I drilled two large(ish) holes into the top of the housing unit to allow some kind of air flow just in case. I’m not planning on leaving it powered on all the time but I would say it’s worth putting the holes there.

On the wall

The final job, getting it on the wall. This step was easier to do than I thought it would be as the wall had a large screw in it already for the Magic Mirror to rest on all I needed to add was something to stabilise it. This was done by adding some 90° hooks to the underside of the Housing unit to give the overall structure more support. I may add some more hooks to the top of the housing unit to make sure but it is certainly well secure now.

Finally

Well thanks for sticking all the way through this post. I know it’s not my normal style but I thought I might try adding this as it’s the first project I gave a go and am quite pleased with the results. The fiance really likes it so that’s good.

With all the modules available for the Magic Mirror and no doubt some more really cool ones that will come out the in future I’m going to add to what I’ve got so far. Things like facial recognition, Alexa integration, calendar notifications, and there’s plenty more.

Hopefully you decide to give it a go yourself and if there’s anything I can help with please get in touch.

Setting up a Visual Studio 2017 Environment

Intro

Hey all, so today I’m going to give you a quick run through for setting up a development environment using Visual Studio 2017 Community on Windows 10. There will be a tutorial on how to do this on a Linux environment with a different IDE but for now as I will be focusing on Visual Studio for development.

Not much else to say there, let’s get into it…


Steps:

Up to date Windows 10

The first thing we want to do is ensure that our Windows 10 development machine is up to date.

  • This can be found in Settings -> Update & Security -> Windows Update

Download Visual Studio 2017

Now we are happy our machine is up to date next we want to download the Visual Studio 2017 installer. So the next thing we want to do is download Visual Studio 2017

  • There are other versions available for those with the required Key or Subscription level, they are:
      • Visual Studio 2017 Professional
    • Visual Studio 2017 Enterprise

We will only be looking at Community Edition, but the steps will be the same.

Install Visual Studio 2017 Community Edition

  • Once you’ve downloaded Visual Studio lets install it

  • Double click on the installer
      • You’ll find it in your Downloads folder normally set to ‘C:\Users\<Your Username>\Downloads’
    • You may need to approve the installation via the User Account Control authorisation window. I assume as you are here you’re happy to install Visual Studio 2017, so click ‘Yes’

  • Next up will be to review Microsoft’s Privacy Statement and Software Licence Terms
    • Pretty standard stuff.
    • Click ‘Yes’

  • The Installer will then fetch and install some additional dependencies

  • So, now we get to configure our Development Environment. For our purposes I’m only going to choose those components we MAY want to use in the future, that is components I intend to use in any posts I make. You can, of course, install any components you wish outside of my choices. So we will want:
      • .NET desktop development
      • Desktop development with C++
      • Universal Windows Platform development
      • ASP.NET and web development
      • Azure development
      • Python development
      • Data storage and processing
      • Mobile development with .NET
      • Visual Studio extension development
    • .NET Core cross-platform development

NOTE: You will need to ensure you have enough space to install the components. Please see the red box the above image it shows the ‘Total space required’ for your configuration.

    • You can change where you want the installation to go, see the green box in the above image
      • In some cases, some of the components will have a set installation path which you cannot change.
  • That’s it, for now at least, the Visual Studio Installer will now install Visual Studio, this will take a little while. Could be worth grabbing a brew or something and if you haven’t done so already check out some of my other posts.

Start Visual Studio 2017 Community Edition

Great, so Visual Studio should now be installed for you, I recommend you restart your machine but it’s not necessary. Let’s open Visual Studio now then, there’s a couple of ways to do this:

  • Start Menu
      • Open the Start Menu using the Windows key
      • Scroll to ‘V’ named apps
    • You will see ‘Visual Studio 2017’, click it.
    • Desktop Shortcut
        • Navigate to your desktop, press Windows Key + D
      • Double click, ‘Visual Studio 2017’
  • Search bar
      • Open the Start Menu by pressing the ‘Windows Key’
      • Type ‘Visual Studio 2017’
    • Visual Studio 2017 will now be in the Start Menu Best match options

There will be some configuration we need to do as part of our first startup

  • You’ll be asked to sign in to your Microsoft account if you have one.
    • If you don’t, I’d recommend you get one and sign into it.
    • If you do, sign in
      • Especially if you have an MSDN subscription
  • Next up and nearing the end, some simple IDE configuring
    • Leave Development Settings as ‘General’
      • Though feel free to look into this in more detail and selection and option more suitable for your plans
    • Then choose your Color Theme

We are done, Visual Studio  2017 will now be installed and you can take a look round if you want.

Hopefully, my steps were useful and you managed to install it. If you have any problems feel free to get in touch and I’ll help in any way I can (though I imagine you’ll likely google any issues).

Next up then we’ll make a very simple C# application, should be out shortly.

What is a Program?

What is a Program?

We’re going to look at some rather interesting stuff today. If you’ve read my other posts you’ve probably been thinking “When are we going to start coding dude?” but I wanted to give you at least a small introduction to the larger picture before getting stuck into actually writing any code, don’t worry though we’ll be looking into that shortly

So today I wanted to take the time to look at What a Program is (see What is Computer Software? for more information) and how we can create them. I hope you enjoy this part of your introduction I know I did quite a few years ago.

What is a Program?

Essentially, a program is just a set of instructions given to a computer to solve some problem or to perform a task. So if we wanted to work out someone’s annual business mileage, we would do the following.

  1. Ask the user “How many miles do you drive for work per day?”.
  2. Wait for the user to provide us with the number of miles.
  3. Store that number in memory using something called a “variable”.
  4. Ask the user “How many days in a year do you work?”.
  5. Wait for the user to provide us with their days.
  6. Store that number in memory using a variable.
  7. Create the user’s mileage by multiplying the number of miles by the number of days, also stored in memory using a variable.
  8. Display the annual mileage to the user on the screen

As a whole, the above steps would be called an algorithm (we’ll be looking at Data Structures and Algorithms in the future). For right now an Algorithm is just a collection of clear logical steps used to solve a problem or to perform a task. As you can see we perform the above steps in the order given and we will get the output we expect, while some elements could be rearranged we can’t perform steps 7 and 8 before steps 1-6.

One thing we must be absolutely clear about is that a computer does ONLY what we tell it to do, unlike us (humans) it does not interpret the meaning of things, it does exactly what it is told to do. So how do we use the above steps to tell a computer how exactly to do what we want, there are a few steps involved:

  • The first is we need to use is a programming language to put our intent into a human-readable format using code
  • The next is to convert out intent into a format the computer can interpret
    • This has several steps:
      • In some languages, we turn it into something called object code
      • Then we convert the object code into a machine-readable language, 0s and 1s called binary or machine code.

What is a Programming Language?

A programming language is just a way in which a human can provide their intentions to a computer. We have two categories of languages that we use:

  • Low-level
    • This language category resembles something closer to Machine Language
  • High-level
    • These languages resemble something closer to a human language

Low-Level Languages

We won’t be looking into these languages (for now at least anyway) but as mentioned these languages tend to resemble Machine Language and for a lot of your programming tasks won’t be something you need to have a great understanding of. Having said that it doesn’t hurt to have a quite overview.

Depending on how low into the Low-level category we are, the code itself may run directly on the computer, being executed by the CPU (check out my post on Computer Hardware if you haven’t already), and this would be called Machine Code, there are some further steps such as Microcode, I won’t be going into that but feel free to check out google if you’re interested.

We also have Assembly Language, this is classed as any low-level language that has a strong relationship with a program and the machine code instructions. As mentioned, I don’t intend to look at this in much more detail but we’ll see how things go.

High-Level Languages

Now that we’ve had a, very brief, look at Low-level languages lets check out some more high-level stuff. There are a lot of high-level languages that have been developed over the years and we’ll discuss the differences between the language types later:

Language Description
C A general purpose language. Developed by Dennis Ritchie for Bell Labs between 1969 and 1973. Many languages are related in some way to C.
C++ A general purpose language and based on the C language. Developed by Bjarne Stroustrup in 1979 to add “classes” to C. We’ll check out classes in a later post.
C# A general purpose language and is part of the C family of languages. Developed by Microsoft and used with the .NET platform.
Java A general purpose language developed by Sun Microsystems and now owned by Oracle. This language is not linked to JavaScript
JavaScript A general purpose interpreted language and is one of the core technologies involved in the World Wide Web. Originally designed by Brendan Eich at Netscape. This language is not linked to Java.
Visual Basic An event-driven Windows-based programming language used to create applications quickly. Developed by Microsoft and used in the .NET platform.
ADA A general purpose language used predominately within the defence and aviation sectors. Named after Augusta Ada the Countess of Lovelace who is regarded as the first programmer.  Developed by the US Department of Defense in the 1970s
Ruby A general purpose interpreted language quite popular with programs running on web servers. Developed by Yukihiro “Matz” Matsumoto in the mid-1990s.
Python A general purpose interpreted programming language. Quite popular in commercial and academic domains. Developed by Guido van Rossum in 1990.

High-level languages allow humans to provide instructions to computers in a format that we find easier to associate with a written language, such as English, which is considered the universal language of software development with almost all code being written using English text. I’ll be primarily using C# and C++ through my posts but may occasionally use Python, Java, and JavaScript just to add some variety to life.

Ok, so we’ve seen some information on low-level and high-level programming languages but what exactly is involved in creating a program. Let’s take a look:

Most programming languages have a lot of similarities:

Language Component Description
Key Words Keywords can only be used for specific purposes, they are words defined as part of the language and have a special meaning. They are also called Reserved Words.
Developer Defined Identifiers These are symbolic identifiers defined by the developer of the program. 
Punctuation Punctuation is used to identify the beginning and end of statements or separate items.
Operators Operators are used to perform actions on pieces of data known as Operands
Syntax Syntax defines the rules that must be followed in order to create a program. The rules determine how the above Keywords, operators, punctuation, and developer-defined identifiers can be used. 

Simple Program: Hello World

So now we’ve got a decent overview of programs and what is involved let’s create a very simple, and pretty standard first, C# program and look at the parts.

namespace WhatIsAProgram
{
  class Program
  {
    static void Main(string[] args)
    {      
      // First assign the text we want to display to a variable
      string outputText = "Hello World";

      // Next use the language provided features to send 
      // our text to the console.
      System.Console.WriteLine(outputText);
    }
  }
}
Key Words:

We have a couple of keywords defined within this simple program including:

namespace, class, static, void, string

These words within C# have special meaning and can only use for that purpose.

namespace

Used to organise code and wraps anything within a namespace removing the risk of conflicting names.

class

Used to create a class, I’ll be putting a post out on object-oriented programming (OOP) so will cover this in more detail, but a class is a blueprint, with state and behaviour, for something we want to represent within our code. Such as a car, person, or book, take a car the state could be speed and mileage and behaviour would be Increase Speed and Increase Mileage.

static

This is a little complicated but static means we are referring to the type and not to an object we’ve created. So if we had multiple objects with a static state, each object would reference the same state. Again, once we’ve done some OOP it should be clearer.

void

We can use blocks of code to perform tasks for us in some cases the code may give us something back and in others, it won’t. Use in this context void keyword tells the program nothing is given back.

string

string is a class, notice we are using string in two places, first at line 5 then at line 8. At line 5 we are saying, this block of code will receive multiple separate strings (defined by the use of []) and in line 8 we are saying I want to create an object and it will be of type string.

Don’t worry too much if a lot of the content here is confusing, as we progress and more of the holes are filled in the concepts will begin to fall into place.
So as described the keywords above have a special meaning and we use them to get specific functionality from the C# programming language.

Developer Defined Identifiers:
This one is a little more straight forward, there are 3 (technically 4) developer defined keywords within our small program. Developer defined identifiers relate to the parts of the component the developer has control over to define the names of such as classes, methods, namespaces, and variables. We can name these almost anything we want EXCEPT for the Keywords mentioned above, the main goal, however, will be to ensure you give them meaningful names but this is a whole other topic that we will be returning to in the future.

WhatIsAProgram

This allows us a means of identifying the name given to the wrapper around our code.

Program

The name given to our class, again keep an eye out for the Object Oriented post and we’ll go into much more detail there, but the use of Program here is simply convention.

outputText

This is the name we’ve given to a variable, think of this as a container which can only hold text and we can identify that container by use of its name. We will be looking at this in more detail shortly.

Additional

Main

The text ‘Main’ identifies the name of something called a method, while method names are developer defined this is a unique case, in C# when we convert our code to be closer to low-level ( this is called ‘compiling’) and usable by the computer that process requires ‘Main’ to be available, for executables, and is used as the entry point of our program. That means every single C# program MUST have a Main method in order for the program to be compiled.

Punctuation:

Nice simple one here, punctuation is simply a means for developers to show the end of a code statement or to identify separations within a list. So in our example lines, 8 and 12 show the use of punctuation in the form of a semicolon, representing the end of those code statements. At the moment it may be confusing because as you can see not every line shows a semicolon but remember they are only used to show the end of a code statement.

Operators:

In our example we only have one operator in use:

=

This is called the assignment operator, it takes the value on the right-hand side and stores it in the left-hand side.
There are many other operators available, (Quick Note: We follow the rules of BODMAS (google for a refresher)):

*

This is called the multiplication operator, it multiplies the two values. Normally used in conjunction with the assignment operators. e.g.

int result = 3 * 4

The value of result would be 12.

/

This is called the division operator, it takes the value on the left and divides it by the value on the right. Normally used in conjunction with the assignment operator. e.g.

int result = 8 / 4

The value of result would be 2.

+

This is called the addition operator, it adds the two values. Normally used in conjunction with the assignment operator. e.g.

int result = 5 + 2

The value of result would be 7.

-

This is called the subtraction operator, it takes the value on the right and subtracts it from the value on the left. Normally used in conjunction with the assignment operator. e.g.

int result = 8 - 3

The value of result would be 5.

We’ve got many more but we’ll look at them in good time.

Syntax: 

So as mentioned the syntax is the rules we must follow in order to create a program. As with natural languages we have rules we must follow in order to create a correctly formatted sentence, the same is true for programming languages. Each programming language has its own sets of rules, much of them shared. Especially with those, I’ll be showing, C++ and C#, and as I post more hopefully these rules will become apparent. We could go through them but I think that would get tiresome quite quickly and we can learn by doing really.

So there we have it a somewhat longer overview of What a Program is than I was expecting however I think this gives us some good details to move forward with. Next up lets setup our machines so we can create some programs…

I welcome feedback, especially at this very early stage, so any improvements you think I can make please get in touch either in a comment below or send me a message and I’ll get back to you.