Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  11 3888
Hei,

Jeg planlegger å starte på et nytt prosjekt som innebærer utvikling av en enkel webapp, for å være mer presis en slags portal for et selskap. Jeg er hovedsakelig en Python-programmerer og datateknologi student. Jeg har laget en nettside og to med HTML, CSS og vanlig JS før, men det begynner å bli en stund siden. Mange ting har skjedd siden den gang, spesielt med tanken på at alt blir retta mot mobiler og ikke så mye mot desktop lenger.

Basert på det jeg har lært de siste par timene, så er det nok en PWA-metode jeg ønsker å gå for, mest på grunn av at en kan få native app opplevelse samt unngå app stores og ikke minst pga dette virker minst tids krevende. Jeg så at noen anbefalte å bruke kun vanlig JS for dette, med andre ord at man prøver å unngå rammeverk som React eller Angular. Hovedsakelig fordi det kan være for tungt når webappen skal catches og dermed kan påvirke responstiden og native opplevelsen som jeg er ute etter. Mens andre sier at å bruke rammeverk som for eks. Vuejs er helt greit for PWA, jeg forstod det slik at Vuejs er en lettere rammeverk i utgangspunktet.

Altså, målet mitt er å bygge en web app som fungerer på alle mobile enheter (og desktop hvis mulig) med bare ett sett med kode. Selv om jeg ikke har noe imot en utfordring, setter jeg pris på teknologier som er enkelt å lære og raskt å komme i gang med.
Personlig har jeg ikke erfaring med Angular, men kan sterkt anbefale både React og Vue for PWA. Create-React-App er et veldig fint utgangspunkt for React og kommer med støtte for service-workers ut av boksen. Vue CLI er veldig kjekt for å komme i gang med Vue.
React og vuejs er ålreite alternativer som nevnt over.

Ikke farlig å velge et rammeverk mtp responstid/lasting. Man cacher asset’ene via serviceworker, så det er først ved release av ny versjon man må laste ned dette på nytt.

Kan være hendig å sjekke ut webpack i samme slengen. Nyttig for å redusere størrelse på bundles, splitting av appen, asynkron lasting av bundles ved behov.

Det er også viktig å huske på at det er ikke bare lasting av appen som er viktig, men også å ha velspesifiserte endepunkter. Vil anbefale deg å ta en titt på GraphQL. Den fjerner problemstillingen med over/under-fetching av data.

I alle tilfeller vil jeg anbefale å bruke typescript, dette letter utvikling betraktelig kontra vanilla js. Statisk typing reduserer antall feil, så lenge man ikke bruker ‘any’.
HerAnt's Avatar
Trådstarter
Takk for gode råd, jeg skal definitivt se på det dere har anbefalt med! En annen ting jeg lurte på er hvordan setter mann opp et prosjekt mot mobile enheter? Er det da vanlig og bare bruke chrome dev tool som er i device modus eller finnes det noe bedre verktøy evt. simuleringsverktøy? Er det fortsatt aktuelt å bruke Bootstrap eller bruker man noe annet som tilpasser seg automatisk til de forskjellige enhetene?
Det finnes en myriade av verktøy. Webapp/frontend er det mest eksplosive miljøet som eksisterer der ute per dags dato. For å teste nettlesere er det bare å cherry picke blant alternativene.

For PWA er som nevnt tidligere Vue Cli helt fantastisk. Vue har et veldig godt økosystem inkludert. Du får med en offisielt støttet router, state manager, pwa support og templates som abstrakterer vekk det monstrøse rammeverket vi har alle måtte slitt oss igjennom kalt webpack. Sjekk ut hvor enkelt det er å komme i gang med en PWA laget med vue-cli.

Støtter også typescript. Javascript er herlig, men det er vanskelig å skalere med et dynamisk språk. Typescript letter på denne byrden veldig godt, og er gullkorn man absolutt må sjekke ut.

Hvis du er helt blank, så er det temmelig mye å sette seg inn i før man egentlig begynner å bli produktiv. Hele dette miljøet handler mer om å koble sammen forskjellige rammeverk og teknologier korrekt, enn å skrive masse kode. Derfor krever det en del kunnskap om forskjellige buzzwords og diverse, heldigvis er det verdens letteste programmeringsmiljø å sette seg inn i, siden all info er helt åpent.

Når det gjelder debugging er det også litt avhengig av hvilket "nivå" du ønsker å debugge på. Chrome dev tool blir mye brukt, men avhengig av hva du forsøker å debugge er det som oftest verktøyet som tilhører rammeverket/teknologien du forsøker å debugge som ofte blir brukt.
Jeg ville hvertfall startet med å fokusere min egen enhet, for så å teste funksjonalitet mot andre platformer etterhvert når funksjonaliteten begynner å komme på plass.

Det høres ut som du hovedsaklig skal skrive og lese data og da bruker du ikke like mye av de forskjellige plattformenes unike funksjoner og dermed blir nok hovedutfordringen å få det visuelle til å stemme på tvers av platformene. Du vil kunne lage én kodebase som funker overalt men du vil måtte skrive platformspesifikke funksjoner og kode dersom du skal benytte maskinvare apier o.l.

Det finnes en del både gratis og betalte tjenester hvor du kan teste koden din på simulerte og/eller ekte mobiler og nettbrett I ett webgrensesnitt.
Men du kommer langt med én ios enhet og én Android enhet i starten (forskjellene mellom de forskjellige modellene utover selve platformen er som regel kun skjermstørrelse og forskjellig tilgang til hardware).

https://saucelabs.com/pricing

Android studio kan også emulere mobiler.

Ett tips (som du kanskje vet) er at du kan redigere kode live i Chrome inspectoren, som kan spare mye tid når du skal tilpasse frontend og css.
HerAnt's Avatar
Trådstarter
Tusen takk for mange nyttige tips. Jeg har kommet godt i gang med Vue.js og har allerede begynt å modellere appen. Selv om jeg er glad i å bruke commando vinduet så liker jeg godt Vue ui som gir oversiktlig installasjonen av div pakker. Det var heller ingen problem å få satt opp PWA, det funker bra både på iOS og Android. En ting jeg ikke finner ut av er hvorfor klarer ikke min iphone hente ut ikonet til appen, mens alle andre enheter klarer det. Er det noen her som har erfaring med dette? Den greier helt fint å hente ut ting som "short_name" fra manifest.json men nekter å finne selve ikonet som er spesifisert med src, size og type.
Sist endret av HerAnt; 26. mars 2019 kl. 16:09.
Sitat av HerAnt Vis innlegg
Tusen takk for mange nyttige tips. Jeg har kommet godt i gang med Vue.js og har allerede begynt å modellere appen. Selv om jeg er glad i å bruke commando vinduet så liker jeg godt Vue ui som gir oversiktlig installasjonen av div pakker. Det var heller ingen problem å få satt opp PWA, det funker bra både på iOS og Android. En ting jeg ikke finner ut av er hvorfor klarer ikke min iphone hente ut ikonet til appen, mens alle andre enheter klarer det. Er det noen her som har erfaring med dette? Den greier helt fint å hente ut ting som "short_name" fra manifest.json men nekter å finne selve ikonet som er spesifisert med src, size og type.
Vis hele sitatet...
For iOS må du spesifisere det som meta tags:

Kode

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
Du nevnte Chrome Dev Tools tidligere her, og det funker fint til å teste responsivitet og oppførsel på mobil. Men det må aldri erstatte det å teste på fysisk enhet
HerAnt's Avatar
Trådstarter
Sitat av Yochi Vis innlegg
For iOS må du spesifisere det som meta tags:

Kode

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
Du nevnte Chrome Dev Tools tidligere her, og det funker fint til å teste responsivitet og oppførsel på mobil. Men det må aldri erstatte det å teste på fysisk enhet
Vis hele sitatet...
Se der ja, det fungerte helt utmerket .
Ja nei jeg bruker mobilen min hele tiden for å sjekka hvordan styling blir, stoler aldri 100% på chrome dev tool.
▼ ... over en uke senere ... ▼
HerAnt's Avatar
Trådstarter
Hei,
Jeg holder fortiden på med å knytte opp firebase authentication mot min app. Appen skal være helt låst med mindre en autorisert bruker logger seg inn, med andre ord det eneste som skal være synlig for alle er logg inn siden(/login). Etter at påloggingen blir godkjent, blir brukeren videreført til hjem siden(/home) derfra kan en velge å gå til for eks. /inbox eller andre sider. Dette har jeg fått til og det fungerer veldig bra, men jeg er veldig usikker på om denne måten jeg har rute disse låste sidene på er egentlig en bra måte (og ikke minst en sikker måte).
Jeg bruker Vue Router til å knytte sammen sidene i router.js. Under hver av de låste sidene har jeg spesifisert med
meta: {requiresAuth: true}
og helt nede bruker jeg router.beforeEach firebase funksjon for å spesifisere hvilken side som skal vises for uautoriserte brukarene og hvor blir en sendt videre etter en suksessfull autorisasjon.

router.js:

Kode

import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase'

import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Inbox from '@/views/Inbox.vue'
import Team from '@/views/Team.vue'
import Settings from '@/views/Settings.vue'
import NotFound from '@/views/NotFound.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/inbox',
      name: 'Inbox',
      component: Inbox,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/team',
      name: 'Team',
      component: Team,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/settings',
      name: 'Settings',
      component: Settings,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '*',
      name: 'NotFound',
      component: NotFound
    }
  ]
})

router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('home')
  else next()
})

export default router
Home.vue:

Kode

<template>
  <v-container fill-height>
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md4>
        <v-flex class="text-xs-center">
          <h1>Velkommen,</h1>
          <p>{{name}}</p>
        </v-flex>
        <v-layout v-layout align-center justify-center column fill-height>
          <v-btn color="red" @click="logout">Logg ut</v-btn>
          <v-spacer></v-spacer>
          <v-btn color="green" @click="goToInbox">Inbox</v-btn>
          <v-btn color="green" @click="goToTeam">Team</v-btn>
          <v-btn color="green" @click="goToSettings">Settings</v-btn>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import firebase from "firebase";

export default {
  data() {
    return {
      name: firebase.auth().currentUser.email
    };
  },
  methods: {
    logout() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          this.$router.replace("login");
        });
    },
    goToInbox() {
      this.$router.replace("/inbox");
    },
    goToTeam() {
      this.$router.replace("/team");
    },
    goToSettings() {
      this.$router.replace("/settings");
    }
  }
};
</script>

<style lang="scss">
h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
</style>


I Home.vue (/home) filen har jeg laget en ruting funksjon til hver av sidene, når brukeren trykker på knappen(linken) blir han sendt videre til den siden. Det er egentlig det jeg er mest usikker på, er dette en god måte å gjøre det på ?
Du kan enten gjøre det sånn du har gjort det, eller så kan du bytte ut replace med push:

Kode

router.push('inbox')
Da oppdaterer du historikken i nettleseren så brukeren kan klikke tilbake og navigere i løsningen din.

Og der du ikke gjør noe annet enn å navigere kan du eventuelt bruke komponenten router-link i template:

Kode

<router-link to="/inbox">Inbox</router-link>
Ellers syns jeg det ser greit ut.
HerAnt's Avatar
Trådstarter
Sitat av Yochi Vis innlegg
Du kan enten gjøre det sånn du har gjort det, eller så kan du bytte ut replace med push:

Kode

router.push('inbox')
Da oppdaterer du historikken i nettleseren så brukeren kan klikke tilbake og navigere i løsningen din.

Og der du ikke gjør noe annet enn å navigere kan du eventuelt bruke komponenten router-link i template:

Kode

<router-link to="/inbox">Inbox</router-link>
Ellers syns jeg det ser greit ut.
Vis hele sitatet...
Takk for tilbake meldingen! Jeg endra navigering slik du foreslo gjennom router-link.