CodeSandbox
CodeSandbox este un editor online pentru web development. Cu CodeSandbox, poți crea prototipe rapide, să experimentați și să faceți share la creații cu un singur click.
Last updated
CodeSandbox este un editor online pentru web development. Cu CodeSandbox, poți crea prototipe rapide, să experimentați și să faceți share la creații cu un singur click.
Last updated
Să creezi un Sandbox este gratuit și nu ai nevoie de un cont sau să fii logat. Doar apeși butonul de pe pagina principală sau din header, și alegi unul din templaturile oficiale.
După ce selectezi unul, de exemplu Vanilla, vei întâlni o interfață similară cu VS Code, din motiv că CodeSandbox asta și folosește, o versiune puțin modificată de VS Code ca să lucreze mai bine în browser.
Ai aceeași familiară, un sidebar ce reflectă structura proiectului, editorul în sine pe centru și un mini browser pe dreapta în care se reflectă versiunea curentă a proiectului fără a deschide o fereastră sau un tab nou.
Pe partea stângă găsești o listă de iconițe/tab-uri care îți permit să interacționezi și să manipulezi Sandbox-ul deschis.
Primul tab permite să-i dai un titlu, descriere, să-l salvezi Sandbox-ul ca un template pentru reutilizări și informații despre ce template și instrument se folosește pentru a compila și rula proiectul.
Al doilea tab, Explorer, revii la sidebar-ul cu două secționi. În Files ai structura proiectului.
În Depencency, găsești lista de librării folosite în proiect și posibilitatea de a adăuga librării noi sau a șterge.
În al treilea tab, Configuration, ai posibilitatea de a conecta alte instrumente ce ar valida codul, corectitudinea și stilul, informație despre proiect etc. Iar restul trei tab-uri necesită deja un cont, și permit sincronizarea cu github-ul, lucru în echipă, live coding etc.
Pentru a utiliza la maximum posibilitățile ce le oferă CodeSandbox, va trebui să-ți creezi un cont. Dacă deja ai unul GitHub, asta este și mai simplu, fiind necesar doar câteva clicuri și permisiune pentru al sincroniza cu cont-ul de pe GitHub.
Fiind logat, vei primi acces la un dashboard unde vei poate vedea toate Sandbox-urile salvate, template-uri create, repozitorii conectate etc.
Când creezi un Sandbox nou, înafară de templat-uri oficiale, poți să alegi și un template personal.
Dacă încă nu ai un template personal, când creezi unul cu un template oficial, în tab-ul Sandbox Info ai posibilitatea de al salva ca template
fiind disponibil după, de pe dashboard, pe pagina Templates.
Fiind logat, fiecare Sandbox care îl deschizi, este automat live, ceia ce înseamnă.
Dacă alt utilizator logat accesează link-ul generat pentru sesiunea live, puteți lucra împreună, fie concomitent sau în Classroom mode unde persoana ce a creat Sandbox-ul, poate alege cine din cei conectați poate face schimbări în proiect.
Din tab-ul GitHub, ai posibilitatea să creezi un repositoriu nou, care, automat se va sincroniza cu conținutul de pe github.
La fel, ai posibilitatea vizualiza conținutul unui repozitoriu GitHub în CodeSandbox prin mai multe metode.
Prin tabul Import Project din fereastra ce apare de fiecare dată când vrei să creezi un sandbox nou
Unele din metode pentru a ajunge la ea este
prin butonul Create Sandbox din header
prin butonul New Sandbox de pe pagina All Sandboxes
prin butonul Import Repository de pe pagina Repositories
Odată ce s-a creat un Sandbox dintr-un GitHub repository care nu există în contul personal, în tab-ul GitHub, ai posibilitatea de a face o legătură între Sandbox și repository pentru a putea contribui.
După click pe Link Sandbox, schimbările care le faci în proiect vor fi urmărite, și vei avea posibilitatea de a face commit-uri și deschide PR-uri din tabul GitHub
La primul commit, se va crea un branch nou și se va deschide un PR. Următoarele commit-uri făcute vor ajunge tot în acest branch.
Dacă în timp ce lucrezi pe un branch anumit și în master vor apărea schimbări noi, vei avea opțiunea de ați sincroniza branch-ul tău cel master.
În tab-ul Sandbox Info vei putea da un nume acestui Sandbox pentru al putea găsi mai ușor după. Unul din locurile unde îl vei găsi va fi tab-ul Repositories de pe dashboard.
Acolo vei găsi numele de repository/proiect în formă de folder, iar când deschizi, o să găsești Sandbox-ul creat pentru a contribui la acel proiect.
Toate Sandbox-urile create, indiferent că au fost create printr-un template oficial, personal sau dintr-un GitHub repository, vor ajunge în Drafts.
Pentru a le putea organiza, separa Sandbox-urile la care intenționezi să lucrezi de cele ce au fost create întâmplător sau careva experimente, le poți muta în pagina/zona All Sandboxes, fie direct sau într-un folder creat.
Ca să îl muți ai două opțiuni:
Drag & Drop de pe pagina Drafts pe folder-ul din All Sandboxes
Dacă nu e un Sandbox cu integrare GitHub, când e deschis, dai click pe Drafts, selectezi folder-ul dorit și confirmi
