Author: Manatee

Part 3: How to Install and Use PostGIS with Postgres via pgAdmin 4

Part 3: How to Install and Use PostGIS with Postgres via pgAdmin 4

For one of my apps, I was responsible for the database, and there were some tricky things with Postgres! This post is part of a tutorial series on how to use Postgres!

Note: I also use Windows 10 and hosted my Postgres database on Digital Ocean, so I will be covering all the tricky parts I ran into!

This is the third post in the series, and this is on how to install and use PostGIS with Postgres via pgAdmin 4. This tutorial leaves off from Part 2: How to Install pgAdmin 4 on Windows 10.

For this post, I referenced a great Youtube video called Boston PostgreSQL Group: Introduction to PostGIS Part 1 of 4. This video was a great resource, and they have a great website with a great tutorial. But tech advances quickly, and the video is from 2013, so a lot has already changed! The basics are still there, but my blog post should be a quick and updated guide for 2017. I also ran into small blips with Postgres 9.6 and pgAdmin 4, so I cover how to get around those blips as well!

Part 3: How to Install and Use PostGIS with Postgres via pgAdmin 4

  1. Open pgAdmin 4
  2. Right-click on PostgreSQL 9.6 and select “Create Database”
  3. Name the database (I named mine ‘postgis_test’). I kept the user (owner) as the main user ‘postgres’
    1. Create your Database
  4. You will now see the database you created under “Databases”
    1. You can see your created Database under Databases
  5. Click on the name of your database. For example, I clicked on ‘postgis_test.’ Submenus come up. Right-click on ‘Extensions’. A dropdown menu will appear. Select ‘Create’. Then select ‘Extension’.
    1. Select extension, then create, then extension
  6. A screen will pop up. Click into the ‘Name’ section. It will load a list of extensions you can add to your Postgres database. You can type in or you can select the ‘postgis’ extension
    1. 4
  7. You could have ran the SQL command for this as well, which you can see when you click on the ‘SQL’ tab of this pop up.
    1. Add PostGIS extension to Postgres database
  8. Click ‘Save’. Now in the left hand file tree, you should see under extensions ‘plpgsql’ and ‘postgis’
    1. Add PostGIS extension to Postgres database
  9. In older versions, there was an easy way to access the Postgis GUI via pgAdmin 4, but when I downloaded it (they may have fixed it by now), there wasn’t a command or menu to get to the Postgis GUI, so if you are like me, and you cannot find the Postgis GUI in pgAdmin, go to Local Disk (C:) > Program Files > PostgreSQL > 9.6 > bin > postgisgui. Double-click shp2pgsql-gui.exe.
    1. Where to find PostGIS GUI
  10. The PostGIS GUI (or Shapefile Import/Export Manager) loads up. It looks something like this:
    1. Postgis GUI
  11. Next you want to load your shape files. I was following the Youtube tutorial, so I got my shape files from the Massachusetts MassGIS website. Like the tutorial, I downloaded the shape files for MBTA Bus Routes and MBTA Rapid Transit. Then I clicked “Add File” and added both shape files to my Import List.
    1. 8
  12. Like the tutorial, make sure the SRID is filled in! For Massachusetts, it had a SRID of 26986.
    1. 9
  13. Next click “Import”. The PostGIS GUI will then ask your PostGIS connection credentials. For some reason, it selects your Windows username by default! So change it to your database owner username (You can see I received error messages for not realizing this)! In this current example, my database owner username is postgres (which is the default Postgres database owner). Make sure to type in the correct password, host, port and database name as well.
    1. Enter your Postgres credentials to the PostGIS GUI
  14. Once you have been authenticated, the shapefiles will import. They will show similar completed messages when you are done:
    1. 11
  15. Now the shapefiles are tables you can use with your Postgres database! You can go back to pgAdmin 4. On the file tree on the left, double-click ‘Schemas.’ More options appear. Double-click on ‘public.’ Then double click on ‘Tables’. You will see that your shape files are now tables! You can now view the entries. You can right-click on a table such as mbta_arc, then select ‘View/Edit Data’. Then select ‘First 100 Rows.’
    1. 12
  16. Once the query has been executed, a new tab on the top of pgAdmin 4 will appear with the data returned:
    1. 13
  17. And there you have it! Your PostGIS shapefiles have been turned into Postgres tables.

The next post in the series will be how to use qGIS to render your PostGIS data (post to come).

Click here for more tutorials related to PostgreSQL.

If you have any questions, feel free to leave a comment below!

Advertisements

Part 2: How to Make an Alexa Skill

This post is the second in my Alexa series. You can find my first post here Part 1: Introduction to Amazon Alexa.  This is a blog post format of my original presentation on Google Slides.  This post and Google Slide presentation are for educational purposes.

How to Make an Alexa Skill

First Sign Up

To make Alexa Skills, you need 2 accounts

  1. Amazon developer account for the front end
  2. AWS account for the back end

Note: You can use your consumer side Amazon account for both

Once you’ve signed up, you are ready to begin!

Ways to Get Started

The easiest and fastest way to get started– even if you haven’t written an app or JavaScript before — is to check out Amazon Alexa’s GitHub!

OK, so you’re looking at their GitHub — which one do you choose?

I suggest starting with this one: https://github.com/alexa/skill-sample-nodejs-fact. It has a great README, which is a thorough walk through.

Before you start the walk through, we can talk a bit more about the code you’re seeing. The following code follows the above repo by Amazon. This repo shows you how to create a random fact giver. For this repo, the random facts are about space, but you can update it to any topic you like.

So if you are doing this project, take a moment to think about what kind of facts you would like your skill to give to its users.

Alexa Project Structure

/SpeechAssts
  /IntentSchema.json
  /SampleUtterances.txt
/src
  /index.js

The SpeechAssts folder is front end items.

The IntentSchema.json is a JSON object that has an array of different intent objects a skill can have.

{ "intents": [
  { "intent": "GetNewFactIntent" },
  { "intent": "AMAZON.HelpIntent" },
  { "intent": "AMAZON.StopIntent" },
  { "intent": "AMAZON.CancelIntent" }
]}

SampleUtterances.txt map to the intents. The below sample utterances map to only the GetNewFactIntent.

GetNewFactIntent a fact
GetNewFactIntent a space fact
GetNewFactIntent tell me a fact
GetNewFactIntent tell me a space fact
GetNewFactIntent give me a fact
GetNewFactIntent give me a space fact
GetNewFactIntent tell me trivia
GetNewFactIntent tell me a space trivia
GetNewFactIntent give me a space trivia
GetNewFactIntent give me some information
GetNewFactIntent give me some space information
GetNewFactIntent tell me something
GetNewFactIntent give me something

Now let’s move to the src/index.js. This is the backend function.

It starts with declaring variables.


const SKILL_NAME = 'Space Facts';
const GET_FACT_MESSAGE = "Here's your fact: ";
const HELP_MESSAGE = 'You can say tell me a space fact, or, you can say exit... What can I help you with?';
const HELP_REPROMPT = 'What can I help you with?';
const STOP_MESSAGE = 'Goodbye!';

The SKILL_NAME is the skill’s name.

In this code, GET_FACT_MESSAGE is what begins each of Alexa’s statements when she gives a user a random space fact.

HELP_MESSAGE and HELP_REPROMPT are what Alexa will say when the user triggers the intent for help.

STOP_MESSAGE is what Alexa will say when a user gives the intent to stop.


const data = [
 'A year on Mercury is just 88 days long.',
 'Despite being farther from the Sun, Venus experiences higher temperatures than Mercury.',
 'Venus rotates counter-clockwise, possibly because of a collision in the past with an asteroid.',
 'On Mars, the Sun appears about half the size as it does on Earth.'
];

This will be the data array that you can manipulate to be about your particular fact.

Then below that is the Alexa code.


exports.handler = function(event, context, callback) {
  var alexa = Alexa.handler(event, context);
  alexa.appId = APP_ID;
  alexa.registerHandlers(handlers);
  alexa.execute();
};

This is what makes Alexa work.

On alexa.registerHandlers(handlers), the variable handlers is an object of the intents.


const handlers = {
  'LaunchRequest': function () {
    this.emit('GetNewFactIntent');
  },
  'GetNewFactIntent': function () {
   const factArr = data;
   const factIndex = Math.floor(Math.random() * factArr.length);
   const randomFact = factArr[factIndex];
   const speechOutput = GET_FACT_MESSAGE + randomFact;

   this.response.cardRenderer(SKILL_NAME, randomFact);
   this.response.speak(speechOutput);
    this.emit(':responseReady');
  },
  'AMAZON.HelpIntent': function () {
    const speechOutput = HELP_MESSAGE;
    const reprompt = HELP_REPROMPT;

    this.response.speak(speechOutput).listen(reprompt);
    this.emit(':responseReady');
  },
  'AMAZON.CancelIntent': function () {
    this.response.speak(STOP_MESSAGE);
    this.emit(':responseReady');
  },
  'AMAZON.StopIntent': function () {
    this.response.speak(STOP_MESSAGE);
   this.emit(':responseReady');
  },
};

The key LaunchRequest is what starts your skill.  It runs the method GetNewFactIntent.

GetNewFactIntent does the calculations to grab a random fact. It has the ability to render a card on a screen (the cardRenderer method), and it also has Alexa speak it outloud.

AMAZON.HelpIntent delivers the HELP_MESSAGE and HELP_REPROMPT.

AMAZON.CancelIntent and AMAZON.StopIntent currently both deliver the STOP_MESSAGE.

If you are following Amazon’s walk through, it will walk you through building your skill, uploading your function to AWS, and how to certify your skill.

Alexa Skills Certification

It is easy to submit your skill for certification. (You will do so on the front end).

Remember to abide by Amazon’s rules.

After your skill is reviewed, you will receive an email of acceptance or rejection.

Conclusion

Alexa is still new. Amazon is giving a lot of cool incentives to write Alexa Skills. Alexa Skills and the related Echo products are still very new, and so everything changes often! This means the coding, the structures, how you submit via the frontend and backend sites all change very often! So be on your lookout!

Enjoy writing Amazon Alexa Skills! If you have any questions, please write them below! Thank you!

Part 2: How to Install pgAdmin 4 on Windows 10

Part 2: How to Install pgAdmin 4 on Windows 10

For one of my apps, I was responsible for the database, and there were some tricky things with Postgres! This post is part of a tutorial series on how to use Postgres!

Note: I also use Windows 10 and hosted my Postgres database on Digital Ocean, so I will be covering all the tricky parts I ran into!

This is the second in the series, and this is on how to install pgAdmin 4 for Windows 10. This tutorial leaves off from Part 1: How to Install PostgreSQL on Windows 10.

Intro to pgAdmin 4

pgAdmin 4 is graphical interface for interacting with PostgreSQL databases. It is an alternative to the terminal or pSQL console. You can read more about it at the pgAdmin website.

Part 2: How to Install pgAdmin 4 for Windows 10

  1. Now the pgAdmin 4 installer is up. Click Next:
    1. pgAdmin 4 setup wizard
  2. The wizard will then ask you to read over the license agreement. You should agree and accept. Then click next.
    1. pgAdmin 4 license agreement
  3. It will then ask where you want to save your program files for pgAdmin 4. I keep it in the default/suggested folder. Once done, select next:
    1. pgAdmin 4 destination location
  4. Now it will start installing
    1. pgAdmin 4 installing
  5. When it’s done installing, you can select Launch pgAdmin 4 and Finish
    1. pgAdmin 4 completes installation
  6. pgAdmin 4 may take some time to launch, and when it does, it will look something like:
    1. pgAdmin 4
  7. There will be a default PostgreSQL server on your system. You can access it on pgAdmin.  On the left hand Browser, click the + next to Servers, and it will show the server. It will named something like PostgreSQL 9.6. For PostgreSQL servers, there are always a default user called “postgres”. For Windows computers, you will need to create a password for this default user (remember to keep the password).
    1. pgAdmin 4 request password
  8. Using pgAdmin 4, you can now explore your PostgreSQL server that hosts your database. It will be pretty empty.

The next post in the series will be how to install and use PostGIS with Postgres via pgAdmin 4.

Click here for more tutorials related to PostgreSQL.

How to Build a Barebones React App (for Beginners)

How to Build a Barebones React App (for Beginners)

This post is about how to build a barebones React app. This is nothing fancy, but this is a manual way to create a React app on your own without using any extra Node Modules or Create-React-App. This post was inspired by my friend, David Kang, who showed me how to do this today.

Requirements

To do this tutorial, you will need some basic knowledge of:

  • HTML
  • JavaScript
  • Git
  • Using the terminal

Let’s start!

How to Build a Barebones React App

  1. Create your repo (folder) locally.
  2. (Optional but recommended) Create your repo on GitHub. Connect it to your local repo.
  3. At your terminal use npm init to create your package.json.
  4. Next create an index.html in the root of your repo.
  5. Put in the basic HTML to create a page. It should look something like this:
    1. Barebones HTML
  6. Let’s add React and ReactDOM to our project. We can do this by getting the React CDN from the official React website.  The official website will always have the latest or most stable version. Remember for non-production projects such as the one you’re probably working on, make sure you use the regular, non-minified version. So what does that look like?
  7. Take the CDNs and put them in your index.html file. Remember to place the JavaScript near the end of the html right before the </body> tag (unless you want to use the attribute async).
    1. Add CDNs to your HTML
  8. Next you will need the CDN for Babel to transpile ES6 and the React code or JSX to ES5, so that all browsers can show this. Again go to the official Babel website because the official websites have the latest or most stable version. Use the non-minified version. (You can typically do that by taking out the .min from the file name to access the full version).
    1. Add Babel CDN
  9. These are the tools for your barebones React app. Now you can start writing JSX!
  10. Let’s do a little to show what you’ve got so far! First in your <body>, add a div with the id of root. This element is where your app will render:
    1. index_html_img_4
  11. Nothing has happened yet. Let’s do some JSX! You can do this by using
    1. Add script with type of "text/babel"
  12. Inside of this <script> tag we can write JSX! Let’s render to the DOM! We can do this using ReactDOM.render(). This function takes in at minimum two arguments. The first argument will be your app. In our example, our app will only be “Hello, world!”. The second argument is the element whose innerHTML will be replaced with your app.
    1. Add JSX
  13. You can check this out in your browser now!
    1. Barebones React App
  14. To keep building your app, I recommend the Getting Started section of the official React website.

If you have any questions on the above, please feel free to comment below!

Part 1: 1 How to Install PostgreSQL on Windows 10

For one of my apps, I was responsible for the database, and there were some tricky things with Postgres! This post is part of a tutorial series on how to use Postgres!

Note: I also use Windows 10 and hosted my Postgres database on Digital Ocean, so I will be covering all the tricky parts I ran into!

This is the first in the series, and this is on how to install PostgreSQL for Windows 10.

Part 1: How to Install PostgreSQL for Windows 10

  1. Go to https://www.postgresql.org/download/
  2. Click on the link to your operating system. I selected Windows.
  3. On this new page, you have 2 options. You can download Postgres via EnterpriseDB or BigSQL. I used the interactive installer by EnterpriseDB because it easily allows you to download extensions (such as PostGIS) right after downloading PostgreSQL and pgAdmin 4.
  4. It takes you to the EnterpriseDB page to download. Select the version of Postgres (I selected 9.6.5 because it was the newest at the time).
  5. Select your operating system.
  6. Then click download.
  7. Once completed, it will download PostgreSQL. (It may download Microsoft Visual C++ first).
  8. If the installer asks you, please make sure to select to download pgAdmin 4 and Stack Builder (so you can download PostGIS).
  9. You know you are finished with installing PostgreSQL when an installer for pgAdmin 4 comes up.

The next post in the series will be how to install pgAdmin 4.

 

Part 1: Introduction to Amazon Alexa

This post is an introduction to Amazon Alexa. This is a blog post format of my original presentation on Google Slides.  This post and Google Slide presentation are for educational purposes.

Let’s get started!

Introduction to Amazon Alexa

What is Alexa?

Alexa is a software that a user can interact with by using their voice. A user would interact with Alexa through an Amazon Echo device. The Alexa software is hosted in the cloud (AWS) and is a VUI.

What is a VUI?

VUI stands for Voice User Interface meaning that a user can interact with the software using their voice. It is similar to a GUI or Graphical User Interface in the way that a VUI and GUI are both front ends. However, a VUI is not in competition with a GUI. A VUI is not meant to replace a screen.  A VUI is just another option in which a user can interact with software.

For Alexa, the software takes intents and utterances.  Intents are functions or actions that a user is available to invoke in an Alexa skill through an utterance. Since there are many different ways to express the same intent (or request), utterances are a set of likely spoken phrases for one intent. (In an upcoming blog, there will be code to illustrate this).

With VUI, there are different ways of expressing emotion. SSML is Speech Synthesis Markup Language. SSML gives a developer control on how Alexa should sound. SSML can make Alexa whisper, pause, or recite a number as a set of digits. Another way of expressing emotion is to use Speechcons. Speechcons are like emoticons.  Instead of a smiley face emoticon, a developer can use a speechcon to make Alexa say, “Hurrah!”

How Do You Use Alexa? (Utterance Syntax)

An utterance is what a user would say to interact with Alexa. The utterance maps to an intent, which invokes a function on an Alexa skill. What is an example of a spoken utterance?

“Alexa, start Space Facts.”

There are 3 parts to an utterance: 1. the wake word, 2. the phrase, and 3. the skill name. Here is a break down of an utterance:

  1. Wake word
    • Alexa
    • Amazon
    • Computer
  2. Phrase/verb
    • Start
    • Open
    • Begin
  3. Skill name/function invocation
    • Space Facts

The typical wake word is “Alexa”, and it is highly recommended to keep it as Alexa unless someone the user lives with has the name Alexa. If someone in the user’s household has the name Alexa, the user can change the wake word to “Amazon” or “Computer”. So the utterance would be “Amazon, start Space Facts”.

The phrase is the verb or word that causes an action. For example, “Alexa, start Space Facts” should start an intent that will invoke the Space Facts skill. Or “Alexa, stop” will stop the current action. “Alexa, help” will give some information about the skill.

This phrase or verb is where the developer will be concentrating making the different utterances for the same intent. So the utterances using “start”, “open”, “begin” will typically map the same intent. A developer will want to cover the many ways a user would say this command.

Lastly, there is the skill name or function invocation. An utterance using a skill name could be “Alexa, stop Space Facts”. Depending on the skill, there can be different functions a user can invoke that the skill will listen for.

Alexa Skill Request Lifecycle

Once a user says an utterance, what happens?

Once a user says an utterance such as, “Alexa, start Space Facts”, the Amazon Echo device picks that up and interfaces with the Alexa Skill. The skill sends the utterance to the cloud (AWS) where it does the fancy footwork. The cloud is the skill’s back end and where the code/functionality is located. The code maps the utterance to an intent, which runs code that will return a corresponding response via JSON to the Alexa Skill. The Alexa skill will then output the response to the user via the Amazon Echo device. In this example, if the user said, “Alexa, start Space Facts”, Alexa’s response will be probably be a space fact such as “A year on Mercury is just 88 days long”.

So that’s it on my introduction to Amazon Alexa.  To continue on how to make an Alexa Skill, click here for Part 2.

Quick UI-Routing Tutorial in AngularJS

This post is a quick tutorial about UI-Routing in AngularJS. This tutorial is not comprehensive but a quick look for fast reference.

What Is UI-Routing For?

It allows different AngularJS components to be switched out. (If you were using the Internet in the late 90’s to early 2000’s, you can think of it similarly to frames)

What’s The Example About?

In our example, when someone comes to our web app (ie. mywebapp.com), we want the component to appear.

When a user clicks on the Login link in our navbar, we want the component to appear, which allows the user to login.

How Do We Set This Up?

Below we have our main index.html. It will load the AngularJS components <navbar> and <ui-view>

index.html

<navbar></navbar>
<ui-view></ui-view>

Now let’s set up the ui-routing in app.js.

Firstly make sure to include ‘ui-router’ in your module. Next pass in a function to config. Inject $stateProvider and $urlRouterProvider. Inside this anonymous function, we will list different states. ‘home’ is the name of the first state (this is what will be used in the ui-sref). Next, state takes in an object. There are a lot of possible properties that we can include in this object. url is the endpoint that if the user lands on, for example, mywebapp.com/, the template listed is what will render in the <ui-view> on index.html. So for ‘home’, when a user lands on mywebapp.com/, it will show the <navbar> and then the <home> component.

My second state is called ‘login’. When a user lands on mywebapp.com/login, <ui-view> on index.html will render what is in the ./client/login.html template.

At the end $urlRouterProvider catches the rest. If a user goes to mywebapp.com/ or mywebapp.com/jsgasldgjskd, it will go the url ‘/’ and default to that view.

app.js

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider){
    $stateProvider
      .state('home', {
        url: '/',
        template: '<home></home>'
      })
      .state('login', {
        url: '/login',
        templateUrl: './client/login.html'
    });

    $urlRouterProvider
      .otherwise('/');
    });
  });

You can allow the user to change the view they see by having links.

When you make an <a>, instead of using href, you can use ui-sref with the name of the state you want your <ui-view> to change to.

navbar template

<a ui-sref="home">Home</a>
<a ui-sref="login">Login</a>