poniedziałek, 29 Październik 2018

Jak stworzyć widget przy pomocy Vue.js

Na początek powinniśmy mieć zainstalowane Vue Cli 3, narzędzie to pozwoli nam utworzyć projekt bez konieczności ręcznego konfigurowania szkieletu naszej aplikacji.

Vue CLI 3 (https://cli.vuejs.org/guide/installation.html) możemy zainstalować przy użyciu następujących komend:


npm install -g @vue/cli
# OR
yarn global add @vue/cli

Stwórzmy prosty projekt o nazwie „widget” przy użyciu komendy:


vue create widget // nazwa projektu może być dowolna, słowo "widget" możemy wstawić dowolną inną nazwę

Po użyciu powyższej komendy pojawi nam się pytanie w jaki sposób nasz projekt powinien zostać skonfigurowany, wybieramy opcję „select default”, czyli tworzymy domyślny projekt bez wstępnej dodatkowej konfiguracji, jeśli wybralibyśmy opcję „manually select features” moglibyśmy wybrać między innymi czy chcemy skorzystać z preprocesora Sass czy biblioteki Vuex służącej do zarządzania stanami aplikacji . Po pobraniu wszystkich zależności, przetestujmy czy nasza aplikacja działa poprawnie poprzez komendę:


npm run serve

Przechodzimy pod link http://localhost:8080, powinniśmy zobaczyć to samo co na zdjęciu poniżej.

list

Do naszego widgetu będziemy potrzebowali dwóch dodatkowych bibliotek:
vue-router
qs

Zaistalujmy je przy użyciu komendy:


npm install vue-router qs --save

Po zainstalowaniu musimy zainicjalizować nasz VueRouter w głównym plik main.js.


import Vue from 'vue'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'
import VueRouter from 'vue-router';

Vue.config.productionTip = false

// Inicjalizujemy VueRouter
Vue.use(VueRouter);

// Dla ścieżki "/" pojawi nam się komponent HelloWorld
const routes = [
  {
    name: "home",
    path: "/",
    component: HelloWorld,
    props: true
  }
]

const router = new VueRouter({
  mode: "history",
  routes: routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Naszym głównym komponentem będzie HelloWorld.vue, podmieńmy znajdujący się w nim kod na poniższy:


<template>
  <div id="app">
    <!-- Poprzez v-bind:style możemy przypisać zmienną odpowiedzialną za zmianę stylu do elementu -->
    <div v-bind:style="container" class="container">
      <span v-bind:style="helloWorld" class="hello-world">Hello World</span>
    </div>
  </div>
</template>

<script>

import qs from "qs";

export default {
  name: "Widget",
  mounted() {
    // Użyjemy biblioteki qs do sprawdzenia czy dany parametr w adresie url istnieje, jeśli tak to użyjemy jego wartości, jeśli nie zostaniemy przy domyślnych ustawieniach widgetu.
    let q = this.$router.currentRoute.query; // pobieramy parametry z naszego url
    // Odczytujemy parametry z url przy pomocy biblioteki qs
    if (q.helloWorldColor) {
      this.helloWorld.color = q.helloWorldColor;
    } 
    if (q.containerBackgroundColor) {
      this.container.backgroundColor = q.containerBackgroundColor;
    } 
  },
  data: () => ({
    // Domyślne style
    container: {
      backgroundColor: "#ffffff"
    },
    helloWorld: {
      color: "#f06292"
    }
  })
}
</script>

<style>

.container {
  width: 100%;
  text-align: center;
  margin-top: 50px;
}

.hello-world {
  font-size: 45px;
}

</style>

Musimy dokonać jeszcze jednej zmiany w pliku App.vue.


<template>
  <div id="app">
    <!-- Dodajemy komponent router-view -->
    <!-- App jest głównym komponentem naszej aplikacji, dzięki komponentowi router-view i konfiguracji router w pliku main.js pod pod adresem kończącym się "/" router-view wczyta komponent HelloWorld -->
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: "App",
}

</script>

<style>


</style>

Widget może być używany w innych aplikacjach przy użyciu iframe z src=”http://localhost:8080″ (podczas testowania lokalnie). Widget i jego kod możemy zobaczyć i przetestować w sandbox edytorze pod następującym linkiem https://codesandbox.io/s/0mqn2v1pjp, w edytorze od razu możemy dodać nowe właściwości widgetu, które mogą być konfigurowane poprzez iframe. Dodajmy na końcu adresu url w pasku przeglądarki edytora „?containerBackgroundColor=black&helloWorldColor=white” a następnie naciśnijmy klawisz enter, nasz napis „Hello World” powinien zostać wyświetlony w kolorze białym na czarnym tle.

Back to home
Alternatywne JavaScriptowe Frameworki

W JavaScriptowym świecie poza frameworkami React, Angular które podzieliły po między siebie popularność, a goniącym je Vue.js jest jeszcze miejsce na inne, mniej skompilowane frameworki, które nie zostały jeszcze dostrzeżone przez szersze grono ludzi.

Read more...
Flutter – pobieranie danych w formacie JSON

W tym wpisie zapoznamy się jak w prosty sposób pobrać dane w formacie JSON.

Read more...
Flutter – nowe narzędzie do tworzenia mobilnych aplikacji

Flutter to nowy framework stworzony przez Google do tworzenia mobilnych aplikacji na systemy iOS czy Android, za pomocą języka Dart. Język ten możemy wykorzystać przy tworzeniu webowych aplikacji na przykład przy pomocy frameworku AngularDart czy do wspomnianych aplikacji mobilnych.

Read more...