DEV Community: nicopaulino

Google Cloud Platform and Its Amazing App Engine

nicopaulino — Sat, 30 May 2020 16:04:16 +0000

Happy Saturday everyone! I hope you are doing well as you're reading this post. I'm doing pretty decent. Just yesterday my team and I presented our thesis app for our coding bootcamp! It's an amazing little social media app for plant enthusiasts. It's very crazy that I will soon be done with the class environment and move into the work force. And what a great economy to start working in! All joked aside I'm excited to show the world what I can do in the world of software development.

With one week left to build our app, we had yet to deploy it! We made a mobile app, and we weren't going to add it to the app store or anything, so all we could do was deploy the back end, but we still needed to do that. Somehow I was entrusted with the amazing task of deploying our lovely app. There was just one problem: I didn't have a lot of experience with deploying! I had deployed on Heroku and Digital Ocean before, but that was about it. I knew I had a big task ahead of me, but it was a challenge I was excited to take on.

I knew that I wanted to deploy our app on Google Cloud, but I didn't know much about it, so I had to do my research. So I will share with you what I learned about Google Cloud, which will hopefully help us both have a better understanding of it, and then I'll go through how we can deploy a very basic app.

Google Cloud was founded in 2008 by Google, and runs on the same infrastructure that Google uses for their own products (Youtube, Gmail, etc). It was made with a focus on cloud computing services, and they have over 90 products under the Google Cloud Platform brand. Which to me is crazy! Once I learned that I understood why their documentation can be so frustrating to read.

One of those amazing brands is the Google App Engine, or simply App Engine. App Engine is a platform that allows you to develop and host websites on Google's data centers. And deploying a website with the App Engine actually isn't that bad. So let's walk through deploying a very basic, Hello World, app.

The first thing that we're going to do is go to our GCP console and create a new project.

As you can see I currently have three projects, but we're gonna work in My Project 92601.

So after we have a project we can click on the cloud terminal and clone our repo into our project. This would be the same way you always clone your repo!

Now we can shell into our repo and test our app. This would be the same command you would normally use to run your app (npm run server, npm run start), but for this app it's 'go run .'.

If everything is working for your app (mine seems to be working great) you can create your app! You do this with the following gcloud command.

gcloud app create

Now you're ready to deploy your app! Just run this in the terminal!

gcloud app deploy

If you have any errors in your terminal, don't be afraid to look up your errors! But if everything went according to plan, you should get a URL for your sight. Let's check mine out.

Perfect!

Of course this was a very simple app. I haven't gone over environmental variables or app.yaml files, But maybe I will in a future blog post. I hope that this was helpful!

React Router Native, a Love Story

nicopaulino — Sat, 23 May 2020 21:25:51 +0000

Happy Saturday everyone! I hope that your time in quarantine has been productive and not at all depressing. It's that time of the week again where I try to stretch out a one minute blog into a three minutes. So here we go!

I am currently working on an app with my team at school. It is a mobile app that we are using with React Native and Expo, I never had much experience with routing before, so that was a huge reason why I asked to be assigned to set up some of the basic routing for our app. I had our app basically set in a Bottom Tab Navigator, so our files would just route through there, but what about any routing that would need to take place in those tabs? That's where I was stuck. I did some research and I came across the beauty and lifesaver that is React Router Native, and instantly I was in love!

React Router Native is an npm package that makes routing within your app super simple. I was able to understand it and successfully integrate in my app within ten minutes. And trust me, if I can do it, so can you.

First, you'll want to install the package.

npm install react-router-native

After that you can then import from the package, I recommend destructing and grabbing the NativeRouter, Route, and Switch.

import { NativeRouter, Switch, Route } from 'react-router-native';

The Native Router is what you are going to need to wrap your entire routing page in. So everything else you want to route should go in between these two tags.

import React from 'react';
import {NativeRouter, Switch, Route} from 'react-router-native';

export default function RouteScreen(){
  return (
    <NativeRouter>

    </NativeRouter>
  );
}

You can now import any file that you will want to create a route for, just make sure you have the correct paths so you don't crash your app.

You can then use the Route tags inside of the NativeRouter. The Route requires an exact path, and the name of the component that you'll be routing to. Whatever component you want to be routed to first should have a path of "/". The other paths can be named whatever you want, just make sure it's something good because you'll be using it later.

This is an example of what your file should look like so far.

import React from 'react';
import {NativeRouter, Switch, Route} from 'react-router-native';

import MessageScreen from './MessageScreen';
import NewMessageScreen from './NewMessageScreen';

export default function MessageRouteScreen(){
  return (
    <NativeRouter>
          <Route exact path="/" component={MessageScreen}/>
          <Route exact path="/privatemessages" component= 
               {PrivateMessageScreen}
          />
    </NativeRouter>
  );
}

So this Route system will work, but a very important thing that will help you down the road is Switch. Switch will make sure that only one file is rendering out a time. Without this, for some random reason whatever it may be, there may be a scenario where the conditions are met for both pages to render, but switch will prevent this from happening. So let's wrap all of our Routes in Switch.

import React from 'react';
import {View} from 'react-native';
import {NativeRouter, Switch, Route} from 'react-router-native';

import MessageScreen from './MessageScreen';
import PrivateMessageScreen from './PrivateMessageScreen';

export default function MessageRouteScreen(){
  return (
    <NativeRouter>
      <View>
        <Switch>
          <Route exact path="/" component={MessageScreen}/>
          <Route exact path="/privatemessages" component= 
               {PrivateMessageScreen}
          />
        </Switch>
      </View>
    </NativeRouter>
  );
}

So now we have a working router! Now we just need to create functions in our components that will allow us to access these routes.

In my example, I will go to my initial route, MessageScreen, and do two things. I will pass down history in my function initialization. TLDR this will allow us to route to our other pages.

export default function MessageScreen({ history })

So now that we can access history, let's create a button that will send us to the private message screen! We are going to call history.push, and then the name of whatever route we want to render to.

<Button
title="Send me to PrivateMessageScreen!"
onPress={() => history.push("/privatemessages")}
/>

And then in PrivateMessageScreen you can just create a button that sends you back! It's that simple.

And that's how you can set up a simple router with react-native-router. I hope it helped!

React Native for People Who Know React JS

nicopaulino — Sun, 10 May 2020 02:07:59 +0000

Hello everyone! It is that time of the week again where I need to write a blog by the end of the day or else I can't enjoy my Sunday! I'm kidding, I love writing blogs. It's been very challenging and fulfilling these past couple of weeks to have to article what I've been learning in a way that actually makes any sense at all.

This week of my code immersion course has been very interesting, we had to start on our thesis project, a four week project that we will then hypothetically (depending on whether or not corona is still a thing) present to our friends, teachers, and even potential employers. However, the catch was that we could not begin coding for our project until next week! So this entire week had to be dedicated solely to planning out our application and researching the technologies that we want to use.

My team decided that we wanted to create a mobile app, something that none of us had never done before, so we had a lot of questions about exactly how we would create this. The biggest question I had was, "What language can we use to code this app?" I had heard about Swift before, but it turns out Swift can only create apps for iOS, and my team didn't want to create phone exclusive app (even though iPhones are the only ones that matter). It was upon us pondering this question that we came across React-Native.

For those that don't know, React-Native is a front end framework that allows you to create applications for both iOS and Android. Having learned React JS earlier this year, I figured that these two frameworks would be exactly the same and I could just code it the same way I would any other React app. Well that's only partly true. There's a few key differences between React Native and React JS, and I'd like to go over those difference really quick to help you have a better understand of just how React Native Works. Before I get into the similarities, let's talk about how the two are different.

The biggest and probably most important difference between React JS and React Native are the tags. While in React JS you could use basic html tags in your code, React Native uses it's own kind of tags. These different tags can be imported from react-native upon the creation of your file.

This is a very basic page made with React JS. If we could see this page, all we would see is "Hello World!" and a picture of a random lady. You can even do some basic styling inside of the tag. Pretty simple right? You just use the same tags you would use in HTML, but with React Native you have use their own kind of tags.

Right off the bat you can see some key difference between the two code snippets. While you still import react the same way, you need to also import react-native. And those new tags I've been talking about are just what you'll be importing. Each and every single tag that you want to use needs to be imported from react-native.

The most basic and fundamental tag is View. React docs describes View as a container that, "supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView,

, android.view, etc." View is basically what makes react-native so flexible to work on any other phone.

Text and Image tags are pretty self explanatory. the only thing I feel the need to explain is that an image's url needs to be put in an object in the tag. and the key for that url is called the uri.

The last important thing that I want to touch on is styling! Styling can be done pretty simply in react-native. Instead of doing your styling in a separate css page, you can do your styling in the same file. Import Stylesheet from react-native and give your tags style attributes. The way that I prefer to do this is to create a variable and call StyleSheet.create and give it an object, and in that pass in an object for each tag you would like to add styling to. In my example I directed my style tag in Text to this.Text, and in the styleSheet I gave my Text the color of white!

React Native is a very useful tool in these phone centered times. If you're familiar with React JS it should be pretty simple to pick up!

Fabric JS and React, an Unholy Union

nicopaulino — Sat, 02 May 2020 00:50:09 +0000

Hello everyone! It's been a while since I posted on this blog. How are you doing? Who are you? Why am I asking questions? Anyways, it has been an eventful couple of weeks for me. Somehow, I made it to the last leg of my coding boot camp, and I have about five weeks until I finish and move forward to the job hunt phase. It's very exciting, but also very nerve wracking! One of the things I have been working on these past few weeks is creating an app from scratch with a team in y school. We settled on creating a social media app that allows users to upload photos and let them and their friends draw on the photo and post their creations (appropriately named Doodle Society).

I was tasked with creating the actual page that allows you to doodle on your friends pictures, and I had my work cut out for me. We decided to use Fabric JS because Fabric has so much more than just free drawing, and we thought it would be nice to possible insert more features into the drawing page. There's was just one problem: I couldn't find anything about using Fabric with React! So maybe this article will help some poor soul who decides to do something similar to what I did.

So the first thing you'll need to do is import fabric, this can be done by running the command below, and destructure fabric just to make things easier.


    
import { fabric } from 'fabric';

Now that you have access to fabric and all its wonderful features, let's get started on creating a canvas. For the app I made with my team we set up our canvas so that you were drawing on a picture that was selected, but for this example we'll just create a basic white canvas.

If you're using Hooks (which I recommend you do) you can put your canvas in useEffect, but if you're using React JS you should be able to do it in componentDidMount, but don't quote me on that! Let me show you my example and then I'll try to break it down.


    
useEffect(() => {
    canvas = new fabric.Canvas('canvas', {
      isDrawingMode: true,
      selection: true,
      hoverCursor: 'pointer',
   });
  });

The first and most important thing that needs to be done is our canvas needs to be created! This is being done of the second line with new fabric.Canvas. This takes two arguments a string that you can name the canvas, and an object that will let you give the canvas different attributes. The most important attribute it isDrawingMode which needs to be set to a boolean, this allows you to actually draw on the canvas. You can also assign other keys like height and width to the canvas.

What's so great about fabric is that the canvas has tons of different methods that you can use to create different patterns, shapes and further customize your canvas. For example, canvas.freeDrawingBrush has many different methods that let you customize your brush's width, color, and many other options. Here's an example of just one of the many ways you can utilize fabric canvas.


    
canvas = new fabric.Canvas('canvas', {
      isDrawingMode: true,
      selection: true,
      hoverCursor: 'pointer',
      height: 375,
      width: 375,
    });
    canvas.on('mouse:up', () => { canvas.item(canvas._objects.length - 1).selectable = false; });
    canvas.freeDrawingBrush.width = 25;
    canvas.freeDrawingBrush.color = 'blue';

Higher Order Functions: Each, Map, & Filter

nicopaulino — Sat, 04 Apr 2020 23:50:57 +0000

Hello everyone! I'm currently at the end of my fifth week at my coding school, and it's honestly been a pretty rough week. I've spent about three days trying to get a database to actually work, and I'm still unsuccessful! But a wise man once told me, "It is what it is", so I figured that I would write about something today that I actually understand: higher order functions.

Higher order functions might sound complicated to someone that's relatively new to code; I know that they definitely were to me! However, they're not complicated. A higher order function is just a function that takes in another function as its argument. And I know you might be asking me, "Nico, how can you pass a function into another function?" And I'm glad you asked! A function can be passed into another function just like any other data type can!

Let's take a look at my creation at one of the simplest higher order functions, each:


    var each = function(collection, action) {
  if (Array.isArray(collection)) {
    for (var i = 0; i < collection.length; i++) {
      action(collection[i], i, collection);
    }
  } else {
    for (var key in collection) {
      action(collection[key], key, collection);
    }
  }
};

The each H.O.F is a function that takes either an array or an object, and iterates through it. That's all it does! This is so useful so we can stop making long and convoluted for loops of for in loops every time we want to iterate through something.

If you want an example of how we would use this each function, let me show you the next higher order function I wanted to talk about, Map:


    var map = (collection, func) => {
  let mapArray = [];
  each(collection, (element, index, collection) => {
    mapArray.push(func(collection[index]));
  });
  return mapArray;
};

Before I dive into just what a map function does, take a look at line three. Do you see how I'm using the each function? Of course I could I used a for loop right there, but it is a lot cleaner to make reusable functions instead of having to write them out every single time that you want to use them. The argument that I'm passing through each is a function that is pushing into my result array the result of calling our callback function on every element in the collection array that someone would pass through. And that's the purpose of map: to run a function through every element in a an array and return a new array with the results for each element. This is how someone would use map:


    let myArray = [1, 2, 3, 4, 5];
map(myArray, number => number * 2);
//returns [2, 4, 6, 8, 10]

Map is one of the most important higher order functions you can! Now takes a look at one that I have never used since I learned it, but I think it really helps drill in just what higher order functions are useful for.


    var filter = (array, func) => {
  let resultArray = [];
  each(array, (element, index, arr) => {
    if (func(element, index, arr) === true) {
      resultArray.push(element);
    }
  });
  return resultArray;
};

Filter is a higher order function that iterates through every element in an array or object and runs a callback function through every element. Every element that equates to true is then pushed into an array with all of the other elements that equaled to and that result array is returned. I don't think that I've ever had to use this function in a practical sense yet, but it is good to know because it lets you see all the different ways you can use higher order functions.

While I had to painstakingly learn all of these functions in the beginning of my learning, you don't ever have to do that! All of these higher order functions are available in the underscore library. I suggest you take a look if you want to learn more about the usefulness of higher order functions.

Reacts JS: Stateful vs Stateless Components

nicopaulino — Sun, 29 Mar 2020 06:06:01 +0000

Hello Everyone! I'm writing this blog after a 16 hour day at school, so please excuse me if I sound like I'm delirious. I will try my best to explain the subject in the most efficient and professional way possible. This was the end of my fourth week at Operation Spark. It has still been a hard transition to digital class (we're still in quarantine), but I'm trying my best to make it through. This past week we learned to make a Youtube clone in several different libraries and frameworks. One of the libraries that we used was React JS, something I had heard a lot about but I had never actually learned about. When I was trying to understand how and when to create a stateless component, all of the answers just said a stateless component is a component without a state; and that's not very helpful! So in this blog I will try my best to actually explain what the difference is between a stateless component and a stateful component, and when you should use each.

But first, let's talk about components! A component is basically just a piece of functionality in your app or website. Let's say your on Youtube, the video player might be a component. Or the list of recommended videos could be a component, with each video in that list being a component.

Here is an example* of a component:


    
//const VideoList = (props) => (

//  
//    {props.videos.map((video, index) => (
//      
//  {props.clickedVideo}/>
//    ))}
//  

//);

(I had to comment everything out to get the HTML to show up)

In this example, this component is creating a div of video-list and mapping through our video data and creating an entry in the video list for every video in the data.

The component in the example is a stateless component, but it will be easier to explain stateless if we first talk about stateful! Please forgive me for going all over the place.

So a state is an object that is owned by the component where it is declared. The scope of a state is limited to its current component. The values in a state object cannot be passed down to children. Before I go any further let's look at an example of a component that has state.


    
//class Main extends Component {
//  constructor() {
//    super()
//    this.state = {
//      movies: []
//    }
//  }
//  render() {
//    
//  }}

In this example, we are giving our state a movies key with an array as its value. We're then rendering a div for every element in the array. One important thing to note here is that every component with state has to be a class!

Now that we know a little bit about state, let's talk about stateless!

A stateless component is simply a component without a state object, nut I know that's not the answer you were looking for. Stateless components get their info from passing in props into their component. These props, unlike state, can be inherited to their children and aren't owned by their component.

Let's take a look at another stateless component:


    
// const MovieList = (props) => {
//  return (
//    

//  {props.movies.map(movie => { return movie

//      })}
//    
//  )}

Instead of getting our values from our state, we're getting it from the props that are being passes down. Also, stateless components never have to be class, while they can be, it's basically useless.

I hope this was helpful!

ES5 v ES6 Pseudoclassical : Dawn of Inheritance

nicopaulino — Sat, 21 Mar 2020 16:07:21 +0000

Hello! It is now week three of my wonderful journey through Operation Spark's immersion program. It has been a very eventful week. Due to COVID-19 we are now having class completely online. That didn't get in the way of us having to learn three different frameworks (BackBone, React, and AngularJS) in one week! Somehow I actually made it through, but it wasn't exactly easy. This has been a difficult transition for me, but it's not without its benefits. I'm now able to complete my project in the comfort of my pajamas! So that's nice. One of the things I learned while in my pajamas was ES6 pseudoclassical instantiation inheritance. I know that's a mouthful, so let's break it down!

So what is Pseudoclassical instantiation? Basically it's an instantiation pattern that allows you to put your function in the prototype of a constructor function. This, in my opinion, makes it better than functional of functional shared instantiation because you don't have to keep rewriting the same functions over and over again when trying to pass them down to a child, you just have to learn the proper way to access them from the parent. The way pseudoclassical instantiation was done in ES5 is considerably different from the new standard, so let's take a look at that first.

Let's take a look at myself:


    
const Nico = function(){
  this.gender = 'male';
  this.age = 20;
  this.height = '6ft 2in';
  this.passesVibeCheck = true;
};
Nico.prototype.birthday = function(){
  this.age++;
};

We have a constructor function, appropriately called Nico, and inside of that function we have several variables with attributes I may want to pass down to my children (height, passesVibeCheck, etc). And just outside of that constructor we are placing a function inside the prototype of the constructor function! Whenever we call the birthday function the birthday variable will increment by one.

Now let's look at what happens when I accidentally have a child:


    
const NicoJr = function(){
  Nico.call(this);
  this.age = 1;
  this.height = '2ft';
}
NicoJr.prototype = Object.create(Nico.prototype);
NicoJr.prototype.constructor = NicoJr;

Just like with the parent function, we make a constructor function, and to get all of the variables from the parent we have to use the .call method. This will give us all of the variables with the same variables. But what baby do you know that's 20 years old?? So let's change that. All we have to do is re-declare the variable and it will properly change from its parent's value.

And you may be asking: what about the birthday function? And I'm glad you asked! In order to inherit that function we need to set the constructor function's prototype to calling Object.create on the parent's prototype. We then we need to assign the prototype's constructor to the child's constructor function.

ES6 pseudoclassical inheritance is a little different. Let's take a look at myself like that:


    
class Nico {
  constructor(){
    this.gender = 'male';
    this.age = 20;
    this.height = '6ft 2in';
    this.passesVibeCheck = true;
   }
  birthday(){
    this.age++
  }   }

Before we can create our constructor function, we have to create a class, and then inside of that class is where we can create our constructor function. Inside of our function we will do the same thing that we did before, creating our variables and assigning them to the values that we want. Now outside of the constructor but inside of the class is where we will get our method. The biggest difference here is that we will assign the function as a method in the class.

Now let's take a look at my child:


    
class NicoJr extends Nico{
  constructor(){
    super();
    this.age = 1;
    this.height = '2ft';
  }
}

Instead of using .call to inherit properties, we need to create our class and use the extends keyword so we know what the parent class is. Now inside of our constructor we will use the super method, this will give us all of variable that are inside of our parent. If we want to reassign one of those variables we can do it right after calling super. The best part about ES6 is that we don' have to do anything else to inherit the birthday function, it is already inherited!

I understand that some people are too far deep in their ES5 ways, but I promise you that if you make the effort to switch over, it will be well worth it!

The Tree Data Structure of Life

nicopaulino — Sat, 14 Mar 2020 14:28:48 +0000

Hello world, I'm Nico. I'm a student studying software engineering in New Orleans. This week I learned about data structures, and today I will give a quick explanation on one of the most common data structures around: trees.

Before we jump into trees, let's start with a little bit of computer science. Data structures are simply a way for us to store and hold our data. I know that sounds too simple, but it's true! Every data structure tends to have methods for inserting, removing, and finding an element in an array. Different data structures come with unique pros and cons and unique time complexities. If you have any familiarity with Javascript, you already know about one data structure: arrays. Arrays aren't something that only exists in Javascript, but they are used that much that Javascript is kind enough to have a feature that implements arrays for us. Now back to trees...

Trees are non-linear data structures. This means that, unlike some other data structures like Arrays or Stacks, trees have no set start or end.

Trees store nodes. The first node that is put into a Tree is called the root (see why it's called a tree?) This node can have child nodes that can only be accessed by first accessing the root node. That second node can then have its own children and so on and so on. The tree is storing all of the data in a hierarchical manner, this means that if we want to get to a child node, we first have to go through the root and then to the parent and continue to until we finally reach our desired node.

Some quick terminology for trees:

 - root: the initial node that every other node is linked to.

 - parent: the node that the has a reference to another node.

 - child: any node that has a parent node linked to it.

 - sibling: two nodes that share the same parent.

 - leaf: a node that doesn't have any children.

I understand that this might be hard to visualize, so I have a picture!

A great example of a Tree data structure is the file system on your computer. The PC is the root of the entire file system. Documents and Desktop are its children which makes them both siblings. They then have their own children all the way down to the "2018 Taxes" which has no children at all, making it a leaf.

To get to your music folder you have to start at your PC, then to your desktop and then you can access your music folder and whatever you have stored in there.

Another example of a tree data structure is the DOM element in HTML. The root of the body, and every tag you add in the body can have its own children and so on and so on.

A great thing about Trees is its time complexity. Inserting, removing, and finding a value in a tree all have logarithmic time complexities. This just means that if you had a tree with a high quantity of data the task of traversing the tree would only increase at a smaller rate every time. This is very useful if you are thinking about the possibilities of scaling your website or application to be usable for thousands or even millions of people.