Wix StudioでWix IDEを使ってコーディングを始める方法

Hey everyone, did you know that Wix Studio provides you with a choice of environments for developing your websites?

Today, you will get familiar with working in Wix IDE and write your first lines of code.

To enable the Dev environment and access Wix IDE:

Click on the curly braces in the left-hand navigation.

Next, click "Start coding" to initialize Wix IDE.

Click code in Wix IDE:

Wix IDE is a VS Code-based IDE and will open in a new tab.

The IDE will open on a welcome screen, but let's take a look at the "Read Me" over on the left-hand side.

This contains documentation that you can reference if you have any questions while working in the Wix IDE.

Now let's review the file tree on the left-hand side:

The "source" folder is where all of the code for your site lives.

    The first file is "backend." You can see all of your backend code files here.

    The "pages" folder contains all of your front-end code files for each page.

     The file names you'll see consist of the name of the page and then an ID for internal use. You do not want to change or create any new files in this folder. They are generated for you for Pages specifically. Any adding, renaming, and deleting can only be done in the editor, and this will sync with the code files. This is not the same as backend, which you can create in either place. 

        There is another video covering backend files which you can reference later (link in the description).

    You also have access here to your public files and your Styles if you're using custom CSS.

    The "JS config" and "Wix" folders are system folders and can be ignored.

To the left of your file tree is a feature unique to Wix IDE, which is the Wix AI Assistant:

You can use this to help you write code, fix errors, discover new features, and learn all about the different APIs. There's a link in the description so you can learn more about how to use this feature on your own.

To open files in the Wix IDE:

You can either click on them over here in the left tree. But as your project grows, you may want to use a shortcut to find the files you're looking for more efficiently.

You can click "command" plus "o" or "control" + "o" if you're on Windows and start typing the name of the file you were looking for to open it.

Another great feature is the ability to open two code files at the same time in a split screen:

To do this, use "command" or "Control" + "Backslash" which will open the split screen.

Then you can use "command" plus "o" again to open whatever file you want to have open next to it. This is really useful when you're working on backend functions that you're going to import into your page code. You can see what's going on side by side and modify them. 

We only need a homepage open, so go ahead and close the master page file.

The last feature before we get started is the timeline at the bottom:

While you are working, this will autosave code changes and keep a history of the current IDE session so you can revert back while you're working if needed.

Now that we're acclimated, let's write some code!

If you haven't already, in the editor, you'll want to make sure that you have a button and a text element on your page.

* In the "onReady" function, let's type "$w" and the ID of our button inside the parentheses to target the element we're writing the click handler for.

* Notice we have an error on the ID for the button, and this just means that we haven't actually assigned the button element the ID that we want to use yet.

* A best practice is to give meaningful IDs to any element you plan to manipulate via code. 

* So let's go back over to the editor and give these elements some names. You can give an element a name by clicking on it and then in the properties panel you will be able to update the ID.

**Let's go ahead and do the ID for the text element now.**

* Back in the Wix IDE tab, you see that you no longer have an error on your button ID, and we can keep writing out our click event.

* We are going to update the text element to have a new message on button click.