Creare un'app in JS - come si fa?

di il
18 risposte

Creare un'app in JS - come si fa?

Buongiorno ragazzi,

premetto che non sono un programmatore ma al limite uno a cui piace smanettare e imparare cose nuove, molto tempo fa sono stato web designer e qualcosa mi ricordo ancora. Da qualche giorno ho deciso di cimentarmi nella realizzazione di una piccola app che mi frulla nella testa già da tempo, e ho deciso di farla nativa in js in modo da scrivere il codice una volta sola.

Ora, sono 3 giorni che leggo guide, faccio esercizi, seguo video tutorial o video corsi, e sto imparando le basi del js, tuttavia mi ritrovo un po' con la sensazione di quando stavo a scuola, cioè imparare un bordello di roba che non hai idea di se e quando utilizzerai o come la utilizzerai. Provo a spiegarmi:

nella mia testa ho l'app già visualizzata, quindi mi dico lo sfondo è così, in alto c'è un banner così, poi se tocchi qui ti rimanda ad un'altra pagina che è fatta in questo modo e così via. Quando facevo web design, via via che scrivevi il codice, potevi di fatto visualizzare la pagina che pian piano si stava componendo, ad esempio preparavo uno sfondo da usare sul sito, e una volta scritto il codice relativo, potevo già visualizzare la mia pagina vuota ma con lo sfondo in questione. Quì invece tutto quello che imparo sono le basi di js che sicuramente sono fondamentali, ma mi domando se e quando andrò ad usarle e sopratutto come.

Nel senso, prendiamo ad esempio questo stesso forum. Io in alto vedo il banner con il logo e il nome del sito, una casella per la ricerca, i vari bottoni home, offerte di lavoro e via dicendo. Se dovessi fare un sito di questo tipo, saprei ancora bene o male come muovermi, ma invece se dovessi fare un'app? Serve javascript anche per l'interfaccia grafica oppure devo avvalermi di altri software, ad esempio che ne so, mi viene in mente Adobe XD.

Insomma più vado avanti e più che mi sto domandando se il js non mi serva "solo" per far fare alla pagina una determinata cosa in un determinato caso, ma non a creare ogni singola parte. Mi rendo conto che siano considerazioni e domande da nabbo totale, ho voglia di imparare ma non mi sento di stare apprendendo le cose giuste o comunque non nella sequenza giusta, mi sembra solo di acquisire nozioni a caso che al momento non mi stanno servendo a niente.

Ringrazio tutti quelli che avranno avuto la pazienza di leggere fino a qui, e che magari avranno anche la pazienza di dirmi cosa devo studiarmi

18 Risposte

  • Re: Creare un'app in JS - come si fa?

    In che senso?

    Che cosa sai?
    Che cosa pensi di non sapere?
    Che tipo di app vorresti realizzare?
    Spannometricamente, come pensidovrebbe essere fatta?
  • Re: Creare un'app in JS - come si fa?

    Barabba ha scritto:


    Insomma più vado avanti e più che mi sto domandando se il js non mi serva "solo" per far fare alla pagina una determinata cosa in un determinato caso, ma non a creare ogni singola parte. Mi rendo conto che siano considerazioni e domande da nabbo totale, ho voglia di imparare ma non mi sento di stare apprendendo le cose giuste o comunque non nella sequenza giusta, mi sembra solo di acquisire nozioni a caso che al momento non mi stanno servendo a niente.
    Avendo scelto di utilizzare JavaScript, (anche se con prerogative differenti) l'ambiente con cui lavori è quello del Web Browser, quindi dovresti avere a che fare con tecnologie familiari per le tue basi di Web Design: ad esempio, l'interfaccia dell'applicazione, così come quella di un sito tradizionale, la puoi - anzi la devi - costruire usando HTML5 (per la struttura della pagina) e CSS3 (per definire gli stili).

    Il linguaggio JavaScript ti occorre per rendere interattive e funzionali le pagine, o meglio le schermate (trattandosi di un app), che vai a realizzare usando i suddetti standard del Web, e tutt'al più per "assemblare" i singoli componenti che costituiscono la tua applicazione (dipende dal framework scelto per costruirla) che devono comunque essere realizzati usando sempre HTML/CSS.

    In alternativa, puoi cambiare il linguaggio e usare uno strumento di più alto livello per costruire le applicazioni nel modo in cui sei abituato, ovvero in modalità (quasi) WYSIWYG, tipo Delphi o Xamarin.

    Ciao!
  • Re: Creare un'app in JS - come si fa?

    Barabba ha scritto:


    Buongiorno ragazzi,
    [...]
    Ciao,
    Fare una applicazione in Javascript è possibile, ma ci sono dei però:

    1) devi pensare all'app come APP, non come un sito.
    La UI e la UX che ha un sito è completamente diversa da quella che richiede un applicazione mobile.
    Se a te interessa visualizzare il tuo sito su mobile puoi, o semplicemente fare il tuo sito responsive, o appoggiarti alla tecnologia AMP o PWA.
    (è un mio consiglio questo )

    2) Se invece vuoi proprio fare un'app (tipo quella da mettere su google app store o lo store di IOS) ci sono diverse tecnologie e framework che puoi utilizzare per creare la tua app interamente con i linguaggi di frontend.

    Attualmente io sto utilizzando "Adobe® PhoneGap™ Build" che, funziona in principio come XAMPP o WAMP per capirci, per poi crearti un pacchetto che potrai inserire all'interno degli store che preferisci.

    Riguardo alla creazione dell'app, è identico a come se facessi un sito, non ci sono differenze (quindi HTML5, CSS3 e JS), però come dicevo nel primo punto, devi pensare che le persone che utilizzeranno l'applicazione non useranno mouse e tastiera ma il dito, magari fatti un infarinatura di UX for mobile

    Se hai bisogno sono qui per qualsiasi dubbio
  • Re: Creare un'app in JS - come si fa?

    Grazie mille a tutti per le risposte!

    La storia di usare l'html e il css per la struttura della pagina mi fa ben sperare, avevo in realtà creato la mia index come al solito ma pensavo di aver sbagliato o di aver adottato un sistema che non fosse quello previsto.

    Per quanto riguarda la scelta del linguaggio, pensavo di usare JS perché, a quanto ho capito, utilizzando react native si poteva avere un'app con le prestazioni di una nativa, ma non dovendo imparare a programmare sia per apple che per android. Ovviamente anche questa scelta l'ho fatta da nabbo totale, leggendo qua e la e guardando video qua e la. Magari ho sbagliato scelta.

    L'app che vorrei fare è proprio un'app, cioè qualcosa da poter installare sul mio telefono quantomeno, ed eventualmente caricarla su AppStore o GooglePlay qualora ne uscisse qualcosa di decente.

    Dato che sono ancora agli inizi, nessun problema ad orientarmi altrove, tipo Delphi o Xamarine come diceva Alka, o a provare PhoneGap come dice Acid. Vorrei solo prendere una via che mi porti da qualche parte e che mi dia la sensazione di andarci sopratutto.

    Comincio a dare un'occhiata a queste cose e ad orientarmi, spero.
  • Re: Creare un'app in JS - come si fa?

    La scelta sta a te, dipende da che applicazione vuoi creare.
    se è semplicemente un app di sola visualizzazione, per farti un esempio pratico: una applicazione tipo wiki o un'app vetrina, va più che bene quello che ti ho detto io.
    se invece devi fare un'app con molte feature e impostazioni, ti conviene dirigerti verso altri linguaggi di più alto livello
  • Re: Creare un'app in JS - come si fa?

    Diciamo che ci sono 2 idee, quella più semplice, è creare un'app che sia solo "da vedere" per l'utente finale, mi immagino una home con le varie sezioni e ogni sezione che può contenere del materiale, che sia testo o foto o video. In questo caso diciamo che sono io che la aggiorno e che decido cosa deve vedere l'utente finale. CREDO di aver capito quindi che tutta la parte grafica io la debba fare con html e css, ma a questo punto mi domando se sia giusto farsela ad esempio boh, con Dreamweaver che era il programma che usavo ai tempi, oppure se ad oggi ne esistano di migliori e indirizzati per le app.

    Poi ci sarebbe una seconda idea che rimanderei solo a patto che riesca a realizzare la prima, che alla fine sarebbe un'evoluzione, ovvero consentire agli utenti di registrarsi e di poter caricare il loro materiale. Ma già per me è arabo fare la prima versione, per questa mi sembra presto
  • Re: Creare un'app in JS - come si fa?

    Ciao ragazzi, mi permetto di usare il topic a mo di "diario", ho letto che non è consentito upparlo ma non è questa l'intenzione, vorrei solo aggiornare la situazione per chi fosse interessato, e la cosa mi è utile a livello di condivisione con voi, per rimanere sul pezzo.

    Allora mi sono letto un'altra marea di guide e forse sono arrivato a un punto. Cioè ho fatto la mia prima "pagina" in JS che in pratica è solo una pagina bianca con un testo sopra. E ho usato Expo per mandarla sul mio iPhone e vedere le modifiche in diretta. Modifiche che ad oggi si limitano a cambiare il colore dello sfondo o i caratteri della scritta, ma diciamo che almeno vedo la luce in fondo al tunnel

    Ho provato un po' di editor diversi, Visual Studio, Atom, Sublime Text.. mi sapete dire se uno vale l'altro o se ne esite uno migliore? Così mi concentro direttamente su quello. Per altro ho notato che creando un nuovo progetto, la struttura di base dell'app è comunque simile a quella dei siti, intendo che ci sono un tot di cartelle divise per comparti, e un tot di file che anziché essere html sono .js o .json.

    Ora, ai tempi dei siti, facevo una pagina che era ad esempio barabba.html, e se dentro c'era un link ad un'altra pagina, creavo barabba2.html quindi ogni .html era una pagina a sé. Presumo che quindi ogni .js sia un codice a sé, e che possa richiamare un altro file .js in base a determinati eventi?

    Ad esempio, in barabba.js potrebbe esserci il codice relativo ad una determinata pagina, e in + un pezzo di codice diciamo dormiente, che si attiva solo in una determinata circostanza, e che sia una sorta di "se succede questo, vai a pescare barabba2.js ed eseguilo"? Se si, perché si fa così anziché scrivere direttamente in barabba.js, quello che si trova in barabba2.js?

    Sentitevi liberi di mandarmi in culo, sono un nabbo totale e scrivo papiri ogni volta, ma prima o poi sarò uno di voi.
  • Re: Creare un'app in JS - come si fa?

    Ciao Barabba, a giudicare dalle domande mi sembra che tu non possieda ancora le concezioni base di una semplice pagina web. Ti consiglio prima di metterti a programmare di studiare almeno le basi :

    https://developer.mozilla.org/en-US/docs/Lear
  • Re: Creare un'app in JS - come si fa?

    Eccomi con qualche aggiornamento! Dopo 1 settimana a guardarmi guide, corsi e leggere migliaia di cose di cui non ci capivo una sega, ho optato per il vecchio metodo da smanettone: mi sono scaricato un'app già fatta e ho iniziato ad aprire i vari file per vedere come erano scritti, come si linkavano tra di loro, come si installavano i vari componenti e via dicendo. In un paio di giorni ho sicuramente imparato più cose di quelle che ho imparato nella prima settimana. Certo non so scrivere un'app di sana pianta e nemmeno un solo .js senza controllare se sto facendo giusto o meno, ma almeno se apro un .js e lo guardo, capisco a grandi linee a cosa fanno riferimento le varie parti e andando poi a cercarmi delle guide specifiche riesco a comprenderne il funzionamento. Vabbè, magari è una maniera contorta di apprendere ma così riesco a vedere un minimo i frutti del mio impegno. Ma ora sono qui per chiedervi di aiutarmi a risolvere il mio primo problema di codice

    Allora ho fatto una sorta di home page con 3 grandi categorie diciamo, A, B, C, che ho messo come tabs in orizzontale (perdonate il modo grezzo di esprimermi). Di default si parte con A che anziché essere spento (grigio) è colorato in verde, se premo su B, la tab scorre e quindi B diventa verde ed A grigio, idem su C. Sotto ai vari tab c'è la tipica barra di scorrimento orizzontale, anch'essa dello stesso colore verde. Fin qui mi va bene. Ora però quello che non riesco a fare, è che in base alla categoria che premo, vorrei che sotto apparisse una pagina diversa. Sono riuscito a mettere una pagina ma purtroppo rimane la stessa pagina su tutti e 3 i tab, mentre io ne vorrei 3 diverse in base a quale tab viene selezionato.

    Chiaramente il codice l'ho trovato tra i vari tutorial di react, sto cercando di farlo funzionare come vorrei a mo di esercizio. La parte di codice che identifica le 3 categorie è:

    render() {
    const { profile, navigation } = this.props;
    const tabs = ["Prova1", "Prova2", "Prova3"];

    ovviamente è solo un estratto, non so se vi basti questo o se vi serva tutta la pagina. Vorrei fare, ad esempio, Prova1.js, Prova2.js, Prova3.js, e in base a dove mi posiziono col tab, sotto si apre la parte relativa.

    Chiedo di nuovo scusa a tutti per la nabbaggine e grazie mille per l'interessamento
  • Re: Creare un'app in JS - come si fa?

    Mi pare un azzardo usare react se non hai le basi di JS.

    Anche perché quello che hai chiesto è molto basilare per chi conosce JS.
    https://www.w3schools.com/howto/howto_js_tabs.as

    Ti lascio con un consiglio, se il lavoro che stai facendo è per hobby, ti consiglio di crearla con il tuo codice al posto di prendere pezzi di altre applicazioni.

    Perchè così capisci cosa stai facendo, e se hai qualche problema, conoscendo il tuo codice potrai imparare e fare esperienza.
    così vedrai che poco a poco le tue skills e l'app aumentano di livello (il detto "imparare dai propri errori" non è detto a caso eh. se non sbagli e copi i pezzi che funzionano, come fai a imparare?)

    quindI (dovrei mettelo nella firma per quante volte faccio questo elenco ) incomincia a studiare sui libri seriamente, e nel frattempo crea la tua app, senza copiare app di terze parti (anche perchè dire "più o meno ho capito" è sbagliato. quando programmi DEVI sapere al 100% cosa fa il tuo codice.)
  • Re: Creare un'app in JS - come si fa?

    Ciao ragazzi, innanzitutto grazie mille per i consigli!

    Sono finalmente riuscito a risolvere il dilemma e prova che riprova ho creato la mia prima barra, che però alla fine ho spostato in basso perché anche se visivamente mi piaceva in alto, penso che a portata di pollice sia più comoda. Quindi ad ora ho la mia tabbar che naviga per le 3 categorie principali! Per voi sarà una cazzata ma per me è un successo!

    Continuo a leggermi guide e tutorial ma non riesco a venire a capo di un nuovo problema, mi sento di girarci intorno ma non arrivo. Vorrei in pratica che, ad esempio in pagina1 della tabbar, ci fossero delle immagini o icone, disposte in griglia, prese da locale e create appositamente per l'app, e che ogni icona navigasse in una pagina diversa. Sono riuscito a farlo coi bottoni, ma non riesco a metterci le immagini. Sono anche riuscito a farlo con 2 immagini ma mi vanno una sotto l'altra e non riesco a metterle in griglia. Sono praticamente 2 soluzioni che per un motivo o per l'altro hanno qualcosa che manca all'altra, ma non riesco a "fonderle" per arrivare al risultato voluto.

    Mi sono anche cercato guide e tutorial specifici ma, pur avendone trovati, non riesco ad arrivare al risultato, probabilmente sbaglio qualcosa. Mi date qualche dritta? Se c'è bisogno posso postare uno dei due codici, o entrambi. Grazie mille a tutti di nuovo!
  • Re: Creare un'app in JS - come si fa?

    Ciao ragazzi! Forse ce l'ho fatta o quasi! Sono riuscito a mettere le 9 icone diverse in griglia e tutte cliccabili, ora devo riuscire a farle navigare. Allora inizialmente ho fatto una cosa tipo:

    render() {
    return (
    <ScrollView>
    <View style={styles.container}>

    <Touchable
    style={styles.item}
    onPress={() => navigate("Settings")}>
    <View style={styles.menuBox}>
    <Image
    style={styles.icon}
    source={require('../screens/src/Ch/immagine.png')}/>
    <Text style={styles.info}>TESTO</Text>
    </View>
    </Touchable>
    </View>
    </ScrollView>
    );
    }
    }

    Ora qui è un tasto solo e senza le const styles finali, per sintetizzare. la parte "onPress" credo sia scritta giusta ma mi restituisce l'errore che non sa cosa sia "navigate". Presumo di doverlo specificare con qualcosa tipo "const navigate =" similmente al funzionamento della tab bar, ma in realtà non ne sto venendo a capo.

    Il mio scopo è che quando premo quella icona, ci si sposti in un'altra schermata, similmente appunto al funzionamento della tabbar. Di nuovo mi sento di girarci intorno ma di non arrivare. Bene o male credo di aver fatto progressi, ma quando devo far funzionare più cose nello stesso blocco di codice mi ritrovo impiccato. Qualcuno mi da una dritta?

    EDIT: ora sono riuscito a mettere l'alert su un'icona, e la navigazione su internet in un'altra, ma non riesco a mettere la navigazione in locale su un altro .js. Possibile che queste 2 cose siano così semplici e invece quella apparentemente più semplice (caricare un js nella stessa cartella) non mi riesca in nessun modo farlo?
  • Re: Creare un'app in JS - come si fa?

    Eccomi di nuovo!

    Allora ho modificato il codice riportato sopra, con

    onPress={this.paginaInternet}

    e sotto ho definito che

    paginaInternet = () => {
    WebBrowser.openBrowserAsync('http://www.google.i');

    giusto per fare una prova. Funziona e si apre la pagina toccando l'immagine in questione, il touchableopacity da il suo effetto opacizzante e via dicendo. La cosa mi sembra davvero semplice, cioè basta dirgli che "on press" fai "this" e il "this" lo specifichi dopo dicendogli cosa sia. Ora, mi sono visto diverse guide e tutorial per la navigazione tra screen ma tutto mi sembra enormemente più complesso e pur avendo fatto svariati tentativi, non riesco a venirne a capo. Possibile che non si possa fare alla stessa maniera? cioè "on press" fai "this" e "this" lo specifichi dicendogli ad esempio "pagina2.js".

    Mi rendo conto di essere insistente ma pur sentendomi di aver fatto progressi in 2 settimane, mi sento incagliato un questo dettaglio e non capisco dove sto sbagliando
  • Re: Creare un'app in JS - come si fa?

    Ahahahaah mi bannerete prima o poi per tutti questi messaggi! Ad ogni modo, dopo una giornata di studio sono finalmente riuscito a far funzionare la cosa e ora finalmente le icone navigano ognuna nella sua direzione! Ho però riscontrato un problema, ovvero che su Expo mi appare il messaggio in giallo, che mi dice che dovrei usare un solo navigatore. Ora, dal basso della mia inesperienza, l'unico altro navigatore presente nella pagina è quello della tab bar. Questo vuol dire che potevo in qualche modo usare quello anche per richiamare la navigazione delle icone nella pagina principale? Se si, come?

    Anche perché mi è apparsa una specie di barra bianca superiore, che prima non c'era, e che quindi mi sposta tutto in basso, cioè in pratica prima avevo una barra in alto e ora ne ho come 2, mi viene quindi in mente che siano una per navigatore in pratica, anche se il navigatore principale è posizionato in basso quindi non sono sicuro di capire perfettamente cosa stia succedendo.

    Qualcuno può darmi una mano a risolvere?

    EDIT: ho trovato un altro sistema cioè con router-flux che mi sembra più semplice o almeno io mi ci trovo bene, il problema però del doppio navigatore mi rimane anche così, e anche la doppia "barra" bianca in alto. Come ne vengo fuori?

    EDIT 2: ho risolto eliminando il vecchio bottomtabnavigator e riscrivendo un bottom tab dentro il navigator di router-flux. Non so se sia la soluzione migliore ma l'ho trovata quella più intuitiva.
Devi accedere o registrarti per scrivere nel forum
18 risposte