DEV Community: Judith Ifeoma Nwokike

Integrating Storyblok into a VueJS project in a nutshell.

Judith Ifeoma Nwokike — Thu, 19 May 2022 21:01:26 +0000

Introduction

In this tutorial, we will learn how to add/connect Storyblok to our Vue Js project. Most of us will be wondering what Storyblok is all about. Hmm, do not panic I will explain. Storyblock is a headless CMS that can be used to create contents. For more details, visit the Storyblok documentation here.

Prerequisite

Basic understanding of JavaScript and VuetJs as framework
Node installed in your local machine
Install Vue CLI on your local machine
Create an account on Storyblok

Install and setup React

Let's setup our environment so we can get up and running with our project.
To create a VuetJs project, follow the steps below or you can visit the VueJs documentation website here.

npm init vue@3

Follow the steps shown on the terminal and once the installation is done, navigate to the project folder using the command below:

 cd storyblok-vue-app

Install npm in the project using the command below

 npm install

Then run the command below to start your application

  npm run dev

Finally serve the VueJs development server using the port displayed on your command line on your browser. In this case http://localhost:3000.

Yoo! the Vue project is up and running

Note: For the sake of this project, we are going to use Tailwind.css as for styling of our project. For more details on how to add Tailwind to our vue project, visit the Tailwind css official website here.

Storyblok Space Configuration

Since we done creating and running our VueJs app, now it’s time to create a space on Storyblok app. Remember you created an account on Storyblok at the beginning of this tutorial but if you’ve not done that, it’s not too late. Create a Storyblok space, by clicking this link.

Yeah 💃, we just created a sample content on the Storyblok space. Take a look below to see the Home story and then click on it to display the Storyblok visual editor.

Enabling the Visual Editor

To view your project in Storyblok Visual Editor you need to set the default environment URL in your space (click the arrow on the top-left on the Visual editor screen to go back to your space). Then click on Settings > General > then delete the default location, and set the new Location field to http://localhost:3000/

Now go back to the Home story under the Content section on the right hand pane of the screen. Open it, to see the Visual Editor, but then you won’t see your Vue app.

Connecting Vue to Storyblok

Install Storyblok Vue SDK using the command below

npm install @storyblok/vue@next

Initialize plugin in your main.js file by adding the block of code below and also add your access token from your Storyblok space.

import { createApp } from 'vue'
import App from './App.vue'
import { StoryblokVue, apiPlugin } from '@storyblok/vue';
import './index.css'
const app = createApp(App);

app.use(StoryblokVue, {
  accessToken: 'CThcj1fTCUrhroIUvB8ykgtt',
  bridge: process.env.NODE_ENV !== "production", // optimises by excluding the bridge on production
  use: [apiPlugin],
});

mount('#app');

Note: Wondering where the index.css is coming from, recall that we added Tailwind to our project.

To copy your token, navigate to Settings > API Keys >

Displaying Components on the Vue App

Create React Components

Conclusion

Building a simple event booking app with Vue and Flutterwave payment gateway.

Judith Ifeoma Nwokike — Thu, 19 May 2022 20:53:22 +0000

Introduction

In this blog post, we will learn how to use vue js to create a simple event booking application and also integrate Flutterwave as the payment gateway. In this application, a user will be able to register, log in and also reset password in case if a user forgot his password. Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.

Prerequisite

Node installed in your local machine
Basic knowledge of JavaScript and Vue
Install Vue CLI on your local machine
create an account on Flutterwave

Install and setup Vue

Let's setup our environment so we can get up and running with our event application

`npm install -g vue-cli`

To create a new vue project we can use the command below to start our own event project

`vue create event-booking-app`

You will be asked to select some options while creating your project. You can either go by the default setting or select the option manually.

`cd event-booking-app`

Navigate to the project directory
Finally serve the vue js development server with

`npm run serve`

Setting up Axios

import Vue from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

import "../src/assets/css/style.css";

import axios from "axios";

axios.defaults.baseURL = "<endpoint>";

Vue.use(require("vue-moment"));

Vue.config.productionTip = false;

new Vue({

  router,

  store,

  render: (h) => h(App),

}).$mount("#app");

Fetching events from the API

<script>

export default {

  name: "index",

  data() {

    return {

      events: [],

    };

  },

  mounted() {

    this.fetchEvents();

  },

  methods: {

    fetchEvents() {

      axios

        .get(

          "https://app.ticketmaster.com/discovery/v2/events?apikey=j3NtHIoBfApjHU0wjFnjENfU3VNu9K3i&amp;keyword=Tech&amp;locale=en&amp;size=50&amp;countryCode=US"

        )

        .then((res) => {

          this.events = res.data._embedded.events;

          console.log(res.data._embedded);

        })

        .catch((error) => {

          console.log(error);

        });

    },

</script>

Implementing search

In our project, we have been able to fetch events from the API but we need to search through the events for easy accessibility. Create a computed property and include the code snippet below

  computed: {

    resultQuery() {

      // console.log(this.searchEvent);

      if (this.searchEvent) {

        const filtered = this.events.filter((item) =>

          item.name.toLowerCase().includes(this.searchEvent)

        );

        return filtered;

      } else {

        return this.events;

      }

    },

  },

Authentication

Adding authentication will enable users to sign up and login into the event booking application.

Sign In Component

<template>

  <div class="login_container">

    <div class="inputformrow">

      <label>Email address</label>

      <input type="email" placeholder="user@email.com" v-model="user.email" />

    </div>

    <div class="inputformrow">

      <label>Password</label>

      <input

        type="password"

        placeholder="Enter Password"

        v-model="user.password"

      />

    </div>

    <div class="inputformrow">

      <p class="forgotpassword">Forgot your password?</p>

    </div>

    <div class="inputformrow">

      <button class="loginbutton" @click="signin()">Login</button>

      <div class="login_alternative">

        <p>Don't have an account? <span >Sign Up</span></p>

      </div>

    </div>

  </div>

</template>

export default {

  data() {

    return {

      user: {

        email: "",

        password: "",

      },

    };

  },

};

methods: {

    signin() {

      this.$store

        .dispatch(signin, {

          email: this.user.email,

          password: this.user.password,

        })

        .then(() => {

          this.$router.push({ name: "index" });

        })

        .catch((error) => {

          console.log(error.response.data.error);

          // this.error = error.response.data;

        });

    },

  },

Sign Up Component

<template>

  <div class="signup_container">

    <div class="inputformrow">

      <label>First name</label>

      <input type="email" placeholder="first name" v-model="user.f_name" />

    </div>

    <div class="inputformrow">

      <label>Last name</label>

      <input type="email" placeholder="last name" v-model="user.l_name" />

    </div>

    <div class="inputformrow">

      <label>Email address</label>

      <input type="email" placeholder="user@email.com" v-model="user.email" />

    </div>

    <div class="inputformrow">

      <label>Phone number</label>

      <input

        type="tel"

        placeholder="(xxx)-(xxx)-(xxx)-(xxx)"

        v-model="user.phone"

      />

    </div>

    <div class="inputformrow">

      <label>Country</label>

      <input type="number" placeholder="Nigeria" v-model="user.country" />

    </div>

    <div class="inputformrow">

      <label>Password</label>

      <input

        type="password"

        placeholder="Enter Password"

        v-model="user.password"

      />

    </div>

    <div class="inputformrow">

      <button class="signupbutton" @click.prevent="signup()">

        Create Account

      </button>

      <div class="login_alternative">

        <p>

          Don't have an account?

          <span @click="$router.push('/login')">Login</span>

        </p>

      </div>

    </div>

  </div>

</template>

export default {

  data() {

    return {

      user: {

        f_name: null,

        l_name: null,

        email: null,

        phone: null,

        country: null,

        password: null,

      },

    };

  },

};

methods: {

    signup() {

      this.$store

        .dispatch(signup, {

          f_name: this.user.f_name,

          l_name: this.user.l_name,

          email: this.user.email,

          phone: this.user.phone,

          country: this.user.country,

          password: this.user.password,

        })

        .then(() => {

          this.$router.push({ name: "login" });

        });

    },

  },

Implementing Vuex

Conclusion

We have been able to create a simple event booking application with help of vue and Flutterwave

Reasons why you should start using headless CMS

Judith Ifeoma Nwokike — Thu, 19 May 2022 20:48:48 +0000

While new technologies comes out in order to make the world of web development easy, headless CMS has been trending and popular in the world of digital content management. In this article, I will walk you through on reasons why you should start using a headless CMS for your content management. But before we start, First, let’s start with some definition what headless CMS is all about.

What is Headless CMS?

Why Headless CMS?

You may be wondering why are people going headless. Compared to traditional CMS, Headless CMS architecture is more suitable to fulfill modern-day business demands. Besides, some additional headless CMS benefits attract them.
Traditional CMS used to be a standard and only option. But now, the world has reasons to choose a Headless CMS.
A few of the significant reasons to choose Headless CMS are:

To deliver a personalized user experience
Operate on a multichannel distribution
Deliver content to a larger audience
Scale your business

Apart from these reasons, there are many advantages of headless CMS. Let’s deep dive into each of them.

Some of the headless CMS platform you would like to take a look at includes:

Storyblok
Strapi
Sanity
Contentful
GraphCMS
and many more

Advantages of Headless CMS

Easy Integration:
Scalability:
Flexibility & Compatibility: With headless CMS, developers has the choose of using a frontend that supports a programming language that they feel comfortable with and content can be served using API.
User Friendly:
Security: You don’t have to worry about all the additional security requirements that come along with a traditional CMS like Wordpress. The content made accessible via an API is often ‘read-only’ adding a much needed level of security.

Use cases for Headless CMS

Conclusion

JavaScript Arrays in a Nutshell for Newbies

Judith Ifeoma Nwokike — Wed, 14 Apr 2021 11:32:39 +0000

A critical aspect of solving computer science problems is expressing the data in one or more forms (data structures), making it easier to perform some operations on the data. For example, a list of numbers represented as a binary search tree can be efficiently queried to check for the presence of a number and this brings us to the meaning of Data Structure.

What is Data Structure?
According to Wikipedia, a data structure is the organization and implementation of values and information. In simple words, data structure is the way of organizing data in an efficient manner.

The thing is, most programming languages make a couple of basic data types available such as strings, numbers, booleans, dictionaries, tuples, sets, etc; from which more complex data structures can be built. For JavaScript, one of such fundamental data types is the ARRAY data type, and it is very important for beginners to understand how they can use arrays.

In this post, we will look at how we can create arrays in JavaScript, and also explore in a nutshell, 12 of the most popular array methods commonly used when working with arrays. This post is meant for JavaScript newbies who desire to know about arrays.

Let’s go! 💃💃💃

What is an Array?

An array is simply a data structure that can hold a collection of items (elements). Each element in an array has a position assigned to it, called an index. The indexes usually start from 0, for the first element. Indexes are properties on an array and can be used to access corresponding elements of the array.

In more specific terms, an array is a list-like object with a length property and positive integer properties as indexes.

Creating an array

JavaScript arrays can be created in many ways but in this article, we will be focusing on just three ways of creating array:

Array Literal:
The array literal notation wraps the elements of the array (as a comma-separated list of items) in a pair of square brackets ([]). Any property or method available on the Array prototype can be accessed on the newly created array object.

    const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

    console.log(fruits.length); 
    // 5

Array Constructor:
A new array object can be created by calling the Array() constructor with the elements of the array as arguments. The constructor function can be called with or without the new keyword — the effect is basically the same. Hence, the following is similar to the array literal from before:

const fruits = new Array('banana', 'mango', 'orange', 'apple', 'melon');

console.log(fruits.length); 
// 5

Spread Operators:
An array can be created from another array using the spread operator. The spread operator is simply used to list the enumerable elements of an iterable object in array and is represented using three dots (…)

Note: Spread operator can be used to clone an iterable object or merge iterable objects into one.

const = age [30, 20, 13, 34, 56]
const = combineAge [...age, 3, 7, 10, 24]

console.log(combineAge);
// [30, 20, 13, 34, 56, 3, 7, 10, 24]

Elements of an array

There is no limitation to the kind of elements a JavaScript array can contain. JavaScript arrays are designed to be heterogeneous by nature — they can contain one or more elements of any data type. For example, the array in the code snippet below contains elements of the following types: boolean, string, function, number and object.

const myArray = [true, (a, b) => a + b, 'house', 18, 'jane', {fruit: 'banana'}]

Since an array can contain just any type of element, it means that it's possible for an array to contain arrays — in which case it is commonly referred to as a multidimensional array (array of arrays), as shown below:

// Multidimensional Array
// An array that contains arrays (array of arrays)
const names = [
  ['John', 'Lola', 'Doe','Judith'],
  ['Hillary', 'Chidi', 'Humphrey', 'Mariam'],
  ['Alex', 'Usman', 'Cynthia', 'James']
];

There are times when you want an array to be homogeneous — to contain elements of the same data type. For example, say you want to perform some arithmetic operations on each element of an array; the elements of the array will have to at least be of number type for this to be successful.

// Array with only strings
const countries = ['kenya', 'nigeria', 'london', 'ghana', 'senegal'];

// Array with only positive integers (numbers)
const scores = [23, 67, 78, 20, 10, 26, 36];

Unfortunately, JavaScript on its own has no way of ensuring that an array is homogeneous at run-time. It is however the responsibility of the developer to do the type checks necessary before using the array as intended.

JavaScript is not strictly typed — it is impossible to specify the types of content you want an array to contain at compile-time just like you could in Java, C++ or other strictly typed languages. If you are using a typed superset of JavaScript such as TypeScript, it is possible to do this at compile time. However, the program might still be prone to failures at run time, especially if it works with data from an external source.

// TYPESCRIPT EXAMPLE: HOMOGENEOUS ARRAYS (AT COMPILE TIME)
// Array with only strings
const countries: string[] = ['kenya', 'nigeria', 'london', 'ghana', 'senegal'];

// Array with only positive integers (numbers)
const scores: Array<number> = [23, 67, 78, 20, 10, 26, 36];

Popular Array Methods

The Array prototype is enriched with a lot of methods for working with arrays. These methods usually serve as the foundation for implementing even more complex operations on arrays.

map()

This method returns a new array with the results of calling the provided map function on every element of an array.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const sweetFruits = fruits.map(fruit => 'sweet ' +  fruit);

console.log(sweetFruits);
// ["sweet banana", "sweet mango", "sweet orange", "sweet apple", "sweet melon"]

const ages = [23, 30, 13, 18, 40];
const doubleAges = ages.map(age => age * 2);

console.log(doubleAges);
// [46, 60, 26, 36, 80]

forEach()

This method can be used to iterate through the elements of an array, calling the provided callback function for each element. Unlike the map() method, the value returned by the callback function is usually ignored, and this method does not create a new array. It is commonly used when you want to cause some side-effects based on each element of an array.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const sweetFruit = [];

fruits.forEach(fruit => {
  sweetFruit.push('sweet' + fruit);
});

// ["sweet banana", "sweet mango", "sweet orange", "sweet apple", "sweet melon"]

filter()

This method returns a new array containing only the elements for which the provided filter function returned truthy value. The filter function provides logic for the test condition. Elements that don’t pass the condition specified in the filter function are discarded and not included in the new array that is returned.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const fruitsWithLongNames = fruits.filter(fruit => {
return fruit.length > 5;
});

// ["banana", "orange"]

join()

This method is used to add the elements of the array together into a single string.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.join());
// "banana,mango,orange,apple,melon"

console.log(fruits.join(' - '));
// "banana - mango - orange - apple - melon"

includes()

This method checks whether an array includes an element among its entries, returning true or false as appropriate.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.includes('mango')); // true
console.log(fruits.includes('pineapple')); // false

reduce()

The reduce method is used in an array, to sum up elements of the array to one value or Item. The summation of the elements starts from the left to the right of the array. The reduce() method is likely to be one of the tricky or difficult array methods to understand.

Note: reduce() is one of the most powerful array methods. In fact, .reduce() can be used to do what both .map() and .filter() can do.

const numbers = [4, 5, 1, 4, 2, 3, 1];
const sumOfNumbers = numbers.reduce((sum, number) => sum + number, 0);

console.log(sumOfNumbers); // 20

indexOf()

This method returns the position (index) at which a given element can be found in the array. It will return -1 if the element is not found in the array.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.indexOf('melon')); // 4
console.log(fruits.indexOf('pineapple')); // -1

concat()

This method is used to join two or more arrays. This method does not change the existing arrays but instead returns a new array.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const foods = ['yam', 'rice', 'beans', 'potato'];

console.log(fruits.concat(foods));
// ["banana", "mango", "orange", "apple", "melon", "yam", "rice", "beans", "potato"]

push()

This method adds one or more elements to the end of an array and returns the new length of the array.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const fruitsCount = fruits.push('pineapple');

console.log(fruits);
// ["banana", "mango", "orange", "apple", "melon", "pineapple"]

console.log(fruitsCount);
// 6

pop()

This method removes the last element from an array and returns that element. Calling .pop()decreases the length of the original array.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.pop()); // "melon"
console.log(fruits.length); // 4

slice()

This method simply takes a chunk/part of an array and returns it as a new array. When using the slice() method, two parameters are passed which are the startIndex — representing the index to start copying from, and the endIndex — representing the index before which to end the slice.

Note: Calling this method without arguments has been a very useful technique for creating array clones. If called directly from the Array.prototype, then it could be used to convert array-likes to arrays.

// Example 1
const names = ['James', 'Bola', 'Henry', 'Abiola', 'Musa'];
const newNames = names.slice();

console.log(newNames);
// ["James", "Bola", "Henry", "Abiola", "Musa"]


// Example 2
const names = ['James', 'Bola', 'Henry', 'Abiola', 'Musa'];
const newNames = names.slice(2);

console.log(newNames);
// ["Henry", "Abiola", "Musa"]


// Example 3
const names = ['James', 'Bola', 'Henry', 'Abiola', 'Musa'];
const newNames = names.slice(1, 3);

console.log(newNames);
// ["Bola", "Henry"]

find()

This method returns the value of the first element in the array that satisfies the condition defined in the provided testing function.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const foundFruit = fruits.find(fruit => fruit.length >= 5);

console.log(foundFruit); // "banana"

Conclusion

In this post, we were able to learn about working with JavaScript arrays and some of the useful methods they possess. Arrays are one of the most important data types in JavaScript and every developer ought to be familiar with how to use them.

Yaay! I hope you enjoyed the post. 🍷🍷