In your terminal, navigate to the directory you want your loop to be in. Then use the following command:
npx @oliveai/create-loop
Enter the name of the project.
Project name
Select the Aptitudes you would like to use.
These selections are not final! These just generate examples, but any aptitude can be imported and used at any time.
And finally, select the language you would like to use. Right now, we support TypeScript and JavaScript.
Select your language
This will create a directory with the name of your project, generate the project files and automatically run npm install
VSCode Extension
First, download VSCode here. Once you have it installed, you can search extensions by clicking on
in the left rail of the editor. You can also use the extension in Visual Studio Code for the Web by developing here: Visual Studio Code for the Web. Search for Loop Development Kit and click Install.
Extension Search Page
Having trouble with extensions in VSCode? Visit their help page.
The editor will tell you when it is done installing the extension. To give the extension a command, type ctrl+shift+p on Windows or cmd+shift+p on Mac. In the command bar, search for Create Loop.
Command Bar
Select this option, it will create a New Loop Form for you to fill out.
New Loop Form
Here you can choose your language (JavaScript or TypeScript), where you want your project to be located, its name, and what Aptitudes you'd like to include. You can of course change these by hand later, so take your best guess at what you'll need to get going.
Don't understand aptitude permissions? See our Permissions guide.
Generated Code
When you click Create Loop, a new VSCode editor will open with your new Loop project. This project contains a pre-generated package.json to get you started. It also comes pre-populated with examples of the Aptitudes you selected in the step above. Jest testing has also been included.
Explore the example code: once you have a feel for how things work, you are free to delete it.
Sample Project Directory Structure
This project assumes an index.js file will be included under the src folder. If you need to change this structure, please update the build command in the package.json
Hello World
If you wanted to create the Hello World example shown on the Your First Loop page, you would replace the code in the index.js file with:
const { whisper } = require('@oliveai/ldk');
whisper.create({
label: 'Hello world',
onClose: () => {},
components: [
{
type: whisper.WhisperComponentType.Message,
body: "Hello World",
style: "success",
textAlign: "center"
},
],
});
This example is far simpler than those provided, but is useful if you're brand new to programming. Feel free to use whatever you're comfortable with while learning the Loop process.