Razvoj web-stranica

Razvoj web-stranica - Rasprava

Cordas čet 7.11.2019 08:45

Ljudi, ima tu netko tko je radio sa Nodejs-om i Firebase Firestore bazom i/ili Firebase Storage-om? 

 

Ako netko ima vremena, imao bih par pitanja i volio bih popričati s nekim tko je više u web developmentu jer mi nisu jasne neke stvari. Googlanje mi baš i ne pomaže u ovom slučaju. Naime, zanima me kako postaviti backend sa Firebaseom jer ne želim da mi bude na frontendu apsolutno sav kod vezan uz konekciju na bazu (bez obzira na pravila pristupa), a opet ništa od članaka što sam izguglao se ne odnosi na implementaciju kroz backend. 

Doduše, riješio sam bez nekih problema čitanje i pisanje u bazu, ali mi je upload slike problem koji ne kužim kako riješiti. Ako kroz frontend to riješim onda je to full jednostavno, ali mi se ne sviđa taj način i to da je sav kod dostupan te ne mogu složiti nikakvu arhitekturu, nego je sve nekako nabacano i sve se stalno ponavlja. 

Web pr0 uto 31.3.2020 10:33

Glavna dokumentacija: https://firebase.google.com/docs/reference/?authuser=0

Reference: https://firebase.google.com/docs/reference/js/firebase.database.Reference?authuser=0

Database: https://firebase.google.com/docs/reference/js/firebase.database.Database?authuser=0

 

Treba se registrirat na firebase i ući u konzolu - project overview - settings - Add Firebase to your web app za dobivanje config objekta

Onda na develop - database, pa se gdje stoji Cloud Firestore BETA promjeni u Realtime Database

i onda se ide na Rules i stavi da je R/W true:
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}

 

yarn add firebase ili npm add firebase //dodavanje firebase projektu
//kreira se folder firebase, i u njemu file firebase.js u kojem
import * as firebase from 'firebase' //ovo uzima sve named exporte iz firebase i u dumpa ih u varijablu firebase

//sad ćemo bindingu config dodati config objekt kojeg smo gore uzeli iz firebase-a

const config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
}
//ovom firebase metodom ćemo inicijalizirat firebase da radi sa određenom aplikacijom čiji smo config provajdali
firebase.initializeApp(config);
//u ovom trenu bi trebali imati validnu konekciju sa firebase-om, možemo poslat jedan set prema bazi za test

firebase.database().ref().set({
name: 'Mate Matić'
})

 

//ovo se koristi tako da se importira (vjerovano koristiš webpack)

import './firebase/firebase'

const database = firebase.database()

 

//upisivanje u bazu 

database.ref().set({
name: 'Mate Matić',
age: 38,
isSingle: false,
location: {
city: 'Zagreb',
country: 'Croatia'
}
}).then(() => {
console.log('Data is saved')
}).catch((e) =>{
console.log('This failed.', e)
})

//dakle koristit se asinkroni JS jer nakon set() kod ide dalje, ne čeka upisivanje u bazu

 

//brisanje iz baze

https://firebase.google.com/docs/reference/js/firebase.database.Reference?authuser=0#remove

database.ref('location/city').remove().then().catch()

 

//update

https://firebase.google.com/docs/reference/js/firebase.database.Reference?authuser=0#update

database.ref().update({
stressLevel: 9,
'location/city': 'Seatle',
'job/company': 'Amazon'
}).then(() => {
console.log('Properties are updated')
}).catch((e) => {
console.log('Properties update failed to run', e)
})

loko_1 pet 19.6.2020 08:38

Kako mogu učiti wordpress bez zakupa domene i hostinga. Da li mogu negdje napraviti stranicu i isprobavati pa onda kupiti web hosting. Koliko sam shvatio za wordpress treba odmah imati i domenu i hosting i tek onda se nešto može raditi.

bunker pet 19.6.2020 08:52


@loko1

Vrlo lako. U googleovu tražilicu upiši free hosting i onda kreni po redu istraživati rezultate koje ti tražilica izbaci.

Gledaj koji ti od free hostinga najviše nudi ( broj baza, php verzija, free domena, ograničenja prostora ili prometa, SSL certifikat,...)

Uglavnom, ima ih desetak koji su vrijedni spomena, no naravno da se nemogu uspoređivati sa plaćenim hostingom, ali za svrhu učenja su i više nego dostatni.

Čak možeš vježbati i naprednije stvari ( backup, upgrade, Anti malware ) ali pazi dokud ideš jer sam ja imao problema u stilu da sam testirao neke vatrozide za WP i time narušio sigurnost i promet svih korisnika na tom serveru pa razmisli o vpn tunelu ako se zaigraš...

A možeš i doma na lokalnom kompu testirati WP.

OriginalEXE pet 19.6.2020 09:48
loko_1 kaže...
Kako mogu učiti wordpress bez zakupa domene i hostinga. Da li mogu negdje napraviti stranicu i isprobavati pa onda kupiti web hosting. Koliko sam shvatio za wordpress treba odmah imati i domenu i hosting i tek onda se nešto može raditi.

 Ovo bi ti moglo biti najjednostavnije: https://localwp.com

 

Lokalni development, lagano postavljanje, besplatno.

david7 sub 11.7.2020 13:34

Pozdrav svima,

 

dakle imam jedan problem s Laravel aplikacijom. Naime, radim jedan intranet u sklopu kojeg sam morao napraviti sustav za razmjenu datoteka. Dio toga jeste praćenje koji korisnik skida koji fajl i s koje lokalne IP adrese unutar mreže. 

 

Kako sam riješio ukratko:

 

- Foreachom se u viewu izlistavaju sve datoteke u određenom folderu (svaki user može pristupiti samo jednom folderu) unutar storagea i na temelju filenamea generiram linkove za skidanje (/download/filename.ext).
- Svaki link vodi na funkciju download unutar Downloads controllera kojoj je parametar ime datoteke.

- Funkcija dohvati folder za prijavljenog korisnika, u bazu sprema folder, filename i IP korisnika i returna download response.

 

E sad, problem je u tome što ovo spremanje u bazu doslovno, malo radi, malo ne radi. Dakle jednom kliknem na fajl, normalno sve spremi u bazu i pokrene download, drugi put pokrene download, a nije ništa ubačeno u bazu. Idem debugirati, maknem return downloada i ubacim ispis filenamea - jednom mi normalno, spremi u bazu i samo ispiše filename (kako i treba), a drugi put mi pokrene download (iako je ta linija zakomentirana) i ništa ne sprema u bazu. Znači kao da mi ne detektira promjene u kodu. I doslovno nema pravila, može ih 5 normalno odraditi, a 6. neće...

 

Prvo što sam radio jeste čišćenje svakog mogućeg cachea jer mi je to prvo palo na pamet, budući da kod logički funkcionira, ali ne uvijek. Google također nije ništa pametno izbacio ili ja ne znam što tražiti...

 

Uglavnom, evo i kod.

 

Controller (funkcija download)

public function download($name)

    {

        $directory = Auth::user()->directory;

        Download::create([

            'folder' => $directory,

            'filename' => $name,

            'downloadedby' => \Request::ip()

        ]);

        return response()->download(public_path() . '/storage/' . $directory . '/' . $name);

    }

Route:

Route::get('download/{name}''DownloadsController@download')->name('download');

Download model: 

class Download extends Model

{

    protected $fillable = ['folder''filename''downloadedby'];

    

    public function ipaddress() {

        return $this->belongsTo('App\IP''downloadedby''ip');

    }

}

četvrtko sub 11.7.2020 14:42

Nezz je li pravo mjesto za upitat, ali mislim da bi bilo glupo pokretat temu radi ovakve gluposti...

Nedavno sam završio neki HTML crash course i sad se malo zezam s njim, prije nego što krenem učiti CSS i JS (angular). Problem je što mi <span> i <div> elementi nikako ne rade.

 

Source:

    <div>
    <input type="email" value="unesite email">
    <input type="password" value="unesite sifru">
    <input type="submit" >
    </div>

 

<div> bi ove in line elemente trebao postaviti u blokove, ali iz nekog razloga ne radi :(

Ako itko moze pomoc, preporučiti neku literaturu/nes slicno za htm.... ty

MrBlc sub 11.7.2020 15:00

Div jest blok i ti elementi jesu u bloku, ali su oni i dalje inline. Ovisno o tome što želiš postići, možeš wrapati svakog u svoj div (što je inače dobra semantička praksa kad imaš label i response), i/ili ih stilizirati css-om da izgledaju kako si zamislio.

Inače, value="unesite..." je loša praksa. Stavi ili label ili placeholder.

Dex.pwn čet 6.8.2020 19:53

Pozdrav,
Uskoro se bacam na postavljanje projekta (na papiru) za jednostavan ERP sustav.
Ciljam na Bootstrap, PHP(čisti), jQuery, MySQL InnoDB.
Što se dizajna tiče, htio bi nešto kao Windows 10 sučelje - tilesi, windowsi.
Kako nisam jak s web devom, zanima me koji je najefikasniji način za napraviti šaltanje između windowsa? Preferiram jQuery ili vanilla JS

Dex.pwn čet 6.8.2020 20:58

jQuery je FW koliko znam.
Njega preferiram jer sam s njime krenuo prije X godina. Nije kao neki fensi FWovi koji se miješaju s HTMLom

A za PHP ne znam ni jedan FW. PHP budem koristio samo za obradu podataka. Jedino znam da za to služi.

Nuclear_Phoenix čet 6.8.2020 21:22

Laravel, Cake, Zend?

 

Danas gotovo nitko ne radi sa jquery, vanilla js ili php osim ako ne održavaju neke legacy strahote. Ok ako hoćeš učiti kako to radi ispod haube ali raditi išta veće od blog engina ili neke tako stranice je suludo, pogotovo zato jer i ako želiš negdje raditi kao web dev od tebe se očekuje da znaš bar jedan moderni front ili backed framework iz ovog stoljeća.

 

Moraš znati osnove ali ići izmišljati svoj templating engine i MVC framework (a moraš jer ćeš krivo se naučiti ako kreneš pisati špagete sa vanilla js i php) nije dobar put.

 

Dex.pwn čet 6.8.2020 21:37

Laravel mi se čini zanimljiv
A nisam se dugo bavio back endom, razumijem C(bavim se embeddedom). Mislim da bi čisti PHP odradio posao, bar kako sam gledam.

Umjesto jQuerya, što se nudi, a da se ne miješa s HTMLom?

ministar čet 6.8.2020 21:49
Dex.pwn kaže...
Laravel mi se čini zanimljiv
A nisam se dugo bavio back endom, razumijem C(bavim se embeddedom). Mislim da bi čisti PHP odradio posao, bar kako sam gledam.

Umjesto jQuerya, što se nudi, a da se ne miješa s HTMLom?

"miješa" ti se i jQuery s HTML-om.. to i je prednost JS FW-a.. imaš two-way data binding, custom events, conditional rendering, conditional CSS classes, ... Laravel se po defaultu odlično slaže s Vue.js-om

ministar čet 6.8.2020 21:51
Nuclear_Phoenix kaže...

Pojma nemam, čisti JS nisam dirao preko 2 godine, radim kad moram web u Vue, Blazor ili ASP.Net Core MVC sa par linija već gotovog JS. Ja sam backend i komunikacija sa hardverom, fuj web.

kakav je Blazor? uglavnom pozitivna ili negativna iskustva?

Nuclear_Phoenix čet 6.8.2020 21:57

Uglavnom pozitivno iako je preview tehnologija. Super je što možeš koristiti hrpu postojećeg .Net koda (a to nam je >90% codebase), nema JSa ako ne moraš pisati custom komponente (ima već sad hrpa gotovih), Razor se odlično uklapa ali i ima nekih mušica oko brzine i hostanja na IIS ali generalno, vrlo, vrlo dobro. Pričam o Blazor WASM, ne Server side - njega praktički nisam ni pogledao ali koliko vidim, isto je ok ali ima nekih problema sa performansama pogotovo ako je veza loša.

 

Najviše me veseli što nema duplanja koda sa objektima - class library u .net standard uredno referenciraš u Blazor projekt i kroz Razor sintaksu radiš sa tim objektima bez JSONa kao kakav kromanjonac (je, sve se u pozadini vrti kroz JSON ali sretan sam kao malo dijete sa strongly typed objektima). Kad vidim obj["propname"] i nabadanje obj.someprop bez autocomplete mrak mi padne na oči.

Nuclear_Phoenix čet 6.8.2020 22:18

jQuery je izmišljen radi DOM manipulacije. To što se nalazi u drugom fajlu (i kod koji nešto i radi sa DOMom u trećem) te nimalo ne udaljava od činjenice da se miješaju JS i HTML. Još se usput namjerno ograničavaš jer za formu sa 20 polja imaš 40 funkcija koje se bave sa ažuriranjem u oba smjera (model <-> prezentacija) jer jquery ne zna što je binding.

Dex.pwn čet 6.8.2020 22:28

Ne znam što je DOM, al sve što mi treba je da se tekst tu i tamo updejta, AJAX, windowsi(iframe?). Znači mijenjanje elemenata bez refresha

Btw, pod windowsima mislim na Window preko cijelog ekrana(dijela gdje je stranica u browseru). Tako da kad otvaram appove(Npr pregled skladišta, unos komponenti u skladišta), isti se otvara u novom prozoru. A dole na taskbaru imam listu otvorenih windowsa. Znači kao na pcu, samo bez mrdanja windowsa okolo

ministar čet 6.8.2020 23:20
Dex.pwn kaže...
Ne znam što je DOM, al sve što mi treba je da se tekst tu i tamo updejta, AJAX, windowsi(iframe?). Znači mijenjanje elemenata bez refresha

Btw, pod windowsima mislim na Window preko cijelog ekrana(dijela gdje je stranica u browseru). Tako da kad otvaram appove(Npr pregled skladišta, unos komponenti u skladišta), isti se otvara u novom prozoru. A dole na taskbaru imam listu otvorenih windowsa. Znači kao na pcu, samo bez mrdanja windowsa okolo

a vidi, mozes koristiti to sto znas, bez obzira sto tako vise nitko ne radi.. ili mozes (pokusati) nauciti nesto novo sto ti moze koristiti ubuduce..

fighterZu pet 7.8.2020 00:35

Ako želiš posebne fileove (css, ts, html) imaš Angular 2+ no tu imaš typescript pa ti to može stvarati probleme. Kod njega ti isto html izgleda "kako treba" (iako mi je malo nejasno što misliš pod time). Možda misliš na template syntaxu koju se pretežito koristi kod Angular-a i Vue-a unutar htmla? React pak sa druge strane ima JSX (syntax exntension za javascript). Danas ćeš teško naći neki noviji framework ili library koji ne koristi neki oblik sintakse za bindanje između podataka i DOM elemanata jer se sve više manje bazira na "component" pristupu razvoja, barem je to slučaj kod frontenda.

Možda možeš naći neke alternativne libove bazirane na jquery-u na gihubu. Ovako na prvu sam našao cashzepto. No s obzirom da je u pitanju ERP sustav, ipak bi išao na ili na provjerene frameworke (Angular, React, Vue, Svelte) ili ako baš ti ništa ne preostaje onda vanila js ili jquery (no to može biti  pogotovo danas pain in the ass, no opet sve zavisi od širine aplikacije i koje feature treba podržati)