Giftpack's AI-powered solution simplifies the corporate gifting process and amplifies the impact of personalized gifts

Giftpack

giftpack

They left in droves. Over quit their jobs in 2021. The mass exodus of workers accelerated last year and shows no signs of slowing down in 2022. While this trend might look bad for the job market, it’s good news for technological development. 40 million employees The Great Resignation is already fast-forwarding mass adaption of AI, both to support current employees and to compensate for the ongoing labor shortage. Analysts predict a boom in the industrial robotics sector, from $16 billion to $37 billion over the next 10 years. projected to grow , an exchange-traded fund focusing on bots in business, more than doubled its 10-year growth forecast, citing 2022 as “that key inflection point.” Global X’s Robotics AI-based solutions already respond to calls, provide customer service, operate as cashiers, and assist HR departments in their hiring processes. But future applications of AI technology will include more than just basic tasks. For example, AI could anticipate when an employee is preparing to hand in their two weeks’ notice. Most importantly, it might help establish why they chose to leave. Thanks to digital footprints — records of online activity, unique as fingerprints — AI-powered HR tools can engage their employees with personalized recommendations. Several startups are doing just that. One such startup is the AI-based solution which set out to transform gifting, now an important part of corporate benefit strategies. , Giftpack For example, if the gift recipient posts Instagram pictures of snowboarding trips and browses winter sports gear sites, they might get some custom accessories. The company's own AI solution finds gifts from a catalog of over 3 million products available worldwide. By analyzing the gift recipient's digital footprint, the service can get a sense of their interests and suggest a range of suitable options. In the pandemic, companies more than their spending on presents for employees. The average check also increased by almost 70% last year, averaging at around $140 per unit year-over-year. doubled AI can help large companies eliminate a “one-size-fits-all” approach to their workers, and not just when it comes to gifting. Most businesses don’t know who their employees are, especially if they’re working remotely. What are their interests, hobbies, aspirations? What really motivates them — what makes them get up in the morning? If HR departments have enough data, and, most importantly, AI-based recommendations, they could foster new career opportunities within their organizations. Nestle, Novartis, Unilever, HSBC, and other companies already implemented an internal talent marketplace in cooperation with , the future of work startup. The project works with employees to build new skills and try out new roles on a part-time basis. Gloat Mental health and burnout pose another major issue: 46% people planning to quit their jobs listed work stress as top reason. AI-based solutions could help HR departments assess employee satisfaction and provide better support to those who need it. According to HR tech influencer Tyrone Smith, analytic tools promoting active listening and predictive responses can highlight potential trouble, assisting HR staff on a day-to-day basis. The present moment — with businesses in existential crisis and workers walking out en masse — could be the moment when AI-based HR tools are adopted on a large scale. The work crisis has brought with it a sense of urgency. After The Great Resignation, we might well see the great AI-driven workplace transformation.

The Great Resignation is Happening Fast. How can AI help? 

Github being hacked? To most that doesn’t sound too unreasonable as major tech companies and minor ones have been hacked before. However, this doesn’t mean the likely hood of Github being hacked is high. Why is that? Github is the main open code repository for all in the IT industry. Regardless of sub-sector. Even if someone does Embedded systems, Web3 development, Web2 development, Data science etc most would use Github to store their code. It is because of this that Github’s security has always been so extremely high. Not just because they wanted to be trusted by their users but also because the code on their users’ Github repositories is filled with crypto private keys, API private keys, financial credentials and even proprietary software of multiple companies across the IT industry globally. It is for this reason that Github has always been hard-handed with its security and user accessibility, that is why their hacking, although not completely surprising, is very startling and worrying. Context of the Githack: It is a malware attack. So not a traditional DDoS or forced penetration attack one would have expected, but potentially more lethal. The hacker/hackers uploaded a widespread piece of Malware to different repositories across the platform. What type of hack attack was it? it copies any financial information, authentication information and private crypto keys, essentially the ENV of the script. Then when accepted into the repository and ran locally on the then affected computers, it will copy and send the information to the attacker. So not a hack in a traditional sense but definitely a hack as information was still extracted through non-consensual data breach means. What does the Malware do? this particular attempted hack has reached no more and no less than 35,000 Github repositories. It has infiltrated repositories such as the python repo, golang repo, docker repo and bash repo. Some of the repositories affected were even archived and unused. Some were even seen with the malware inside of them from as far back as 2015. This indicates that the hack was a well-documented and planned one. What is the breadth of the hack attack? It is added to the Github repositories through a commit and in the commit through npm scripts or different docker image classifications. So you would, mainly, only be vulnerable if your project utilized javascript in some way or docker. Then if the commit is accepted and is cloned and used in the main repository, the users who cloned it will be affected. How does it infiltrate the Github repositories? How to prevent this? As I type about this incident all parties involved in the cleanup, the repository owners and Github, are already in the process of damage control and making sure this doesn’t happen again. We can speculate and wonder as to what the different security techniques and defenses Github will use to protect themselves from future attacks. As such we must focus on us as individuals or groups. What can we do in our own capacity to stop future data theft like this? only I know this might be harder for most large open source projects. However, be cautious when accepting push requests, Especially if the push requests edit the environmental variables of your application. Don’t accept push requests from random people to your repository. I know most of us actively don’t do this. Simply because repositories contain so many files and folders that keeping track of them and analyzing them one by one will be tiring. So it would be wise to check the most important files such as the readme and .env files. Always check what exactly you are cloning from a git repository. Github actually has a security framework, driven by Githook, that allows you to send HTTP post requests when certain events are met during the push request. There are different technologies that can analyze your push or pull request for security vulnerabilities, common viruses and other types of security breaches in your code. Use security testing in push requests. Overall let this be a lesson to us all. The attacks that nefarious organizations/people may do are not just rudimentary but also advanced and very unconditional as well as long-term planned. As developers we need to be more aware of the vulnerabilities of our code, repositories, computers and even ourselves and that if someone wants information they can find very different ways to get it. Even if the internet should be safe, doesn’t mean it is. It is up to everyone to do their part to make your own data safe, and if you can, find ways to help others keep their data safe. For a further reading on the situation go here: https://www.bleepingcomputer.com/news/security/35-000-code-repos-not-hacked-but-clones-flood-github-to-serve-malware/

GitHACK! We are the vulnerability

GitHACK! Somos la vulnerabilidad

GitHACK ! Nous sommes la vulnérabilité

गिटहैक! हम भेद्यता हैं

ギットハック！私たちは脆弱性です

GitHACK! Nós somos a vulnerabilidade

GitHACK! Chúng tôi là lỗ hổng

吉哈克！我们是漏洞

187 Stories To Learn About Microsoft

This post is about open-sourcing modules from a private . It’s a hard problem with a decent number of gotchas. We want to share our experience wiring this up to help others who venture down the same path. monorepo How we structure our monorepo A bit of context about Dopt before we dive in: Dopt is a web application for designing user-state machines on a canvas, paired with APIs and SDKs for utilizing those machines at runtime. The idea is that you can instantiate these machines per user of your product. We let you progress the user through the machine and handle the persistence of the user’s state in each machine for you. You can iterate on and version your machines, and we’ll handle migrating your users across machines’ versions. This should be deep enough to contextualize any Dopt-specific bits in this article (but if you’re interested in diving deeper, you can check out our ). docs We develop in a monorepo at Dopt. Our monorepo is home to the apps that live on dopt.com and the packages/services they share. It’s the source of truth for all things Dopt. We use and at Dopt. The defines the root of our workspace and allows us to define/constrain where packages can live in the monorepo. pnpm pnpm workspaces pnpm-workspace.yaml It looks something like this: packages:
  - "apps/**/*"
  - "packages/**/*"
  - "apis/**/*"
  - "services/**/*" Our monorepo's structure is app-centric in nature, e.g., we are building products as opposed to reusable libraries. This is reflected in our folder structure: ├── apps          (apps that live on dopt.com)
├── services      (internal services used by app(s) and API(s))
├── apis          (public APIs hosted on dopt subdomains)
└── packages      (packages shared by apps, services, and APIs) Children directories in these folders correspond to package scopes e.g. ├── apps
│   ├── @app
│   ├── @www
│   ├── @blog
│   └── @docs
├── services
│   ├── @gateway
│   └── @transitions
├── apis
│   ├── @users
│   └── @blocks
└── packages
    ├── @bodo
    └── @dopt and their children correspond to packages themselves ├── apps
│   ├── @app
│   ├─────── client
│   ├─────── server
│   ├─────── database
│   ├── @www
│   ├─────── app
│   ├── @blog
│   ├─────── app
│   ├── @docs
│   └─────── app
├── services
│   ├── @gateway
│   ├─────── service
│   ├─────── definition
│   ├── @transitions
│   ├─────── service
│   └─────── definition
├── apis
│   ├── @users
│   ├─────── service
│   ├─────── definition
│   ├── @blocks
│   ├─────── service
│   └─────── definition
└── packages
    ├── @bodo
    ├─────── alert
    ├─────── box
    ├─────── ...
    ├── @dopt
    ├─────── app-client-sdk
    ├─────── app-middleware
    ├─────── block-client-sdk
    └─────── ... Scopes in the directory corresponds directly to apps on subdomains of dopt.com app └─── apps
   ├── @app         (app.dopt.com)
   ├── @www         (www.dopt.com)
   ├── @blog        (blog.dopt.com)
   └── @docs        (docs.dopt.com) Scopes in the directory correspond Public APIs hosted on subdomains of apis dopt └─── apis
   ├── @blocks        (blocks.dopt.com)
   └── @users         (users.dopt.com) Problem: open sourcing from a private monorepo means filtering and syncing commits The directory is home to services that power our public APIs. These are the APIs folks use to drive our user-state machines. apis There are really three ways to use said APIs: Directly (e.g. , , or some other language-specific tool for making HTTP requests) curl fetch API Clients (i.e., generated language-specific abstractions for talking to our REST API) SDKs (i.e., framework-specific libraries that go beyond basic REST requests, e.g., they create socket connections). For API clients and , we need to get that code into folks’ hands. That means publishing already built versions of those packages to language-specific registries (e.g., npm, pip, etc.) for usage in their codebase and open-sourcing the raw, uncompiled source so folks can peruse, build, debug, contribute, and file issues. SDKs Packages in a monorepo can depend on other packages in a monorepo. This is the benefit of a monorepo, e.g., you can easily create reusable/shareable code by extracting things out into their own modules. Open-sourcing a package from a monorepo means open-sourcing everything that the package depends on as well. This concept is likely intuitive, but it’s worth pointing out a few implications of this that are perhaps less intuitive. The open-source repository will itself need to be a monorepo Any change to an open-source package OR one of its dependent packages (directly or indirectly) requires code to be synced. Uni-directional (e.g., private to public) syncing is straightforward. Bi-directional syncing (e.g, private to public and public to private) adds some cognitive overhead. I started to talk about “syncing” above. To expand a bit, given that we use git as our version control system, we will be syncing commits. This is the problem within the problem, e.g., how do you safely sync commits between two repositories? The rest of this post will explore the required steps for us to make this happen. Coming up with a convention for configuring and statically identifying open-source packages Identification of an open-source package’s dependent packages (direct and indirect) Syncing commits between repositories Automating the process Marking packages to be open-sourced Given that we use pnpm’s workspace concept, our monorepo’s packages are all node modules, independent of whether their src code is written in JavaScript. Said another way, every package in our monorepo has a , the dependencies of which define our workspace's topology. package.json The schema/type definition for a package.json file is , allowing us to add arbitrary fields to the top-level quite flexible JSON. To mark packages as open source we introduced an optional boolean field named . openSource export DoptPackageJson extends PackageJson {
  openSource?: boolean;
} You can see the usage of this field in our . JavaScript Block API client {
 "name": "@dopt/blocks-javascript-client",
  "version": "1.0.0",
  "private": false,
  "description": "A generated JavaScript API client for Dopt's blocks API",
  ...
  "openSource": true, // <= new field configuring this package as open source
} Having marked packages, we need a way to identify them programmatically. Whether using pnpm, yarn, or npm to configure workspaces, they all offer some tooling, albeit primitive, for listing packages in the workspace, etc. We ended up wrapping pnpm’s functionality in a package called , which is conveniently open-sourced from our private monorepo. The code to locate open-source packages in the monorepo looks something like this. @dopt/wutils import fs from 'node:fs';
import path from 'node:path';

import { getPackageLocationsSync } from '@dopt/wutils';

export const openSourcePackages = getPackageLocationsSync()
  .map((workspacePath) =>
    JSON.parse(
      fs.readFileSync(
        path.resolve(process.cwd(), `${workspacePath}/package.json`),
        { encoding: 'utf8' }
      )
    )
  )
  .filter((pkg) => pkg.openSource); Static analysis: filtering to open source packages and their dependents Now that we’ve marked open source packages as such and came up with a way of filtering down the monorepo to that set of packages, we should be able to script a solution for identifying a package's dependent packages (both direct and indirect). We have two options for tools that can help us with this part, pnpm or turborepo. We use pnpm as our package manager and turbo as our monorepo build tool. Since both solve monorepo-related problems, they both offer tools for filtering the monorepo and doing static analysis related to dependencies. See the links below. pnpm turbo Turbo's Filter API design is heavily inspired by pnpm’s. In this case, we ended up using pnpm, but either would have worked just fine. Attached below is an extension of the example above that illustrates how to use pnpm’s filtering syntax to select a package and its dependencies (direct and non-direct). ... import { execSync } from 'child_process';

// Use the function above to filter workspace packages to open source packages
const openSourcePackages = openSourcePackages();

// Use the open source packages to template pnpm filtering
const templatedPnpmFilter = `pnpm ls -r --depth -1 ${openSourcePackages
  .map(({ name }) => ` --filter ${name}... `)
  .join('')} --json`;

// Execute the templated pnpm command
const targetPackages = JSON.parse(execSync(templatedPnpmFilter).toString()); Git 🪄: filtering and syncing commits We have open-source packages and their dependent packages. The next step is to identify changes that impacted those packages. In git terms, “changes” are going to be git commits. So we are going to want to operate on the git commit history. Operations like this are aptly termed “history rewrites” and there are a few tools that are meant to help with this, given how complicated and dangerous it can become. git filter-branch git-filter-repo The former and suggests using the latter instead, which is exactly what we did. warns against its usage Our goal with this tool will be to extract the git history for each path associated with the open-source packages and their dependents. Building from the code example in the previous section, we can leverage the collection of (which contains the path to that package) to form the query. targetPackages git filter-repo import { getPackagesSync } from '@dopt/wutils';

type PackageDef = {
  name: string;
  path: string;
};

// Get all the packages in the monorepo
const packages: PackageDef[] = getPackagesSync();

// Filter all packages by target packages and form query
const templatedGitFilterRepoQuery = `git filter-repo ${packages
    .filter(({ name }) => targetPackages.includes(name))
    .map(({ path }) => `--path ${path}`)
    .join(' ')}`;

// Execute the query, rewriting your git history on the
// current branch to only the desired commits.
execSync(templatedGitFilterRepoQuery)).toString(); This all happened on a clean clone of our private monorepo and we now have a history that has been filtered down to what I’ll call open-source commits. How do we sync these commits over to our other repository? # Create a fresh clone of the private monorepo
git clone git@github.com:<org>/<private_monorepo>.git
cd $private_monorepo;

# Run the git commit filter script
node ./filter-to-open-source-commits.mjs

# Move up a directory so the repose are siblings
cd ..;

# Create a fresh clone of the open source monorepo
git clone git@github.com:<org>/<opensource_monorepo>.git
cd $opensource_monorepo;

git checkout -b sync-commits-from-private-monorepo;
git remote add source ../private_monorepo;
# Replace "main" with the branch name in the private monorepo
git pull source main --allow-unrelated-histories --strategy-option theirs --no-edit;

# Finally, set your remote and push!
git remote set-url --push  origin https://github.com/<org>/<opensource_monorepo>.git
git push --set-upstream origin sync-commits-from-private-monorepo; Automating this workflow With everything working manually, our next goal is to “set and forget” this workflow/pipeline. We solved this in , creating a GitHub action that is invoked on any merge to the main branch of our private monorepo. CI/CD Check it out the code for the GitHub Action below. Additionally, here’s a recent to one of the pull requests this action created in the open-source repository. link # Example CI/CD
name: Sync OSS Packages
on:
  merge: main
jobs:
    steps:
      - name: Check out the monorepo
        with:
          repository: dopt/monorepo
          path: ./monorepo

      - name: Check out the open monorepo
        with:
          repository: dopt/odopt
          path: ./odopt

      - name: Filter the open-source packages
        working-directory: monorepo/
        run: node ./filter.js;

      - name: Sync commits
        working-directory: odopt/
        run: |
          git checkout -b sync/${{ github.run_id }};
          git remote add source ../monorepo;
          git pull source main --allow-unrelated-histories --strategy-option theirs --no-edit;

      - name: Push commits
        working-directory: odopt/
        run: |
          git remote set-url --push  origin https://github.com/dopt/odopt.git
          git push --set-upstream origin sync/${{ github.run_id }}; Learnings First and foremost, we learned that you can have your cake and eat it too, i.e., enjoy all the benefits of a monorepo while still open-sourcing parts of it. It definitely requires a decent bit of setup and cognitive overhead to understand the problems you need to solve, but by following a similar pattern you can also share pieces of your monorepo with the community with little continued maintenance. We’ve not touched this pipeline since putting it in place! Lastly, our use case was primarily open-source API clients and SDKs, but having this pipeline has promoted a healthy habit of open-sourcing packages/modules that we think the community would benefit from e.g., please (GitHub, npm) mercator (GitHub, npm) wutils (GitHub) Check out to see what else we are building and sharing! odopt Also published here. The featured image for this piece was generated with Kadinsky v2 Prompt: Illustrate code locks.

Open-Sourcing Code from a Private Monorepo

255 Stories To Learn About Hacking

207 Stories To Learn About Golang

338 Stories To Learn About Github

Photo by on NGO TUNG Unsplash My company, CriticalBlue, provides a remote mobile app authentication service called . An Approov SDK is provided as a drop-in library to native iOS and Android app developers. Approov With many of our customers using or experimenting with React Native, I wanted to provide a convenient Javascript module which exposes the native Approov SDK functionality to React Native developers. Overall, creating my first React Native native module was surprisingly straightforward. All code for my initial proof of concept is available in a . github repository React Native Bridge For react Native, Facebook provides a solid which goes over the basics, including how to set up an application and how the underlying UI components differ from the usual React web elements. getting started guide (from ) React Made Native Easy Architecturally, there are two important threads running in each React Native application — one a main UI thread and the other running a Javascript VM. The two threads interact through a bridge whose communication is asynchronous, serialized, and batched, decoupling the two systems as much as possible. While the bulk of the React Native app is described in React and runs on the Javascript VM, the UI is rendered using the native platform’s UI elements, and actions which alter the app’s UI are passed as messages through the bridge from the VM to the app’s main UI thread. System functionality and libraries developed for the native device environment can be exposed to the Javascript VM using React Native’s native module interface and accessed through the React Native bridge. Approov Native SDK The Approov SDK is a drop-in native iOS or Android library. It interfaces with the cloud-based Approov authentication service which validates that the app is genuine, untampered, and not a bot. An app integrity token is returned from the authentication service, and that token is sent with each API call to ensure that the back-end API service is dealing with a known and genuine front-end request. The basic operation we will expose in our native module proof of concept is , an asynchronous operation in the native SDK. fetchApproovToken() (Approov-protected API call) Before each back-end API call requiring app authentication, the client app makes a fetch token request. If a fresh token is needed, the SDK makes a remote attestation request, and the attestation service cryptographically authenticates the app and responds with an app integrity token. The token has a short lifetime and is signed by a secret known only to the Approov service and the app’s back-end service. No secret is stored in the app, and in fact the app does not know whether the returned token is valid or not. The app simply adds the integrity token to the back-end API call, and the back-end server validates that the token has not expired and is properly signed before processing the request. Approov Demo Service Approov offers a which provides demonstration iOS and Android SDKs and a back-end service with two endpoints: downloadable demo , which provides a publicly accessible test point. https://demo-server.approovr.io/hello , which provides a random shape only if the request contains a valid integrity token. https://demo-server.approovr.io/shapes We’ll use the Android SDK with the back-end service to demonstrate a simple React Native app using Approov. A version of this example using the iOS SDK with React native is also available. Saying Hello I started my React Native project using create-react-native-app (CRNA). Follow the to setup your React Native environment and then: CRNA installation instructions $ create-react-native-app rndemo I will be adding native code to the app, so go ahead and eject now from create-react-native-app: $ yarn eject
... ? What should your Android Studio and Xcode projects be called? rndemo Generating the iOS folder.
Generating the Android folder.
... $ cd rndemo Ejecting is permanent! Please be careful with your selection. ? How would you like to eject from create-react-native-app? React Native: I’d like a regular React Native project. We have a couple of questions to ask you about how you’d like to name your app: ? What should your app appear as on a user’s home screen? RN Demo Wrote to app.json, please update it manually in the future. Select a regular React Native project and name it as you wish. The iOS and Android projects are generated, and you will need and/or build environments installed. Native code will be added to the native Android project later on. Xcode Android Studio We will experiment with a very simple proof of concept app that will use the demo server hello endpoint to validate our network connectivity. React Native implements the for networking. We combine the connection check, UI rendering, and styling all in the file: fetch API App.js } }) })
    }) })
    });
  } }; );
  }
} }, }, }, }, },
}); import React from 'react' ; import { View, Image, Text, Button, StyleSheet } from 'react-native' ; import ShapeView from './ShapeView' export default class App extends React . Component { constructor ( props ) { super (props); this .state = { shape : 'logo' , status : '' }; // check connection checkConnection = () => { fetch( 'https://demo-server.approovr.io/hello' , { method : 'GET' , .then( ( response ) => response.text()) .then( ( text ) => { this .setState( previousState => { return { shape : 'hello' , status : 'connected' }; .catch( ( error ) => { this .setState( previousState => { return { shape : 'confused' , status : 'not connected' }; // render the app screen render ( ) { let pic = { uri : 'https://approov.io/images/approov_largelogo.png' return ( < View style = {styles.container} > < View style = {styles.header} > < Text style = {{fontSize: 24 }}> Approov Shapes </ Text > </ View > < ShapeView style = {styles.content} shape = {this.state.shape} status = {this.state.status}/ > < View style = {styles.footer} > < View style = {styles.buttonBar} > < Button onPress = {this.checkConnection} title = "Test Hello" /> </ View > </ View > </ View > // flexbox styles const styles = StyleSheet.create({ container : { flex : 1 , flexDirection : 'column' , backgroundColor : '#fff' , margin : 10 , header : { flex : .1 , flexDirection : 'row' , justifyContent : 'center' , content : { flex : .8 , flexDirection : 'column' , justifyContent : 'center' , alignItems : 'center' , footer : { flex : .1 , flexDirection : 'row' , justifyContent : 'center' , buttonBar : { flex : 1 , flexDirection : 'row' , alignItems : 'flex-end' , justifyContent : 'space-around' , // end of file The top-level App component is registered in the file. index.js The main view is rendered by a stateless view component which displays a choice of image and a status message: }; );
} }
}); import React from "react" ; import { View, Image, Text, StyleSheet } from "react-native" ; const shapeView = ( props ) => { const imgSrc = { 'logo' : require ( './assets/approov_largelogo.png' ), 'hello' : require ( './assets/hello.png' ), 'confused' : require ( './assets/confused.png' ), 'Rectangle' : require ( './assets/rectangle.png' ), 'Square' : require ( './assets/square.png' ), 'Triangle' : require ( './assets/triangle.png' ), 'Circle' : require ( './assets/circle.png' ) return ( < View style = {props.style} > < Image source = {imgSrc[props.shape]} style = {styles.shapeImg} /> < Text style = {{fontSize: 24 , marginTop: 10 }}> {props.status} </ Text > </ View > const styles = StyleSheet.create({ shapeImg : { resizeMode : 'contain' , height : 256 , width : 256 export default shapeView; // end of file I am using Android for these examples, but this works similarly on iOS. Fire up an Android emulator (you may need to launch Android Studio for this) or connect a phone via . In the directory, launch the app: adb rndemo $ yarn run android $ cd rndemo You should see a screen like this: Push the button and you should see a connected message if everything went okay: TEST HELLO This validates network communication between our React Native app and the demo server. You can set airplane mode on your phone or emulator and push the test button again to verify there is then no longer a connection. The Approov Native Module The Approov demo package includes a README, the iOS and Android Approov demo libraries, sample clients, and app registration tools. Download the , and save the app registration token which is included in your download email. demo package The Approov SDK includes the native code we want to expose to React Native. It must be included in the iOS or Android native projects which were generated when we ejected the create-react-native-app. For Android, this project is located at rndemo/android. Import the Approov SDK into the Android project by following these from the . instructions Approov docs An Android native module is described in Java by extending the ReactContextBaseJavaModule class. The getName() method must be implemented and provides the name of the module to Javascript. Methods exposed to React Native are adorned with @ReactMethod and may provide Javascript callback or promise mechanisms. We’ll use promises in our example. Facebook’s describes other capabilities such as sending events to Javascript and listening to lifecycle events. native module page We initialize the default configuration for Approov authentication in the native module constructor, and define ‘Approov’ in the getName() call. The exposed call wraps the asynchronous native and settles a promise when the token fetch completes. fetchApproovToken() fetchApproovToken() private Context context; ApproovConfig config = ApproovConfig.getDefaultConfig(reactContext);
            ApproovAttestation.initialize(config); }
    }

    @Override }

    @ReactMethod @Override promise.resolve(results.getToken()); }
        }, url);
    }
} package com.criticalblue.approov; import ... import com.criticalblue.attestationlibrary.ApproovAttestation; import com.criticalblue.attestationlibrary.ApproovConfig; import com.criticalblue.attestationlibrary.TokenInterface; class ApproovModule extends ReactContextBaseJavaModule { private static final String E_APPROOV_ERROR = "E_APPROOV_ERROR" ; public ApproovModule ( ReactApplicationContext reactContext ) { super (reactContext); this .context = reactContext; try { } catch (IllegalArgumentException ex) { } catch (MalformedURLException ex) { public String getName ( ) { return "Approov" ; public void fetchApproovToken ( final String url, final Promise promise ) { ApproovAttestation.shared().fetchApproovToken( new TokenInterface ( ) { public void approovTokenFetchResult ( ApproovResults results ) { if (results.getResult() == ApproovAttestation.AttestationResult.SUCCESS) else promise.reject(E_APPROOV_ERROR, "Failed to fetch Approov Token" ); A bundles and creates one or more native modules: ReactPackage @Override }

    @Override }
} package com.criticalblue.approov; import ... public class ApproovPackage implements ReactPackage { public List<ViewManager> createViewManagers ( ReactApplicationContext reactContext ) { return Collections.emptyList(); public List<NativeModule> createNativeModules ( ReactApplicationContext reactContext ) { List<NativeModule> modules = new ArrayList<>(); modules.add( new ApproovModule(reactContext)); return modules; The project’s main application implements ReactApplication and creates and returns a list of module packages. We add the Approov package to the list in . getPackages() @Override }

    @Override );
    }

    @Override }
  };

  @Override }

  @Override }
} package com.rndemo; import ... import com.criticalblue.approov.ApproovPackage; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost ( this ) { public boolean getUseDeveloperSupport ( ) { return BuildConfig.DEBUG; protected List<ReactPackage> getPackages ( ) { return Arrays.<ReactPackage>asList( new MainReactPackage(), new ApproovPackage() protected String getJSMainModuleName ( ) { return "index" ; public ReactNativeHost getReactNativeHost ( ) { return mReactNativeHost; public void onCreate ( ) { super .onCreate(); SoLoader.init( this , /* native exopackage */ false ); On the Javascript side, the Approov native module will now be included in the imported from . In our implementation, returns a normal javascript promise: NativeModules react-native Approov.fetchApproovToken() NativeModules.Approov.fetchApproovToken(input) }) }); import {NativeModules} from 'react-native' ; .then( token => { // do something useful... .catch( ( error ) => { throw error; Bridging the native and Javascript environments was surprisingly straightforward. Interceptors Many networking libraries, such as and tp, include the concept of an interceptor. Interceptors can be used to intercept network requests and responses and inject some additional processing. Axios OkHt When implementing natively with the Android SDK, most customers use interceptors to fetch an Approov token and add it to each API request’s headers, so we’ll want to fully implement this abstraction in our production module. For this simple example though, we’ll hardwire the interception in a fetchWithToken() call. In the fetchWithToken() method, when the native fetch token call completes, if the promise is resolved, we add the token to the input request headers and make a fetch() call with the augmented input request. When completed, the fetch returns a resolved promise holding the API server’s response. } }
                }) })
        }) })
}; import {NativeModules} from 'react-native' ; const fetchWithToken = ( input, options ) => { return NativeModules.Approov.fetchApproovToken(input) .then( token => { let optionsA = (options? {...options, headers :{ ...options.headers}}:{ headers : {}}); optionsA.headers[ 'Approov-Token' ] = token; return fetch(input, optionsA) .then( ( response ) => { if (response.ok) { return response; else { throw new Error ( 'HTTP response status is ' + response.status); .catch( ( error ) => { throw error; .catch( ( error ) => { throw error; const Approov = Object .assign({ fetch : fetchWithToken }, NativeModules.Approov); export default Approov; For convenience, we create an Approov object from the NativeModules.Approov object, adding a fetch() method which is actually the fetchWithToken() method, and then we export this as the Approov module. Getting Shapes Now we are ready to use the Approov object for authentication. We add a getShape() method inside our App which makes an Approov.fetch(request) call to authenticate and request a random shape value. Once the fetch completes, the App component state updates, triggering a render() call which causes the ShapeView to display an updated shape and status message. A GET SHAPES button is added to the button bar to request new shapes. }) } }) })
    }) })
    });
  } }; );
  }
} import Approov from './Approov' ; class App extends React . Component { // unchanged code ommitted for brevity... // get shape getShape = () => { Approov.fetch( 'https://demo-server.approovr.io/shapes' , { method : 'GET' , .then( ( response ) => { if (!response.ok) { throw new Error ( 'HTTP response status not OK.' ); return response.text(); .then( ( text ) => { this .setState( previousState => { return { shape : text, status : '' }; .catch( ( error ) => { const message = '' + error.message; this .setState( previousState => { return { shape : 'confused' , status : message }; // render the app screen render ( ) { let pic = { uri : 'https://approov.io/images/approov_largelogo.png' return ( < View style = {styles.container} > < View style = {styles.header} > < Text style = {{fontSize: 24 }}> Approov Shapes </ Text > </ View > < ShapeView style = {styles.content} shape = {this.state.shape} status = {this.state.status}/ > < View style = {styles.footer} > < View style = {styles.buttonBar} > < Button onPress = {this.checkConnection} title = "Test Hello" /> < Button onPress = {this.getShape} title = "Get Shape" /> </ View > </ View > </ View > Everything looks good, but when we request a new shape, we see a failure with a 400 status code, suggesting there is a problem with the client request. Failure to fetch a shape The call fails because the integrity token added by Approov is invalid. Until our example app is properly registered with the Approov service, the fetchWithToken() call will always fail the authentication check. Command line registration tools are included in the demo download. To register the app, issue a registration request specifying the App’s APK bundle and the app registration token you saved from the demo download email. As a courtesy to other demo users, set your registration to expire after a few hours using the -e flag: $ ./registration -t <registration-token>
   -e 2h
Submitting data… $ cd <<approov-demo-package>> /registration-tools/ Android/Mac/ -a <<rndemo-project>> /android/ app/build/outputs/apk/app-debug.apk Success : new app signature added to database.always be done. Once the app is registered and can be properly authenticated, pressing the GET SHAPES button should return one of these shapes: (Successfully fetching random shapes) Man in the Middle Attacks The security of the communication channel is very important during API calls. If the channel is insecure, an API call could be intercepted and modified. An integrity token, although it has a short lifetime, could be observed in the insecure channel and used to make malicious API calls with impunity. Despite using HTTPS/TLS when making API requests, an attacker who controls both the network and the mobile device can easily setup a to steal and quickly reuse Approov tokens before they expire. Man in the Middle (MitM) attack To counter MitM attacks, mobile clients should use which checks that the certificate or public key presented by the back-end service is known specifically by the client app. Other certificates, though they might appear authentic, will be rejected by the client, and no API calls will be made. certificate or public key ‘pinning’ Implementing pinning in React Native is a bit complicated and will be described in a separate article and integrated into this example’s code repository. Going Further We’ve demonstrated a native module implementation in React Native with a hardwired interceptor successfully providing app authentication and API protection. A production quality native module implementation for React Native would generalize the interceptor functionality, add convenience configuration methods, and provide full MitM protection. For comparison, a similar already exists for and hybrid apps. Approov plugin library Cordova Ionic All code for this example is located on . github Thanks for reading! For more information on mobile API security, check out . www.approov.io I’d really appreciate it if you recommend this post (by clicking the 👏 button) so other people can find it.

First experiences with React Native: bridging an Android native module for app authentication

The Wheels of Chance by H. G. Wells, is part of the HackerNoon Books Series. You can jump to any chapter in this book here . HOW MR. HOOPDRIVER REACHED MIDHURST HOW MR. HOOPDRIVER REACHED MIDHURST It was one of my uncle's profoundest remarks that human beings are the only unreasonable creatures. This observation was so far justified by Mr. Hoopdriver that, after spending the morning tortuously avoiding the other man in brown and the Young Lady in Grey, he spent a considerable part of the afternoon in thinking about the Young Lady in Grey, and contemplating in an optimistic spirit the possibilities of seeing her again. Memory and imagination played round her, so that his course was largely determined by the windings of the road he traversed. Of one general proposition he was absolutely convinced. “There's something Juicy wrong with 'em,” said he—once even aloud. But what it was he could not imagine. He recapitulated the facts. “Miss Beaumont—brother and sister—and the stoppage to quarrel and weep—” it was perplexing material for a young man of small experience. There was no exertion he hated so much as inference, and after a time he gave up any attempt to get at the realities of the case, and let his imagination go free. Should he ever see her again? Suppose he did—with that other chap not about. The vision he found pleasantest was an encounter with her, an unexpected encounter at the annual Dancing Class 'Do' at the Putney Assembly Rooms. Somehow they would drift together, and he would dance with her again and again. It was a pleasant vision, for you must understand that Mr. Hoopdriver danced uncommonly well. Or again, in the shop, a sudden radiance in the doorway, and she is bowed towards the Manchester counter. And then to lean over that counter and murmur, seemingly apropos of the goods under discussion, “I have not forgotten that morning on the Portsmouth road,” and lower, “I never shall forget.” At Northchapel Mr. Hoopdriver consulted his map and took counsel and weighed his course of action. Petworth seemed a possible resting-place, or Pullborough; Midhurst seemed too near, and any place over the Downs beyond, too far, and so he meandered towards Petworth, posing himself perpetually and loitering, gathering wild flowers and wondering why they had no names—for he had never heard of any—dropping them furtively at the sight of a stranger, and generally 'mucking about.' There were purple vetches in the hedges, meadowsweet, honeysuckle, belated brambles—but the dog-roses had already gone; there were green and red blackberries, stellarias, and dandelions, and in another place white dead nettles, traveller's-joy, clinging bedstraw, grasses flowering, white campions, and ragged robins. One cornfield was glorious with poppies, bright scarlet and purple white, and the blue corn-flowers were beginning. In the lanes the trees met overhead, and the wisps of hay still hung to the straggling hedges. Iri one of the main roads he steered a perilous passage through a dozen surly dun oxen. Here and there were little cottages, and picturesque beer-houses with the vivid brewers' boards of blue and scarlet, and once a broad green and a church, and an expanse of some hundred houses or so. Then he came to a pebbly rivulet that emerged between clumps of sedge loosestrife and forget-me-nots under an arch of trees, and rippled across the road, and there he dismounted, longing to take off shoes and stockings—those stylish chequered stockings were now all dimmed with dust—and paddle his lean legs in the chuckling cheerful water. But instead he sat in a manly attitude, smoking a cigarette, for fear lest the Young Lady in Grey should come glittering round the corner. For the flavour of the Young Lady in Grey was present through it all, mixing with the flowers and all the delight of it, a touch that made this second day quite different from the first, an undertone of expectation, anxiety, and something like regret that would not be ignored. It was only late in the long evening that, quite abruptly, he began to repent, vividly and decidedly, having fled these two people. He was getting hungry, and that has a curious effect upon the emotional colouring of our minds. The man was a sinister brute, Hoopdriver saw in a flash of inspiration, and the girl—she was in some serious trouble. And he who might have helped her had taken his first impulse as decisive—and bolted. This new view of it depressed him dreadfully. What might not be happening to her now? He thought again of her tears. Surely it was merely his duty, seeing the trouble afoot, to keep his eye upon it. He began riding fast to get quit of such selfreproaches. He found himself in a tortuous tangle of roads, and as the dusk was coming on, emerged, not at Petworth but at Easebourne, a mile from Midhurst. “I'm getting hungry,” said Mr. Hoopdriver, inquiring of a gamekeeper in Easebourne village. “Midhurst a mile, and Petworth five!—Thenks, I'll take Midhurst.” He came into Midhurst by the bridge at the watermill, and up the North Street, and a little shop flourishing cheerfully, the cheerful sign of a teapot, and exhibiting a brilliant array of tobaccos, sweets, and children's toys in the window, struck his fancy. A neat, bright-eyed little old lady made him welcome, and he was presently supping sumptuously on sausages and tea, with a visitors' book full of the most humorous and flattering remarks about the little old lady, in verse and prose, propped up against his teapot as he ate. Regular good some of the jokes were, and rhymes that read well—even with your mouth full of sausage. Mr. Hoopdriver formed a vague idea of drawing “something”—for his judgment on the little old lady was already formed. He pictured the little old lady discovering it afterwards—“My gracious! One of them Punch men,” she would say. The room had a curtained recess and a chest of drawers, for presently it was to be his bedroom, and the day part of it was decorated with framed Oddfellows' certificates and giltbacked books and portraits, and kettle-holders, and all kinds of beautiful things made out of wool; very comfortable it was indeed. The window was lead framed and diamond paned, and through it one saw the corner of the vicarage and a pleasant hill crest, in dusky silhouette against the twilight sky. And after the sausages had ceased to be, he lit a Red Herring cigarette and went swaggering out into the twilight street. All shadowy blue between its dark brick houses, was the street, with a bright yellow window here and there and splashes of green and red where the chemist's illumination fell across the road. About HackerNoon Book Series: We bring you the most important technical, scientific, and insightful public domain books. This book is part of the public domain. H. G. Wells (2009). The Wheels of Chance. Urbana, Illinois: Project Gutenberg. Retrieved October 2022, from https://www.gutenberg.org/files/1264/1264-h/1264-h.htm This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org, located at https://www.gutenberg.org/policy/license.html.

HOW MR. HOOPDRIVER REACHED MIDHURST

AdTech Holding is committed to high technologies that ensure top-notch quality for all its products. Our business approach relies much on software development and thus implies having a team of strong IT specialists who have not only enormous expertise but also an inspiration to grow and create. We always encourage our tech teams to go beyond their normal daily, quarterly, and annual tasks — and it turns into brand new ideas and insights. Today, we are glad to share one of the great examples of such an insight. Our AppLab team is responsible for developing mobile apps, but recently they have gone beyond the limits and created their own app store platform. We spoke to Artem Kovardin, the Head of Product Development of App Lab, to get the idea of why you might need your app store platform and a detailed guide on how to build it. Reasons for building your own app store The first question that might arise is why would anyone need a store when there are already Google Play and AppStore. However, Artem shared two potential situations when such a solution can be very reasonable — and these cases include both personal and business purposes. Reason 1: Building a corporate infrastructure Many companies have their operations based on particular apps. Keeping them in the in-house store might significantly simplify access and control over the whole infrastructure. Besides, you can disable downloads of local apps from the other stores for all employers’ devices. Reason 2: Helping senior family members We mentioned personal reasons, and here is one. Seniors often face issues getting around the modern app stores and struggle to find and install the apps they need. Your own store will solve this problem: you can create a very simplified interface and control what your loved ones install on their devices. Creating App Store Platform: Ready Guide So you are determined to implement such a solution in your company or need to build a store for other reasons. Artem shared the best practices from his team’s experience and we are ready to bring out a step-by-step guide including all necessary tools. Step 1. Planning Like with every project, it’s essential to determine the final goal of the whole work. In our case, it is basically an app that will help to install other apps. The next question is how this app will work. Here are the tools that we recommend using according to our experience: Interface Flutter Native Logic Kotlin APK files downloading Company’s own API API The Go Language Another important point is how we are going to add the apps to the store. The work of a store platform implies that we require apps in the form of APK files. Some of them have direct links, published by developers. However, most apps are only available via Google Play, which means that the project requires a Google Play parser. To sum up, the whole ecosystem of the future app store platform will consist of three parts: Step 2. App Development Flutter allows the creation of an application store with minimum time and effort. Thus, we will mention the most complicated points that might cause difficulties. To manage state in the app, our team used two packages: along with . Such a solution turned out to be the simplest and the most convenient option for a Flutter app state management. provider state_notifier Another important take: before a user can install an app from the storage, they will need to download it first — and this step requires testing. To test how it works, the team added the APK file to a server to make the file available for download. Now you need to download it in the application: void download(String url, {Function? success, Function? error}) async {
	var name = basename(url);
	var request = http.Request('GET', Uri.parse(url));
	var response = client.send(request);
	String dir = (await getApplicationDocumentsDirectory()).path;

	List<List<int>> chunks = [];
	int downloaded = 0;

	response.asStream().listen((http.StreamedResponse r) {
    	r.stream.listen((List<int> chunk) {
            	print('downloaded: ${downloaded * Megabyte}');

            	chunks.add(chunk);
            	downloaded += chunk.length;
        	}, onDone: () async {
  	          print('downloaded: ${downloaded * Megabyte}');

            	var path = '$dir/$name';

            	File file = new File(path);
            	final Uint8List bytes = Uint8List(downloaded);
            	int offset = 0;
            	for (List<int> chunk in chunks) {
                    bytes.setRange(offset, offset + chunk.length, chunk);
                	offset += chunk.length;
            	}

            	await file.writeAsBytes(bytes);

            	if (success != null) {
                	success(path);
            	}

            	return;
        	}, onError: (err) async {
            	if (error != null) {
                	error();
            	}
    	});
	});
} The `getApplicationDocumentsDirectory()` function returns the path to the directory where you need to download the APK file. With the help of the `basename(url)` function we get the file name; to start background loading, we use the `response.asStream()`, and when the downloading is finished, we use the callback `success(path);`. As a result, we have the file and can install it. Here we require a part of a native Kotlin code. To get this code, we need to install the__ __ package and create particular contracts in the pideons/install/apk.dart file. pigeon import 'package:pigeon/pigeon.dart';


class InstallRequest {
  String? file;
}

class InstallResponse {
  bool? status;
}

@HostApi()
abstract class InstallApk {
  @async
  InstallResponse install(InstallRequest request);
} Then, we generate interfaces for a native code and the Dart code: flutter pub run pigeon \
  --input pigeons/install/apk.dart \
  --dart_out lib/pigeons/install/apk.dart \
  --java_out ./android/app/src/main/java/ru/kovardin/getapp/pigeons/install/Apk.java \
  --java_package "ru.kovardin.getapp.pigeons.install" Pigeon generates Java files, but we can use them in the Kotlin native code. Now it’s important to support `InstallApk` interfaces from the generated Java code: package ru.kovardin.getapp.install

import android.app.Activity
import android.content.Intent
import android.content.pm.PackageManager
import android.content.pm.ResolveInfo
import android.net.Uri
import android.os.Build
import android.util.Log
import androidx.core.content.FileProvider
import ru.kovardin.getapp.pigeons.install.Apk
import java.io.File


open class Apk(val context: Activity): Apk.InstallApk {
	override fun install(request: Apk.InstallRequest, result: Apk.Result<Apk.InstallResponse>?) {
    	Log.d("APK", "install apk ${request.file}")

    	try {
        	val file = File(request.file ?: "")
        	val intent = Intent(Intent.ACTION_VIEW)
        	val authority =  context.getApplicationContext().getPackageName().toString() + ".provider"
        	val type = "application/vnd.android.package-archive"

        	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            	val apk: Uri = FileProvider.getUriForFile(
                    	context,
  	                  authority,
                    	file
            	)

                intent.setDataAndType(apk, type)
            	val infos: List<ResolveInfo> = context.getPackageManager().queryIntentActivities(intent, PackageManager.MATCH_DEFAULT_ONLY)
            	for (info in infos) {
                    context.grantUriPermission(authority, apk, Intent.FLAG_GRANT_WRITE_URI_PERMISSION or Intent.FLAG_GRANT_READ_URI_PERMISSION)
            	}
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP or Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_GRANT_WRITE_URI_PERMISSION or Intent.FLAG_GRANT_READ_URI_PERMISSION)
                intent.putExtra(Intent.EXTRA_NOT_UNKNOWN_SOURCE, true)

        	} else {
            	intent.setAction(Intent.ACTION_VIEW)
                intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION or Intent.FLAG_ACTIVITY_NEW_TASK)
                intent.putExtra(Intent.EXTRA_NOT_UNKNOWN_SOURCE, true)
                intent.setDataAndType(Uri.fromFile(file), type)
        	}
            context.startActivity(intent)
    	} catch (e: Exception) {
        	e.printStackTrace()
    	}

    	val response = Apk.InstallResponse();
    	response.status = true;
    	result?.success(response)
	}
} Overall, the app installation is the launch of intent with the right type and the APK file in parameters. The rest of the work is done by Android — automatically. The next thing we recommend to do is to check the SDK version. The future logic we will use to work with the APK file will depend on this SDK version. For SDK 23 or earlier versions, we can use a standard access to a file: `Uri.fromFile(file)`. This code is executed in the else section: intent.setAction(Intent.ACTION_VIEW)
intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION or Intent.FLAG_ACTIVITY_NEW_TASK)
intent.putExtra(Intent.EXTRA_NOT_UNKNOWN_SOURCE, true)
intent.setDataAndType(Uri.fromFile(file), type) Things get more complicated when you work with SDK 24 or later versions. To do things correctly, we will need to add a separate section to the AndroidManifest.xml file: <application
    	android:allowBackup="true"
        android:label="@string/app_name">
    	<provider
            android:name="android.support.v4.content.FileProvider"
        	android:authorities="${applicationId}.authorityStr"
            android:exported="false"
            android:grantUriPermissions="true">
        	<meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/paths"/>
    	</provider>
</application> The`@xml/paths` is a separate resource file: paths.xml from the xml folder. We need to define this file’s content: <?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
	<external-path
            name="files_root"
            path="Android/data/${applicationId}" />
	<external-path
            name="external_files"
        	path="." />
	<root-path name="root" path="/data/" />
</paths> You will find a detailed guide on working with files in the Android SDK 24+ in developer documentation. Now we can call the native code from the Dart code. Pigeon generated the class that will be  used in the service. InstallApk final apk = InstallApk();
final response = await apk.install(InstallRequest(
	file: apk,
)); Another essential point is that you need to request a user permission before installing an APK. You can easily do it with the package. permission_handler Permission.storage.request().then((value) {
	print(value);

    Permission.requestInstallPackages.request().then((value) {
    	print(value);
	});
}); Step 3: API The easiest way to create API is to stick to the Go language, which perfectly suits these needs. To work with HTTP, our team recommends to use : a very simple, but efficient router. chi func (a *Api) Route(r chi.Router) {
  	r.Route("/v1", func(r chi.Router) {

        	r.Route("/apps", func(r chi.Router) {
              	r.Route("/{bundle}", func(r chi.Router) {
                    	r.Get("/", a.apps.One)
                    	r.Get("/download", a.apps.Download)
              	})
              	r.Get("/search", a.apps.Search)
              	r.Post("/updates", a.apps.Updates)
        	})

    	r.Get("/file/*", a.static.File)

        	// ...

  	})
} All APK files are stored in the AWS. To share them correctly, a service needs a handler, that will proxy all requests to files and add a special header: `headers.Set ("Content-Type", "application/vnd.android.package-archive"). This header is required to download files exactly in the .apk format: if you don’t use it, some Android devices will download them as .zip archives. func (h Static) File(w http.ResponseWriter, r *http.Request) {
  	headers := http.Header{}

  	ext := path.Ext(r.URL.Path)
  	if ext == ".apk" {
        	headers.Set("Content-Type", "application/vnd.android.package-archive")
  	}

  	proxy := httputil.ReverseProxy{
        	Director:  func(r *http.Request) {},
        	Transport: responseHeadersTransport(headers),
  	}

  	target := h.config.Scheme + path.Join(h.config.Cloud, strings.Replace(r.URL.Path, "file/", "", 1))
  	req, _ := http.NewRequest("GET", target, nil)
  	proxy.ServeHTTP(w, req)
} The rest of the work with API is standard, so we won’t call special attention to the further actions. To create an application store, you obviously need applications. They are all available in a ready store, and the easiest way is to get them from there. We are speaking about the Google Play that we need to parse — for information purposes only, of course. Part 4: Parser GitHub has a ready library for downloading APK files: . googleplay To start downloading files, you need to log in to Google Play: googleplay -email EMAIL -password PASSWORD This command will generate a special token file that we will use for requests. Then we generate a file with a device identifier — all requests will be performed from it: googleplay -device After everything is done, you will get access to information about an app you want to download: > googleplay -a com.google.android.youtube
Title: YouTube
Creator: Google LLC
UploadDate: 2022-05-12
VersionString: 17.19.34
VersionCode: 1529337280
NumDownloads: 11.822 B
Size: 46.727 MB
File: APK APK APK APK
Offer: 0 USD And download a particular version of any application: googleplay -a com.google.android.youtube -v 1529337280 The Result The AppLab team got the following platform as a result of all these efforts: It looks and works like a normal application store. And, after all, it turned out to be comparatively easy to develop. Artem insists that most part of the work lies on Android itself, while a developer needs to correctly download the APK files, get all permissions from a user, and launch a standard installation for Android. The result you see in the pictures shows an application store with a limited set of functions. All that it allows you to do is install apps on Android devices — not bad already, though. However, you can go further and add more things: Push Notifications via package, or package to realize the updates logic. firebase_messaging installed_apps

How to Build Your Own App Store

Hackers, Assemble! Here we are with the third round’s results announcement of the by & HackerNoon! Cybersecurity Writing Contest Twingate How do we enter the contest? Easy-peasy. Simply share any story on . Here’s your complete guide on how to . #cybersecurity enter the cybersecurity writing contest Here are the nominations for the Cybersecurity Writing Contest August 2022 We picked all the stories tagged with the tag on HackerNoon, published in August, 2022. Then we chose the top stories using 60:30:10 weightage respectively to: #cybersecurity by . The Hidden Danger of QR Codes @officercia by . Expert: Facebook, IG App Can Steal Secrets, and Users Can't Turn It Off! @z3nch4n by . Are VPNs Really Safe? @chinuaezifeh by . Ransomware-as-a-Service: SaaS' Evil Twin @akoredenate by . An Ultimate List of Rules Net Survivors Should Follow to Stay Safe! @officercia by . GitHACK! We are the vulnerability @sipping by . How to Stay Safe When Browsing Online or Viewing Emails at Home or Work @jazzmariekaur by . Best Physical Security Practices for Your Server Room @zacamos by . Safeguarding Your Passwords from Cracking: Understanding the Math Concepts @smoothmaruf by How to Implement JSON Web Token (JWT) in Java Spring Boot @brilianfird Winners! The editors then voted for the top stories. Here are the winners for the month of August 2022: The FIRST place goes to by . The Hidden Danger of QR Codes @officercia “I’d call this piece a tiny research paper - a 4000+ words story covering various bugs and vulnerabilities in QR codes. Would love more stories on HackerNoon like this.” - HackerNoon Editor Congratulations !! You have won 500 USD! :) @officercia In the SECOND place, we have by . Expert: Facebook, IG App Can Steal Secrets, and Users Can't Turn It Off! @z3nch4n “This is a longtime contributor that always submits good stuff. This piece is an expose on how IG and FB are tracking our data and the writer goes over the issue well including screenshots and tweets.Moreover, the author provides ways we can fight this issue of data tracking.” - HackerNoon Editor Congratulations on winning second position and 300 USD . @z3nch4n The THIRD place goes to by . Ransomware-as-a-Service: SaaS' Evil Twin @akoredenate “The RaaS to SaaS comparison is very educational - too often people shy away from learning about businesses in industries they don't approve of, but sometimes, that is how you learn most about your own industry.” - HackerNoon Editor Great Job, !! You have won 100 USD this month!! @akoredenate Last but not least, the winner of the Most Read Story is AGAIN with 9300+ Reads (WOW!) @officercia Congratulations (x2) !! You have won 100 USD! @officercia Congratulations to all the winners, and best of luck to the nominees and future participants of the . Let’s wrap up the announcement! We will contact the winners shortly. Keep an eye on to see the current and upcoming writing contests! Cybersecurity Writing Contest contests.hackernoon.com

The Cybersecurity Writing Contest 2022: Round 3 Results Announced!

Concurso de redacción sobre ciberseguridad 2022: ¡se anuncian los resultados de la ronda 3!

Concours d'écriture sur la cybersécurité 2022 : résultats du troisième tour annoncés !

साइबर सुरक्षा लेखन प्रतियोगिता 2022: तीसरे चरण के परिणाम घोषित!

The Cybersecurity Writing Contest 2022: ラウンド 3 結果発表!

Concurso de redação sobre segurança cibernética 2022: resultados da terceira rodada anunciados!

Cuộc thi Viết về An ninh mạng 2022: Kết quả Vòng 3 được Công bố!

2022 年网络安全写作大赛：第三轮结果公布！

Showing Video Ads in React Native - Part 2: Android (including Audio Play)

Answering the 10 Most Common Questions About Java

You might have seen Google Maps in almost all the apps these days. Some mobile apps are displaying their outlet locations, track users (like Uber), showing nearby places, etc. So, it shows the importance of maps support in mobile apps. Today, we are going to integrate Google Maps in a React Native app step by step, using the popular React Native Maps package. At Instamobile, we are using this exact implementation in many of our , such as the . React Native templates Store Locator app templates As a developer or a company, it is very important to manage their app’s codebase. So, these days in mobile app development there are platforms like React Native you can apps for both iOS and Android. I’m not going to dig in deep in about react and react native stuff in the article, instead, we will focus more google maps integration on both platform apps, iOS and Android. There are two ways to integrate Google Maps into a React Native mobile app: 1. create-react-native-app cli 2. react-native-cli There are a few differences between these two that I would like to clear. is developer friendly and gives the flexibility to use native components. But with this, you have to configure every small bit in the application. Apart from this, if you want to test your application then you have to use the real device or you have to use simulators for both iOS and Android. You might generate a lot of bugs while installing various rpm packages and configuring them. react-native-cli you can expo SDK built-in modules. This is a hassle-free environment for developing apps faster. You don’t need any device (not even simulators) to run and test the apps. You only need to develop the code and test using the expo app built for Android and iOS. You just need the QR Code generated by your application when you run using . create-react-native-app, npm start It is very easy to integrate such modules in native code bases like Java or swift. I would say one thing after reading the whole tutorial you can easily integrate google maps with React Native as well. You’ll also learn how to build a brand new React Native app from scratch. So, without further ado let’s get started. Prerequisites We’re assuming that you have at least basic or intermediate knowledge of JavaScript, React & React Native. Let’s begin with . create-react-native-app What are the things you need to integrate React Native Maps? 1. (We are using Visual Studio Code) Text Editor or IDE 2. (As always needed to install packages & other stuff) Node JS 3. (A CLI command line tool to install React Native on to your system.) create-react-native-app, 4. ( ) Expo, More About Expo How to install React Native on to your local system? Let’s install the React Native on to our system. Open up your command line in VS Code using in Windows or go to the terminal on the menu and click on . Ctrl + ~ Add a new terminal Run the command: > npm install -g create-react-native-app (Node Package Manager, which manage all your package from installing to deleting). Install is used to give a command to NPM to install a package. You can also use -I instead of this. It denotes or says NPM to install create-react-native-app globally in the system. This means it will available after this command to all of your systems and you can create a react native app in any directory. A tool which is made by react native developers to make starting a new mobile app in React Native hassle-free. It generates all the bolierplate code needed to get started right away with your app development process. npm: install: -g: create-react-native-app: So, let’s move on to the next step. It’s now time to dive into the meat of the project. We are going to build an app which integrates google maps. What would be the name of our app? Let’s name it as “location-finder”. Let’s create the location-finder App Run this command in your Terminal: create-react-native-app locationfinder You will see a lot of dependencies installation and it will take some time to install on your system as shown in the picture. When you hit enter in the command line. It will ask you what do you want: a blank template or tabbed template. Hit enter again to choose app blank template. After that, it will ask you for the app name and also showing slug to you. Don’t worry type the name you want. You can go and have a cup of coffee until the install finishes. It usually takes a few minutes. So now finally, your app is created. If you want to run and test the installation then, in command line type: (to get inside the app folder) > cd locationfinder > npm start You can test using with the by scanning the QR Code generated by the command. Otherwise, you can use the simulator for iOS and the emulator for Android. To use them for iOS else for Android. You can use any third-party emulator like Gennymotion. Expo app press “i” press “a” The dependencies for this project while we are making this project are: This is a Map implementation project. 1. “expo”: “³².0.0”, 2. “react”: “16.5.0”, 3. “react-native”: “³².0.0” 4. “react-native-maps”: “0.22.0” By default, Expo uses react-native-maps by Airbnb. Currently, Expo SDK is using version 0.22.0. Because this is built-in with create-react-native-app and expo. You can see a similar folder structure in the VS Code as shown below: As I said earlier, we are going to use Expo SDK and react-native-maps is one of the built-in features to integrate Google Maps in Expo SDK. You do not need to install and configure react-native-maps for Android and iOS separately that you need to do in react-native-cli. Integrating React Native Maps in Your React Native App Now that you’ve installed all the required dependencies, you can import MapView in your React Native app. You need to make the following changes into the file: app.js React, { Component } ; { Platform, StyleSheet, Text, View } ; MapView, { PROVIDER_GOOGLE } ; {
  render() { ( import from 'react' import from 'react-native' import from 'react-native-maps' export default . class App extends React Component return );
  }
} < = }} = = , , , }}
      /> MapView style {{ flex: 1 provider {PROVIDER_GOOGLE} showsUserLocation initialRegion {{ latitude: 37.78825 longitude: -122.4324 latitudeDelta: 0.0922 longitudeDelta: 0.0421 Great milestone! Now Google Maps is integrated into your mobile application. There are several methods that you can use to make it more intuitive. Features that you can add in your map like you can ask the user for giving access to their current location. You can track user location as well. You can also add markers and labels on places as you see in Google Maps. You can also customize that map as much as you want. Latitude and longitude are used to tell the position of the object. l and are used to provide the zoom options in the map. atitudeDelta longitudeDelta You can try on an iPhone device and let me know in the comments section. Feel free to post a screenshot of your app to show off. I have tried it on Android and it works fine. (Alternatively) Create a Rect Native app with react-native-cli Step 1: Installing react-native-cli and creating App Let’s start making the same app from scratch using react-native-cli. You need to follow the same way to install react-native-cli. In the terminal, run: > npm install -g react-native-cli It takes a little bit of time. After that, run another command to create the app: >  react-native init locationfinder This will also take some time while installing. After installation, get into the folder using You can run this app only on Android or iOS simulator using these commands for iOS, and for android . > cd locationfinder . react-native run-ios react-native run-android Step 2: Install react-native-maps package react-native-maps created by Airbnb. It is open source and anybody can use it for accessing Google Maps. To install it in the app: > locationfinder/npm install –save react-native-maps After the installation is complete. You need to link this package with your current app so that you can use methods of the package in your application. So, let’s configure map files for Android and iOS both. Configure React-Native-Maps for Android We are describing the steps in details, but I would suggest you check the official documentation as well. You just need to make little changes in some the files, but the rest of them are handled by automatically. react-native-cli You have to get inside the folder There, you have to change in file. In this file, you have to configure the You can find this file inside android . AndroidManifest.xml Google Maps API key. android/app/src/main/AndroidManifest.xml. <application> < = = ”/> meta-data android:name ”com.google.android.geo.API_KEY” android:value ”Your Google maps API Key Here </ > application Ensure that the meta-data of the app is under the application tag. Replace the with the API key value. android:value ou have to go to as shown in the picture. You can also see the instructions there. After that, go to Google’s cloud platform as shown in the picture: To find the Google API keys, y Google’s map SDK for Android Click on Maps SDK for Android then get into it. You will see the next screen where you can find Click on that and generate the API key which is similar to this one as shown below. credentials. Change in which you can also find in folder. Folder tree is shown in the picture. There you have to import package: MainApplication.java android react-native-maps import com.airbnb.android.react.maps.MapsPackage; One more thing you need to change in this file. Add in function as shown below new MapsPackage() { Arrays.<ReactPackage>asList( MainReactPackage(), MapsPackage()
   );
} @Override List<ReactPackage> protected getPackages () return new new Now you have to rebuild the app. To do this use the command react-native run-android. Finally, everything is done for Android. Configure React Native Maps for iOS We need to add a in iOS to implement Cocoapods. To setup the , you need to go inside the folder, create a file named and paste the code provided below. There are a few things that you need to change in this . Podfile PodFile iOS Podfile PodFile First of all, uncomment by removing it. Next, you need to change to your app name like — . Then after that, uncomment all the dependencies. # platform: ios, ‘9.0’ target ‘_YOUR_PROJECT_TARGET_’ do target ‘locationfinder’ do react-native-maps Once all of these changes are done, save the file. Then, go to command line and get inside the folder using . In this folder, you have to run one more command This will install all the necessary files needed. ios cd ios pod install. target rn_path = rn_maps_path = pod , pod , rn_path, [ , , , , , , , , , , , , ,
] pod , => pod , => pod , => pod , rn_maps_path post_install installer.pods_project.targets.each target.name == target.build_configurations.each config.build_settings[ ] = target.name == target.remove_from_project # Uncomment the next line to define a global platform for your project # platform :ios, '9.0' '_YOUR_PROJECT_TARGET_' do '../node_modules/react-native' '../node_modules/react-native-maps' # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies 'yoga' path: " /ReactCommon/yoga/yoga.podspec" #{rn_path} 'React' path: subspecs: 'Core' 'CxxBridge' 'DevSupport' 'RCTActionSheet' 'RCTAnimation' 'RCTGeolocation' 'RCTImage' 'RCTLinkingIOS' 'RCTNetwork' 'RCTSettings' 'RCTText' 'RCTVibration' 'RCTWebSocket' # React Native third party dependencies podspecs 'DoubleConversion' :podspec " /third-party-podspecs/DoubleConversion.podspec" #{rn_path} 'glog' :podspec " /third-party-podspecs/glog.podspec" #{rn_path} # If you are using React Native <0.54, you will get the following error: # "The name of the given podspec `GLog` doesn't match the expected one `glog`" # Use the following line instead: #pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec" 'Folly' :podspec " /third-party-podspecs/Folly.podspec" #{rn_path} # react-native-maps dependencies 'react-native-maps' path: # pod 'react-native-google-maps', path: rn_maps_path  # Uncomment this line if you want to support GoogleMaps on iOS # pod 'GoogleMaps'  # Uncomment this line if you want to support GoogleMaps on iOS # pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS end do |installer| do |target| if 'react-native-google-maps' do |config| 'CLANG_ENABLE_MODULES' 'No' end end if "React" end end end Now, we have to enable the Google Maps for iOS. To do it we have to integrate our API key inside file. AppDelegate.m Now we are ready to implement the maps in iOS. So, let’s do it. Just paste the code below and rebuild your app. React, {Component} ; {Platform, StyleSheet, Text, View} ; MapView, { PROVIDER_GOOGLE } ; {
render() { ( import from 'react' import from 'react-native' import from 'react-native-maps' export default . class App extends React Component return );
 }
} < = }} = = , , , ,
      }}
    /> MapView style {{ flex: 1 provider {PROVIDER_GOOGLE} showsUserLocation initialRegion {{ latitude: 37.78825 longitude: -122.4324 latitudeDelta: 0.0922 longitudeDelta: 0.0421 Final Words In this react native tutorial, we learned how to add React Native Maps to a mobile app. I have tried to explain almost all the details on how to implement Google Maps in react native apps. Hope you like the article and it helps with your app development. If you get stuck somewhere please comment below and don’t hesitate to share this article. It might help someone else.

Tutorial: How to Integrate Google Maps into React Native

Have a good look at the apps you have on your Android phone. How do you ensure all of them are authentic? E.g. how can you make sure that the Instagram app that you have on your mobile is a genuine one and not a copy or fake app. When you are surfing on Internet, one can still attempt to find out if a website is  authentic or not. For websites we have the certificates, secure lock sign, complete URL etc. to help us know that the website is genuine and secure, is there an equivalent in Android App world? As a user when I go to settings/App Info, all I can see is this: See that there is no direct way to check an app's authenticity. For apps installed from Google play store, we do see a link to that app on playstore. But that's all there's no other info or validity proof. How can one reliably check then that the app is authentic? Also, how do Android apps check that the other apps on the device that they are partnering with or exchanging infomation are authentic? The answer lies in . signing certificate info For such security reasons, all apps on Android need to be duly signed before they can be deployed on playstore. So, having talked about why we need App Signing. Let's dive deep into what is app signing, how can it be done and how does it functions to ensure authenticity of the app? 1. What is App Signing? Applications are signed inmost operating systems. According to Android Documentation: "Application signing allows developers to identify the author of the application and to update their application without creating complicated interfaces and permissions. Developers know their application is provided, unmodified, to the Android device; and developers can be held accountable for behavior of their application." On Android, application signing is the first step to placing an application in its Application Sandbox. The signed application certificate defines which user ID is associated with which application; different applications run under different user IDs. Application signing ensures that one application cannot access any other application except through well-defined IPC 2. How can an app be signed? Android provides code signing using self-signed certificates that developers can generate without external assistance or permission. Applications do not have to be signed by a central authority. Android supports three application signing schemes: v1 scheme: based on JAR signing This is based on Signed JAR. the thing to note here is that v1 signatures do not protect some parts of the APK, such as ZIP metadata. The APK verifier needs to process lots of untrusted (not yet verified) data structures and then discard data not covered by the signatures. This offers a sizeable attack surface. Moreover, the APK verifier must uncompress all compressed entries, consuming more time and memory. To address these issues, Android 7.0 introduced APK Signature Scheme v2. v2 scheme: APK Signature Scheme v2 , which was introduced in Android 7.0 & v3 scheme: APK Signature Scheme v3 , which was introduced in Android 9 Devices running Android 7.0 and later support APK signature scheme v2 (v2 scheme) and later. (v2 scheme was updated to v3 in Android P to include additional information in the signing block, but otherwise works the same.) The contents of the APK are hashed and signed, then the resulting APK Signing Block is inserted into the APK. Apps can be very simply signed by Android Studio options or command line. Open Android Studio, go to Build > Generate Signed APK. You can follow steps put here : https://developer.android.com/studio/publish/app-signing#sign-apk to generate a signed key. There are options when you can opt for Google Playstore signing every release. Check out that link. Simple commands to generate a key and view the contents are as below: Generate: keytool -genkey -v -keystore <keystorealias> -storepass <keyStorePassword> -alias <keyAlias> -keypass <keyPassword>  -keyalg RSA -keysize -validity 2048 30000 View: keytool -list -v -keystore <keystorealias> -alias <keyAlias> -storepass <keyStorePassword> -keypass <keyPassword> : Replace the bold italic variables with actual values. Setup the values for algorithm to be used to generate the key, keysize and validity (in days). as per your use case. PS Also, check out APKSigner and ZipAlign tools that come handy (not covering them in this post but they're worth exploring). 3. How can an applications signing info be checked through code? Something like this can be done. public boolean validateAppSignature(Context context)  throws NameNotFoundException {
PackageInfo packageInfo = context.getPackageManager().getPackageInfo(				getPackageName(), PackageManager.GET_SIGNATURES); (Signature signature : packageInfo.signatures) 
{ sha1 = getSHA1(signature.toByteArray()); APP_SIGNATURE.equals(sha1);} ;} //note sample just checks the first signature for // SHA1 the signature String // check is matches hardcoded value return return false When an application (APK file) is installed onto an Android device, the Package Manager verifies that the APK has been properly signed with the certificate included in that APK. If the certificate (or, more accurately, the public key in the certificate) matches the key used to sign any other APK on the device, the new APK has the option to specify in the manifest that it will share a UID with the other similarly-signed APKs. What might happen if devs private signing key gets lost? The older app cannot be updated! It results into a new package name & a new certificate altogether. As an example: A  private application signing key was lost or compromised for Authenticator app, which received an update that changed its package name from to in an update few years ago. Due to this change, all subsequent Authenticator app updates could only be issued under the new package name–with the new signature generated by the new private signing key. com.google.android.apps.authenticator com.google.android.apps.authenticator2 Although, recently Google has also added support for "rolling keys" that might save devs some stress in such troublesome situations. So that's all for this post folks, hope you found it resourceful. Signing is a crucial scenario that needs to be well understood in order to understand the overall security landscape of Android and hence this first post on the topic. We'll dive deeper into related security concepts in the coming posts soon. Let's learn about TEE? What say? Let me know how you liked this post. Please share/like/subscribe if you like it so. For more engaging discussions let's connect on . Twitter Take care & keep hacking! <3

How To Check Whether The Mobile App On Your Phone is Authentic or Not

Swoft is a PHP high performance microservice co-routine framework. It has been published for many years and has become the best choice for php. It can be like Go, built-in co-routine web server and common co-routine client and is resident in memory, independent of traditional PHP-FPM. There are similar Go language operations, similar to the Spring Cloud framework flexible annotations. Github https://github.com/swoft-cloud/swoft Feature Full Co-routine Framework Swoft is first PHP resident in memory annotation framework, with Spring Boot conventions larger than the configuration design concept, with a set of development specifications. AOP AOP is an object oriented programming that makes it easier to decouple business code, improve code quality, and increase code reusability. { $start; { ->start = microtime( );
    } {
        $method = $joinPoint->getMethod();
        $after = microtime( );
        $runtime = ($after - ->start) * ; ;
    }
} /**
 * (order=1)
 * (include={"App\Http\Controller\TestExecTimeController"})
 */ @Aspect @PointBean class CalcExecTimeAspect protected /**
     * ()
     */ @Before public function before () $this true /**
     * ()
     */ @After public function after (JoinPoint $joinPoint) true $this 1000 echo "{$method} cost: {$runtime}ms\n" Http Service Http service is simple and flexible, only to use @Controller() and @RequestMapping(route="index") annotations to define service. { { ;
    }
} /**
 * ()
 */ @Controller class IndexController /**
     * (route="index")
     */ @RequestMapping public : function index () string return "test" WebSocket service Swoft provides a complete Websocket for developers to quickly build service { {
        server()->push($request->getFd(), );
    }
} /**
 * (
 *     "/chat",
 *     messageParser=TokenTextParser::class,
 *     controllers={HomeController::class}
 * )
 */ @WsModule class ChatModule /**
     * ()
     * Request $request
     * int     $fd
     */ @OnOpen @param @param public : function onOpen (Request $request, int $fd) void "Opened, welcome!(FD: $fd)" RPC Service Swoft RPC can be called like a native function as Dubbo. { $userService; {
        $result  = ->userService->getList( , ); [$result];
    }
} /**
 * ()
 */ @Controller class RpcController /**
     * (pool="user.pool", version="1.0")
     *
     * UserInterface
     */ @Reference @var private /**
     * ("getList")
     *
     * array
     */ @RequestMapping @return public : function getList () array $this 12 'type' return TCP Service Swoft also provides feature-rich TCP service support. (strict_types= ); \ \ ; \ \ \ \ \ ; \ \ \ \ \ ; \ \ \ ; \ \ \ ; { { $str = $request->getPackage()->getDataString();

        $response->setData( . $str);
    }
} <?php declare 1 namespace App Tcp Controller use Swoft Tcp Server Annotation Mapping TcpController use Swoft Tcp Server Annotation Mapping TcpMapping use Swoft Tcp Server Request use Swoft Tcp Server Response /**
 * Class DemoController
 *
 * ()
 */ @TcpController class DemoController /**
     * ("echo", root=true)
     * Request  $request
     * Response $response
     */ @TcpMapping @param @param public : function echo (Request $request, Response $response) void // $str = $request->getRawData(); '[echo]hi, we received your message: ' Connection pool Swoft is simple to define a high-performance connection pool with like this: [ => [ => \Swoft\xxx\Pool::class, => , => , => , => , => ,
    ]
]; return 'xxx.pool' 'class' 'minActive' 10 'maxActive' 20 'maxWait' 0 'maxWaitTime' 0 'maxIdleTime' 60 Compatible with Laravel ORM Swoft database is highly compatible with Laravel ORM, It’s easy for PHP developer to use in Swoft. $user = User::new();
$user->setName( );
$user->setSex( );
$user->setDesc( );
$user->setAge(mt_rand( , ));
$user->save();
$id = $user->getId(); $users = DB::table( )->get(); ($users $user) { $user->name;
} DB::beginTransaction();
$user = User::find($id);
$user->update([ => $id]);

DB::beginTransaction();
User::find($id)->update([ => ]);
DB::rollBack();

DB::commit(); // Model 'name' 1 'this my desc' 1 100 // Query 'user' foreach as echo // Transaction 'name' 'name' 'sakuraovq' Microservice Swoft provides a set of quick build microservice governance components, it’s easy for developers to use. Service Registration and DiscoveryService BrokerCentralized ConfigurationService Throttling ability { { ( );
    } {
        $uri = $request->getUriPath(); [ , $uri];
    }
} /**
 * ()
 */ @Bean class Test /**
     * (fallback="funcFallback")
     *
     * string
     * Exception
     */ @Breaker @return @throws public : function func () string // Do something throw new Exception 'Breaker exception' /**
     * ()
     * (key="request.getUriPath()")
     *
     * Request $request
     *
     * array
     */ @RequestMapping @RateLimiter @param @return public : function requestLimiter (Request $request) array return 'requestLimiter' Github https://github.com/swoft-cloud/swoft

Evaluating Swoft — A PHP Microservices Framework

Creating a ride booking app with React Native

We all know, how cool an android app looks, when it can detect our face or track if our eyes are closed or open. It becomes way more cooler when the app can even detect if we are smiling, reading on phone or not looking at it. Well… I believe.. whatever does appeals me, simply makes me build it! Sorry, tried a “The Dark Knight” pun :) So let us make an android eye tracking and face detection app using Google Vision API. From Google: enables developers to understand the content of an image by encapsulating powerful machine learning models in an easy-to-use REST API. It quickly classifies images into thousands of categories (such as, “sailboat”), detects individual objects and faces within images, and reads printed words contained within images. You can build metadata on your image catalog, moderate offensive content, or enable new marketing scenarios through image sentiment analysis. Cloud Vision API Here we will be making an android app that can track our face, and detect if our eyes are closed or open. Sounds cool? It’s not much hard even. So let’s dive into understanding how this would work in a simple flow chart. Our android app → Uses Camera → Detects face → Starts some operation → Checks if eyes of the viewer is open → Continues the operation → If eyes are closed → Stop the operation. This is the basic idea for our android app. For learning purposes we will just be doing this much in our app, but much more advanced features can be added using Google Vision API. The operation that we’d be carrying out in our app is playing a simple video. Well, I chose a video from PIXAR Animation . You can find the full source code for the app here. Start a in your IDE like Android Studio or any other. new Android project Go to the and add the following permission, as for this app we need the permission to use front Camera of the device. manifest file <uses-permission android:name="android.permission.CAMERA" /> We also have to import in our android app, so head to the Build Gradle for app, mostly written as . Google Vision API build.gradle (Module: app) You will see a file with text that resembles this: apply plugin: 'com.android.application' android {compileSdkVersion 28defaultConfig {applicationId "com.pd.trackeye"minSdkVersion 15targetSdkVersion 28versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'}}} dependencies {implementation fileTree(dir: 'libs', include: ['*.jar'])implementation 'com.android.support:appcompat-v7:28.0.0'implementation 'com.android.support.constraint:constraint-layout:1.1.3'testImplementation 'junit:junit:4.12'androidTestImplementation 'com.android.support.test🏃1.0.2'androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'implementation 'com.google.android.gms:play-services:12.0.1'} If it looks like this, then you’re at the correct file destination. C opy the whole code above and paste it on that. You’ll get a top-bar pop-up stating to sync files. Click on and wait for the project to build. Sync Now After you get , you can move ahead. all green OK signs in your Build log Now let’s write some android code that will do the magic. Head to the of the file, and declare following variables, like this: MainActivity private static final String = "MainActivity";VideoView videoView;EditText textView; TAG //For looking logsArrayAdapter adapter;ArrayList<String> list = new ArrayList<>(); CameraSource cameraSource; These lines of code should be beneath the line that states something like this: public class MainActivity extends AppCompatActivity { Now let’s do the magic code inside the that you will see on the same file. onCreate() method Let’s first add something in our code that n to add the android app, as without that our app will crash and not work. lets the user grant permissio if (ActivityCompat. (this, android.Manifest.permission. ) != PackageManager. ) {ActivityCompat. (this, new String[]{Manifest.permission. }, 1);Toast. (this, "Grant Permission and restart app", Toast. ).show();}else {videoView = findViewById(R.id. );textView = findViewById(R.id. );adapter = new ArrayAdapter<>(this,   android.R.layout. , list);videoView.setVideoURI(Uri. ("android.resource://" + getPackageName() + "/" + R.raw. ));videoView.start();createCameraSource();} checkSelfPermission CAMERA PERMISSION_GRANTED requestPermissions CAMERA makeText LENGTH_SHORT videoView textView simple_list_item_1 parse videoplayback Add the above code inside the method that we talked about above. **onCreate()** Now we should add the code that tracks the eyes using Google vision API. We will make a new class for that, named The code for the class looks like this: private **EyesTracker** . private class EyesTracker extends Tracker<Face> { private final float THRESHOLD = 0.75f;  

private EyesTracker() {  

}  

@Override  
public void onUpdate(Detector.Detections<Face> detections, Face face) {  
    if (face.getIsLeftEyeOpenProbability() > THRESHOLD || face.getIsRightEyeOpenProbability() > THRESHOLD) {  
        Log._i_(_TAG_, "onUpdate: Eyes Detected");  
        showStatus("Eyes Detected and open, so video continues");  
        if (!videoView.isPlaying())  
            videoView.start();  

    }  
    else {  
        if (videoView.isPlaying())  
            videoView.pause();  

        showStatus("Eyes Detected and closed, so video paused");  
    }  
}  

@Override  
public void onMissing(Detector.Detections<Face> detections) {  
    super.onMissing(detections);  
    showStatus("Face Not Detected yet!");  
}  

@Override  
public void onDone() {  
    super.onDone();  
} } Here is the reference to the video that is set to attribute in that is for the UI of the app. videoView VideoView activity_main.xml Now we can add the code that detects the user’s face in a new class named . The code will look something like this: private **FaceTrackerFactory** private class FaceTrackerFactory implements MultiProcessor.Factory<Face> { private FaceTrackerFactory() {  

}  

@Override  
public Tracker<Face> create(Face face) {  
    return new EyesTracker();  
} } public void createCameraSource() {FaceDetector detector = new FaceDetector.Builder(this).setTrackingEnabled(true).setClassificationType(FaceDetector. ).setMode(FaceDetector. ).build();detector.setProcessor(new MultiProcessor.Builder(new FaceTrackerFactory()).build()); ALL_CLASSIFICATIONS FAST_MODE cameraSource = new CameraSource.Builder(this, detector)  
        .setRequestedPreviewSize(1024, 768)  
        .setFacing(CameraSource._CAMERA\_FACING\_FRONT_)  
        .setRequestedFps(30.0f)  
        .build();  

try {  
    if (ActivityCompat._checkSelfPermission_(this, Manifest.permission._CAMERA_) != PackageManager._PERMISSION\_GRANTED_) {  
        // _TODO: Consider calling_            //    ActivityCompat#requestPermissions  
        // here to request the missing permissions, and then overriding  
        //   public void onRequestPermissionsResult(int requestCode, String\[\] permissions,  
        //                                          int\[\] grantResults)  
        // to handle the case where the user grants the permission. See the documentation  
        // for ActivityCompat#requestPermissions for more details.  
        return;  
    }  
    cameraSource.start();  
}  
catch (IOException e) {  
    e.printStackTrace();  
} } We also need to pause the video and end the video which we will take care in and methods of . onDestory() onPause() MainActivity Now let’s of the app. add some XML code for basic UI Head to the file that is named something like . Now just replace the code in it with the following code. activity_main.xml <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical"> <VideoView  
    android:layout\_width="match\_parent"  
    android:layout\_height="wrap\_content"  
    android:id="@+id/videoView"/>  

<EditText  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"  
    android:id="@+id/textView"  
    android:text="@string/face\_not\_found"  
    android:textSize="20sp"/> </LinearLayout> All this code does is add an to display the text which states what’s being detected and what’s not to user. And that plays the video for the user. EditText VideoView You can find the full source code for the app here. And that’s pretty much it. You’ve built your own eye tracking and face detecting android app. Everything done, looks like this: Eyes open Eyes closed Now go and show off !! Read my previous post about an android library that easily helps you customise Snackbar with very few lines of code. ChocoBar.

Stories, News & Mentions about GIFTPACK

Giftpack’s Stories on HackerNoon