krish 011

krish 011

1660308342

React Native Mobile App Development Process

End-to-end react native mobile app development process designed to take care of your full-cycle development needs. When it comes to mobile app development, we know the drill. We have years of experience in building native apps that shine on both iOS and Android. 

read more at: https://bit.ly/3I0soeD

#reactnative #crossplatform #react #native #mobileapp #appdevelopment #techmango #app #ios #android #nativeapp #hyridapp #appdevelopmentcompany #development

React Native Mobile App Development Process
Dapp brew

Dapp brew

1659951033

Centralized Wallet Development Company - Dappbrew

Develop and launch a reliable metaverse wallet with Dappbrew to enhance secure and seamless accessibility, storage and management of assets you own on a metaverse platform.Our team has strong experience and expertise in delivering quality solutions that fulfil your business goals.

Know More: https://dappbrew.com/cryptocurrency-wallet-development-services/

#crypto #cryptocurrency #cryptowallet #metaverse #metaversewallart #virtualworld #blockchain #blockchaintechnology #development #blockchaindevelopment #decentralized #decentralizedwallet #blockchainwallet #web3 #dappbrew


 

Centralized Wallet Development Company - Dappbrew
React Tutorial

React Tutorial

1659665697

Micro Frontends with Webpack's Module Federation Plugin

Micro Frontends with Webpack's Module  Federation Plugin


You probably heard before of "Micro Services" and maybe even used it at your current company, but, did you know that now you can do the same in the Frontend?
In this talk, we will understand how does micro frontends work and the reasoning behind them. We will also explore one of the most interesting ways of applying them in your projects using Webpack's Module Federation feature.


#javascript #reactjs #programming #software #development #softwaredevelopment #webpack #react 

Micro Frontends with Webpack's Module Federation Plugin
React Tutorial

React Tutorial

1659665398

How to Write Beautiful React Code

How to Write Beautiful React Code


You know beautiful code. You know it when you see it. Writing it is a whole other issue. Are there guidelines we can set to make our React code beautiful?

#javascript #reactjs #programming #software #development #softwaredevelopment #react 

How to Write Beautiful React Code
React Tutorial

React Tutorial

1659664913

Fetch Data in React: Goodbye, useEffect hook

Fetch Data in React: Goodbye, useEffect hook 


From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. Thankfully, there is a science (well, math) to side effects, formalized in state machines and statecharts, that can help us visually model and understand how to declaratively orchestrate effects, no matter how complex they get. In this talk, we’ll ditch the useEffect hook and discover how these computer science principles can be used to simplify effects in our React apps.

#javascript #reactjs #programming #software #development #softwaredevelopment #react 

Fetch Data in React: Goodbye, useEffect hook
Awesome  Rust

Awesome Rust

1657998900

Cargo Udeps - Find Unused Dependencies in Cargo.toml

cargo-udeps

Find unused dependencies in Cargo.toml.

While compilation of this tool also works on Rust stable, it needs Rust nightly to actually run.

Installation

GitHub Releases

https://github.com/est31/cargo-udeps/releases

cargo install (crates.io)

cargo install cargo-udeps --locked

cargo install (master)

cargo install --git https://github.com/est31/cargo-udeps --locked

Dedicated packages

Some GNU/Linux distros have packaged cargo-udeps:

  • Nix/Nix OS: cargo-udeps
  • Arch Linux: pacman -S cargo-udeps

Usage

cargo +nightly udeps

It either prints out a "unused crates" line listing the crates, or it prints out a line saying that no crates were unused.

Ignoring some of the dependencies

To ignore some of the dependencies, add package.metadata.cargo-udeps.ignore to Cargo.toml.

[package.metadata.cargo-udeps.ignore]
normal = ["if_chain"]
#development = []
#build = []

[dependencies]
if_chain = "1.0.0" # Used only in doc-tests, which `cargo-udeps` cannot check.

Known bugs

Some unused crates might not be detected. This includes crates used by std and its dependencies as well as crates that are already being used by dependencies of the studied crate.

Crates are currently only handled on a per name basis. Two crates with the same name but different versions would be a problem.

Trophy case

This is a list of cases where unused dependencies were found using cargo-udeps. You are welcome to expand it:

Download Details:
Author: est31
Source Code: https://github.com/est31/cargo-udeps
License: View license

#rust #rustlang

Cargo Udeps - Find Unused Dependencies in Cargo.toml
Python  Library

Python Library

1657315380

GlobaLeaks | Web Application to Enable anonymous & Secure Reporting

GlobaLeaks

GlobaLeaks is free, open source software enabling anyone to easily set up and maintain a secure whistleblowing platform.

Community support

If you need technical support, have general questions, or have new ideas for GlobaLeaks, please post your message on the Community Forum.

Join our Slack to get in touch with the development team and the GlobaLeaks community:

  • #development to participate in development discussions
  • #community-support for the community support

You can join our development discussions as well on IRC on the channel #globaleaks of the OFTC Network.

If you want to contribute to the project please check the Contributors Guidelines.

In case you need to file a security report please check our Security Policy

Brand guidelines and brand assets

Within the GlobaLeaks project we researched a nice and smooth brand style, using accessible colors and trying to communicate our values. If you are planning some press releases, a conference, or promoting GlobaLeaks please keep at reference our official Brand Guidelines and use our Brand Assets.

Continuous integration and testing

BranchStatusQualityCoverageDocumentation
mainBuild StatusCodacy BadgeCodacy BadgeBuild Status
develBuild StatusCodacy BadgeCodacy BadgeBuild Status

Project best practices and scores: | Metric | Score | :---: | :---: | | Mozilla HTTP Observatory | Status | Security Headers | Status | SSLLabs | Status | CII Best Practices | CII Best Practices

Project statistics on OpenHub: www.openhub.net/p/globaleaks

Infrastructure status: uptime.globaleaks.org

Documentation

GlobaLeaks's documentation is accessible at: docs.globaleaks.org

Download Details:
Author: globaleaks
Source Code: https://github.com/globaleaks/GlobaLeaks
License: View license

#python

GlobaLeaks | Web Application to Enable anonymous & Secure Reporting

How Much Does It Cost to Make An App 2022?

Do you want to create an app for your company? Then you're probably wondering, "How much does app development cost?"

You want to know how much it costs to design an app and what factors influence the cost. It is apparent that mobile applications provide consumers with convenience. As a result, businesses aim to harness technology to boost their profitability.

This post will show you how much it will cost to make mobile app in 2022, as well as how to reduce mobile app development expenses using tried-and-true approaches.

https://multiqos.com/mobile-app-development-cost-in-2022

#appdevelopment #mobileapp #development #developmentcost #mobileappdevelopment 

How Much Does It Cost to Make An App 2022?

Top 12 Real-World Python Use Cases and Applications

Python has been at the vanguard of machine learning, data science, and artificial intelligence innovation. Furthermore, it facilitates the construction of a wide range of apps, web development procedures, and much more. 

In this blog, we will go in-depth over the top 12 Python applications in the real world.

https://multiqos.com/top-12-python-use-cases-and-applications-with-examples/

#python #pythonapp #pythonapplications #pythondevelopment #development #hiredeveloper 

Top 12 Real-World Python Use Cases and Applications
Alexis Gilbert

Alexis Gilbert

1654769459

Top 7 Free Angular js Hosting Providers 2022: Host your Angular App

#development #programming  #angular #webdev 

Often, when our developer's team gathers around the table, we discuss various topics and concepts trending for front-end technology. Then whether it is about Angular or ReactJS or some other technology, last week when we had one of those hot discussions going on, I noticed many junior developers in our team was struggling to find some potential yet free hosting platforms for technology like Angular. 

Most beginners struggle to opt-out of the right Angular Hosting platform for their web apps. That’s when I decided why not pick out some of the best yet free Hosting providers and make it to a list for my valuable readers across the globe for this week's article.

Let’s move forward then. Starting with one of the Best Angular Hosting providers in 2021.

  1. Varcel(Now Hosting)

Now Hosting is the other word for Varcel. This is the place for the deployment of web apps that are based on javascript or static happens.

Varcel has direct integration with git; therefore, one can deploy any static or javascript web app to Github, BitBucket, and Gitlab.

The synchronization can happen in automated mode once the repository is pushed over in this hosting platform.

Now hosting has one plan called the 'hobby plan,' which is available for free to its users forever.

2. GitHub pages

As the name itself suggests, GitHub pages are hosted by Github. And hosting your web app on GitHub pages is pretty easy compared to other hosting providers' services. As we can handle and manage multiple websites on one Angular hosting platform by their project names.

One can begin the project in two ways, and either one can utilize the given templates by Github or start building from scratch.

Whether hosting an Angular website or a ReactJS one, you would not need any serverside code as the web application will interact with the hosting services via the API.

3. Firebase Hosting

Firebase is vastly famous globally for its extensive collection of free features and tools. 

Google's Firebase has the pay-as-you-go pricing model. One can adopt the features as per the prime objectives of the project and can work accordingly. 

Some primary features are as below, which comes completely free to all users from Firebase, including these features-

  • Cloud Firestore
  • Authentication
  • Hosting
  • Cloud Messaging
  • Storage
  • Real-time Database

4. Netlify Hosting

Netlify provides a hosting platform to Angular and caterers to other technologies like Vue.js, ReactJS, and NextJS applications. Apart from that, it also supports Jamstack technology which stands for Javascript API Markdown Stack.

Netlify has numerous serverless solutions for its hosting service. Like its authentication plugins to form plugins, one does not even need to manage the user data on the server.

Netlify usually offers three prominent plan offerings that one can opt for as per its requirements.

  • Individual plan
  • For Teams
  • For Business

5. Amazon EC2

Amazon web services EC2 provides no free services for a lifetime, although for the first 12 months, you can utilize this virtual private server without paying any penny.

However, the usage is also limited to a maximum of 750 hours per user. Furthermore, Users can access multiple Amazon services through only one account, like Amazon Dynamo DB and a 25GB real-time database. Access to it is free for a lifetime period.

The processor RAM can be selected as soon as you select the AWS EC2. You can find options of processors like T2 micro T2 small and T2 mini to opt for.

To know the exact charges, you can check them on the official website of AWS services.

6. Microsoft Azure

Microsoft Azure prefers the comfort of its users, and hence whether they are Linux users or Windows, their service supports each platform quite conveniently.

Microsoft Azure also believes in offering a package of Pay-as-you-go type including multiple feature offerings.

As a beginner, Microsoft Azure can open up multiple opportunities for you as a virtual private server.

Many of the features can be comparable with the Amazon AWS services as one can find numerous similarities between both hosting platforms.

7. Google Cloud Platform

One can run and deploy quite comfortably on this platform, Google Cloud services, with various machine types of cloud instances.

Technically, this hosting service is not free, but they will give you a small amount of credit to get started with your project when you sign up.

If your project is small and has the scope of your application is limited, this hosting platform could turn out a bit expensive to you.

Google cloud platform is considered one of the high scaling performance-oriented platforms as an Angular hosting provider.

To wrap up things, The AngularJS hosting services mentioned above have featured mostly free and tend to provide the best services to your application.

Apart from that, I have also observed a trend of hosting Angular 12 applications on Firebase. Undoubtedly, due to its enhanced performance and rapid speed.

If you are an entrepreneur looking for thorough assistance on getting started with your Angular application, then without wasting a second, hire Angular developer to move in the right direction with your project.



 

How to Develop an On-Demand Communication App like FairEmail?

The global market for communication app development is seeing significant growth in terms of both users and revenues, implying that prospects in this industry will only expand.

Now is the time if you want to create an on-demand communication service like FairEmail.

This post will show you how to build an on-demand communication app with critical features and development costs.

https://multiqos.com/how-to-develop-a-communication-app-like-fairemail/

#communicationapp #appdevelopment #ondemandapp #mobileapp #development 

How to Develop an On-Demand Communication App like FairEmail?
Saul  Alaniz

Saul Alaniz

1654310400

Cree Una Aplicación GraphQL En Node.js Con TypeScript Y Graphql-reques

En este artículo, creará una aplicación de pila completa utilizando GraphQL y Node.js en el backend. Mientras tanto, nuestro frontend usará la graphql-requestbiblioteca para realizar operaciones de red en nuestro backend.

¿Por qué usar graphql-request y TypeScript?

Cada vez que los desarrolladores construyen un servidor GraphQL usando Apollo, la biblioteca genera una "interfaz" que se ve así:

Esta interfaz permite a los usuarios realizar consultas o solicitudes de mutación al servidor a través de un código. Sin embargo, hablemos del elefante en la habitación: no parece muy fácil de usar. Dado que la interfaz no presenta ningún botón ni ningún elemento de interfaz útil, puede ser difícil para muchos usuarios navegar por su aplicación. En consecuencia, esto reduce su base de usuarios. Entonces, ¿cómo resolvemos este problema?

Aquí es donde graphql-requestentra en juego. Es una biblioteca de código abierto que permite a los usuarios realizar consultas en un servidor GraphQL. Cuenta con las siguientes características:

  • Ligero: esta biblioteca tiene un poco más de 21 kilobytes minimizados, lo que garantiza que su aplicación se mantenga en funcionamiento
  • API basada en promesas: esto brinda soporte para aplicaciones asíncronas
  • Compatibilidad con TypeScript: graphql-requestes una de las muchas bibliotecas que permite TypeScript. Una de las principales ventajas de Typescript es que permite un código estable y predecible.

Por ejemplo, mira el siguiente programa:

let myNumber = 9; //here, myNumber is an integer
myNumber = 'hello'; //now it is a string.
myNumber = myNumber + 10; //even though we are adding a string to an integer,
//JavaScript won't return an error. In the real world, it might bring unexpected outputs.
//However, in Typescript, we can tell the compiler..
//what data types we need to choose.
let myNumber:number = 39; //tell TS that we want to declare an integer.
myNumber = 9+'hello'; //returns an error. Therefore, it's easier to debug the program
//this promises stability and security. 

En este artículo, crearemos una aplicación de pila completa utilizando GraphQL y TypeScript. Aquí, usaremos el apollo-server-expresspaquete para construir un servidor backend. Además, para la interfaz, usaremos Next y graphql-requestconsumiremos nuestra API GraphQL.

Construyendo nuestro servidor

Inicialización del proyecto

Para inicializar un proyecto Node.js en blanco, ejecute estos comandos de terminal:

mkdir graphql-ts-tutorial #create project folder 
cd graphql-ts-tutorial 
npm init -y #initialize the app

Cuando termine, ahora tenemos que decirle a Node que necesitamos usar TypeScript en nuestra base de código:

#configure our Typescript:
npx tsc --init --rootDir app --outDir dist --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
mkdir app #our main code folder
mkdir dist #Typescript will use this folder to compile our program.

A continuación, instale estas dependencias:

#development dependencies. Will tell Node that we will use Typescript
npm install -d ts-node @types/node typescript @types/express nodemon
#Installing Apollo Server and its associated modules. Will help us build our GraphQL
#server
npm install apollo-server-express apollo-server-core express graphql

Después de este paso, navegue a su appcarpeta. Aquí, crea los siguientes archivos:

  • index.ts: Nuestro archivo principal. Esto ejecutará y ejecutará nuestro servidor Express GraphQL
  • dataset.ts: Esto servirá como nuestra base de datos, que se servirá al cliente
  • Resolvers.ts: Este módulo manejará los comandos del usuario. Aprenderemos sobre los resolutores más adelante en este artículo.
  • Schema.ts: como sugiere el nombre, este archivo almacenará los esquemas necesarios para enviar datos al cliente

Al final, la estructura de carpetas debería verse así:

Creando nuestra base de datos

En esta sección, crearemos una base de datos ficticia que se utilizará para enviar los datos solicitados. Para hacerlo, vaya a app/dataset.tsy escriba el siguiente código:

let people: { id: number; name: string }[] = [
  { id: 1, name: "Cassie" },
  { id: 2, name: "Rue" },
  { id: 3, name: "Lexi" },
];
export default people;
  • Primero, creamos una matriz de objetos llamadapeople
  • Esta matriz tendrá dos campos: idde tipo numbery namede tipostring

Definiendo nuestro esquema

Aquí, ahora crearemos un esquema para nuestro servidor GraphQL.

En pocas palabras, un esquema de GraphQL es una descripción del conjunto de datos que los clientes pueden solicitar desde una API. Este concepto es similar al de la biblioteca Mongoose .
Para crear un esquema, vaya al app/Schema.tsarchivo. Allí escribe el siguiente código:

import { gql } from "apollo-server-express"; //will create a schema
const Schema = gql`
  type Person {
    id: ID!
    name: String
  }
  #handle user commands
  type Query {
    getAllPeople: [Person] #will return multiple Person instances
    getPerson(id: Int): Person #has an argument of 'id` of type Integer.
  }
`;
export default Schema; 
//export this Schema so we can use it in our project

Desglosemos este código pieza por pieza:

  • La Schemavariable contiene nuestro esquema GraphQL
  • Primero, creamos un Personesquema. Tendrá dos campos: idde tipo IDy namede tipoString
  • Más adelante, le indicamos a GraphQL que si el cliente ejecuta el getAllPeoplecomando, el servidor devolverá una matriz de Personobjetos
  • Además, si el usuario usa el getPersoncomando, GraphQL devolverá una sola Personinstancia

Creando resolutores

Ahora que hemos codificado nuestro esquema, nuestro siguiente paso es definir nuestros resolutores.
En términos simples, un resolver es un grupo de funciones que generan una respuesta para una consulta de GraphQL. En otras palabras, un resolver sirve como un controlador de consultas GraphQL.
En Resolvers.ts, escribe el siguiente código:

import people from "./dataset"; //get all of the available data from our database.
const Resolvers = {
  Query: {
    getAllPeople: () => people, //if the user runs the getAllPeople command
    //if the user runs the getPerson command:
    getPerson: (_: any, args: any) => { 
      console.log(args);
      //get the object that contains the specified ID.
      return people.find((person) => person.id === args.id);
    },
  },
};
export default Resolvers;
  • Aquí, creamos un Queryobjeto que maneja todas las consultas entrantes que van al servidor
  • Si el usuario ejecuta el getAllPeoplecomando, el programa devolverá todos los objetos presentes en nuestra base de datos
  • Además, el getPersoncomando requiere un argumento id. Esto devolverá una Personinstancia con el ID coincidente
  • Al final, exportamos nuestro resolver para que pudiera vincularse con nuestra aplicación.

Configurando nuestro servidor

¡Ya casi hemos terminado! Ahora que hemos creado tanto nuestro esquema como nuestro resolutor, nuestro siguiente paso es vincularlos.

En index.js, escribe este bloque de código:

import { ApolloServer } from "apollo-server-express";
import Schema from "./Schema";
import Resolvers from "./Resolvers";
import express from "express";
import { ApolloServerPluginDrainHttpServer } from "apollo-server-core";
import http from "http";

async function startApolloServer(schema: any, resolvers: any) {
  const app = express();
  const httpServer = http.createServer(app);
  const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    //tell Express to attach GraphQL functionality to the server
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  }) as any;
  await server.start(); //start the GraphQL server.
  server.applyMiddleware({ app });
  await new Promise<void>((resolve) =>
    httpServer.listen({ port: 4000 }, resolve) //run the server on port 4000
  );
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
}
//in the end, run the server and pass in our Schema and Resolver.
startApolloServer(Schema, Resolvers);

¡Vamos a probarlo! Para ejecutar el código, use este comando Bash:

npx nodemon app/index.ts 

Esto creará un servidor en la localhost:4000/graphqlURL.

Aquí puede ver sus esquemas disponibles dentro de la interfaz de usuario:

¡Esto significa que nuestro código funciona!

Todas nuestras consultas de GraphQL irán dentro del panel de Operación . Para verlo en acción, escriba este fragmento dentro de este cuadro:

#make a query:
query {
  #get all of the people available in the server
  getAllPeople {
    #procure their IDs and names.
    id
    name
  }
}

Para ver el resultado, haga clic en el botón Ejecutar :

Incluso podemos buscar una entidad específica a través de la getPersonconsulta:

query ($getPersonId: Int) { #the argument will be of type Integer
  getPerson(id: 1) {
    #get the person with the ID of 1
    name
    id
  }
}

Creando mutaciones

En el mundo de GraphQL, las mutaciones son comandos que tienen efectos secundarios en la base de datos. Ejemplos comunes de esto incluyen:

  • Agregar un usuario a la base de datos: cuando un cliente se registra en un sitio web, el usuario realiza una mutación para guardar sus datos en su base de datos
  • Editar o eliminar un objeto: si un usuario modifica o elimina datos de una base de datos, esencialmente está creando una mutación en el servidor.

Para manejar mutaciones, vaya a su Schema.tsmódulo. Aquí, dentro de la Schemavariable, agregue las siguientes líneas de código:

const Schema = gql`
  #other code..
  type Mutation {
    #the addPerson commmand will accept an argument of type String.
    #it will return a 'Person' instance. 
    addPerson(name: String): Person
  }
`;

Nuestro próximo paso es crear un resolver para manejar esta mutación. Para hacerlo, dentro del Resolvers.tsarchivo, agregue este bloque de código:

const Resolvers = {
  Query: {
    //..further code..
  },
  //code to add:
  //all our mutations go here.
  Mutation: {
    //create our mutation:
    addPerson: (_: any, args: any) => {
      const newPerson = {
        id: people.length + 1, //id field
        name: args.name, //name field
      };
      people.push(newPerson);
      return newPerson; //return the new object's result
    },
  },
};
  • La addPersonmutación acepta un nameargumento.
  • Cuando namese pasa a, el programa creará un nuevo objeto con una nameclave coincidente
  • A continuación, utilizará el pushmétodo para agregar este objeto al conjunto de peopledatos .
  • Finalmente, devolverá las propiedades del nuevo objeto al cliente.

¡Eso es todo! Para probarlo, ejecute este código dentro de la ventana Operaciones :

#perform a mutation on the server
mutation($name: String) {
  addPerson(name:"Hussain") { #add a new person with the name "Hussain"
    #if the execution succeeds, return its 'id' and 'name` to the user.
    id
    name
  }
}

Verifiquemos si GraphQL ha agregado la nueva entrada a la base de datos:

query {
  getAllPeople { #get all the results within the 'people' database. 
  #return only their names
  name 
  }
}

Construyendo nuestro cliente

Hemos construido con éxito nuestro servidor. En esta sección, crearemos una aplicación cliente usando Next que escuchará al servidor y procesará datos en la interfaz de usuario.

Como primer paso, inicialice una aplicación Next.js en blanco así:

npx create-next-app@latest graphql-client --ts
touch constants.tsx #our query variables go here.

Para realizar operaciones GraphQL, utilizaremos la biblioteca graphql-request . Este es un módulo mínimo y de código abierto que nos ayudará a realizar mutaciones y consultas en nuestro servidor:

npm install graphql-request graphql
npm install react-hook-form #to capture user input

Creación de variables de consulta

En esta sección, codificaremos nuestras consultas y mutaciones para ayudarnos a realizar operaciones GraphQL. Para hacerlo, vaya a constants.tsxy agregue el siguiente código:

import { gql } from "graphql-request";
//create our query
const getAllPeopleQuery = gql`
  query {
    getAllPeople { #run the getAllPeople command
      id
      name
    }
  }
`;
//Next, declare a mutation
const addPersonMutation = gql`
  mutation addPeople($name: String!) {
    addPerson(name: $name) { #add a new entry. Argument will be 'name'
      id
      name
    }
  }
`;
export { getAllPeopleQuery, addPersonMutation };
  • En la primera parte, creamos la getAllPeopleQueryvariable. Cuando el usuario ejecuta esta consulta, el programa le indicará al servidor que obtenga todas las entradas presentes en la base de datos.
  • Más tarde, la addPersonmutación le dice a GraphQL que agregue una nueva entrada con su namecampo respectivo
  • Al final, usamos la exportpalabra clave para vincular nuestras variables con el resto del proyecto.

Realización de consultas

En pages/index.ts, escribe el siguiente código:

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request"; //allows us to perform a request on our server
import { getAllPeopleQuery } from "../constants"; 
import Link from "next/link";
const Home: NextPage = ({
  result, //extract the 'result' prop 
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div className={styles.container}>
      {result.map((item: any) => { //render the 'result' array to the UI 
        return <p key={item.id}>{item.name}</p>;
      })}
    <Link href="/addpage">Add a new entry </Link>
    </div>
  );
};
//fetch data from the server
export const getStaticProps: GetStaticProps = async () => {
  //the first argument is the URL of our GraphQL server
  const res = await request("http://localhost:4000/graphql", getAllPeopleQuery);
  const result = res.getAllPeople;
  return {
    props: {
      result,
    }, // will be passed to the page component as props
  };
};
export default Home;

Aquí hay un desglose de este código pieza por pieza:

  • En el getStaticPropsmétodo, le indicamos a Next que ejecute el getAllPeoplecomando en nuestro servidor GraphQL
  • Posteriormente, devolvimos su respuesta al Homecomponente funcional. Esto significa que ahora podemos mostrar el resultado en la interfaz de usuario.
  • A continuación, el programa usó el mapmétodo para representar todos los resultados del getAllPeoplecomando en la interfaz de usuario. Cada elemento de párrafo mostrará los namecampos de cada entrada
  • Además, también usamos un Linkcomponente para redirigir al usuario a la addpageruta. Esto permitirá al usuario agregar una nueva Personinstancia a la tabla .

Para probar el código, ejecute el siguiente comando de terminal:

npm run dev

Este será el resultado:

Nuestro servidor GraphQL incluso se actualiza en tiempo real.

Realizando mutaciones

Ahora que hemos realizado con éxito una consulta, incluso podemos realizar mutaciones a través de la graphql-requestbiblioteca.

Dentro de su pagescarpeta, cree un nuevo archivo llamado addpage.tsx. Como sugiere el nombre, este componente permitirá al usuario agregar una nueva entrada a la base de datos. Aquí, comience escribiendo el siguiente bloque de código:

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request";
import { addPersonMutation } from "../constants";
const AddPage: NextPage = () => {
  return (
    <div>
      <p>We will add a new entry here. </p>
    </div>
  );
};
export default AddPage;

En este fragmento de código, estamos creando una página en blanco con un fragmento de texto. Estamos haciendo esto para asegurarnos de que nuestro sistema de enrutamiento de URL funcione.

¡Esto significa que usamos el enrutamiento con éxito! A continuación, escribe este fragmento en tu addpage.tsxarchivo:

import { useForm } from "react-hook-form";
const { register, handleSubmit } = useForm();
//if the user submits the form, then the program will output the value of their input.
const onSubmit = (data: any) => console.log(data);
return (
  <div>
    <form onSubmit={handleSubmit(onSubmit)}> {/*Bind our handler to this form.*/}
      {/* The user's input will be saved within the 'name' property */}
      <input defaultValue="test" {...register("name")} />
      <input type="submit" />
    </form>
  </div>
);

Esta será la salida:

 

Ahora que hemos capturado con éxito la entrada del usuario, nuestro último paso es agregar su entrada al servidor.

Para hacerlo, cambie el onSubmitcontrolador ubicado en pages/addpage.tsxel archivo de esta manera:

const onSubmit = async (data: any) => {
  const response = await request(
    "http://localhost:4000/graphql",
    addPersonMutation,
    data
  );
  console.log(response);
};
  • Aquí, estamos realizando una solicitud de mutación a nuestro servidor GraphQL a través de la requestfunción
  • Además, también pasamos el addPersoncomando de mutación a nuestro encabezado de solicitud. Esto le indicará a GraphQL que realice la addMutationacción en nuestro servidor

Este será el resultado:

¡Y hemos terminado!

Conclusión

Aquí está el código fuente completo de este proyecto.

En este artículo, aprendió a crear una aplicación completa con GraphQL y TypeScript. Ambas son habilidades extremadamente cruciales dentro del mundo de la programación, ya que tienen una gran demanda en la actualidad.

Si encontró alguna dificultad en este código, le aconsejo que deconstruya el código y juegue con él para que pueda comprender completamente este concepto.

Muchas Gracias Por Leer! ¡Feliz codificación!

Esta historia se publicó originalmente en https://blog.logrocket.com/build-graphql-app-node-js-typescript-graphql-request/

#graphql #typescript #nodejs 

Cree Una Aplicación GraphQL En Node.js Con TypeScript Y Graphql-reques
坂本  篤司

坂本 篤司

1654310040

TypeScriptとgraphql-requestを使用してNode.jsでGraphQLアプリを構築します

この記事では、バックエンドでGraphQLとNode.jsを使用してフルスタックアプリを構築します。一方、フロントエンドはgraphql-requestライブラリを使用してバックエンドでネットワーク操作を実行します。

なぜgraphql-requestとTypeScriptを使用するのですか?

開発者がApolloを使用してGraphQLサーバーを構築するときはいつでも、ライブラリは次のような「フロントエンド」を生成します。

このインターフェースにより、ユーザーはコードを介してサーバーにクエリまたはミューテーション要求を行うことができます。ただし、部屋の中の象について説明しましょう。あまりユーザーフレンドリーではないようです。フロントエンドにはボタンや便利なインターフェース要素がないため、多くのユーザーがアプリ内を移動するのは難しいかもしれません。その結果、これによりユーザーベースが縮小します。では、この問題をどのように解決するのでしょうか。

これがgraphql-request出番です。これは、ユーザーがGraphQLサーバーでクエリを実行できるようにするオープンソースライブラリです。次の機能を備えています。

  • 軽量—このライブラリは21キロバイトをわずかに超える最小化されているため、アプリのパフォーマンスを維持できます
  • PromiseベースのAPI—これにより非同期アプリケーションのサポートがもたらされます
  • TypeScriptのサポート—TypeScriptgraphql-requestを可能にする多くのライブラリの1つです。Typescriptの主な利点の1つは、安定した予測可能なコードが可能になることです。

たとえば、次のプログラムを見てください。

let myNumber = 9; //here, myNumber is an integer
myNumber = 'hello'; //now it is a string.
myNumber = myNumber + 10; //even though we are adding a string to an integer,
//JavaScript won't return an error. In the real world, it might bring unexpected outputs.
//However, in Typescript, we can tell the compiler..
//what data types we need to choose.
let myNumber:number = 39; //tell TS that we want to declare an integer.
myNumber = 9+'hello'; //returns an error. Therefore, it's easier to debug the program
//this promises stability and security. 

この記事では、GraphQLとTypeScriptを使用してフルスタックアプリを構築します。ここでは、apollo-server-expressパッケージを使用してバックエンドサーバーを構築します。さらに、フロントエンドでは、Nextを使用graphql-requestしてGraphQLAPIを使用します。

サーバーの構築

プロジェクトの初期化

空のNode.jsプロジェクトを初期化するには、次のターミナルコマンドを実行します。

mkdir graphql-ts-tutorial #create project folder 
cd graphql-ts-tutorial 
npm init -y #initialize the app

それが終わったら、コードベースでTypeScriptを使用する必要があることをNodeに通知する必要があります。

#configure our Typescript:
npx tsc --init --rootDir app --outDir dist --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
mkdir app #our main code folder
mkdir dist #Typescript will use this folder to compile our program.

次に、次の依存関係をインストールします。

#development dependencies. Will tell Node that we will use Typescript
npm install -d ts-node @types/node typescript @types/express nodemon
#Installing Apollo Server and its associated modules. Will help us build our GraphQL
#server
npm install apollo-server-express apollo-server-core express graphql

この手順の後、appフォルダに移動します。ここで、次のファイルを作成します。

  • index.ts:メインファイル。これにより、ExpressGraphQLサーバーが実行されます。
  • dataset.ts:これは、クライアントに提供されるデータベースとして機能します
  • Resolvers.ts:このモジュールはユーザーコマンドを処理します。リゾルバーについては、この記事の後半で学習します
  • Schema.ts:名前が示すように、このファイルには、クライアントにデータを送信するために必要な回路図が保存されます

最終的に、フォルダ構造は次のようになります。

データベースの作成

このセクションでは、要求されたデータを送信するために使用されるダミーデータベースを作成します。これを行うには、に移動しapp/dataset.tsて次のコードを記述します。

let people: { id: number; name: string }[] = [
  { id: 1, name: "Cassie" },
  { id: 2, name: "Rue" },
  { id: 3, name: "Lexi" },
];
export default people;
  • まず、というオブジェクトの配列を作成しましたpeople
  • この配列には、タイプとidタイプの2つのフィールドがあります。numbernamestring

スキーマの定義

ここでは、GraphQLサーバーのスキーマを作成します。

簡単に言うと、GraphQLスキーマは、クライアントがAPIから要求できるデータセットの記述です。この概念は、マングースライブラリの概念に似ています。
スキーマを作成するには、app/Schema.tsファイルに移動します。そこで、次のコードを記述します。

import { gql } from "apollo-server-express"; //will create a schema
const Schema = gql`
  type Person {
    id: ID!
    name: String
  }
  #handle user commands
  type Query {
    getAllPeople: [Person] #will return multiple Person instances
    getPerson(id: Int): Person #has an argument of 'id` of type Integer.
  }
`;
export default Schema; 
//export this Schema so we can use it in our project

このコードを1つずつ分解してみましょう。

  • 変数にはSchemaGraphQLスキーマが含まれています
  • まず、Personスキーマを作成しました。idタイプIDnameタイプの2つのフィールドがありますString
  • 後で、クライアントがコマンドを実行すると、サーバーがオブジェクトgetAllPeopleの配列を返すようにGraphQLに指示しました。Person
  • さらに、ユーザーがgetPersonコマンドを使用すると、GraphQLは単一のPersonインスタンスを返します

リゾルバーの作成

スキーマをコーディングしたので、次のステップはリゾルバーを定義することです。
簡単に言うと、リゾルバーはGraphQLクエリの応答を生成する関数のグループです。つまり、リゾルバーはGraphQLクエリハンドラーとして機能します。
Resolvers.ts、次のコードを記述します。

import people from "./dataset"; //get all of the available data from our database.
const Resolvers = {
  Query: {
    getAllPeople: () => people, //if the user runs the getAllPeople command
    //if the user runs the getPerson command:
    getPerson: (_: any, args: any) => { 
      console.log(args);
      //get the object that contains the specified ID.
      return people.find((person) => person.id === args.id);
    },
  },
};
export default Resolvers;
  • ここではQuery、サーバーに送信されるすべての着信クエリを処理するオブジェクトを作成しました
  • ユーザーがgetAllPeopleコマンドを実行すると、プログラムはデータベースに存在するすべてのオブジェクトを返します
  • さらに、getPersonコマンドには引数が必要idです。Personこれにより、IDが一致するインスタンスが返されます
  • 最終的に、アプリとリンクできるようにリゾルバーをエクスポートしました

サーバーの構成

ほぼ完了です。スキーマとリゾルバーの両方を構築したので、次のステップはそれらをリンクすることです。

index.js、次のコードブロックを記述します。

import { ApolloServer } from "apollo-server-express";
import Schema from "./Schema";
import Resolvers from "./Resolvers";
import express from "express";
import { ApolloServerPluginDrainHttpServer } from "apollo-server-core";
import http from "http";

async function startApolloServer(schema: any, resolvers: any) {
  const app = express();
  const httpServer = http.createServer(app);
  const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    //tell Express to attach GraphQL functionality to the server
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  }) as any;
  await server.start(); //start the GraphQL server.
  server.applyMiddleware({ app });
  await new Promise<void>((resolve) =>
    httpServer.listen({ port: 4000 }, resolve) //run the server on port 4000
  );
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
}
//in the end, run the server and pass in our Schema and Resolver.
startApolloServer(Schema, Resolvers);

テストしてみましょう!コードを実行するには、次のBashコマンドを使用します。

npx nodemon app/index.ts 

これにより、URLにサーバーが作成されlocalhost:4000/graphqlます。

ここで、UI内で使用可能なスキーマを確認できます。

これは、コードが機能することを意味します。

すべてのGraphQLクエリは操作パネル内にあります。実際の動作を確認するには、次のボックスに次のスニペットを入力してください。

#make a query:
query {
  #get all of the people available in the server
  getAllPeople {
    #procure their IDs and names.
    id
    name
  }
}

結果を確認するには、[実行]ボタンをクリックします。

getPersonクエリを介して特定のエンティティを検索することもできます。

query ($getPersonId: Int) { #the argument will be of type Integer
  getPerson(id: 1) {
    #get the person with the ID of 1
    name
    id
  }
}

突然変異の作成

GraphQLの世界では、ミューテーションはデータベースに副作用をもたらすコマンドです。この一般的な例は次のとおりです。

  • データベースへのユーザーの追加—クライアントがWebサイトにサインアップすると、ユーザーはミューテーションを実行してデータをデータベースに保存します
  • オブジェクトの編集または削除—ユーザーがデータベースからデータを変更または削除した場合、基本的にサーバー上にミューテーションが作成されます。

ミューテーションを処理するには、Schema.tsモジュールに移動します。ここで、Schema変数内に次のコード行を追加します。

const Schema = gql`
  #other code..
  type Mutation {
    #the addPerson commmand will accept an argument of type String.
    #it will return a 'Person' instance. 
    addPerson(name: String): Person
  }
`;

次のステップは、このミューテーションを処理するためのリゾルバーを作成することです。これを行うには、Resolvers.tsファイル内に次のコードブロックを追加します。

const Resolvers = {
  Query: {
    //..further code..
  },
  //code to add:
  //all our mutations go here.
  Mutation: {
    //create our mutation:
    addPerson: (_: any, args: any) => {
      const newPerson = {
        id: people.length + 1, //id field
        name: args.name, //name field
      };
      people.push(newPerson);
      return newPerson; //return the new object's result
    },
  },
};
  • 突然変異は引数addPersonを受け入れますname
  • aが渡されると、プログラムは一致するキーnameを持つ新しいオブジェクトを作成しますname
  • 次に、メソッドを使用してこのオブジェクトをデータセットpushに追加しますpeople
  • 最後に、新しいオブジェクトのプロパティをクライアントに返します

それでおしまい!テストするには、[操作]ウィンドウ内で次のコードを実行します。

#perform a mutation on the server
mutation($name: String) {
  addPerson(name:"Hussain") { #add a new person with the name "Hussain"
    #if the execution succeeds, return its 'id' and 'name` to the user.
    id
    name
  }
}

GraphQLがデータベースに新しいエントリを追加したかどうかを確認しましょう。

query {
  getAllPeople { #get all the results within the 'people' database. 
  #return only their names
  name 
  }
}

クライアントの構築

サーバーの構築に成功しました。このセクションでは、Nextを使用して、サーバーをリッスンし、UIにデータをレンダリングするクライアントアプリを構築します。

最初のステップとして、次のように空のNext.jsアプリを初期化します。

npx create-next-app@latest graphql-client --ts
touch constants.tsx #our query variables go here.

GraphQL操作を実行するには、graphql-requestライブラリーを使用します。これは最小限のオープンソースモジュールであり、サーバーでミューテーションとクエリを実行するのに役立ちます。

npm install graphql-request graphql
npm install react-hook-form #to capture user input

クエリ変数の作成

このセクションでは、GraphQL操作を行うのに役立つクエリとミューテーションをコーディングします。これを行うには、に移動しconstants.tsxて次のコードを追加します。

import { gql } from "graphql-request";
//create our query
const getAllPeopleQuery = gql`
  query {
    getAllPeople { #run the getAllPeople command
      id
      name
    }
  }
`;
//Next, declare a mutation
const addPersonMutation = gql`
  mutation addPeople($name: String!) {
    addPerson(name: $name) { #add a new entry. Argument will be 'name'
      id
      name
    }
  }
`;
export { getAllPeopleQuery, addPersonMutation };
  • 最初の部分では、getAllPeopleQuery変数を作成しました。ユーザーがこのクエリを実行すると、プログラムはサーバーにデータベースに存在するすべてのエントリを取得するように指示します
  • 後で、addPersonミューテーションはGraphQLに、尊重されたnameフィールドを持つ新しいエントリを追加するように指示します
  • 最後に、exportキーワードを使用して変数をプロジェクトの残りの部分にリンクしました

クエリの実行

pages/index.ts、次のコードを記述します。

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request"; //allows us to perform a request on our server
import { getAllPeopleQuery } from "../constants"; 
import Link from "next/link";
const Home: NextPage = ({
  result, //extract the 'result' prop 
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div className={styles.container}>
      {result.map((item: any) => { //render the 'result' array to the UI 
        return <p key={item.id}>{item.name}</p>;
      })}
    <Link href="/addpage">Add a new entry </Link>
    </div>
  );
};
//fetch data from the server
export const getStaticProps: GetStaticProps = async () => {
  //the first argument is the URL of our GraphQL server
  const res = await request("http://localhost:4000/graphql", getAllPeopleQuery);
  const result = res.getAllPeople;
  return {
    props: {
      result,
    }, // will be passed to the page component as props
  };
};
export default Home;

このコードの内訳は次のとおりです。

  • このメソッドでは、GraphQLサーバーでコマンドgetStaticPropsを実行するようにNextに指示しましたgetAllPeople
  • Homeその後、機能コンポーネントへの応答を返しました。これは、結果をUIにレンダリングできることを意味します
  • 次に、プログラムはこのメソッドを使用して、コマンドのすべての結果をUImapにレンダリングしました。getAllPeople各段落要素にはname、各エントリのフィールドが表示されます
  • さらに、コンポーネントを使用してユーザーをルートLinkにリダイレクトしました。addpageこれにより、ユーザーPersonはテーブルに新しいインスタンスを追加できます

コードをテストするには、次のターミナルコマンドを実行します。

npm run dev

これが結果になります:

GraphQLサーバーはリアルタイムで更新されます。

突然変異の実行

graphql-requestクエリの実行に成功したので、ライブラリを介してミューテーションを実行することもできます。

フォルダ内pagesに、という名前の新しいファイルを作成しますaddpage.tsx。名前が示すように、このコンポーネントを使用すると、ユーザーはデータベースに新しいエントリを追加できます。ここでは、次のコードブロックを作成することから始めます。

import type { NextPage, GetStaticProps, InferGetStaticPropsType } from "next";
import { request } from "graphql-request";
import { addPersonMutation } from "../constants";
const AddPage: NextPage = () => {
  return (
    <div>
      <p>We will add a new entry here. </p>
    </div>
  );
};
export default AddPage;

このコードでは、テキストを含む空白のページを作成しています。これは、URLルーティングシステムが機能するかどうかを確認するために行っています。

これは、ルーティングを正常に使用したことを意味します。次に、このスニペットをaddpage.tsxファイルに書き込みます。

import { useForm } from "react-hook-form";
const { register, handleSubmit } = useForm();
//if the user submits the form, then the program will output the value of their input.
const onSubmit = (data: any) => console.log(data);
return (
  <div>
    <form onSubmit={handleSubmit(onSubmit)}> {/*Bind our handler to this form.*/}
      {/* The user's input will be saved within the 'name' property */}
      <input defaultValue="test" {...register("name")} />
      <input type="submit" />
    </form>
  </div>
);

これが出力になります:

 

ユーザーの入力を正常にキャプチャしたので、最後のステップはサーバーにユーザーのエントリを追加することです。

これを行うには、ファイルにあるonSubmitハンドラーを次のように変更します。pages/addpage.tsx

const onSubmit = async (data: any) => {
  const response = await request(
    "http://localhost:4000/graphql",
    addPersonMutation,
    data
  );
  console.log(response);
};
  • requestここでは、関数を介してGraphQLサーバーへのミューテーションリクエストを実行しています
  • さらに、addPersonmutationコマンドをリクエストヘッダーにも渡しました。これにより、GraphQLにaddMutationサーバーでアクションを実行するように指示されます

これが結果になります:

これで完了です。

結論

これがこのプロジェクトの完全なソースコードです。

この記事では、GraphQLとTypeScriptを使用してフルスタックアプリを作成する方法を学びました。これらは両方とも、今日需要が高いため、プログラミングの世界では非常に重要なスキルです。

このコードで問題が発生した場合は、この概念を完全に理解できるように、コードを分解して試してみることをお勧めします。

読んでくれてありがとう!ハッピーコーディング!

このストーリーは、もともとhttps://blog.logrocket.com/build-graphql-app-node-js-typescript-graphql-request/で公開されました

#graphql #typescript #nodejs 

TypeScriptとgraphql-requestを使用してNode.jsでGraphQLアプリを構築します

How To Accelerate Android App Development With NoxPlayer?

As an android developer, do you

🔥Feel irritated when the android emulator hangs your machine?
💡Seek a lighter approach towards android development?
🖱️Run multiple emulator instances with just a click?

Don't break a sweat as this article covers accelerating android development using NoxPlayer, a lightweight android emulator.

#android #nox #noxplayer #androidappdeveloper #androiddeveloper #dev #developer #development #devcommunity #developercommunity #medium #vscode #flutter #fluttercommunity #flutterdeveloper #flutterdevelopers #flutterdev  #flutterappdevelopment 

How To Accelerate Android App Development With NoxPlayer?

GitOps: The Next Big Thing in DevOps?

Check read our most recent post for a detailed explanation of "What is GitOps?" "What is driving us in this direction?" "When and how may this technology be used in a live environment?" and "What tools are included?"

https://multiqos.com/what-is-gitops-and-why-it-might-the-next-big-thing-in-devops/

#gitops #devops #technologies #development #devopsdeveloper #developer #gitopsdeveloper

GitOps: The Next Big Thing in DevOps?