DEV Community: Ashinze Ekene

How I got my cousemates' birthday dates

Ashinze Ekene — Sun, 26 Aug 2018 13:19:22 +0000

My love for automation and looking for shortcuts at it again. I've always wanted to have all my classmates names (Surname and Firstname) in my address book and their birthday dates so I can send them birthday wishes even afer leaving school. A google form was created for us to fill in our profile(final year stuff), I had access to it, so I downloaded the form in csv. Of course I could have manually created entries for each of the 86 of them, but this would have been time consuming. I did some research on vCard and vcf files using these resources https://en.wikipedia.org/wiki/VCard and https://tools.ietf.org/html/rfc6350. I found out that the basic format for a vcf is like:

BEGIN:VCARD
VERSION:2.1
N:Gump;Forrest;;Mr.
FN:Forrest Gump
ORG:Bubba Gump Shrimp Co.
TEL;HOME;VOICE:(404) 555-1212
ADR;WORK;PREF:;;100 Waters Edge;Baytown;LA;30314;United States of America
LABEL;HOME;ENCODING=QUOTED-PRINTABLE;CHARSET=UTF-8:42 Plantation St.=0D=0A=
 Baytown, LA 30314=0D=0AUnited States of America
EMAIL:forrestgump@example.com
END:VCARD

so I wrote a code in python so create a vcard entry for each classmate from the csv file which had the following rows

"Name","Nickname","Date of Birth","State of Origin","Phone Number","Twitter Handle","Instagram Handle","Snapchat handle","Philosophy of Life","Best Department Course","Worst Department Course"...

Here's the code:

import csv

VCF_TEXT = ''

with open('./Final Year Bioscope Form.csv', mode='r') as csv_file:
    csv_reader = csv.DictReader(csv_file)
    lines_read = 0
    for row in csv_reader:
        if lines_read > 0:
            VCF_TEXT += ("BEGIN:VCARD\n"
            "VERSION:3.0\n" +
            "N:{}\n".format(row['Name'].replace(',', '')) +
            "FN:{}\n".format(row['Name'].replace(',', '')) +
            "NICKNAME:{}\n".format(row['Nickname']) +
            "NOTE:{}\n".format(row['Philosophy of Life']) +
            "X-TWITTER:{}\n".format(row['Twitter Handle']) +
            "TEL;WORK;VOICE:{}\n".format(row['Phone Number']) +
            "BDAY:{}\n".format(row['Date of Birth']) +
            "CATEGORIES:University of Lagos,CellBiology and Genetics,Helicase 18\n" +
            "END:VCARD\n")
        lines_read += 1

with open('Final Year Bioscope Form.vcf', 'w+') as vcf_file:
    vcf_file.write(VCF_TEXT)

One challenge I had was the N field from the CSV required that the names be seperated by semicolon(;) but some people had their names seperated by a comma (,) while other used a whitespace, so I used this regular expression to solve my issue

import re

NAME_SUB = re.compile('( +|,) ?')
NAME_SUB.sub(';', row['Name'])

The code replaces commas and spaces and its different combinations with the appropriate delimiter.

Next issue was some with the birthday date. Google saved birthdays in this format

BDAY: Jul 23

but I got this format from the csv 06-23 so I had to convert it to the appropriate format. This helped

from datetime import datetime

strDate = row['Date of Birth']
objDate = datetime.strptime(strDate, '%m-%d')
bday = datetime.strftime(objDate,'%b %d')

It reads the birthday date from the csv and converts it to the required format. At the end the reformed code looked like this

import csv
import re
from datetime import datetime

VCF_TEXT = ''

NAME_SUB = re.compile('( +|,) ?')
with open('./Final Year Bioscope Form.csv', mode='r') as csv_file:
    csv_reader = csv.DictReader(csv_file)
    lines_read = 0
    for row in csv_reader:
        strDate = row['Date of Birth']
        objDate = datetime.strptime(strDate, '%m-%d')
        bday = datetime.strftime(objDate,'%b %d')
        if lines_read > 0:
            VCF_TEXT += ("BEGIN:VCARD\n"
            "VERSION:3.0\n" +
            "N:{}\n".format(NAME_SUB.sub(';', row['Name'])) +
            "FN:{}\n".format(row['Name'].replace(',', '')) +
            "NICKNAME:{}\n".format(row['Nickname']) +
            "NOTE:{}\n".format(row['Philosophy of Life']) +
            "X-TWITTER:{}\n".format(row['Twitter Handle']) +
            "TEL;WORK;VOICE:{}\n".format(row['Phone Number']) +
            "BDAY:{}\n".format(bday) +
            "CATEGORIES:University of Lagos,CellBiology and Genetics,Helicase 18\n" +
            "END:VCARD\n")
        lines_read += 1

with open('Final Year Bioscope Form.vcf', 'w+') as vcf_file:
    vcf_file.write(VCF_TEXT)

After running the code. It generated the vcf for me. All I then did was import the vcf file into google contacts. This can be done on mobile and on the web. And hey presto I had all my classmates full names, phone numbers, birthday dates and twitter handles.

Creating an Angular Shopping app and integrating payments using Rave

Ashinze Ekene — Sat, 17 Mar 2018 08:15:39 +0000

Outline

What is Rave
Setting Up and Folder structure
Angular part
Integrating rave payments
Conclusion

What is Rave

Rave provide safe, easy and secure payment solutions for businesses. Its free and easy to get started. We would cover how to accept payments from your Angular application using this technology.

We would be building a simple shopping application using Angular, where users can easily buy items on sale.

Setting Up and Folder Structure

We would first start by installing Node (if not present). It is available at the download page. Node comes with its package manager, NPM (Node Package Manager). We'd now run

npm install --g @angular/cli

or if you have yarn

yarn add global @angular/cli

This installs the angular cli used for creating new Angular applications, components, modules, pipes etc. We might need to run as system administrator for this to work. After installation, we can verify that everything went well by running

ng version

We can now create our angular application. We would do this by running

ng new shopping-app

This creates an angular application for us and installs the dependencies

After this, we run

cd shopping-app
ng serve --open

This serves our app and opens it in the browser. Next we open our index.html and insert bootstrap from the CDN

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shopping App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
...

Angular Part

To simplify our app let's create two components

A navbar component and
A products component

We would run

ng generate component navbar
ng generate component products

This command creates the two components for us. Now open up navbar.component.html and insert this

<nav class="navbar navbar-expand-sm navbar-light bg-white py-3">
  <a class="navbar-brand pr-2">Shopping App</a>
  <button class="navbar-toggler navbar-toggler-left" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed"
    aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

To add a shadow we will add this to our styles in navbar.component.css

nav {
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
}

We will also open our navbar.component.ts and add this

import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  title = 'app';
  > navbarCollapsed: boolean = true
}

We have added a navbar using Bootstrap's template. In our navbar.component.html, we added a property; navbarCollapsed: boolean = true to toggle the navbar collapse

In our app.component.html. We would import the navbar like so

<app-navbar></app-navbar>

When we visit the site on the browser, we should see the navbar displayed.
Next, we would add a hero content to our app.conponent.html like so

<app-navbar></app-navbar>
<div class="hero d-flex justify-content-center align-items-center bg-primary" style="height:80vh;">
  <div class="flex-child text-white text-center">
    <div class="display-3 p-3">The Shopping App</div>
    <div class="lead font-italic">Quality items at affordable prices...</div>
  </div>
</div>

Next we would open up our products.component.ts file. We have an array of our available products and their prices in this file. We would import it into our products.component.ts like so:

import { Component, OnInit } from '@angular/core';
import { products } from '../data/data';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public allProducts = products

  constructor() { }

  ngOnInit() {
  }
}

Now we have our product list available on the products component. We would open up our products.component.html and do this

<div class="products row mx-2 p-3 d-flex justify-content-center">
  <div *ngFor="let product of allProducts" class="card m-2" style="width: 18rem;">
    <img class="card-img-top" [src]="product.img_url" [alt]="product.name">
    <div class="card-body">
      <h3>{{ product.name }} <div *ngIf="product.is_new" class="badge badge-success"></div> </h3>
      <p class="card-text">{{ product.description }}</p>
      <button class="btn btn-primary">Buy for &#x20a6;{{ product.price }}</button>
    </div>
  </div>
</div>

Next we import our products component into the app.component.html like so:

<app-navbar></app-navbar>
<div class="hero d-flex justify-content-center align-items-center bg-primary" style="height:80vh;">
  <div class="flex-child text-white text-center">
    <div class="display-3 p-3">The Shopping App</div>
    <div class="lead font-italic">Quality items at affordable prices...</div>
  </div>
</div>
<app-products></app-products>

We should see the products neatly listed on the homepage.

Integrating Rave Payments

Next up is accepting payment in our app. we would use the angular-rave module. Run

npm install --save angular-rave

Add the rave script into your index.html

<script src="//rave-api-v2.herokuapp.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>

Then open up the app.module.ts and import the angular-rave module

import { AngularRaveModule } from 'angular-rave';

@NgModule({
  imports: [
   AngularRaveModule,
   ...
  ]
})

Before we can integrate rave into our application, we first need to get a Public key. We would do that by heading to http://rave.frontendpwc.com and creating an account. On the dashboard we would copy out our Public Key which we would need in our app. Now we can use angular-rave in our app. We would add the angular-rave directive to our payment buttons and other import parameters like so:

<div class="products row mx-2 p-3 d-flex justify-content-center">
  <div *ngFor="let product of allProducts" class="card m-2" style="width: 18rem;">
    <img class="card-img-top" [src]="product.img_url" [alt]="product.name">
    <div class="card-body">
      <h3>{{ product.name }} <div *ngIf="product.is_new" class="badge badge-success"></div> </h3>
      <p class="card-text">{{ product.description }}</p>
      <button
        angular-rave
        [PBFPubKey] = "FLWPUBK-XXXXXXXXXXXX"
        [customer_email] = "'user@example.com'"
        [amount]="product.price"
        [custom_title]="product.name"
        [txref]="product.name + Date.now()"
        (callback)="paymentSuccess($event)"
        (close)="paymentFailure()"
        class="btn btn-primary">Buy for &#x20a6;{{ product.price }}</button>
    </div>
  </div>
</div>

We have defined two functions to respond to payment success and failure. So we open up products.component.ts and write those functions


paymentSuccess(res) {
    console.log("Payment successfull")
    // On a real app, we must first perform validation on the server by sending a request to rave to verify the transaction before anything else
    // this.serverService.verifyTransaction(res)
}

paymentFailure(){
    // Handle payment failure
}

Conclusion

Our app is ready now. Once a user clicks on the pay button, the rave popup shows up and viola, we can receive payments on our app