DEV Community: Andres Lopez

Tip Land the SaaS platform for the tip of the day

Andres Lopez — Fri, 26 Aug 2022 02:57:46 +0000

Overview of My Submission

Tip Land is a platform as a service for product creators and that can easily integrate the functionality of the tip of the day.

Many products today include daily tips for their best use in their interface, such as code editors, management systems among many others, Tip Land provides you with a platform with which you can create those tips for your products, through a API Key assigned to your account you can access the endpoint.

Made with Re2 Stack 📀 🟥 (Remix + Redis = Re2 Stack)

When two blazing-fast technologies come together to bring out the best of each other, something amazing happens:

In Remix the global state is the database and the database is the cache in Redis Stack.

Submission Category:

Wacky Wildcards

Video Explainer of My Project

Language Used

JS/TS/Node.js

Link to Code

andreslopezrm / tip-land

Tip of the day as a service

Tip Land the SaaS platform for the tip of the day

Tip Land is a platform as a service for product creators and that can easily integrate the functionality of the tip of the day.

Made with Re2 Stack (Remix + Redis = Re2 Stack)

When two blazing-fast technologies come together to bring out the best of each other, something amazing happens:

In Remix the global state is the database and the database is the cache in Redis Stack.

Social Login

Dashboard

Tips

API Key

Stats

Overview video

How it works

Stack

How the data is

…

View on GitHub

Additional Resources / Info

Links to open source projects that are using in the workflow

Live Deploy

Tip Land

Stack

Database

Screenshots

Social Login

Dashboard

Tips

API Key

Stats

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Introducing Re2 Stack

Andres Lopez — Fri, 26 Aug 2022 02:53:34 +0000

I present to you this new stack that consists of two highly fast technologies that make the development experience really fast.

Re2 Stack 📀 🟥

The name comes from both technologies starting with the word Re, Remix and Redis, so these two (2) technologies make up the stack.

When talking about Redis today it is thought that it simply provides a caching mechanism and could hardly be used in other parts that would make up an architecture, however Redis has evolved so much that it can cover many more scenarios, even being the main database without need for no other.

Remix on the other hand is a full stack web framework that allows you to focus on the user interface that provides user experience and rapid development.

When two blazing-fast technologies come together to bring out the best of each other, something amazing happens:

In Remix the global state is the database and the database is the cache in Redis Stack.

The idea of Re2 Stack is to be progressive and two scenarios are proposed here

Re2 Stack Full Stack Version

In a fullstack scenario, Redis JSON will be used as the main/cache database and Remix will be used to access that data as seen in the following diagram:

Redis Stack through Redis JSON allows you to be a document-oriented database with exceptional speed, through Redis OM you can define your schemas, queries, have indexes, any capability that a modern NoSQL database would have, along with To that at the exceptional speed that comes out of the Remix box you have an amazing combination.

An example of this stack is found in the following repository:

andreslopezrm / re2stack

Remix + Redis = Re2 Stack

Re2 Stack

The name comes from both technologies starting with the word Re, Remix and Redis, so these two (2) technologies make up the stack.

When talking about Redis today it is thought that it simply provides a caching mechanism and could hardly be used in other parts that would make up an architecture, however Redis has evolved so much that it can cover many more scenarios, even being the main database without need for no other.

The Article:

https://dev.to/andreslopezrm/introducing-re2-stack-50l

Remix

Remix Docs

Redis

Create an account in Redis Cloud and get the Redis URL
Create an .env file with

REDIS_URL=

Deployment

After having run the create-remix command and selected "Vercel" as a deployment target, you only need to import your Git repository into Vercel, and it will be deployed.

If you'd like to avoid using a Git repository, you can also deploy the directory by running Vercel CLI:

…

View on GitHub

Re2 Stack Enterprise Version

Business applications normally have an architecture with many components, jobs in queues, asynchronous processes, events, and therefore tend to have technologies from different providers. In a scenario like this, for example:

Now all these components can be simplified and united in a single technology: Redis

With Redis we have all those features in a single stack without having to bundle different technologies separately.

For more information check:

Pet and Vet a Micro Social Network for pets using AppWrite

Andres Lopez — Wed, 11 May 2022 20:33:10 +0000

Overview of My Submission

Pet and Vet is a micro social network with the purpose of connecting veterinarians with pet owners, as well as making your pet known to the world and learn about events in your country.

The main functions of this micro social network are:

Register/Login with email
Registration as a Veterinarian or Pet Owner
Veterinarians can enter 1 or more contact addresses that can be located on a map
Pet owners can have a catalog of their pets and decide whether to display them publicly or privately
Registry of tips so that everyone knows information of interest
Share your pet via QR
Connect with a veterinarian via email or chat in real time

Pet and Vet is built on:

AppWrite: as the backend that provides all the services
Gitpod: for remote development platform
Svelte: as a javascript framework
Agnostic UI: for the design of the components
Express JS: server-side sdk specific functionality

The inspiration for the idea was to have a project that will use many of the features provided by AppWrite and at the same time be an example of how to connect people who are interested in pets.

Submission Category:

Web2 Wizards

Link to Code

andreslopezrm / petandvet-appwrite

Project Pet and Vet for Hackaton App Write

Pet and Vet

Pet and Vet is a micro social network with the purpose of connecting veterinarians with pet owners, as well as making your pet known to the world and learn about events in your country.

The main functions of this micro social network are:

Register/Login with email
Registration as a Veterinarian or Pet Owner
Veterinarians can enter 1 or more contact addresses that can be located on a map
Pet owners can have a catalog of their pets and decide whether to display them publicly or privately
Registry of tips so that everyone knows information of interest
Share your pet via QR
Connect with a veterinarian via email or chat in real time

Pet and Vet is a project for the Hackaton AppWrite

Presentation

Link to presentation

Svelte Docs

We recommend to look at the documentation.

Setup

Backend

Create a .env file and set yours keys

APPWRITE_ENDPOINT=""

APPWRITE_PROJECT=""

…

View on GitHub

Additional Resources / Info

Presentation

Link to presentation

Screenshots

Show your pet to the world or keep it private

Share the link of your pet on social networks

Find events in your country

Share events via QR code

Find veterinarians and contact them

Keep a catalog of your pets

Promote events and share tips with everyone

Update your personal information at any time

As a veterinarian add contact addresses and chat in real time with pet owners

Conclusions

This hackathon allowed me to get to know Appwrite and the ease it provides when creating different applications in different scenarios, personally I see Appwrite as a new proposal and a strong competitor to create production quality applications

Wordpress + Web Components = Awesome ✨

Andres Lopez — Thu, 09 Apr 2020 00:53:19 +0000

Wordpress is one of the most used content managers for a long time which offers great maturity and a great community around, with the passage of time many libraries and javascript frameworks have emerged that are modern development, leaving aside many Wordpress themes with jquery.

Nowadays there is a lot of talk about technologies that boost Wordpress such as JAMStack or Headless Wordpress to integrate it with Next.js, Nuxt.js or Sapper, and sometimes there are projects that by their nature are legacy or do not require a very large stack, for those cases you can easily use jquery and today I want to share one more alternative, which is the use of web components.

Web components have the peculiarity that they are indifferent to where they are used, whether within a javascript framework, some template engine such as Blade, Halm, etc., because the idea of web components to create custom html tags and therefore are used very similar as any html tag is used.

Here some examples:

<sp-icon size="s" name="ui:Magnifier"></sp-icon>
<smart-button class="material">Click Me</smart-button>
<emoji-rain drops="50" active></emoji-rain>

In Wordpress to loop a certain number of posts the loop is used, where the html code is placed to show the title or the highlighted image, the web components as mentioned above are treated like the other html tags, so the web components are can use within PHP.

<?php echo "<emoji-rain drops='50' active></emoji-rain>"; ?>

Here is a brief example of how to integrate a slideshow into the Wordpress loop.

Create the npm package

npm init - yes

Install development dependencies

npm i -D css-loader style-loader webpack webpack-cli

Install the macro-carousel library that will be used to make the slideshow.

npm i -D macro-carousel

In the src / index.js file import the library, no need to call additional functions.

import "macro-carousel";

Inside Wordpress in the index.php or any other template file include the following code:

<macro-carousel pagination loop>
   <?php if (have_posts()): while (have_posts()): the_post(); ?>
      <article class="slide">
       <figure>
         <?php the_post_thumbnail(); ?>
       </figure>
       <h3><?php the_title(); ?></h3>
    </article>
  <?php endwhile; endif; ?>
</macro-carousel>

The macro-carousel web component will create a slideshow and is used like any other HTML tag, the end result with a bit of styling is:

The code can be found on Github 😁

WatchOS (Swift): Horoscope Application

Andres Lopez — Sun, 31 Mar 2019 23:27:28 +0000

In this tutorial an application for WatchOS will be made, based on consulting a REST API of horoscopes.

Requirements

Xcode 10.2 or higher
Mac OS Mojave or higher
IPhone simulator
Apple Watch Simulator

Creation of the project

Open XCode and create a new WatchOS project.

The Include Notification Scene option is unchecked and the location where the project is saved is selected.

First screen

Drag a table element.

Two labels are added inside the table:

First label with the following alignment properties.

Second label with the following alignment properties.

The Row element of the table is assigned the identifier with the same name Row.

A Row class is created that inherits from NSObject and we link the corresponding outlets.


import WatchKit

class Row: NSObject {
    @IBOutlet weak var lblIcon: WKInterfaceLabel!

    @IBOutlet weak var lblZodiac: WKInterfaceLabel!
}

The code of the Interface Controller is as follows:


import WatchKit
import Foundation


class InterfaceController: WKInterfaceController {

    @IBOutlet weak var table: WKInterfaceTable!


    let zodiac = [
        ("♈", "Aries"),
        ("♉", "Taurus"),
        ("♊", "Gemini"),
        ("♋", "Cancer"),
        ("♌", "Leo"),
        ("♍", "Virgo"),
        ("♎", "Libra"),
        ("♏", "Scorpio"),
        ("♐", "Sagittarius"),
        ("♑", "Capricorn"),
        ("♒", "Aquarius"),
        ("♓", "Pisces")
    ]

    override func awake(withContext context: Any?) {
        super.awake(withContext: context)

        // Configure interface objects here.


        table.setNumberOfRows(zodiac.count, withRowType: "Row")

        for (index, sign) in zodiac.enumerated() {
            guard let row = table.rowController(at: index) as? Row else { return }
            row.lblIcon.setText(sign.0)
            row.lblZodiac.setText(sign.1)
        }
    }

    override func table(_ table: WKInterfaceTable, didSelectRowAt rowIndex: Int) {
        print(zodiac[rowIndex].1)

        let context = ["sing": zodiac[rowIndex].1]

        presentController(withName: "Results", context: context)
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }

}

Model

The following structure is used for the response model:


import Foundation

struct Horoscope: Codable {
    var currentDate: String
    var description: String

    enum CodingKeys: String, CodingKey {
        case currentDate = "current_date", description
    }
}

Second Screen

It is responsible for consuming the API, its interface is very simple and is built only with tags, which work very similar to iOS.

The Results Controller code is the following:


import WatchKit
import Foundation


class ResultsController: WKInterfaceController {

    @IBOutlet weak var lblSing: WKInterfaceLabel!
    var sing: String?

    @IBOutlet weak var lblDate: WKInterfaceLabel!

    @IBOutlet weak var lblDescription: WKInterfaceLabel!

    override func awake(withContext context: Any?) {
        super.awake(withContext: context)

        // Configure interface objects here.

        guard let context = context as? [String: String] else { return }
        guard let sing = context["sing"] else { return }

        lblSing.setText(sing)

        DispatchQueue.global(qos: .userInteractive).async {
            self.fetchData(sing: sing.lowercased())
        }
    }

    func fetchData(sing: String) {
        guard let url = URL(string: "https://aztro.sameerkumar.website/?sign=\(sing)&day=today") else { return }

        print("https://aztro.sameerkumar.website/?sign=\(sing)&day=today")
        var urlRequest = URLRequest(url: url)
        urlRequest.httpMethod = "POST"


        URLSession.shared.dataTask(with: urlRequest) { (data, response, error) in
            if let data = data {
                self.parse(data)
            } else {
                print("vacio")
            }
        }.resume()
    }

    func parse(_ contens: Data) {
        let decoder = JSONDecoder()

        guard let result = try? decoder.decode(Horoscope.self, from: contens) else { return }

        DispatchQueue.main.async {
            self.lblDate.setText(result.currentDate)
            self.lblDescription.setText(result.description)
        }
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }
}

The application running

Conclusions

Consuming a REST API in WatchOS is relatively easy and very similar to how it is done in iOS. You can find the project code in the following github repository.

Turn any Google sheet into a REST API

Andres Lopez — Wed, 27 Feb 2019 18:43:48 +0000

This tool allows you to convert any Google spreadsheet to an API instantly

To publish go to the menu File> Publish on the web. Then we must select a tab and then select .csv as export format.

Paste the URL obtained in the field of the main page of Sheety and press the button that will give us the REST API

You can check the Sheety site

Xamarin WatchOS, create a game for Apple Watch

Andres Lopez — Fri, 08 Feb 2019 22:48:30 +0000

Xamarin is a development platform that goes beyond making cross-platform applications for iOS and Android.

In this tutorial we will see how to create an application for WatchOS in Xamarin.

Requirements

Visual Studio for Mac
Xcode 10
Mac OS Mojave
iPhone Simulator
Apple Watch Simulator

Creation of the solution

In this tutorial, you will create a small game for the Apple Watch based on the game of rock, paper and scissors and show a little of the great possibilities that Xamarin provides when creating a solution.

To start, we created a new solution in Visual Studio for Mac.

Once the solution is created we will add the WatchOS project.

We select Watchkit application.

Uncheck the Include Notification option.

Design

The graphical interface should be as follows:

The construction of the interface is the same as in iOS dragging controls and should be as follows:

Label to see who chose the watch (rock, paper or scissors)
Label to see the result (win, lose, draw)
White thin line separator
GroupView with three buttons
GroupView with a label on the left and a timer on the right

The Label to see the result must have a height proportional to the size of the clock, to assign these values in the Size section.

Width, is assigned Relative to Container with a value of 1, which will take 100% of the width.
Height, Relative to Container is assigned with a value of 0.4, which will take 40% of the clock's height.

A GroupView is a view that accommodates each control side by side horizontally.

To align a control within a GroupView to the right in the toolbox within the Aligment section with right value.

The timer is a control that shows a type of clock in the form of Label.

Code

Declares an arrangement with the 3 options and a counter to bring the number of games won.
When initializing we place the images to the buttons and the timer starts to show the elapsed time.
A function is created with the logic of how to determine the winner.
The complete code of the controller is as follows.


using System;

using WatchKit;
using UIKit;
using Foundation;

namespace RockPaperScissorsXamarin.RockPaperScissorsWatchExtension
{

    public partial class InterfaceController : WKInterfaceController
    {

        private int Counter = 0;

        private enum Results { TIE, WIN, LOSE };
        private enum Moves { Rock, Paper, Scissors }

        private Moves[] Options = { Moves.Rock, Moves.Paper, Moves.Scissors };

        protected InterfaceController(IntPtr handle) : base(handle)
        {

        }

        public override void Awake(NSObject context)
        {
            base.Awake(context);

            RockButton.SetBackgroundImage(new UIImage("rock"));
            PaperButton.SetBackgroundImage(new UIImage("paper"));
            ScissorsButton.SetBackgroundImage(new UIImage("scissors"));

            Timer.Start();
        }

        public override void WillActivate()
        {
            Console.WriteLine("{0} will activate", this);
        }

        public override void DidDeactivate()
        {
            Console.WriteLine("{0} did deactivate", this);
        }

        partial void RockButton_Activated()
        {
            Check(Moves.Rock);
        }

        partial void PaperButton_Activated()
        {
            Check(Moves.Paper);
        }

        partial void ScissorsButton_Activated()
        {
            Check(Moves.Scissors);
        }

        private void Check(Moves selection) 
        {
            var random = new Random();

            var position = random.Next(0, Options.Length);
            var machineChoose = Options[position];


            if (selection == machineChoose)
            {
                ResultLabel.SetText(Results.TIE.ToString());
            }
            else if (selection == Moves.Rock && machineChoose == Moves.Scissors)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
            }
            else if (selection == Moves.Rock && machineChoose == Moves.Paper)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
            }
            else if (selection == Moves.Paper && machineChoose == Moves.Rock)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
            }
            else if (selection == Moves.Paper && machineChoose == Moves.Scissors)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
          }
            else if (selection == Moves.Scissors && machineChoose == Moves.Paper)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
          }
            else if (selection == Moves.Scissors && machineChoose == Moves.Rock)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
          }

            WinnerLabel.SetText($"Wins: {Counter}");
            OponentLabel.SetText($"Oponent: { machineChoose }");

        }
    }

}

The project is executed and the application is executed as follows:

Conclusion

In this example we saw the wide possibilities offered by Xamarin when creating applications, adding support for WatchOS, TVOS, Android Wear and even Android TV applications. 😄

You can check the application code on Github

It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️

Andres Lopez — Tue, 05 Feb 2019 03:32:45 +0000

In this tutorial, you will create a small game 👾 for the Apple Watch based on the game of rock, paper, and scissors 👊✂ 📃.

Requirements

Mac OS Mojave or higher.
Xcode 10 or higher.
iPhone simulator.
Apple Watch simulator.

To start, we created a new project in Xcode of the WatchOS type.

Fill the Product Name input with the value "RockPaperScissorsSwift" and then uncheck the option Include Notification Scene.

🖥 A normal iOS solution is created with two additional projects.

WatchKit App (where the storyboard goes)
WatchKit Extension (code of the controllers)

The graphics interface of the project should be as follows:

🖐❇️ The construction of the interface is the same as in iOS dragging controls and should be as follows:

Label to see who chose the watch (stone, paper or scissors)
Label to see the result (win, lose, draw)
White thin line separator
GroupView with three buttons
GroupView with a label on the left and a timer on the right

The Label to see the result must have a height proportional to the size of the clock, to assign these values in the Size section.

Width, is assigned Relative to Container with a value of 1, which will take 100% of the width
Height, Relative to the Container is assigned with a value of 0.4, which will take 40% of the clock's height.

A GroupView is a view that accommodates each control side by side horizontally.

To align a control within a GroupView to the right in the toolbox within the Aligment section with right value.

The timer is a control that shows a type of clock in the form of Label.

Code 🛠

Declares an array options with the 3 elements and a variable counter to bring the number of games won.
When initializing we place the images to the buttons and the timer starts to show the elapsed time.
A function is created with the logic of how to determine the winner.

The complete code of the controller is as follows:

The project is executed and the application is executed as follows:

Conclusion

Creating an application for the Apple Watch is very similar to building an iOS application, in this example we saw that with basic controls you can create great things.

🌎 You can check the application code on Github