YouTube Tutorial - How to add Blockly to existing html / JavaScript code

[Clyde Eisenbeis]

I've taken the time to learn JavaScript ------> html - <script src="image.js"></script>. 

Keyboard entries control the image on the computer screen.

I'm ready to add Blockly. 

I found lots of YouTube video clips that show Blockly usage.  

I have not found a tutorial that clarifies how to add Blockly to existing html / JavaScript code.

[Beka Westberg]

Hello!

We don't have a video about this specifically, but we do have a lot of text based documentation about how to use Blockly and add it to your web pages. We also have a getting started codelab that walks you step-by-step through creating a basic Blockly page.

I hope that helps! If you have any further questions please reply!

--Beka

[Clyde Eisenbeis]

Thanks for the prompt response!

Using VS Code, I opened the folder "backpack-demo". I attempt to run
the html using F5 -> Web App (Chrome).

I do see the html sentence displayed on the browser page.

However, in the Debug Console I see "Uncaught ReferenceError
ReferenceError: Backpack is not defined at <anonymous> (d:\_MyDocs
_L\Code\__Blockly\blockly-samples-master\examples\backpack-demo\notification_backpack.js:12:36)".

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

> --
> You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/_notCtpvVYw/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/17b9431e-4a77-459d-b1e5-f2b0a2ff8fa3n%40googlegroups.com.

[Clyde Eisenbeis]

I've taken the time to learn JavaScript -> html - <script src="image.js"></script>.   Keyboard entries control the image on the computer screen.

There are many Blockly examples at --- D:\_MyDocs _L\Code\__Blockly\blockly-samples-master\examples ---.

1) Some of those examples use html / js (backpack-demo is one of them).  Others use js only with no html.  Is there a listing of the folders that use both html / js? 

2) Is there a description of the results for every folder?  The folder names do not provide adequate info.  I want to start with the basics as I don't know Blockly yet.  It is very time consuming to read every README.md. 

Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Beka Westberg]

Hello,

I don't know exactly how the "run" functionality in vscode works, but if you open up the html page in your browser you can play around with it!

> Is there a description of the results for every folder?  The folder names do not provide adequate info.

Is there some particular info you're looking for? I don't think we have anything at the moment besides the folder names and the READMEs :/

> I want to start with the basics as I don't know Blockly yet.

If you want to start with the basics I recommend checking out the getting started codelab!

Best wishes,

--Beka

[Clyde Eisenbeis]

Sorry for the confusion. When a person hits F5, while the html code is displayed on the VS Code screen, the Chrome browser displays the actions dictated by the js code.

I'm trying to learn Blockly.  To me, understanding the fundamentals is crucial.  From that I can add additional capability.

I have viewed "codelab".  This is somewhat helpful, but is missing some fundamentals.

What is the first folder with html / js code I should study, then view the results with a browser?    

I found that --- ..\context-menu-codelab\starter-code --- to be a good study as the html code and js code is short and simple.  

However, the  ..\context-menu-codelab\starter-code "<script src =" is different from --- https://blocklycodelabs.dev/codelabs/getting-started/index.html#3 ---  "<script src =" .  Which one is correct? ... and why?

Perhaps, there is a better starter folder?

What is the second best starter folder, I should study, with short and simple html / js code?  What is the third, etc.   

I suspect the "custom" folders to contain advanced code.  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Mark Friedman]

Clyde,

  I would not advise learning Blockly by reading the Blockly source code or by reading the Blockly Samples code.  If you've gone through the "Getting Started" codelab and would like to learn more of the fundamentals, I would strongly suggest reading the material in the developer guide that Beka recommended earlier. While doing that, I would also suggest just diving in and trying to build something interesting to you, using Blockly.  If you run into problems, or have specific questions about anything you are reading or building, then feel free to ask those questions in this group/list.

-Mark

You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/bc2d25d3-9fb0-48b0-80b4-03c4de284d0an%40googlegroups.com.

[Clyde Eisenbeis]

I have studied the code in Codelab.  To clarify further:

1) The --- ..\context-menu-codelab\complete-code --- contains

  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <script src="https://unpkg.com/@blockly/dev-tools"></script>

is different from --- ..\getting-started-codelab\complete-code --- contains

  <script src="https://unpkg.com/blockly"></script>

Which one is correct?

2) The --- \getting-started-codelab\complete-code --- contains a lot of code related to music.   The  --- ..\getting-started-codelab\starter-code --- also contains code for music.

Is there a Blockly code template that contains the foundation for everything (not necessarily for music)?

Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hi,

1) For your question about unpkg and the source URLs, I answered that in the other thread here. The dev-tools source is a separate package we publish that you don't need to use. The URLs for blockly resolve to the same place and either one is correct.

2) The fixed-size Blockly demo is the simplest page we have that uses Blockly. There is a button on this page that says "View Code" that will take you to the source code for it. It only contains a simple toolbox and injects Blockly into a div. It is an HTML page you can open directly in a browser. That might be a good place for you to start modifying if you want to experiment.

Best,

Maribeth

[Clyde Eisenbeis]

1) Sorry.  I'll clarify further. 

The <script src="https://unpkg.com/blockly"></script>

      replaces both  

<script src="https://unpkg.com/blockly/blockly.min.js"></script>

      and 

<script src="https://unpkg.com/@blockly/dev-tools"></script>

      ?

---

2a) On your email, clicking on fixed-size Blockly demo displays block images.  This is a good start!

2b) On that website, clicking on injecting fixed-sized Blockly… displays a good description of "Fixed-sized Workspace".

2c) On that website, clicking on "View code" takes me to github - fixed-demo.  This looks identical to ..\blockly-samples-master\examples\fixed-demo.

2d) When I open ..\blockly-samples-master\examples\fixed-demo with VS Code, I see the files with a .json suffix instead of a .js suffix.  Not sure what this means.

2e) When I run "fixed-demo" using VS Code, I do not see any block images.  Displayed on Chrome I see, "This is a simple demo of injecting Blockly into a fixed-sized 'div' element. → More info on injecting fixed-sized Blockly…".  I never see block images displayed by running the "fixed-demo" code.

2f) In addition, when I run "fixed-demo", in the Debug Console I see "Uncaught ReferenceError ReferenceError: Blockly is not defined at <anonymous> (d:\_MyDocs _L\Code\__Blockly\blockly-samples-master\examples\fixed-demo\index.html:70:27)".  Not sure what this means.

---

3) When I run \getting-started-codelab\complete-code index.html I see this in the debug console "Could not read source map for https://unpkg.com/@blockly/dev-tools: Unexpected 404 response from https://unpkg.com/@blockly/index.js.map: Cannot find package @blockly/index.js.map@latest".  Should I heed this message?  The code does run.

Again, thanks for the prompt response!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

1) You don't need <script src="https://unpkg.com/@blockly/dev-tools"></script> unless you're doing a codelab that says you need it.

<script src="https://unpkg.com/blockly"></script>

and

<script src="https://unpkg.com/blockly/blockly.min.js"></script>

are equivalent and you can use whichever one you want.

2d) I think you are referring to the package.json file. That is a configuration file for npm. npm is a tool for doing modern JavaScript development, but you don't need to worry about it right now. You can ignore this file. All of the JavaScript for this demo is embedded directly in the html file.

2e-f) My apologies. I read too quickly, and this demo is not quite as straightforward as I thought it was. Try replacing

  <script src="./node_modules/blockly/blockly_compressed.js"></script>
  <script src="./node_modules/blockly/blocks_compressed.js"></script>
  <script src="./node_modules/blockly/msg/en.js"></script>

with

<script src="https://unpkg.com/blockly"></script>

and then refreshing the page. This will install blockly from unpkg instead of assuming you have a local copy of it.

3) You can ignore this warning.

Best,

Maribeth

[Clyde Eisenbeis]

1) Is <script src="https://unpkg.com/@blockly/dev-tools"></script> the most complete?  It will always work for 'everything'?

---

2d) Thanks for clarifying! 

---

2e-f) This works now!  However, in the original html file, <script src="./node_modules/blockly/blockly_compressed.js"></script> is listed twice.  I'm wondering why?

---

3) Is there a way to eliminate warnings that are not legitimate warnings?

---

Thanks for the prompt response!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

1) No, dev-tools doesn't include the Blockly library.

If you meant "https://unpkg.com/blockly", then not quite. It contains the core library, all of the built-in library blocks, the English language message files, and the JavaScript generators for the built-in blocks. It does *not* contain the other language translations other than English, or the other programming languages like Python, Dart, etc.

2e-f) It's actually not listed twice. One is blockly_compressed, and one is blocks_compressed. The first contains the core library, and the second contains the built-in library blocks. Both of these are included in what you get when you use <script src="https://unpkg.com/blockly">

3) This is a legitimate warning, it's just not relevant to what you're trying to do right now. Sourcemaps help the browser map minified code back into human-readable source code like what we originally wrote. Something isn't right with the dev-tools sourcemaps (our team has been investigating our sourcemap generation for a bit, but for now, we have these warnings) and the browser is warning us about that. There isn't anything you can do to fix it, but it's not causing any real problems for you either.

Best,

Maribeth

[Clyde Eisenbeis]

1) Thanks!

2e-f) I missed that subtle difference.  Sorry.

 

        Not including "language translations" and "other programming languages", the most comprehensive would be to always use

           <script src="https://unpkg.com/blockly"> </script>?  Nothing else is needed for html / js?

3) Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

It's difficult to answer this question accurately. There are a number of reasons why one wouldn't want to use <script src="https://unpkg.com/blockly">, but I'm not sure they are relevant to you now. Some of these reasons include:

- You want to pin the version of Blockly on a specific version number (that link will always get you our latest release)

- You don't want to use JavaScript, the built-in blocks, and/or English language files, so you don't want to load unused code

- You want more control over your application's dependencies, so you use a package manager instead of manually juggling script tags

- Your application is designed to be used without internet access, so you can't use an online source for Blockly

These are all good reasons why we only suggest using unpkg for learning and demos, and not for production-ready applications. But since I think you are still exploring the library, then yes, using <script src="https://unpkg.com/blockly"> is all you need to do for now, and you don't need to include other imports unless you are following a codelab that instructs you to.

Best,

Maribeth

[Clyde Eisenbeis]

Thank you for clarifying all of my questions!!!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~