Creați cu ușurință o aplicație web cu codul Wix

Creați cu ușurință o aplicație web cu codul Wix
⏱️ 8 min read

Acesta este un articol sponsorizat și a fost posibil de către Wix. Conținutul și opiniile reale sunt singurele puncte de vedere ale autorului care își menține independența editorială, chiar și atunci când o postare este sponsorizată.

Când vine vorba de crearea unui site web, dacă sunteți dezvoltator, puteți utiliza abordarea și codul DIY și să găzduiți totul singur. Dacă sunteți un utilizator final / consumator la fel ca majoritatea dintre noi, puteți utiliza un software de generare de web pentru a crea site-uri web frumoase cu doar clicuri.

Wix aparține acestuia din urmă, deoarece este un constructor de web care vă permite să creați site-uri web frumoase gratuite cu doar câteva clicuri de mouse. Dar odată cu introducerea Codul Wix, a estompat liniile dintre a o face singur și a utiliza un constructor de web. Acum le puteți face pe amândouă.

Dacă creați o aplicație web sau un site web dinamic, va trebui să utilizați jargon tehnic complicat, cum ar fi baze de date, formulare și javascripturi, pentru a crea un site web interactiv. Majoritatea constructorilor de web nu oferă astfel de instrumente, deoarece adaugă o mulțime de complicații aplicației lor.

Wix Code adaugă astfel de lucruri instrumentelor sale existente de construire web fără complicații. Oferă mai multe șabloane pentru a vă construi și gestiona bazele de date, formulare și vă permite, de asemenea, să adăugați cod javascript pe site-ul dvs. Cel mai bun dintre toate, puteți utiliza funcția de pagini dinamice pentru a popula rapid conținutul din baza de date, făcându-l mai degrabă mai degrabă un sistem de gestionare a conținutului decât un constructor de site-uri web.

În exemplul de mai jos vom crea un blog simplu Routech.ro și îi vom adăuga caracteristici dinamice din Wix Code.

Cum Se Remediază Datele Mobile Car...
Cum Se Remediază Datele Mobile Care Nu Funcționează Pe Android

Configurarea unui nou site cu Wix

Presupunând că sunteți nou în Wix, puteți începe prin înscrierea pentru un cont la Wix. După ce ați creat un cont, vi se va solicita să vă creați site-ul web.

Apoi vă va cere să selectați tipul de site web pe care doriți să îl creați. Deoarece reproduc un blog Routech.ro, am selectat opțiunea „Blog”.

Următorul ecran vă va întreba cum doriți să vă creați site-ul web.

wix-create-website

Wix ADI folosește inteligența artificială pentru a crea automat un site pentru dvs. Dacă preferați să mergeți manual, selectați metoda Editorului Wix. (Pentru a accesa Wix Code trebuie să îl utilizați pe acesta din urmă. Dacă ați ales Wix ADI, puteți trece în continuare la modul Editor mai târziu.)

Pentru acest exemplu, am folosit Editorul Wix, deoarece am vrut să dețin control deplin asupra aspectului site-ului. De acolo puteți începe cu un șablon. (Sunt mii.)

wix-editor-template-page

Pentru a fi simplu, am început cu un șablon gol cu ​​un aspect clasic. Următoarea imagine este cum arată.

wix-code-mte-layout

Accesarea codului Wix

Pentru a accesa Wix Code, accesați „Instrumente” și bifați opțiunea „Instrumente pentru dezvoltatori”.

Veți vedea acum o nouă coloană „Structura site-ului”. Aici puteți accesa toate caracteristicile Wix Code.

wix-site-structure-column

Crearea bazelor de date pentru stocarea postărilor

Una dintre caracteristicile minunate ale Wix Code este funcția Baza de date care vă permite să creați baze de date (aka Colecție) și să stocați date în ea. Pentru un blog va trebui să creăm o bază de date pentru a stoca toate postările noastre. În secțiunea Baza de date, faceți clic pe „Adăugați o colecție nouă”. Dă-i colecției un nume și specifică scopul ei. Există mai multe tipuri de baze de date din care puteți alege, de la conținut generat de utilizator, trimiterea membrilor, date private etc.

wix-new-collection

Odată creată colecția, puteți începe să adăugați câmpuri și date în ea.

wix-add-collection-fields

Ceea ce am creat este o bază de date Postări care conține titlul, conținutul, data publicării și diverse aspecte ale unei postări pe blog. Apoi, trebuie să populăm conținutul bazei de date pe site-ul principal.

Pagini dinamice

Paginile dinamice seamănă mai mult cu o pagină șablon în care puteți crea un singur design și îl puteți conecta la baza de date și va popula automat toate elementele din baza dvs. de date la prima pagină sub propriile adrese URL. De exemplu, avem șase postări în baza de date. Cu o singură pagină dinamică, putem obține afișarea tuturor postărilor de pe site-ul principal. Acest lucru vă economisește efortul de a crea manual o singură pagină pentru fiecare postare. Există două tipuri principale de pagini dinamice în Wix Code – una este pentru afișarea unui singur element, în timp ce cealaltă este pentru Categorie (o colecție de articole similare dintr-o listă).

Următorul arată cum să creați pagini dinamice și să le conectați la site.

1. În bara de instrumente plutitoare, faceți clic pe prima pictogramă și selectați „Pagini dinamice”. Faceți clic pe butonul „Adăugați la site”.

wix-code-add-dynamic-page

2. Selectați „Pagina articol” din fereastra pop-up.

wix-code-dynamic-item-page

3. În adresa URL selectați câmpul (în baza de date) pe care doriți să îl utilizeze pentru adresa URL. În acest caz, am setat „titlul” să fie adresa URL.

wix-code-dynamic-pages-url

4. Apoi, proiectați pagina și adăugați în câmpuri din baza de date. Cu fiecare element pe care îl trageți în pagină, puteți face clic pe butonul „Conectare la date” pentru a-l conecta cu câmpul din baza de date. De exemplu, am tras un element „Header 1” la pagină și l-am legat la câmpul „Title” din baza de date Posts.

wix-code-dynamic-page-link-data

Și am făcut același lucru pentru imaginea prezentată, conținutul postării etc.

wix-code-dynamic-page-design

5. După ce ați terminat designul, îl puteți previzualiza și vedea cum arată în partea frontală.

wix-code-preview

6. Următorul pas este să legați pagina dinamică de pagina principală. Încărcați pagina de pornire și adăugați un widget Repeater din secțiunea „Liste și grile”. Conectați widgetul la baza de date Postări și conectați fiecare element din widget cu câmpurile din baza de date. În secțiunea „Link-ul se conectează la”, derulați în jos și selectați „Postări” în secțiunea Pagini dinamice.

wix-code-link-dynamic-page

Asta e.

wix-code-home-page-preview

Ceea ce puteți vedea este că am creat o singură pagină dinamică și va genera automat toate paginile pentru fiecare articol din baza de date. Puteți face același lucru pentru a adăuga și o pagină dinamică de categorie.

Adăugarea de javascript la pagini

Dacă sunteți un cod de javascript inteligent, puteți adăuga javascript la fiecare caracteristică suplimentară de pe fiecare pagină. De exemplu, dacă ați adăugat un formular de utilizator la pagina dvs., puteți utiliza javascript pentru a valida câmpul formularului înainte de trimitere.

Notă: pentru a adăuga cod javascript la o pagină, accesați orice pagină (sau pagina în care doriți să apară codul) și faceți clic pe butonul „Cod pagină” din partea de jos a codului. Va apărea o fereastră și puteți adăuga codul acolo.

wix-code-page-code

1. Am creat un formular simplu care va colecta numele, prenumele și adresa de e-mail de la utilizator. Pentru acest formular dorim să validăm adresa de e-mail și să ne asigurăm că câmpul „Confirmare e-mail” este același cu câmpul „E-mail”.

2. Adăugați următorul cod în secțiunea „Cod pagină”:

Aceasta va valida adresa de e-mail și va afișa mesajul de eroare dacă e-mailul este nevalid.

wix-code-javascript-validation

Există multe lucruri pe care le puteți face cu Javascript. Verificați exemple aici pentru mai multe informatii.

API-uri externe

Acesta este singurul pas în care s-ar putea complica. Wix Code se integrează acum cu API-ul extern, astfel încât să vă puteți conecta cu ușurință la servicii terțe precum Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier etc. Nu voi intra în detalii aici, dar dacă sunteți interesat, pot verifica lor Documentația API.

Concluzie

Dacă nu sunteți priceput din punct de vedere tehnic sau nu sunteți dezvoltator, construirea propriului site web poate fi o sarcină obositoare. Wix a făcut o treabă bună făcând crearea de site-uri web o briză. Cu Wix Code, merge mai departe și vă oferă mult control asupra site-ului dvs. Acum aveți acces la instrumente complicate pentru dezvoltatori web și control complet asupra modului în care ar trebui să funcționeze site-ul dvs., totul realizat printr-un simplu clic, glisare și fixare, fără experiență de codificare necesară.

Salutări către Wix pentru crearea unui instrument atât de ușor de utilizat, care va rezolva multe probleme.

Încercați Wix Code și spuneți-ne ce părere aveți despre el.

Codul Wix

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

You may also like...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x