Forem: Kyle Petersen

A QuickStart Guide For TypeScript

Kyle Petersen — Sun, 29 Nov 2020 22:17:41 +0000

Introduction

TypeScript is a strongly typed programming language developed by Microsoft and released in 2012. The language was created in order to address the criticisms of working with JavaScript mainly addressing how it is dynamically typed. Since JavaScript is interpreted within the browser's compiler and not at the time of writing the code, if a mistake is made, it will not be caught until the browser compiles the code and shoots back an error. TypeScript fixes this by running the code through its own compiler and adding strict 'types' to your programming meaning you can catch mistakes quickly and easily before production. The best part is since TypeScript is a superset of JavaScript, it has virtually no learning curve for a JavaScript developer.

Installation

In order to install TypeScript, you are going to need Node js. To Install Node, navigate to here follow the instructions for your appropriate operating system.

After Node is installed, you can install TypeScript by running the command npm install typescript --save-dev within your terminal.

Basic Use

We can create a new TypeScript file by adding .ts to the end of any of our file names. For example, if we wanted to create a new file named "Practice" we can just run the command touch practice.ts. With this created, we can go ahead and start writing our TypeScript code within the file.

Since TypeScript is a superset of JavaScript you can get away with just typing plain JavaScript within your .ts file and it will still compile perfectly fine. So to test this, we can go ahead and write the code this code on our first line.

console.log("TypeScript Practice");

Now that the code is written, we can run this code by using the command tsc ("TypeScript Compiler") followed by our filename. So if we go ahead and run tsc practice.ts from within our terminal you should see a new file named "practice.js" pop up. This is our TypeScript which has been run through our compiler and translated into JavaScript. Notice since we have used basic JavaScipt within our .ts file that nothing has changed.

Types

Now we can get into one of the main reasons to get into TypeScript is it's enabling of static typing. One reason it achieves is by assigning each variable you create its only strong "Type". You can assign the type of each variable by adding a colon during the variable declaration following whatever primitive you wish to assign it. For example, if I wanted to assign an age to the type of number and set its value equal to 25, I can write the code let age: number = 25;. Now, if further down the line I try to assign the variable age to anything besides a number such as age = "Twenty Five";, the compiler throws an error allowing us to fix the issue immediately while knowing its exact position if we use a compatible text editor such as VSCode.

TS Config

TypeScript has a huge array of options you can mess with in order to change the language and compliers behavior. For example, within our practice.ts file lets create an async function like so.

async function practice() {

}

Now if we run tsc practice.ts and navigate over to our practice.js file, we can see that the JavaScript looks quite a bit messy compared to what we're used to for an async function. This is because typescript is built to be used with multiple different versions of Javascript and currently defaults to ES5. This behavior can be changed by adding a tsconfig.json file. Go ahead and run touch tsconfig.json within your terminal and open the newly created file within your text editor. From here we are going to add this code in order to default or compilers behavior to the latest version of JavaScript. Now if we run tsc within our terminal we should see our practice.js file should look much cleaner now that we are using the latest version of JavaScript by default.

Interfaces

One last awesome tool I would like to talk about when it comes to TypeScript is the interface. When creating a new JavaScript object, we can create something called an interface meaning we can give Types to all of our object's values. For example, I could create an interface to a new object we are creating called Sandwich by typing out this.

interface Sandwich {
  meatType: string;
  numberOfCondiments: number;
  breadType: string;
}

Now we can create a new object and assign it to the interface of Sandwich which will allow all of our variables to have a strong Type. So if we were to code the following below.

let newSandwich: Sandwich = {
  meat: "Turkey",
  numberOfCondiments: "2",
  breadType: "Wheat"
}

We would be warned that our numberOfCondiments value contains the wrong type and should be changed to avoid an error.

How to Become a Bootcamp Level Web Developer

Kyle Petersen — Mon, 23 Nov 2020 06:45:34 +0000

Coding Bootcamps are some of the fastest ways to become a web developer with many programs taking just 15 weeks you are considered job-ready. Although it can require you to learn an extremely dense amount of information within an extremely short amount of time the Bootcamp curriculum is definitely a good one to learn if you want to get into web development professionally. Here are the technologies and resources you will want to learn if you want to become a Bootcamp Level web developer.

The Backend

Many web applications have what is called a 'frontend' meaning the website with which is run within the web browser as well as a 'backend' which is run externally within a separate server. The backend can be written in pretty much any language but there are definitely some more preferred ones. Most Bootcamps tend to sway towards Ruby on Rails as the technology of choice for the backend.

Ruby

In order to learn Ruby on Rails, you should definitely be picking up the Ruby programming language first. Developed in the mid-1990s, Ruby is a 'developers first' language created by Yukihiro "Matz" Matsumoto in Japan. Ruby is dynamically typed as well as uses its own garbage collection making the language a joy to type in as well as making it extremely friendly for new developers. Some amazing resources I have found in learning Ruby is FreeCodeCamp's Ruby programming language full course which you can find here on YouTube as well as Boris Paskhaver's course on Udemy you can find here.

Ruby On Rails

Once you have gained a bit of experience in using Ruby it is now time to move on to Ruby on Rails. Ruby on Rails is a backend serverside application that uses an MVC architecture and has a ton of different uses. Although out of Bootcamp, you are mainly going to be using Rails in order to create something called an API for your frontend to use. Team Tree House has an amazing guide on Rails which can be found here and Free Code Camp has an amazing video on YouTube as well which can be found here. Bear in mind both of these technologies are going to be extremely slow to start learning and it's going to take a huge amount of time and practice in order to become proficient in either of these technologies. But after you've created a bunch of practice projects and examples most learn to love Ruby and Rails.

The Frontend

Now unlike the backend, the frontend of the web application you are building will consist almost definitely consist of JavaScript and it is extremely helpful to know other technologies such as HTML and CSS which make up the building blocks of the entire internet.

HTML

HTML or HyperText Markup Language is going to be the main building block in which you organize your webpage. It can be combined with CSS in order to help style the document or it can have JavaScipt added in order to manipulate it. HTML is extremely easy to learn but difficult to master with things such as semantic HTML becoming more and more important in modern programming. If you are planning on learning HTML, W3Schools will be your best friend. They have an extremely extensive guide on nearly every single tag or element within HTML and will be your one-stop-shop for all your HTML questions. You can find their website here. learn HTML is also a great resource for getting started as well and they can be found here.

CSS

CSS or cascading style sheets is a style sheet language meant to describe the presentation of a document written within a markup language. If you want to change anything to how your page looks, CSS is where you are going to do it. In this way, CSS can be extremely difficult to become proficient at since it has a huge number of different options for changing up your page. Although it is much like HTML as it is not technically difficult, it requires a large amount of design experience and practice in order to get great. Also, like HTML, W3Schools will be your best friend in this regard and there CSS section of their website can be found here. Other than this, the best way to learn CSS is to learn all the display properties just jump in and experiment with as many commands as you can until you can get a page looking just like how you wanted.

JavaScript

First developed in the mid-'90s for the web browser Netscape, JS has taken of the world of frontend development with nearly every modern web browser utilizing JavaScript as its language of choice. JavaScript's main role within your frontend is to handle and manipulate the document with scripting. If you want a button to add or take away any element from your page, you are going to need to use JavaScript to do it. Many good resources for JavaScript exist with W3Schools also coming up with amazing tutorials and resources which can be found here. Free Code Camp also offers an amazing JavaScript course which can be found here.

React

Although many web applications can run on just JavaScript, HTML, and CSS alone, many modern frameworks exist nowadays for the language which allows for more robust integration of a web application's frontend. One example of these frameworks would be React, which was developed by Facebook in 2013. React since than has taken the web development world by storm with its ability to create reusable components which greatly reduces time when building large applications, it has become a near necessity to learn in order to break into the front end side of web development. React has their own tutorial available for free on their website which can be found here and Free Code Camp has an awesome web page on the subject which you can find here.

How to Use Jest to Quickly Test Your JavaScript Applications

Kyle Petersen — Mon, 16 Nov 2020 02:18:53 +0000

Introduction

Jest is an extremely popular unit testing framework for JavaScript and is even the default unit testing packing for many of the largest frameworks and libraries such as React. Its popularity can mainly be boiled down to its absolute simplicity to implement which makes it perfect for vanilla JavaScript projects.

Install Node.js

In order to run Jest, you are first going to need to have Node.js. To do this, navigate here and select your appropriate operating system.

Initialize Our directory

For this example, I'm going to create a completely empty directory/folder named jest_practice. Now we are going to cd into our new project and within our terminal, we are going to initialize Node Package Manager with npm init.

Once you hit enter, you will be prompted to enter a bunch of information that will be used to create your Package.json file. For right now we can just use the defaults by leaving every option blank.

Now a file should have appeared within your project named package.json which should by default, look like this.

{
  "name": "jest_practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

After Node Package Manager is initialized we need to install Jest as a node module within the project. To do this we just need to run the command npm i jest from within our terminal.

After a short download, a new folder named node_modules should have appeared within our project as well as a file named package-lock.json.

The last step of initialization we are going to need to do is make a small change to our package.json file. On line 7 where it currently says "test": "echo \"Error: no test specified\" && exit 1" we are going to change it to test": "jest". In the end, our package.json file should look like this.

{
  "name": "jest_practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jest": "^26.6.3"
  }
}

Create Our Files

As an example for Jest, we are going to test a simple two sum problem with Jest to make sure it is working properly. From our main directory, we are going to create the file TwoSum.js and TwoSum.test.js. Once these two files are created we are going to first jump into our TwoSum.js file.

Editing our TwoSum.js File

From within our file, we are going to create a JavaScript function just like any other and name it twoSum. For simplicity's sake, I am going to go ahead and fill in the solution to the problem within the function below so we can immediately jump to testing it.

function twoSum(nums, target) {
    const map = {};
    for (let i = 0; i < nums.length; i++) {
      const another = target - nums[i];

      if (another in map) {
        return [map[another], i];
      }
      map[nums[i]] = i;
    }
    return null;
}

The last only other thing we need to do tho this file is to export this function by writing module.exports = twoSum; right below it.

function twoSum(nums, target) {
    const map = {};
    for (let i = 0; i < nums.length; i++) {
      const another = target - nums[i];

      if (another in map) {
        return [map[another], i];
      }
      map[nums[i]] = i;
    }
    return null;
}

module.exports = twoSum;

Setting Up Our Jest Testing

Now that we have our problem finished, all we need to do is set up our tests to make sure it is working properly. To do this, navigate to the TwoSum.test.js file we had created earlier. From here, we are going to start off by creating a requiring in our finished two sum function by typing const twoSum = require(./TwoSum); on line 1.

After we have required our twoSum function, we are going to start building our test by using test(). The first parameter of the test function is going to be a message describing what specifically we are testing. In the first test, we are just going to see if one of our inputs equals an expected output so our message will me test("Given an array integers and a target, the function should return two indices such that they add up to the target."). The second parameter of the test() function will be the actual expected input and output which we will format like so.

test("Given an array integers and a target, the function should return two indices such that they add up to the target.", () => {
    expect(twoSum([2,7,11,15], 9)).toEqual([0,1])
})

In the end, the TwoSum.test.js file should end up looking like this.

const twoSum = require('./TwoSum')

test("Given an array integers and a target, the function should return two indices such that they add up to the target.", () => {
    expect(twoSum([2,7,11,15], 9)).toEqual([0,1])
})

Now if we run the command npm run test within our terminal we should get a passing test!

That's the super fast way to get Jest up and running on your project. Keep in mind though that probably going to need to test much more if we want to make sure our code is full proof and for this, Jest has a ton of different Matchers. For example, if we wanted to make sure our function returned null if there were no two indices that equaled the target we could use the matcher .toBeNull instead of .toEqual or we could even check if our function returns values greater than or less than certain values by using the .toBeGreaterThan() or .toBeLessThan(). For more details on Matchers you can reach the Jest documentation here.

How I Made a Restaurant Finder App With React Native Part 2

Kyle Petersen — Mon, 09 Nov 2020 02:39:40 +0000

Get API Credentials

We now have our user's location to find our restaurants stored safely within our components state! But before we can make our API call to the Google Places API to receive our list of restaurants, we need to get an API key from Google. Go ahead and open a web browser and navigate to the Google developer console and log in with your Google account. From here you are going to click the drop-down which says "select a project" and then click on a "new project". From here you can name the project. We are also going to leave the organization section blank for now.

After your project is created, you are then going to go to the library tab and search for the Google Places API within the marketplace. Once found go ahead and add the library to your account.

After the Google places API is added to your Google developer account, find and click on the tab that says credentials from the home page. Once in the credentials tab, you are going to press the plus button with the text "Create Credentials" next to it and then select the "API key" option. Under the API keys section, there should be a new key labeled API key 1.

Underneath the "key" column is going to be the API key we are going to use in our project.

Creating Our Fetch URL

Now that we have the necessary credentials in order to access the Google Places API, we are going to make a fetch call in order to search for nearby restaurants when our "Search Restaurants" touchable opacity is clicked.

The first thing we are going to do is create our handleRestaurantSearch method. Within our App class above our render function, go ahead and add the lines

handleRestaurantSearch = () => {

}

Now within our new method, we are going to add the building blocks of our URL string to make the API call. The first part of which begins with the base URL. Let us create a constant variable within our method named URL and set it equal to "https://maps.googleapis.com/maps/api/place/nearbysearch/json?". The variable should look like this:

const url  = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?'

After this, we need to add the user's location to the string which we have stored within our app's state.
We are going to create a constant variable named location and set it equal to our latitude and longitude like so.

const location = `location=${this.state.latitude},${this.state.longitude}`;

After that, we need to specify the radius of our search in meters, the type of search we are doing, and our API key. To do this we can create another three variables.

    const radius = '&radius=2000';
    const type = '&keyword=restaurant';
    const key = '&key=<ENTER YOUR API KEY HERE>';

At the very end, we can add all our string variables together to create our final string which will be passed as our API call.

    const restaurantSearchUrl = url + location + radius + type + key;

In the end, your handleRestaurantSearch method should look like so.

  handleRestaurantSearch = () => {
    const location = `location=${this.state.latitude},${this.state.longitude}`;
    const radius = '&radius=2000';
    const type = '&keyword=restaurant';
    const key = '&key=<YOUR API KEY>';
    const restaurantSearchUrl = url + location + radius + type + key;

  }

Fetching our Data

Now that our string is built, we can make a fetch for our data. Below our new variables, we create a fetch request using the JavaScript fetch() function, and within the parameters, enter our restaurantSearchUrl.

fetch(restaurantSearchUrl)

Since fetch is a promise, we are going to use a .then right below our fetch request to handle when the promise is resolved and parse the JSON we were sent from Google.

.then(response => response.json())

After that promise is resolved, we are going to change the restaurantList key within our state to match whatever we were sent back by this fetch request.

.then(result => this.setState({restaurantList: result}))

Our handleRestaurantSearch method should now look something like this.

  handleRestaurantSearch = () => {
    const url  = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?'
    const location = `location=${this.state.latitude},${this.state.longitude}`;
    const radius = '&radius=2000';
    const type = '&keyword=restaurant';
    const key = '&key=<YOUR API KEY>';
    const restaurantSearchUrl = url + location + radius + type + key;
    fetch(restaurantSearchUrl)
      .then(response => response.json())
      .then(result => this.setState({restaurantList: result}))
  }

Now in order to call our handleRestaurantSearch method, we need to create an event listener within our TouchableOpacity. within our <TouchableOpacity> tag we are going to add the following lines to create an onPress event listener.

<TouchableOpacity onPress={() => this.handleRestaurantSearch()}>

We are also going to add a console.log() to our render function to test to see whether our restaurant list is showing up within our state. To do this we can add console.log(this.state.restaurantList); right below our render method but above the return statement.

Now from our physical device or emulator, we can press "Search Restaurants" and within our terminal, we should see a long list of JSON describing 20 nearby restaurants.

Displaying Our List of Restaurants

Now that we have our list of restaurants ready to go we can now list them within our FlatList. Within our FlatList tag we are going to set a few attributes.

The first attribute we are going to set is the data attributes. We are going to assign this to our restaurantList's results we have contained within our state.

<FlatList
  data={this.state.restaurantList.results}
>

We are going to then create a keyExtractor to make sure each item on the list has a unique identifier. We are going to set each item's key to its place_id.

<FlatList
  data={this.state.restaurantList.results}
  keyExtractor={(item) => item.place_id}
>

The last thing we need to do before our FlatList is complete is to add the renderItem attribute. Here we can call what kind of tags our list is going to use. For this example, we are just going to use a text tag that will display a nearby restaurant's name. I'm also going to add the tiniest bit of styling to our list to make it more visible once finished. To do this add the following attributes after the keyExtractor.

        <FlatList  
          data={this.state.restaurantList.results}
          keyExtractor={(item) => item.place_id}
          renderItem={({item}) => (
            <Text>{item.name}</Text>
          )}
          style={{backgroundColor: 'grey', width: '80%', margin: 60, padding: 5}}
        />

After this, we should be finished with our list meaning that when you click on the "Search Restaruants" TouchableOpacity within your phone or emulator, we should see a list of restaurants that looks like so.

In the end. Our entire App.js file should look like so.

import React from 'react'
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';
import * as Permissions from 'expo-permissions';
import * as Location from 'expo-location';


export default class App extends React.Component {

  state = { 
    hasLocationPermission: false,
    latitude: 0,
    longitude: 0,
    restaurantList: []
  }

  componentDidMount() {
    this.getLocationAsync();
  }

  async getLocationAsync () {
    const { status } = await Permissions.askAsync(
      Permissions.LOCATION
    );
    if (status === 'granted') {
      let location = await Location.getCurrentPositionAsync({});
      this.setState({
        hasLocationPermissions: true,
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      });
    } else {
      alert('Location permission not granted');
    }
  };

  styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

  handleRestaurantSearch = () => {
    console.log("here")
    const url  = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?'
    const location = `location=${this.state.latitude},${this.state.longitude}`;
    const radius = '&radius=2000';
    const type = '&keyword=restaurant';
    const key = '&key=AIzaSyCTG8tfRBCabaCP-enskC2akmNVBvaOAAs';
    const restaurantSearchUrl = url + location + radius + type + key;
    fetch(restaurantSearchUrl)
      .then(response => response.json())
      .then(result => this.setState({restaurantList: result}))
      .catch( e => console.log(e))
  }

  render() {
    console.log(this.state.restaurantList.results)
    return (
      <View style={this.styles.container}>
        <FlatList  
          data={this.state.restaurantList.results}
          keyExtractor={(item) => item.place_id}
          renderItem={({item}) => (
            <Text>{item.name}</Text>
          )}
          style={{backgroundColor: 'grey', width: '80%', margin: 60, padding: 5}}
        />
        <TouchableOpacity onPress={() => this.handleRestaurantSearch()}>
          <Text style={{backgroundColor: 'grey', color: 'white', padding: 20, marginBottom: 50}}>Search Restaurants</Text>
        </TouchableOpacity>
        <StatusBar style="auto" />
      </View>
    );
  }
}

And that is how to create a nearby restaurant finder within React-Native! Note that tons of information such as the restaurant's address, rating, and photos are also given with our API call which we can also use within our list. If you wanted to do a keyword search to find a specific restaurant instead of just a list of nearby restaurants you can use the Google Places API text search instead.

How I Made a Restaurant Finder App with React Native Part 1

Kyle Petersen — Mon, 02 Nov 2020 03:02:35 +0000

Introduction

React Native has been a game-changer in mobile development ever since it was first released back in March of 2015. Due to its flexibility, extensive libraries, and simplicity to learn for those already familiar with React. It has since then, been adopted by some of the largest companies on earth to build their mobile applications. Today, I would like to show you how I created a restaurant finder app using the Google Places API for a complete React Native beginner.

Installation

For this project, we are going to need a few things downloaded. We are also going to be using Expo CLI for our app.

First Download Node Package Manager to your appropriate operating system.
Then, within your terminal install Expo with npm install -g expo-cli.
Also, download the app Expo on your mobile device if you would like to test the app on your own physical hardware.

Initialization

To initialize a new react native project with Expo, run the command
expo init <name of project> --npm. In this case, we are going to name the project restaurant_finder. Once prompted to select a template, choose the 'blank' one for now. Once you open the project within a text editor of your choice, you should have a file structure similar to this.

Note: the --npm flag at the end of our command tells Expo to install all the dependencies with node package manager. Expo defaults to using yarn otherwise. Make sure you do not mix using these two package managers or it will cause errors.

We are going to now change our current directory into our project with cd restaurant_finder and install a couple of extra packages by running expo install expo-location and expo install expo-permissions. Once both of those packages are installed, we are going to start our project with npm start.

A new window should open up with the metro bundler front and center.

You can scan the barcode in the bottom left corner with your device to open the app we are working on. At the moment you should just see a blank screen with text that says "Open up App.js to start working on your app!".
We are going to do exactly that!

Go ahead and open app.js within your text editor and you should see a bunch of code that looks like this

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Changing Our Component into a Class

Since we are going to be doing quite a bit of state manipulation we are going to go ahead and translate our functional component into a class-based component.

To do this we are going to replace the word 'function' with 'class' within our declaration and replacing the parenthesis with 'extends React.Component'.

After this, we need to remove the 'const' before 'styles' and move the whole object between our curly braces. Since our styles function is now with the class, within our tag we need to call it as this.styles.container instead of just styles.container.

The last thing we need to do is add the render() method to our class and wrapping our return within it.

After these changes, your file should look like this.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component{
  render() {
    return (
      <View style={this.styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    );
  }

  styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
}

We are going to go ahead and import a few things from the react-native library to display our list of nearby restaurants to the user. From line 3 where it currently says

import { StyleSheet, Text, View } from 'react-native';

We are going to go ahead and add a FlatList and a TouchableOpacity. Line three should then look like this.

import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';

A FlatList is an area where we are going to display our list of restaurants and a TouchableOpacity, for all intents and purposes, is just a button that will be used to initialize the search when pressed.

Lastly, we are going to import libraries that will allow us to get the user's location and location permission by adding

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

Creating our FlatList and TouchableOpacity

We are going to go ahead and delete the <Text>Open up App.js to start working on your app!</Text> and revert our app to a completely white screen. Then in the same space between the tag, we are going to add our TouchableOpacity tag Like so.

    <View style={this.styles.container}>
      <TouchableOpacity>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>

Between the two touchable opacity tags, we are going to then add a Text tag to the button that says "Search Restaurants".

    <View style={this.styles.container}>
      <TouchableOpacity>
        <Text>Search Restaurants</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>

We are also going to style the text tag just a tiny bit by adding style={{backgroundColor: 'grey', color: 'white', padding: 5, marginBottom: 50}} to the Text tag's parameters like so.

<Text style={{backgroundColor: 'grey', color: 'white', padding: 20, marginBottom: 50}}>Search Restaurants</Text>

Now right above our TouchableOpacity, we are going to add our FlatList to display our list of restaurants. Our FlatList can just have a self-closing tag as well like so <FlatList />. We are going to come back to our FlatList tag once we obtain our list of data.

Getting the User's Location

We also need a place to store our list of restaurants and the user location as well as a variable to tell our component whether location permission has been granted. To achieve this we are going to create a state for our component. To do this, we are going to add these lines.

state = { 
  hasLocationPermission: false,
  latitude: 0,
  longitude: 0,
  restaurantList: []
}

Now that we have our button ready to be pushed and state ready to be manipulated, we just need to tell it to grab the list of nearby restaurants when pushed. To do this we are going to need to first get location permission from the user's device and then get their location in coordinates. To achieve this we are going to use the componentDidMount() method which will be called when the app component is first mounted. To do this go ahead and add these lines within your app class.

  componentDidMount() {

  };

We are now going to create a new async method that will first ask the user's location and collect their coordinates accordingly. Right below our componentDidMount method, we are going to go ahead and create the method, getLocationAsync like so.

async getLocationAsync () {

};

Within our method, we are first going to ask what the user's device for permission.

async getLocationAsync () {
    const { status } = await Permissions.askAsync(
      Permissions.LOCATION
    );
  };

and if that permission is granted, we are then going to change our hasLocationPermission and state to true and change our location state to reflect the user's coordinates by using the setState method.

  async getLocationAsync () {
    const { status } = await Permissions.askAsync(
      Permissions.LOCATION
    );
    if (status === 'granted') {
      let location = await Location.getCurrentPositionAsync({});
      this.setState({
        hasLocationPermissions: true,
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      });
    } else {
      alert('Location permission not granted');
    }
  };

Then to make sure this method gets called during the first creation of our component go ahead and call the method within our componentDidMount() method like so.

componentDiDMount() {
  this.getLocationAsync();
}

After all this, our entire app class should look like so.

import React from 'react'
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';
import * as Permissions from 'expo-permissions';
import * as Location from 'expo-location';


export default class App extends React.Component {

  state = { 
    hasLocationPermission: false,
    latitude: 0,
    longitude: 0,
    restaurantList: []
  }

  componentDidMount() {
    this.getLocationAsync();
  }

  async getLocationAsync () {
    const { status } = await Permissions.askAsync(
      Permissions.LOCATION
    );
    if (status === 'granted') {
      let location = await Location.getCurrentPositionAsync({});
      this.setState({
        hasLocationPermissions: true,
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      });
    } else {
      alert('Location permission not granted');
    }
  };

  styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

  render() {
    console.log(this.state.latitude, this.state.longitude)
    return (
      <View style={this.styles.container}>
        <FlatList  />
        <TouchableOpacity>
          <Text style={{backgroundColor: 'grey', color: 'white', padding: 20, marginBottom: 50}}>Search Restaurants</Text>
        </TouchableOpacity>
        <StatusBar style="auto" />
      </View>
    );
  }
}

Tada! now we have our user's location stored safely within our state. We can now use that location to get our list of restaurants nearby in part two!

How to Add Google Maps to Your Expo React Native Project

Kyle Petersen — Sun, 25 Oct 2020 23:12:03 +0000

Introduction

React native has taken the mobile development industry by storm since its unveiling in 2015. Since then it has been adopted by some of the world's largest tech companies such as Facebook, Airbnb, Uber, Or Pinterest. With that in mind, it should be a pretty common requirement in many applications to use the world's most popular mapping app, Google Maps. In this blog, I will show you how to use Google Maps in your own react native apps.

Getting Set Up

To complete this task we are going to need to install the component react-native-apps which was created by AirBnB for their own app. This is in addition to our own version of Expo.

Before we begin please make sure you have Node Package Manager or npm as well as Yarn.

To get us started, we are going to need to install Expo onto our machine. To do this we can run the command within our terminal npm install --global expo-cli. After Expo has completed we can go ahead and create our project with expo init <project name>. For this instance, we are going to name our project "test_app". After this, we will be presented with a few options to get our project started. We will then choose the option "blank".

After our project has been successfully created we are then going to change the directory into the project we had just created using cd test_app.

Within our main directory, we are going to run the command:
npm install react-native-maps --save-exact
or
yarn add react-native-maps -E

Note: Expo defaults to using yarn as its package manager. Since it will cause problems to mix package managers make sure you only use one or the other.

After this, we can open our file with any text editor of your choice. In this instance, I will be using VSCode.

Adding Google Maps to Our Created Project

From within our parent directory, there should be a file named App.js. Opening it should look like below.

We are going to import our MapView from the react-native-apps component. To do this we are going to add import MapView from 'react-native-maps'; to line 4. After this, we now have access to the MapView tag

Now within our return statement within our app function, we can add our map to make it show up on our react-native app. We can delete the Text tag from line 10 and add our own tag <MapView></MapView>. Your App.js file should now look something like this.

Now our map is initiated within our app, but you can't see it anywhere. To fix this we are going to need to add a bit of styling to the mix. Within our MapView tag, we are going to go ahead and add style={StyleSheet.absoluteFillObject} which will make the map fill the entire screen of the device. Make sure we also add provider={MapView.PROVIDER_GOOGLE} to make sure our map application defaults to Google Maps.

And there we go! We now have a fully functioning map running within React Native. Further customization of the map can be made with additional styling. Further modification of the map including its initial starting location instructions can also be found here

How to Create User Authentication in a Ruby on Rails API

Kyle Petersen — Mon, 19 Oct 2020 03:14:19 +0000

Introduction

Ruby on Rails, for many years now, has been an extremely popular and influential framework that allows a developer to quickly and cost-effectively build and deploy fully functioning backends. With that in mind, in nearly every complex web application the problem of user authentication will most definitely come into play. This guide will attempt to explain how you can quickly build secure authentication for your web application with Ruby on Rails.

Installation

Make sure the below items are installed on your machine before we begin.

Creating our project

Just like how we would normally create any Ruby on Rails project, we are going to run rails new <name of project> --api. We are then going to need to change a few things in the gem file. Within the file "Gemfile" on line 17 there should be a commented line which reads gem 'bcrypt', '~> 3.1.7' or something similar. Un-comment it out and add the line gem 'jwt' below as well. It should then end up looking something like this.

After both are added run the command bundle install to add both the gems to your project.

Creating our User model

Next, we are going to create our user model in which we are going to be using to authenticate. From our terminal, we are going to run rails g scaffold User username:uniq password:digest. It is important to note that the digest at the end of password:digest means that the user's password will not be stored as plain text within our database and adds a few extra goodies to our project. After our model has completed we are going to migrate our database using the command rails db:migrate. After our migration we need to add the lines validates :email, presence: true, uniqueness: true to the user.rb file within our models folder. This makes sure that when a new user is created that the username is unique within the database.

Application Controller

We are now going to create our Authenticate method from within our application controller file so any of our other controllers can access it when needed. Creating an empty method, our file should look like this.

The first thing we are going to check within our method is whether authorization headers were sent. To do that we can create a small if statement.

After we check whether the auth header was sent, we can then begin to decode our JWT token that should have been sent within the auth header. We should wrap the next few things within a begin rescue block of code which works similarly to a try-catch in other languages.

Within our begin/ rescue block, we should then decode our JWT token, find our payload, and get our user_id so we can then find our User within our database. To do this we will create a method named secret and token.

Our secret method will find a key within a secret key base which we can access like so.

We can then create our Token method which will access the second item within the auth_headers array.

Afterward, those two methods are created we can finish our Authorize method. All we need to do is get the user_id from our payload and then use that to find our authorized user.

For future application, we are going to add one last method to our application_controller which will be our create_token method.

The last thing we need within our Application controller class, for now, is to specify ours before action. All we are going to say here is that before anything else is attempted within our application controller we must authenticate first. to do that all we need to do is add before_action :authenticate

In the end, our application_controller.rb file should look like this.

User Controller

Since our authentication controller is finished we will also want to make a change to our User controller. Specifically, we need to create a token whenever a new user is created. To do this we can use the create_token method we had made earlier within our create method like so.

Authentication Controller

For someone who is not creating a user for the first time, we need to create a login method. We will do this in a controller called AUthentication Controller. To create this controller rin rails g controller authentication. A new file should then exist with your controller folder name authentication_controller.rb. Within this file, there should only be an empty class named AuthenticationController.

Within here we will then create our login method and make sure that it skips our authenticate method we had created earlier.

Within our method, we must first find our specific user using ruby's find_by method and then authenticate that user once found with our authenticate method we had created in our application_controller.

After we authenticate our user. We can then use the methods we had created earlier within our application controller to make a new JWT token for the user and also send all of the user data as JSON with the render method.

In the end, our authentication_controller.rb file should look like so.

Routes

The final step before we are finished with our fully functioning user authentication is to specify our login route. From within routs.rb which is located within the config controller, add post 'login', to: 'authentication#login' which should send any /login request directly to our login method. The file should end up looking something like this.

My Coding Bootcamp VS College Curriculum

Kyle Petersen — Mon, 12 Oct 2020 01:54:31 +0000

Hey there! My name is Kyle and I've completed around 80 out of 120 computer science credits at the Metropolitan State University of Denver and I have also graduated from Flatiron School's in-person software engineering program. I'm here to compare and contrast the differences in coding philosophy between the two mediums of education and talk about my personal experiences in both.

College

At the Metropolitan State University of Denver, you are expected to take 120 credits at the minimum to receive a bachelor of science in computer science. Of the 120 credits, only 54 are your computer science classes. The rest are reserved for your general science classes as well as a required mathematics minor (30 credits), your gen eds (30 credits), and a small number of ancillary courses (6 credits).

Within the computer science major, you are required to learning a wide variety of information about programming going all the way down to the binary level. Through your first few years in the program, you should expect to learn quite a bit of Java with a pretty heavy emphasis on programming convention. They will also begin to start you off with algorithms and data structures. You will also take computer organization and architecture classes where you will learn things such as binary, boolean logic, and assembly language. The last few years of your degree will put a strong emphasis on algorithms as well as in-depth knowledge of operating systems, principals of programming languages, and the development lifecycle in general.

Many colleges will end up going over a very wide variety of subjects making their graduates a swiss army knife of knowledge in any computer science field they choose to go in. Although some including myself found some frustration in taking the huge amount of general educations and science core classes as well as some of the lack of focus within the program itself.

Bootcamp

In contrast, Flatirons was hyper-focused on gaining in-depth knowledge of a very particular set of subjects. If you had chosen the software engineering path as I had, you would be learning about web development and a little bit of mobile dev related subjects. They put a large emphasis on Ruby and Ruby on Rails for backend development as well as React.js and Javascript for the front-end. Meaning, you should be able to build professional web applications on your own by the end of the program. Although these topics you will be required, you are encouraged to learn additional subjects and you are in no means locked into only learning the technologies they require in your choice of path. For example, I ended up gaining a huge about of knowledge about Vue.js and Django in my time at Flatirons as well as what was required of me.

Although the curriculum is much smaller, they go into a much greater degree of depth and you are normally spending almost eight hours a day on one very particular subject for weeks at a time to gain mastery. This means the learning and experience come much faster and sometimes more rewarding than at a college where some subjects are stretched out to multiple semesters through smaller classes.

Conclusion

In terms of the curriculum, I am more of a fan of the boot camp system to learn to code. The reason being If you find exactly what type of field you would like to go into, having the means to only go into that single subject feels extremely challenging and rewarding compared to going through a large list of subjects. But if you don't know what kind of path you would like to take but just know you would like to get into the tech field, a college degree gets you a wide variety of knowledge on a large list of subjects and also gives you a lot more flexibility in your career choice in the end.

How to Deploy a Ruby On Rails Backend to Heroku

Kyle Petersen — Sun, 04 Oct 2020 05:36:15 +0000

Introduction

Ruby on Rails for many years now has been an extremely popular and influential framework that allows a programmer to build up and deploy a REST API extremely quickly. With that in mind, many developers will choose to deploy using Heroku do to its simplicity and generous pricing for smaller projects.

Getting Started

The first thing we are going to need is PostgreSQL as our database management system. This is Heroku's preferred database management system and Heroku will not work with Ruby on Rail's default sqlite3. Installation instructions for your operating system can be found here.

We also want to download and install the Heroku CLI which can be found here

Before we start getting Heroku set up in our project, we are going to need to make sure that our Ruby on Rails is using PostgreSQL as our database technology instead of its default sqlite3. If you have already built your backend around sqlite3 you can read about migrating it over to PostgreSQL here. Otherwise, if you are just starting a Ruby on Rails backend you can automatically configure it for PostgreSQL by adding the --database=postgresql flag when creating your project like so rails new project-name --api --database=postgresql.

Deploying our Backend

Once your rails backend is ready to be deployed you are going to need to create a Heroku Account. Once finished we need to click on the "new" button in the top right corner of the web page and then click "create a new app" within the drop-down where it will then ask you to pick a name for the app. Name the app and then click "Create App"

Once your app is finished being created you will want to enter your Ruby on Rails directory and then run the command heroku login.

Once logged into your Heroku account from your terminal you are going to run these commands in order.

git init
heroku git:remote -a <name of your project>
git add .
git commit -am "any message you want"
git push heroku master

Once this series of commands is finished, your code is now deployed up to Heroku. You can run any of your Rails command line commands as long as you preface it with heroku run. For example, if we wanted to create our database within our Heroku server we would run heroku run rake db:create or if we wanted to enter our console we could run heroku run rails console from our command line.

If you wanted to access the address for your newly deployed server you can click on the overview tab and click the open app button located in the top right corner of the webpage and it will take you to the hosted web address.

How to deploy your Vue app to google firebase

Kyle Petersen — Fri, 21 Aug 2020 19:04:04 +0000

Introduction

Firebase is an extremely flexible and easy to use website hosting platform with a very generous free hosting tier. It is highly recommended for any beginners for hosting due to its pure simplicity to use and fast deployment.

Installation

Before we begin we should download the Firebase CLI which allows us to quickly deploy our app from terminal

Assuming we already have Node.js installed and we already have a Vue.js app we can deploy we can download the Firebase CLI with NPM or node package manager. To download all you need to do is run npm install -g firebase-tools

Now we need to create our firebase account. To do that navigate to The Google Firebase Website and create a new account.

After your account has been created you need to login to firebase within your terminal. To do this run firebase login at which point

After you have logged into firebase you are now ready to deploy your project!

Deployment

Before we start our firebase deployment we also need to run a production build of our app. From your app's main directory, run the command npm run build. After a short load, you should see a new folder appear called "dist"

To start we need to create a new project from the firebase website. From the "Your Firebase Projects" page on firebase go ahead and click "Add Project". Afterward, it will ask for a name and whether you would like to use Google analytics. While analytics is nice it's not normally needed for most small projects. After hitting "Create Project" there will be a short load you will be taken to your projects dashboard.

On the left-hand side of the dashboard click on the button "Hosting" Than on the hosting page go ahead and click "Get Started"

At this point, it will prompt you to install firebase CLI and login which we have already done. In your terminal from your main app directory go ahead and type firebase init.

Within your projects, the main directory run firebase init within your terminal. After you hit enter a screen with multiple options should appear.

Navigate to the option that says "Hosting", use your space key to select the option, and then hit enter.
On the next screen select the option "Use an existing project?".
Afterwards it will ask you to select an existing project. You should choose the one you named earlier.
After this, it will ask what you should make your public directory. The folder we created earlier named "dist" is what we will be using.
It will then ask if you would like to configure it as a single-page app. All this really does is route all URLs to the index of your app. If that is something you would prefer you can yes in this instance but for the most part its recommended to say no. *The next step will check if there is already an index.html and if you would like to overwrite it if so. It is highly recommended you say no as overwriting the default Vue index.html file could lead to other side effects. *After this step your initialization is complete!

Now that initialization is complete all you need to do is run firebase deploy and your all done! You can access your website through the URL that Google firebase provides you. If you would like to deploy any changes in the future you only need to run npm run build and firebase deploy again.

How to Make a Single Page App in Vue.js Part 2

Kyle Petersen — Thu, 20 Aug 2020 03:52:31 +0000

Introduction

In the first part, I explained how to get Vue.js running and how to edit the HelloWorld.vue component in order to make "Hello World!" show up on the screen. Now in part 2, I am going to go into a little bit more depth on Vue single file components as well as splitting up our hello worlds into two separate ones.

What is a single file component?

Quite simply, a single file component is where your HTML, CSS, and Javascript are all placed into a single file. This encourages building websites out of smaller "Components" that can act individually from each other making your code much more readable and organized.

Back to our app

From our HelloWorld.vue file we should see everything nested into three separate tags. The first being <template> the second being <script> and the third being <style scoped>. Within our <template> tag is housed all of our HTML code which will be the building blocks of our components, our <script> tag contains all of the Javascript for our component, and lastly our <style scoped> tag contains all of our stylings. A quick note that the "scoped" after style indicates that this stylesheet will not affect other components. This allows us to name our HTML classes and Id's more confidently and legibly since we are not worried about side effects. From this file, all we are going to do is remove the word "World!" from "Hello World!".

Create a new component

To create a new component we are going to navigate to our /components folder and then add a new file called World.vue. Once here we should see a completely empty file. Type <vue> within the text editor and hit the tab or enter key and it should auto-populate with a <template>, <script> and <style> set of tags.

After this, we should make sure to name our component. Just like in the HelloWorld.vue, we should type name: "world" between the curly braces of the export default { }

Back in our <template> Tags, we should add a little bit of HTML. Just like our HelloWorld.vue file we should wrap everything in a div <div class="world">. Within that div, we should create an <h1> tag that says "World!" like so <h1>World!</h1>

Connecting Our Component

You might have noticed by now that our component isn't displaying on the screen at the moment. Well, that's because we haven't told anything to mount it! Navigate back up to your app.vue file and it should look like this still.

Now to connect the components we need to import it first. Right below where it says import HelloWorld from './components/HelloWorld.vue' you should type import World from './components/World.vue'. After we have imported the file we need to tell Vue that it is a component. In an object called components: you should just see HelloWorld. You should add an apostrophe after HelloWorld than on the next line add "World". In the end it should look like:

The last thing we need to do is add our component to our <template>. right below where it says <HelloWorld msg="Welcome to Your Vue.js App"/> go ahead and type <World/>

And tada! your just broke up your hello world into two components which are both being displayed!

How To Make a Simple Single Page App with Vue.js Part 1

Kyle Petersen — Thu, 20 Aug 2020 02:57:03 +0000

Why Vue.js?

The open-source Javascript framework Vue.js has been growing in popularity rapidly for quite some time now and for good reason. Vue has a multitude of features that adds huge quality of life that is not offered in other frameworks such as its minimal template syntax or its single-file components. It also offers a very low learning curve making it easy for anyone familiar with HTML, CSS, and Javascript!

What are we making?

So today we are going to be making a simple hello world app with the Vue CLI and in part 2 we will be breaking it down into multiple components! But before we start, we are going to need to install a few things.

Installation

Start by installing Node.js with your appropriate operating system.+
To make sure you are using node version 8.9 or above, run vue --version
Then within our terminal, we need to run npm install -g @vue/cli

Annnnnd was all set on setting up the CLI! Now we get to create our app.

Creating our app

In order to create a new app in the CLI we need to start by running the command vue create hello-word.

After running this you should see a few options

From here we can decide whether we want to use preset features for vue, or if we would like to manually add or remove some features such as veux or vue-router. For now, though we can just use the defaults. In the terminal, you can select what items you want then hit Enter once finished.

And after a long installation that it!

Running our app

Once you change directories and open the hello-world app you should see a bit of code already laid out for you. In fact if you go ahead and type in your console

npm run serve

and navigate to https://localhost8080 you should be able to see a web-page!

Congratulations you're running your own Vue page!

Creating Our Hello World

Now back to your preferred text editor. The file structure of your app should look something like

hello-word
|-node_modules
|-public
|-src

For the moment, the only folder you should worry about is the src. Within the src folder, it should look something like

Main.js is where our Vue app is originally created at the top level. This file calls upon the App.vue component which then calls upon the HelloWorld.vue component. If we click on the HelloWorld.vue file we should see a whole lot of code. This code is whats making up localhost:8080 at the moment. At the top of the page should be a tag name <template>, right below that should be a tag named <div class="hello">. Everything between the tag <div class="hello"> and its closing tag </div> you should be delete. If all is well, we should end up with a blank white web-page with a Vue logo at the center when we navigate back to localhost:8080.Now between the

and the enter <h1>Hello World!</h1>.

After that you should see this screen:

Congrats! You have just printed hello world to the screen in vue.js! For part two I am going to show you how to break your Vue project into multiple components.