HomeBlogFigma2Webflow
Subscribe
Blog
Webflow

Twitter No-code con Webflow, Wized e Xano [PT1]

Nicola Toledo
November 4, 2022
•
5 min read

in questa prima parte mi sono concentrato nella creazione del progetto Webflow e collegamento con Wized

nel progetto Webflow uso client-first per gestire la struttura e nome delle classi


Developer-starter

siccome Wized per ora non offre tante funzionalità (è ancora in beta) ho deciso di utilizzare il developer-starter di finsweet per 4 motivi principali:

1. poter usare javascript

2. usare le wized api

3. velocizzare di molto lo sviluppo con codice perche posso utilizzare typescript e quindi avere un feedback immediato su quello che scrivo invece di dover pubblicare il sito ogni volta

4. il codice si trova su NPM quindi non ho più il limite delle 10.000 righe di codice

‍

questa soluzione non è obbligatoria, ma può tornare utile se dobbiamo sviluppare funzionalità più complesse



Preload

ho deciso di creare un preloader per aspettare che wized sia caricato, in questo modo evito questo leggero delay che vedi nel video

un'altra soluzione è nascondere gli elementi ed attivare un loader o ghost-loader su webflow per poi sostituirli con il contenuto finale una volta che wized è pronto

Mostra/Nascondi elementi protetti

wized nasconde gli elementi dalla ui usando display:none gli elementi sono sempre visibili nel codice

quindi è IMPORTANTE che il backend sia protetto e non ci siano chiavi private nel front-end altrimenti chiunque può vederle

‍


l'obiettivo è integrare il codice dove necessario per richiamare le azioni, variabili e richieste che posso creare direttamente su wized

per il backed sto utilizzando Xano ma potrei usa firebase, supabase, Airtable o qualsiasi backend che espone delle api



Vantaggi e Svantaggi

uno dei piu grossi vantaggi è che utilizzando webflow come ui builder non fa percepire l'effetto MVP (una ui poco fluida e con animazioni basiche), cosa che invece si vede con altri strumenti come bubble o weweb

le animazioni ed il comportamento in generale della ui è uguale al twitter reale

la parte di logica con wized per ora è ancora molto semplice ma integrando un po di codice si possono gia fare app interessanti

xano è molto potente e sopratutto è un backend pensato per scalare e creare progetti complessi con molta flessibilità

i prossimi step che vorrei realizzare sono:

[ ] email auth

[ ] google auth

[x] hide/show private info

[ ] user profile

[ ] home tweets

[ ] create a new tweet

[ ] like and comment tweet

[ ] real-time messaging

[ ] nested navigation

‍

‍

Share this post
Tag one
Tag two
Tag three
Tag three

Subscribe to NOCODEPRO newsletter

Professional Webflow & No-code development

Related posts

Category

Blog title heading will go here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Full name
11 Jan 2022
•
5 min read
Category

Blog title heading will go here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Full name
11 Jan 2022
•
5 min read
Category

Blog title heading will go here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Full name
11 Jan 2022
•
5 min read
View all