Astro with hygraph

Cristian Muñoz — Fri, 28 Jul 2023 23:05:46 +0000

How to integrate Hygraph CMS with Astro and Netlify?

First, create your proyect with the command

npm create astro@latest

Go trough the installation process
Create your account in Hygraph and create a project.
Go to your project dashboard in Hygraph, and select "Proyect settings"
You can grab >>
The Content API or the High Performance Read-only Content API for data visualization.
Then you need to add permision for this API to be accesible. Click on the "Add Permission" button on the Public Content API section. In this case we will use the Read permission.
Create your data schema on hygraph. In my case i would create a blogPost with a title, a slug and content.
Create a blog entry and complete the fields.
I created the title of a Single Line Text, the slug of Type URL and the content of Multi Line text.
You could use Marked and some tailwindcss/ypography for styling the Markdown content.
In astro, save your HYGRAPH_ENDPOINT in a .env file on the project root. Then you could call this key with import.meta.env.HYGRAPH_ENDPOINT in any of your files.
For quering the blogPost data you could import into your index page like this:

  const query = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      query: `
      {
        blogPosts {
          id
          title
          slug
          content {
            markdown
          }
        }
      }`,
    }),
  };
  const response = await fetch(import.meta.env.HYGRAPH_ENDPOINT, query);
  const json = await response.json();
  console.log(json.data.blogPosts)

The code provided before can be on its own function or in the Astro frontmatter. You should see the log of the posts on the server console. If not, then be sure to have published your blog post.

And there is, you could find this working in this github repo.
It has marked for parsing markdown content!

console.log('See ya astronauts!')

Mastering Go Web Development: Building a Flashcard App

Cristian Muñoz — Sun, 23 Jul 2023 17:54:47 +0000

Introduction

This project will provide valuable insights into Go's web development capabilities and best practices, whether you're a beginner or an experienced developer.

By the end of this series, you'll have a solid foundation in Go web development and be equipped to create your own web applications

1. Installation

First we must install go for your operating system of choice. Im using wsl on windows and have no problem following the official docs instructions

We are gonna asume that you are using a go version > 1.16, so modules are enabled by default (ref.)

Note: If you wanna understand the difference between modules and the legacy GOPATH, read this great article

2. Setting up the project.

Note: I'm following the convention from this repository for the project structure.

2.1 Create the folder an initialize the project

mkdir flashcard-go
cd flashcard-go
go mod init github.com/<your_username>/flashcard-go

This should have created a go.mod file. This file has the name of the module and the go version. A module is identified by a module path, which is declared in a go.mod file, together with information about the module’s dependencies. Typically, a module path consists of a repository root path, a directory within the repository (usually empty), and a major version suffix (only for major version 2 or higher)(ref.)

2.2 Software architecture of the project

There exist a numerous software architecture and patterns, model-view-controller (MVC), client-server, microservices, layered, hexagonal (Ports and Adapters), and various others. In our case i'm choosing a hexagonal approach. It is overkill, it is not neccesary, its impractical for our little project, but it is widely used and we can learn a lot from it.

Our entry points are gonna be inside a cmd folder. Here we can have multiple entry points (for example separate the webapp from the cli) and you could keep everyone on its own folder (for testing purposes). The contents of the files inside this cmd should not be used by other parts of the webapp.

The first thing we are gonna do is separate the core from our source code. As of Go 1.4 the go command introduces a mechanism to define "internal" packages that may not be imported by packages outside the source subtree in which they reside. To create such a package, place it in a directory named internal or in a subdirectory of a directory named internal (ref.).

flashcard-app/
├─ cmd/
│  ├─ web/
│  │  ├─ // Main entry point
│  ├─ cli/
│  │  ├─ // Possibly another entry point
├─ internal/
│  ├─ // Business Logic
├─ site/
│  ├─ // Front End

3. Defining the business.

Purpose of the App

This webapp is gonna help users create quizzes using flashcards. Users can create, view, edit, and delete flashcards and quizzes. The primary goal is to provide a simple and intuitive interface for users to create educational quizzes.

Identify Core Business Concepts

Flashcard: An individual card used for learning. Each flashcard contains a question and its corresponding answer.
Quiz: A collection of multiple flashcards organized to test a user's knowledge on specific topics. A quiz should have a title, description, and a set of flashcards.

Model Business Rules and Relationships

Flashcard must have a non-empty question and answer.
Flashcards are associated with quizzes (many-to-one relationship), meaning multiple flashcards can belong to the same quiz.
A Quiz must have a non-empty title.
A Quiz must have a non-empty description.
A Quiz can have zero or more flashcards associated with it (one-to-many relationship).

Entities

Flashcard
Quiz

Use cases

We are gonna make this thing simple and add these posible uses cases

Creating, editing and deleting Flashcards
Creating, editing and deleting a Quiz
Taking a Quiz: Users can take a quiz, and the application will present each flashcard's question one by one, allowing users to answer
Scoring a Quiz: After answering all the flashcards in a quiz, the application will calculate and display the user's score

4. Start Coding

With the foundation set, we lets begin our coding journey in our next blog post.

Stay tuned as we delve into implementing the Hexagonal Architecture, organizing the project structure, and bringing our "Flashcard Quiz App" to life using the Go programming language!

DEV Community: Cristian Muñoz