DEV Community: victoroliveirab

Quick-starting an AWS Serverless Framework Project

victoroliveirab — Tue, 08 Dec 2020 18:05:27 +0000

Step -1: Download Node.JS to your computer

Step 0: Download Serverless Framework CLI via npm:

npm i -g serverless

Step 1: Setup AWS Credentials to your Serverless CLI:

sls config credentials --provider aws --key YOURKEY --secret YOURSECRETKEY

In order to access your key and your secret key, you must log in to AWS console and navigate to IAM Management and click on Users. Create a user, allow programmatic access, attach an existing policy called AdministratorAccess to it, and then click on your recently created User. Navigate to Security Credentials, click on Create access key, and take note of the two values, especially the secret key as you won't be able to visualize it again.

Step 2: Create a project setting a template and a path. A list of templates (along with many of the information I am providing here) can be found here:

sls create --template aws-nodejs-typescript --path project-name

This will generate a NodeJS project with a package.json file, handler.ts, which contains a sample lambda function, and serverless.yml, which contains configuration to the AWS services we might want to set.

Step 3: Navigate to your newly created project and install the libraries listed on package.json:

cd project-name && npm i

Step 4: Install some developing tools to improve your experience. I recommend the following:

npm i -D prettier serverless-offline serverless-dotenv-plugin

Prettier is a very well known opinative code formatted; Serverless Offline is a package that emulates AWS API Gateway and Lambda on your local machine, which facilitates a lot the development cycle, testing, and debugging; Serverless DotENV allows us to store environment variables in a .env file and access its values in our code and serverless.yml file.

Step 4.1: In case you opted to install at least one of the serverless plugins I mentioned before, add them to your serverless.yml plugins list:

plugins:
  - serverless-webpack # This one should be already there for the template I used here
  - serverless-offline
  - serverless-dotenv-plugin

Step 5: Make sure everything is working correctly by launching serverless offline in your localhost:

sls offline

And, in another shell session:

curl http://localhost:3000/dev/hello

If this command prints a JSON response to your console, you're good to start developing 😄

Why should we draw a wireframe?

victoroliveirab — Tue, 08 Dec 2020 17:06:34 +0000

More often than not, we jump to our keyboards and start writing code the moment we are assigned a new task or decide to work on a project. However, when we give in to our temptations or passions, we steal ourselves the possibility of designing our best solutions and become too vulnerable to reworks and impacting bad decisions. That's why this time I dropped on to Figma to think about the UI and the application's flow before writing anything.

The two interactions I decided are core consist of:

1- User opens application 👉 User checks today's fixtures 👉 User clicks on a fixture 👉 User places a bet;

2- User opens application 👉 User checks last bets and current balance.

With these in mind, let's talk about what is a wireframe and why we should consider them an ally.

Imagine start building a house or manufacturing a car without a proper blueprint to guide actions and track progress. It would surely be a mess. Wireframes are very simple sketches that illustrate behaviors and features and a tool that keeps us on the line.

After this text, I hope it is clear why we should give it at least a try and compare our results to some other project we might have done simply coding a solution.

To the actual wireframe

As I mentioned before, I used Figma to sketch the wireframe. There are other tools to achieve similar results, including simply using pen and paper. I wasn't fully prepared to leave the computer completely behind so a software tool such as Figma (which is free), with plenty of online material to learn, was the go-to.

To help me to work quicker, I downloaded a set of components on Figma called "Material UI kit". It is simply a collection of UI components such as Cards, Form controls, and Buttons based on Google's Material Design. There is a paid version with even more elements.

It is important to mention too that there are levels of wireframes, going from the low-level fidelity (the furthest from the final product) to the high-level fidelity. I chose to stay in the middle but a little towards the high end simply because I do not have much design skills and wanted to get this done fast.

Here's my final navigable prototype:

It ain't pretty but does the job

In the next post, I'll start analyzing the API data structure and writing some backend code to schedule some cron jobs in order to retrieve data on a daily basis.

How do I imagine the project?

victoroliveirab — Tue, 17 Nov 2020 23:51:48 +0000

Cover photo by Glenn Carstens-Peters

I wrote a lot on the last couple of posts and I realize this beginning will be more verbose because I'm not expressing any code: just thoughts and feelings. Anyway...

In summary, for every match, I want to check the odds from the betting sites (initially, just from bet365) and be able to make a guess of match outcome until the match starts or give up guessing a particular game. I should be able to check the history of my guesses, see how much money I would have earned (or lost), and be remembered of upcoming matches to "bet".

In order to not lose interest in the process, I selected topics that I am passionate about and connected them to real things. Two things that I enjoy a lot are soccer and mathematics. I had my time on betting websites trying to predict the outcome of lots of matches and in the end, I believe I broke even (or lost/won a little). I am a very competitive person too. With these three things in mind, the idea formed as creating an application that displays the next games in my favorite leagues (that is, Champions League, English Premier League, and Brazilian Séries A and B).

After that, I list the stack I chose and where they fit in the application:

Gatsby - A React-based framework to build static websites, which offers 2000+ plugins to integrate lots of different services. Here, I chose it for the possibility of building a PWA, the integration with GraphQL, and the easiness of integrating the plugins;
GraphQL - A query language for APIs, which makes possible requesting from the database only the data we want;
RapidAPI - A marketplace of APIs with lots of free and freemium options. After some research, I decided to use API-FOOTBALL, which lets me make 100 requests per day. More than enough to prefetch the matches of the day and their odds;
MongoDB - A NoSQL database to store the prefetched data from the API;
Serverless Framework - A framework that allows programmers to use Serverless services from AWS, Azure, GCP, etc. with easy YAML + CLI development. I'll use AWS Lambdas to schedule API calls and save responses to MongoDB, as well as providing an API to the queries we'll send from the frontend.

For the next step, I'll sketch a wireframe to see how the application is going to flow and decide the API calls I'll have to make in order to not exceed the 100 quota.

See you then :D

What is valuable when starting a new project?

victoroliveirab — Sat, 14 Nov 2020 19:17:21 +0000

Cover photo by Nick Fewings

One of the things I wanted to "debate" on the last post but didn't want it to be too extensive is the reasons I have to embrace this journey.

Let's keep all the political correctness gibberish outside and focus on ourselves. I feel like a lot of times we do things for other people when we should be doing for us. Of course, I'm not telling that selfishness is a quality I value, but we cannot put others' interests in front of our own every time. There is no harm in prioritizing ourselves when starting a new project.

How many times did at least one of these questions stop you from starting?

Is this going to be useful to someone?
Is anyone going to use this?
Will people think less of me if I do it?
If so many people have done this before, why should I bother?

I don't know about you but I ask these questions lots of times. But this time, I've come to the conclusion that:

My project doesn't have to be useful to anyone, just to me.
My project doesn't have to be used by anyone, even me. This is (usually) not the purpose of a new project.
I shouldn't care for someone that judges me for trying.
If I find this topic interesting or want to try to build it, the number of people that already done it doesn't matter.

For instance, one of the first projects I made when I was learning React was a Weather App (wow, how original!) It took a lot longer than it should because: I was busier thinking that no one needed my (or other) weather app than sitting on my chair and learning how to do it; I was worried by the fact that no one would use it (not even me, I don't care if it is going to rain or else); I had a prejudice when I was learning that To-Do and Weather apps were too simple to be bothered by anyone; I feared that my weather app would not be the most beautiful, well written and efficient out there.

By the time I ~~finished~~ got tired of it, I realized (and then forgot, and then remembered - this roller coaster keeps happening with everyone, I guess) that all these questions were irrelevant. I had grasped the initial concepts of components, array rendering via map, filtering, API calls with useEffect, etc. I'm not spending money on launching and marketing this application to be worried about all this kind of stuff. Bottom line: just do it for yourself.

Finally, here are the reasons I am writing this series with zero demagogies:

I want to endure the whole process of idea, creation, deployment, and sharing without quitting. The last two are the most problematic to me;
I want to learn concepts of Progressive Web Applications as I think it is a good concept to explore. I want to dive deeper into GraphQL too;
I want to start writing in English again. For the past years, I've been reading and listening to a lot, but not enough writing (apart of code comments!) and speaking;
I want to put myself in an uncomfortable situation instead of hiding behind my fears and insecurities;
I want to interact with people.

Beginning and Motivations

victoroliveirab — Tue, 10 Nov 2020 22:46:03 +0000

Cover photo by Chillie Charlie

For a long time, I've been trying to start a small-to-medium yet meaningful project to motivate myself into learning something new. I have always learned better by doing but I also get very bored with uninteresting stuff. Besides righting code, one of the things I enjoy the most is teaching and helping people with concepts they may find hard to grasp.

As the majority of programmers, I have a considerable list of unfinished (and mostly even untackled) projects and it has come to my mind that this often happens due to lack of commitment. Doing something to just yourself can be a noble act in it, as society keeps pushing us to share more and more of our lives, but sharing can also be a powerful fuel to drive us forward, if not from the sense of community, at least from the shame of failing or giving up.

I´ll not lie. I care more than I want (and should) to admit that the others' approval plays a major role in some decisions I make. Instead of fighting it, today I chose to invert the equation. I'll put myself at risk of being judged or embarrassing myself into failing to deliver something I consider good and to be proud of.

I'll share my whole process of doing the project, from this very moment of writing this first post, to the day I consider done a MVP of what I imagine. I'll not be teaching, but I hope someone can learn from it. I cannot guarantee that I'll do everything the best way, but I promise to listen to every (if any) advice and answer every (if any, again) question it may appear.

Sometimes there'll be more code and programming decisions, sometimes I'll be vague and perhaps even philosophical about the project.

The secret of getting ahead is getting started. – Mark Twain.