[MUSIC PLAYING]
YULAN LIN: Hi.
My name is Yulan Lin and I'm a developer advocate
for Data Studio.
In my last video, I introduced the dscc-gen developer tooling
for community visualizations.
In this video, I'm going to talk through its intended workflow,
how you actually write a visualization using
the template provided; and two, I'm
going to give you a quick tour of the files inside so you
understand better what's going on.
To develop with the dscc-gen template,
first I update the config, then update the local message,
then develop locally, change const LOCAL to false
in index.js, then deploy the visualization.
Let's actually do that.
So this is an already created template project.
I'm going to update the config at src/index.json.
I used the word update because the template already
comes with the working config.
So if I were writing a scatter plot, I'd want an indexDim.
And then let's say I want an xMetric and a yMetric.
I'll save that.
Because the config determines the structure
of the message from Data Studio, an updated config
means your test data will have a representative structure.
Now I run the command npm run update_message,
and a visualization that displays the message from Data
Studio will be deployed to the dev GCS file
location I specified earlier.
So I'll copy this and I will deploy that to Data Studio.
Going to click on Explore More, Build your own visualization,
Manifest path.
And the next thing I'll do is I'll actually copy this message
into src/localMessage.
So copy that over.
Next thing I'll do is replace the code in src/Index.js with
just a console log.
So it says write this code here.
I'm going to replace that with console.log(data) and I'm going
to run npm run start.
And so the initial visualization is gone.
Going to open up the developer console,
and you see that here, it's printed out the object
that I just copied in.
And I open up the console to show you
that I'm basically constantly looking
at it to remind myself what the structure of the data
looks like.
Then I usually develop locally until I'm
happy with the result. Let's say, for argument's sake,
that I'm now happy.
What I'll do is change this const LOCAL variable to false
because I now want it to work in Data Studio.
And save Index.js.
A quick note here--
as you're developing, you can use either YARN or NPM
to manage dependencies.
To build my files and upload my visualization to my GCS dev
location, I run the commands npm run build:dev and npm run
push:dev.
Once it's done, the scripts will printout your deployment
location.
Then you can either re-add your visualization
to your Data Studio report or you can go to the report
and refresh it.
Once you're satisfied with your visualization,
you can actually run build:prod and npm run push:prod in order
to build and deploy to your prod GCS location with caching
enabled and magnify JavaScript.
So that's the basics of the workflow.
Now let's take a tour of the different files involved.
So src contains all the files you need to edit,
including the localMessage.
And so that's what I did when I downloaded the local message
using npm run update message.
Let's take a quick look at the manifest
because there's a couple of things you should not edit.
The DEVMODE_BOOL and the YOUR_GCS_BUCKET
under js, config, and css are automatically
substituted in for you, so please don't edit those.
This is also where your DevBuckets and ProdBuckets
are defined.
So if you want to edit those resource locations,
edit these values in your package.json.
Next, let's look at the script.
So dscc-scripts runs the build and push scripts.
You can also change the message format.
This template, being opinionated,
defaults to the object format, but you can change the update
message command to use the table format
by editing the -f parameter to be table instead of object.
Finally, there's a README in the root of the template directory,
and it provides a quick reference of everything
I've talked about today.
In summary, the general workflow when
developing what the dscc-gen tooling is
to update the configuration, update the local message,
develop locally, change const LOCAL to false,
then deploy the visualization.
If you want to go back and see the visualization running
in your local browser, what you'll want to do
is change const LOCAL back to true.
We designed the tooling to be easy to get started
with for developers who are familiar with JavaScript
and NPM.
So open the terminal, use NPX@Google/dscc-gen vis
and check it out.
To learn more about community visualizations,
visit developers.googl e.com/datastudio/visualization
and connect with us on social media using the hashtag
#datastudiodevs.