< User:Rumanti

(i wish there is syntax highlighting ;-;)
Line 1: Line 1:
=Start Making Scratch Extensions=
+
=Developing Scratch Extensions=
 
'''Scratch Extensions''' adds new functionality for Scratch projects. Ever since [[ScratchX]] was released, everyone can learn to develop Scratch extensions.  
 
'''Scratch Extensions''' adds new functionality for Scratch projects. Ever since [[ScratchX]] was released, everyone can learn to develop Scratch extensions.  
  
Line 34: Line 34:
  
 
==Coding the Extension==
 
==Coding the Extension==
 +
The extension code's contents is basically only the data about the features, functions on what the blocks do, and ScratchX will do the rest.
 +
 +
Start off by creating a JavaScript (.js) file with this boilerplate code, an ''Immediately Invoked Function Expression'' (IIFE).
 +
:::<code>
 +
(function(ext) {
 +
    // Cleanup function when the extension is unloaded
 +
    ext._shutdown = function() {};
 +
 +
    // Status reporting code
 +
    // Use this to report missing hardware, plugin or unsupported browser
 +
    ext._getStatus = function() {
 +
        return {status: 2, msg: 'Ready'};
 +
    };
 +
 +
    // Block and block menu descriptions
 +
    var descriptor = {
 +
        blocks: [
 +
        ]
 +
    };
 +
 +
    // Register the extension
 +
    ScratchExtensions.register('Sample extension', descriptor, ext);
 +
})({});
 +
</code>
 +
  
 
==Sharing Extensions==
 
==Sharing Extensions==
  
 
==References==
 
==References==
 +
This tutorial is heavily influenced by the [https://github.com/LLK/scratchx/wiki Developer Documentation on ScratchX], however, this is ''not'' an adaptation.
 
<references/>
 
<references/>

Revision as of 09:15, 4 August 2015

Developing Scratch Extensions

Scratch Extensions adds new functionality for Scratch projects. Ever since ScratchX was released, everyone can learn to develop Scratch extensions.

Before Developing

Before starting to develop, be sure to remember to do these things.

Required Experience

Before making extensions, the developer must have a good knowledge of JavaScript, importantly multidimensional Arrays, Objects, and Functions, (although these isn't the only required knowledge). You can learn JavaScript using the JavaScript track on Codecademy. It is very recommended to finish that track or similar courses first. However, this is not extremely necessary, as many had learned from experience.

The most important thing is that the developer must understand how their extension is going to work and all the code and algorithm to make it happen. For example, if the developer wants the extension to add the ability to upload files, the developer must first know how to upload files using JavaScript.

Plan the extension

Before starting, carefully plan out your extension and maybe brainstorm. Plan out how the extension should work, what features it should have, its name, and other necessary information. Keep your plan handy when coding the extension, so that you can focus on creating the extension, not distracted by a lack of ideas.

Set up GitHub Pages

The Scratch Team (or more specifically, the ScratchX Team) encourages developers to host their extensions using GitHub Pages, thus using the github.io domain. It is known that some extensions hosted outside github.io work[1][2], however, this is discouraged.

  1. Set up GitHub: If you already have a GitHub account, skip this. Register for an account at GitHub. An offline Git client is not necessary for developing extensions- all the steps necessary could be done online.
  2. Set up the repository: Create a new repository called (YOUR GITHUB USERNAME).github.io. Make sure to get the username right, because it wouldn't work otherwise.
  3. You're done! Now, continue and set up crossdomain.xml.

Set up crossdomain.xml

A file named crossdomain.xml is needed in your repository in order for ScratchX to load your extensions and sample projects from your GitHub Page.

This security file lets Flash know that it is allowed to load resources from your site. It will grant Flash access to files on your public repositories, but will not grant access to any private repositories. To learn more about crossdomain.xml, see this article on Adobe Developer Connection.

Create a new file named crossdomain.xml inside your github.io repository, and paste this as-is inside the file:

<cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd"> <site-control permitted-cross-domain-policies="master-only"/> <allow-access-from domain="scratchx.org"/> <allow-access-from domain="llk.github.io"/> </cross-domain-policy>

Save the file. You're now done setting up crossdomain.xml, continue to coding the extension!

Coding the Extension

The extension code's contents is basically only the data about the features, functions on what the blocks do, and ScratchX will do the rest.

Start off by creating a JavaScript (.js) file with this boilerplate code, an Immediately Invoked Function Expression (IIFE).

(function(ext) {

   // Cleanup function when the extension is unloaded 
   ext._shutdown = function() {};
   // Status reporting code
   // Use this to report missing hardware, plugin or unsupported browser
   ext._getStatus = function() {
       return {status: 2, msg: 'Ready'};
   };
   // Block and block menu descriptions
   var descriptor = {
       blocks: [
       ]
   };
   // Register the extension
   ScratchExtensions.register('Sample extension', descriptor, ext);

})({});


Sharing Extensions

References

This tutorial is heavily influenced by the Developer Documentation on ScratchX, however, this is not an adaptation.

Cookies help us deliver our services. By using our services, you agree to our use of cookies.