{"id":1736,"date":"2015-01-26T13:52:35","date_gmt":"2015-01-26T13:52:35","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1736"},"modified":"2015-01-26T13:52:35","modified_gmt":"2015-01-26T13:52:35","slug":"how-to-use-blockly-in-your-app-video","status":"publish","type":"post","link":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/how-to-use-blockly-in-your-app-video\/","title":{"rendered":"How to use Blockly in Your App [Video]"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fhow-to-use-blockly-in-your-app-video%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p>Are you looking for a way to introduce young makers to computer programming? \u00a0Programming by puzzle piece has become very popular user interface to help empower novice users to code. \u00a0 You can find this programming interface in products like <a href=\"http:\/\/scratch.mit.edu\/\" target=\"_blank\">Scratch<\/a>, <a href=\"http:\/\/appinventor.mit.edu\/explore\/\" target=\"_blank\">MIT app inventor<\/a>, <a href=\"http:\/\/www.learntomod.com\/\" target=\"_blank\">LearnToMod<\/a>, and tools at <a href=\"http:\/\/Code.org\" target=\"_blank\">Code.org<\/a> . \u00a0 <a title=\"Create Puzzle-Based Code Experiences in Your Apps #javascript #html5\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1467\" target=\"_blank\">Blockly is the JavaScript library created by Google<\/a> enabling developers to include &#8220;programming by puzzle&#8221; interfaces in their web applications. \u00a0 See our previous <a title=\"Create Puzzle-Based Code Experiences in Your Apps #javascript #html5\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1467\" target=\"_blank\">post\u00a0<\/a>on this JavaScript library.<\/p>\n<p>In the next few weeks, I will be teaching a coding class for middle school students. \u00a0 While I will be using resources from Code.org for this experience, I wanted to create some special tools to engage these students using metaphors from 3D model building. \u00a0 This work was inspired by seeing <a href=\"http:\/\/LearnToMod.com\" target=\"_blank\">LearnToMod<\/a> or similar tools. \u00a0 In my work, I connected Blockly to OpenJSCad to enable kids to build 3D models using code. \u00a0 Using the strengths of OpenJSCad, makers can 3D print their models using STL format. \u00a0 \u00a0 You can learn more about <a title=\"Make 3D Printable Models with JavaScript\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1636\" target=\"_blank\">OpenJSCAD on this post<\/a>.<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/blockBuilder.jpg\"><img loading=\"lazy\" class=\"alignnone wp-image-1737 size-full\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/blockBuilder.jpg\" alt=\"Block Builder\" width=\"922\" height=\"393\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/blockBuilder.jpg 922w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/blockBuilder-300x127.jpg 300w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/blockBuilder-900x383.jpg 900w\" sizes=\"(max-width: 922px) 100vw, 922px\" \/><\/a><\/p>\n<p>Check out my demo code here:\u00a0<a href=\"http:\/\/inspiredtoeducate.net\/blockly\/demos\/blockbuilder\/\" target=\"_blank\">http:\/\/inspiredtoeducate.net\/blockly\/demos\/blockbuilder\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>I found the following YouTube video and links helpful in constructing my tools. \u00a0If you&#8217;re going to include a puzzle programming interface in your web application, you have to enable the puzzle programming component to call JavaScript functions in your API. \u00a0 \u00a0The following video discusses how to create custom puzzle blocks and link those blocks to your API.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/s2_xaEvcVI0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Make sure to check out\u00a0<a href=\"https:\/\/developers.google.com\/blockly\/\" target=\"_blank\">https:\/\/developers.google.com\/blockly\/<\/a> to learn more about this awesome JavaScript library.<\/p>\n<p>It would be fun to see someone connect blockly to robot control systems, voxel.js, \u00a0business work flows, or applications empowering young makers. \u00a0 Let us know if you build anything cool with Blockly!<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Top Stories on InspiredToEducate.NET<\/strong><\/p>\n<p><strong>Learning To Code<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1319\">Easy Data Visualization with Google Charts and JavaScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=795\">Learn to Build Your Own Conversational Bot using ChatScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1285\">10 Free Resources for Learning JavaScript and HTML5<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1238\">17 Fun Tools To Teach Kids To Code by @ChrisBetcher<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=623\">Benefits of Teaching Kids To Code That No One Is Talking About<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1349\">Easy Recipes for Building Android Apps using MIT App Inventor<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=738\">12 Steps To 3D Print Your Minecraft Creations<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=849\">How to Build Your Mobile App using HTML<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1079\" target=\"_blank\">Simple Minecraft Programming Using ScriptCraftJS<\/a><\/li>\n<\/ul>\n<p><strong>Science Education<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1093\">Why hate science?<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=374\">7 ideas for creating a student centered learning environment by Paul Andersen<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1022\">Using candy to teach DNA structure<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Join the\u00a0<a href=\"https:\/\/www.facebook.com\/groups\/1529734900588516\/\" target=\"_blank\">Spark Macon Maker Space Community on Facebook<\/a><\/strong><\/p>\n<p>&nbsp;<\/p>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fhow-to-use-blockly-in-your-app-video%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for a way to introduce young makers to computer programming? \u00a0Programming by puzzle piece has become very popular user interface to help empower novice users to code. \u00a0 You can find this programming interface in products like Scratch, MIT app inventor, LearnToMod, and tools at Code.org . [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[22,4,18,16,23,11,8],"tags":[],"_links":{"self":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1736"}],"collection":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=1736"}],"version-history":[{"count":1,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1736\/revisions"}],"predecessor-version":[{"id":1738,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1736\/revisions\/1738"}],"wp:attachment":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=1736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=1736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=1736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}