Compare commits
1 Commits
openspendi
...
feat/site/
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b12e725467 |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: The Openspending Revamp
|
||||
date: 2023-10-12
|
||||
authors: ['Luccas Mateus', 'João Demenech']
|
||||
filetype: 'blog'
|
||||
---
|
||||
|
||||
Following up [our previous blog post about the Open Spending revamp](), we now want to share the underlying technologies and tools we used to achieve our goals.
|
||||
|
||||
First of all, we used PortalJS, a JavaScript library that provides a set of reusable React components for mainly for building data portals with data visualization. This is the core technology underlying the Open Spending website, and can be seen in action, for example, on the CSV previews powered by the [FlatUI Component](https://storybook.portaljs.org/?path=/story/components-flatuitable--from-url) from PortalJS. For more information, visit the official website at https://portaljs.org/.
|
||||
|
||||

|
||||
|
||||
Following up on [our previous blog post about the Open Spending revamp](https://www.datopian.com/blog/the-open-spending-revamp), we now want to share the underlying technologies and tools we used to achieve our goals.
|
||||
|
||||
First, we used PortalJS, a JavaScript library that provides a set of reusable React components primarily for building data portals with data visualization. This is the core technology behind the Open Spending website and can be seen in action, for example, in the CSV previews powered by PortalJS' [FlatUI Component](https://storybook.portaljs.org/?path=/story/components-flatuitable--from-url). More information can be found on the official website at https://portaljs.org/.
|
||||
|
||||

|
||||

|
||||
|
||||
Secondly, we stored the metadata as frictionless datapackages in the `os-data` GitHub organization. Frictionless datapackages are a simple format and standard for describing and packaging a collection of (in our case tabular) data. They are typically used to publish FAIR and open datasets. To learn more about frictionless datapackages, visit their documentation page at https://framework.frictionlessdata.io/.
|
||||
|
||||
Octokit, a GitHub API client for Node.js, was used to easily retrieve the metadata for the datasets from the repositories. You can find more information about Octokit on its GitHub repository: https://github.com/octokit/octokit.js, and you can find all the dataset repositories on https://github.com/os-data.
|
||||
|
||||
Finally, to store the data, we used Cloudflare R2, a cloud storage service that allows developers to store large amounts of blob data without the costly egress bandwidth fees associated with typical cloud storage services. We chose this product because it offers a generous free tier that we could use for our project. You can read more about Cloudflare R2 on their official announcement page at https://cloudflare.net/news/news-details/2021/Cloudflare-Announces-R2-Storage-Rapid-and-Reliable-S3-Compatible-Object-Storage-Designed-for-the-Edge/default.aspx.
|
||||
|
||||
You can check out the code for this project at https://github.com/datopian/portaljs/tree/main/examples/openspending. The website is live on [openspending.org](https://www.openspending.org/), you can file issues at https://github.com/datopian/portaljs/issues and get help by accessing our [Discord Channel](https://discord.com/invite/EeyfGrGu4U).
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: 'The OpenSpending Revamp: Behind the Scenes'
|
||||
date: 2023-10-13
|
||||
authors: ['Luccas Mateus', 'João Demenech']
|
||||
filetype: 'blog'
|
||||
---
|
||||
|
||||
_This post was originally published on [the Datopian blog](http://datopian.com/blog/the-open-spending-revamp-behind-the-scenes)._
|
||||
|
||||
In our last article, we explored [the Open Spending revamp](https://www.datopian.com/blog/the-open-spending-revamp). Now, let's dive into the tech stack that makes it tick. We'll unpack how PortalJS, Cloudflare R2, Frictionless Data Packages, and Octokit come together to power this next-level data portal. From our Javascript framework PortalJS, that shapes the user experience, to Cloudflare R2, the robust storage solution that secures the data, we'll examine how each piece of technology contributes to the bigger picture. We'll also delve into the roles of Frictionless Data Packages for metadata management and Octokit for automating dataset metadata retrieval. Read on for the inside scoop!
|
||||
|
||||
## The Core: PortalJS
|
||||
|
||||
At the core of the revamped OpenSpending website is [PortalJS](https://portaljs.org), a JavaScript library that's a game-changer in building powerful data portals with data visualizations. What makes it so special? Well, it's packed with reusable React components that make our lives - and yours - a whole lot easier. Take, for example, our sleek CSV previews; they're brought to life by PortalJS' [FlatUI Component](https://storybook.portaljs.org/?path=/story/components-flatuitable--from-url). It helps transform raw numbers into visuals that you can easily understand and use. Curious to know more? Check out the [official PortalJS website](https://portaljs.org).
|
||||
|
||||

|
||||
|
||||
## Metadata: Frictionless Data Packages
|
||||
|
||||
Storing metadata might seem like a backstage operation, but it is pivotal. We chose Frictionless Data Packages, housed in the `os-data` GitHub organization as repositories, to serve this purpose. Frictionless Data Packages offer a simple but powerful format for cataloging and packaging a collection of data - in our scenario, that's primarily tabular data. These aren't merely storage bins - they align with FAIR principles, ensuring that the data is easily Findable, Accessible, Interoperable, and Reusable. This alignment positions them as an ideal solution for publishing datasets designed to be both openly accessible and highly usable. Learn more from their [official documentation](https://framework.frictionlessdata.io/).
|
||||
|
||||
## The Link: Octokit
|
||||
|
||||
Can you imagine having to manually gather metadata for each dataset from multiple GitHub repositories? Sounds tedious, right? That’s why we used Octokit, a GitHub API client for Node.js. This tool takes care of the heavy lifting, automating the metadata retrieval process for us. If you're intrigued by Octokit's capabilities, you can discover more in its [GitHub repository](https://github.com/octokit/octokit.js). To explore the datasets we've been working on, take a look at [OpenSpending Datasets](https://github.com/os-data).
|
||||
|
||||
## Storage: Cloudflare R2
|
||||
|
||||
When it comes to data storage, Cloudflare R2 emerges as our choice, defined by its blend of speed and reliability. This service empowers developers to securely store large amounts of blob data without the costly egress bandwidth fees associated with typical cloud storage services. For a comprehensive understanding of Cloudflare R2, their [blog post](https://cloudflare.net/news/news-details/2021/Cloudflare-Announces-R2-Storage-Rapid-and-Reliable-S3-Compatible-Object-Storage-Designed-for-the-Edge/default.aspx) serves as an excellent resource.
|
||||
|
||||
## In Closing
|
||||
|
||||
In closing, we invite you to explore the architecture and code that power this project. It's all openly accessible in our [GitHub repository](https://github.com/datopian/portaljs/tree/main/examples/openspending). Should you want to experience the end result firsthand, feel free to visit [openspending.org](https://www.openspending.org/). If you encounter any issues or have suggestions to improve the project, we welcome your contributions via our [GitHub issues page](https://github.com/datopian/portaljs/issues). For real-time assistance and to engage with our community, don't hesitate to join our [Discord Channel](https://discord.com/invite/EeyfGrGu4U). Thank you for taking the time to read about our work! We look forward to fostering a collaborative environment where knowledge is freely shared and continually enriched. ♥️
|
||||
|
||||

|
||||
Reference in New Issue
Block a user