DEV Community: Emilio Schepis

Developing Geonotes — Creating new notes — Ep. 4

Emilio Schepis — Fri, 06 Aug 2021 19:56:47 +0000

Now that we can display notes in a pretty way (read more in Episode 3), it is time to let the users create their own notes.

This will mainly be a technical post, since much of the changes are business logic related.

🔧 Custom business logic with Actions

As I anticipated in the last episode, I decided to only let users create notes by invoking a Hasura Action.

What this does, is allow you to have a GraphQL interface (like you would have for database queries and mutations) to a serverless function.

In Geonotes' case, the actions will call a Firebase Cloud Function.

The first step is to define the action's input and output in the Hasura console.

You can then define which endpoint is responsible for handling the action.

🔥 Handling the action with a Cloud Function

The action sends a POST request to the specified endpoint, so the function can extract session variables and the various parameters passed as input.

To continue the type-safety first approach I created a small helper that, before running any code, verifies the authenticity of the request and that the parameters are valid. Source

export const actionWrapper =
  <I, O>(handler: ActionHandler<I, O>) =>
  async (req: functions.https.Request, res: functions.Response<O | ErrorOutput>): Promise<void> => {
    // ...

    const variables = req.body.session_variables;
    const userId = variables["x-hasura-user-id"] as string;

    if (!userId) {
      res.status(400).send({
        code: "user-required",
        message: 'Actions should be performed by a specific user. No "x-hasura-user-id" was provided.',
      });
      return;
    }

    const sendOutput = (output: O) => {
      res.status(200).send(output);
      return;
    };

    const sendError = (error: ErrorOutput) => {
      res.status(error.status ?? 400).send(error);
      return;
    };

    return handler(userId, req.body.input, sendOutput, sendError);
  };

Using this wrapper, actions now have a much simpler interface for sending the responses or errors in the supported format. Source

const handler: Action = async (userId, params, sendOutput, sendError) => // ...

The action is responsible of actually mutating the database with higher permissions, and then returning the id of the just created note.

⭐️ The result

I quickly wired up an empty screen with a button to the map screen, so that notes can be created wherever the user is. For now, the text is static as I only needed to test the business logic.

Watch a short video of a note being created

🚧 Next steps

As I said in one of the first episodes, notes can only be created by signed in users. Right now, I created a quick account just to have the permissions to invoke the action.

The next step is to add an actual authentication flow to the app, so that different users can create their own notes.

🎙 How to follow the project

I'll be posting updates throughout the development process and as I learn new thing regarding development, design, and marketing.

If you'd like to have even more real-time updates you can

Follow me on Twitter @emilioschepis
Checkout the public GitHub app repository and backend repository

Developing Geonotes — Animations and interactions — Ep. 3

Emilio Schepis — Wed, 04 Aug 2021 09:13:48 +0000

With the notes being displayed around the user that we discussed in Episode 2, it's now time to add a bit of interesting UI and effects.

This will be a bit of a shorter episode, since all the changes were made in a few hours after work.

✨ The note-opening effect

I decided to move as much information outside the marker callout as possible. It now only shows the first few words of the note and a "view" call to action.

When the user taps on the callout, the note itself appears like a modal with a dark transparent background. The modal presents a post-it-like note with the content in the center. Tapping on the note starts a flip animation just like you were watching the back of the note, where the username, time and date are displayed.

I used React Native Modal to achieve the modal effect, and Reanimated 2 for the flip effect.

I haven't played much with animations before, but the API seems very straightforward! I also took a lot of inspiration from this post.

🕸 Taking advantage of GraphQL

Using GraphQL with Hasura allowed me to make the notes-around-me query even lighter by removing information about the user and the creation date without having to modify any backend code.

I then added a new query that fetches all the data of a single note by passing the id. Source

query Note($id: uuid!) {
  note: note_by_pk(id: $id) {
    id
    content
    createdAt: created_at
    user {
      username
    }
  }
}

⭐️ The result

In the end I was able to achieve this nice-looking effect!

Front	Animating	Back

And here's the animation in action!

🚧 Next steps

The next step to tackle will be a big one: creating a new note. I want to implement it using Hasura Actions right away, to have more control over the business logic and to perform custom checks!

🎙 How to follow the project

I'll be posting updates throughout the development process and as I learn new thing regarding development, design, and marketing.

If you'd like to have even more real-time updates you can

Follow me on Twitter @emilioschepis
Checkout the public GitHub app repository and backend repository

Developing Geonotes — Maps and the PostGIS extension — Ep. 2

Emilio Schepis — Tue, 03 Aug 2021 05:36:23 +0000

With the local infrastructure completed in Episode 1, it is time to add the main map to Geonotes.

📱 Adding a map to the main screen

On the client, the first step was to add a map to the main screen. Fortunately, Expo supports a library out of the box: React Native Maps.

With this library, a MapKit instance is created on iOS, while Android uses Google Maps. The props interface is the same across both platforms.

One thing I really like about RNM is that it has built-in support for requesting permissions. Originally I thought I'd do it with Expo Location but so far I haven't felt the need to switch to a dedicated location library.

RNM is able to request the current location of the user, and then display it directly on the map. Adding the followsUserLocation prop and blocking the various movements, I was able to center the map on the user and update the visible region when they move.

This also allows me to listen to the onRegionChangeComplete event and extract the current location.

In order not to perform too many queries against the database, the current location is only updated when the user moves more than a given distance from the last location.

🌍 Measuring the distance client-side and in queries

To measure the distance between the last and the current location of the user, I decided to use the "Equirectangular approximation" that should have plenty of precision over relatively small distances.

The implementation is as follows Source:

const R = 6371e3; // Earth's radius
const lat1 = (location1.latitude * Math.PI) / 180;
const lat2 = (location2.latitude * Math.PI) / 180;
const lon1 = (location1.longitude * Math.PI) / 180;
const lon2 = (location2.longitude * Math.PI) / 180;

const deltaLat = lat2 - lat1;
const deltaLon = lon2 - lon1;

const x = deltaLon * Math.cos((lat1 + lat2) / 2);
const y = deltaLat;

return Math.sqrt(x * x + y * y) * R;

On the server, however, I needed something more battle-tested and performant.

Since Hasura uses PostgreSQL as a database, I decided to use the PostGIS extension. Another option I have considered is the GeoHash algorithm, but PostGIS has a much better integration with the current stack.

With PostGIS enabled, I set the "location" column in the "note" table as geography, which allows me to perform queries like this Source:

query Notes($latitude: Float!, $longitude: Float!, $distance: Float! = 100) {
  notes: note(
    where: {
      location: {
        _st_d_within: {
          distance: $distance
          from: { type: "Point", coordinates: [$longitude, $latitude] }
        }
      }
    }
  ) {
    id
    content
    location
  }
}

⭐️ The result

Ultimately, I was able to query notes in a range around the user, and have those notes update as the user moved.

First location	Second location

🚧 Next steps

Now it is time to work a bit on the presentation of the various notes. My current plan is to show a small callout when a note is tapped, and then display a bottom sheet with the full information / actions.

🎙 How to follow the project

I'll be posting updates throughout the development process and as I learn new thing regarding development, design, and marketing.

If you'd like to have even more real-time updates you can

Follow me on Twitter @emilioschepis
Checkout the public GitHub app repository and backend repository

Developing Geonotes — Adding authentication and connecting to GraphQL — Ep. 1

Emilio Schepis — Sun, 01 Aug 2021 16:58:56 +0000

After writing Episode 0 I started working on Geonotes right away.

The goal was to setup a solid environment to serve as foundation for all future work.

🏠 Local by default

To increase the speed of iteration on all features and to have more control over all of the infrastructure I decided to go with a local-first approach.

Local Expo

This is the default way of working with Expo. Starting the project launches the React Native packager on the local machine and all of the devices / simulators connect directly to it.

Local Firebase

One of the features I love most about Firebase (and that I would really like to see more PaaS providers offering) is a suite of local emulators.

These emulators have support for basically all Firebase services. Local apps can connect to the authentication emulator to create accounts, sign in and generate tokens. There is no difference between connecting to an actual Firebase project and a local environment.*

Cloud functions are also emulated on the host machine, resulting in very fast execution times that are great for iterating on the different functionalities.

*: the JWT token provided by the Auth emulator is not signed, so Hasura does not accept it as a form of authentication. There is a GitHub issue on accepting the "none" algorithm, but for the moment I had to implement a local-only HS256 signing.

Local Hasura

Hasura works great with a local environment. You can download a Docker compose file directly from their repository and it will take care of setting up a local PostgreSQL database and the GraphQL engine.

Using the Hasura CLI I can launch a local instance of the console. Working from this console has the benefit of automatically generating migrations and metadata that can be later applied to the production environment. I'll talk more about this once I set up the various build pipelines.

🔐 Getting started with authentication

Authentication will be a crucial part of the application infrastructure, and ideally every access should be at least partially authenticated.

From the experience I've gained with several past apps, asking the user to create an account before being able to use the app once leads to a very low retention rate — and for good reason!

This time I decided to use an hybrid approach. I still don't want to allow unauthenticated requests to my backend, since it can be easily exploited by people trying to bring the platform down. While this should be heavily mitigated by hosting everything on massive public cloud providers (Google and Heroku, or AWS), I'd still like to have this extra layer of security.

For this reason, any user that opens the app for the first time automatically signs in with an anonymous account. This auth provider receives fewer grants (for example, they can only read notes and not create their own) and the user can then decide to create a "regular" account to access all of the features.

Client side auth

On the client, when no user is authenticated, an anonymous sign in is invoked. Source

firebase.auth().onAuthStateChanged(async (user) => {
  if (user === null) {
    return firebase.auth().signInAnonymously();
  }

  dispatch({
    type: "setAuthenticated",
    user: new User(user.uid, user.email ?? null, user.isAnonymous),
  });
});

Server side auth

On the server, when a new user is created (either anonymously or with a provider), the appropriate claims are applied. Source

const isAnonymous = user.providerData.length === 0;

const customUserClaims = {
  "https://hasura.io/jwt/claims": {
    "x-hasura-default-role": isAnonymous ? "anonymous" : "user",
    "x-hasura-allowed-roles": isAnonymous ? ["anonymous"] : ["user"],
    "x-hasura-user-id": user.uid,
  },
};

await admin.auth().setCustomUserClaims(user.uid, customUserClaims);

☂️ Type-safety first

As I anticipated in Episode 0, I want to make sure that as much code as possible is both type-safe and autogenerated from the database schema. This will result in the code being more reliable and standardized.

For this reason, both client- and server-side code have their GraphQL interface autogenerated by GraphQL Code Generator.

I decided to keep the generated files in version control. A lot of code will depend on the generated interface to work properly, and I prefer it to use a fixed version rather than running the codegen on-demand.

The generator's plugins allowed me to also create type-safe hooks for the app and a custom sdk for the cloud functions.

The code generation is launched only in the local environment, that downloads the current schema from the Hasura instance. To better leverage Hasura's access control system, the app receives only the schema that applies to users, while the cloud functions receive the schema that applies to the "backend" role.

schema:
  - "http://localhost:8080/v1/graphql":
      headers:
        "X-Hasura-Admin-Secret": ${HASURA_GRAPHQL_ADMIN_SECRET}
        "X-Hasura-Role": "backend"
documents:
  - src/graphql/**/queries.graphql
  - src/graphql/**/mutations.graphql

🚧 Next steps

Next, I'll be working on adding a navigation scaffolding to the app, and on integrating the first empty map.

With everything else in place, I should be able to show custom markers on the app depending on the notes saved on the database.

🎙 How to follow the project

I'll be posting updates throughout the development process and as I learn new thing regarding development, design, and marketing.

If you'd like to have even more real-time updates you can

Follow me on Twitter @emilioschepis
Checkout the public GitHub app repository and backend repository

Developing Geonotes, a location-based app made with Expo React Native, Hasura GraphQL, and Firebase — Ep. 0

Emilio Schepis — Sun, 01 Aug 2021 06:18:56 +0000

It's in the nature of many developers to come up with a side project every once in a while. Be it to keep up with the latest changes in the industry, to scratch a creative itch, or to create the next big thing.

For me, this time, the reason is to explore new platforms in a production-environment while hopefully creating something that can make people feel more connected to others and to the places they visit.

🗺 What is Geonotes?

Geonotes is a location-based multi-platform mobile app where users can leave little text notes wherever they are, and read all the notes that other users have left around them.

I can see this working especially well when visiting a beautiful place, leaving a note where you spent a holiday with your loved ones or to save the time and place of a special event. Even better, reading the notes left by other people can make us feel closer to what we're experiencing and the world around us.

🔧 Some technical details

The application will be developed with the React Native framework, using Expo so that I can focus more on the actual code and less on the platform-specific code.

With Expo I'll be able to distribute early versions of the application more easily, and ideally I'll be able to use the upcoming Expo's EAS to create a more robust build & delivery pipeline later down the road.

The backend will be built on the open-source Hasura GraphQL engine and will be initially hosted on Heroku.

Authentication, file storage and serverless functions will be provided by the Firebase platform that I have used in the past for many side projects.

I am a firm believer in the benefits of a strongly-typed approach. Both the frontend and the backend will be in Node.js and written in TypeScript.

Hasura already does a fantastic job in providing a stable and type-safe GraphQL interface to the underlying PostgreSQL database, and I want to take further advantage of it by having all of the client code be auto-generated directly from the API's schema. I'll use GraphQL Code Generator for that.

To connect to the API I'll use the Apollo client in the application and the simpler GraphQL request library in the serverless functions.

🚧 The first few steps

My idea for this project is to build it completely in the open. This means public GitHub repositories and written updates whenever the project reaches any big or small milestones. I really hope you'll be along for the ride.

The first step will be to create a proof of concept to validate early my choice of technologies and platforms.

To keep track of the tasks I'll be using Notion's Kanban feature.

🎙 How to follow the project

I'll be posting updates throughout the development process and as I learn new thing regarding development, design, and marketing.

If you'd like to have even more real-time updates you can

Follow me on Twitter @emilioschepis
Checkout the public GitHub app repository and backend repository

Adding continuous integration to a Flutter project with GitHub Actions

Emilio Schepis — Sat, 14 Nov 2020 11:05:30 +0000

Introduction

Whenever you start a new project, either by yourself or as part of a team, it is important to define a set of rules to adhere to and to select tools that can automate the process of detecting if and when those rules are broken.

One such tool is the recently-announced GitHub Actions.

In this post I will show you how to setup a workflow to analyze, lint and test your Flutter project.

Getting started

A workflow is a set of steps that are executed whenever an event happens on your repository. Common triggers for these actions are pushes or pull requests on a given branch.

Workflows must be stored in the .github/workflows/ directory in your project. A single workflow is defined by a YAML file that can be named however we want.

For more information about Actions I highly recommend going through the extensive documentation.

A really nice feature of GitHub Actions is its generous free tier: you can run actions on Linux machines for up to 2000 minutes / month for free. If your project is open source (on a public repo), Actions are always free.

Setting up a CI workflow for Flutter

Step 1 - Setting up Pedantic on your project (Optional)

Pedantic is a Dart package created by Google that provides the extensive set of strict rules that Google itself uses in their projects.

You can add it as a development dependency to your pubspec.yaml file.

dev_dependencies:
  pedantic: ^1.9.0 # check the latest version on the package's page

We can then define the set of rules that Pedantic applies adding a analysis_options.yaml to the root of our project.
To use Google's rules without overriding anything, the file is as straightforward as one line.
Since we will be analyzing the project in our CI environment, we will add three more lines.

include: package:pedantic/analysis_options.1.9.0.yaml

analyzer:
  exclude:
    - flutter/** # Do not analyze the Flutter repository in the CI environment

This is needed because the GitHub Action will download a copy of the Flutter framework in the same directory of our project, making the Analysis step check the whole Flutter project, dramatically increasing the action duration.

Step 2 - Setting up the CI workflow file

Create a new workflow file in the workflows directory. For example you might create .github/workflows/ci.yaml.

name: CI

on:
  push:
    branches: [ main ]

jobs:
  workflow:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2 # (1)
      - name: Setup Flutter # (2)
        run: |
          git clone https://github.com/flutter/flutter.git --depth 1
          echo "$GITHUB_WORKSPACE/flutter/bin" >> $GITHUB_PATH
      - name: Run Checks # (3)
        run: |
          flutter pub get
          flutter format lib/** --set-exit-if-changed
          flutter analyze --no-pub
          flutter test --no-pub

Let's go through this file point by point:

This Action, provided by GitHub, clones our project on the workflow machine
This step clones the latest commit of the Flutter framework on the workflow machine and sets the PATH so that we can use flutter commands
- If you added Pedantic in Step 1, this is why we needed to exclude the flutter directory from the analysis
This step runs the actual checks on your code
- Downloads all of your project's dependencies
- Uses dartfmt to check your code's formatting (failing if it not properly formatted)
- Analyzes it with Pedantic (highlighting broken rules)
- Runs all tests (both unit tests and headless widget tests)

Result

Every push on the main branch will now trigger this CI action, providing quick and precise feedback on possible problems in the codebase.
You can enhance this simple workflow with anything you might want to track (adding code coverage, build steps for each platform, and so on).

Conclusion

Having an automated process that checks your project's health at every push can be invaluable, especially when paired with extensive tests.

I really hope this will prove useful in your Flutter project.

Thank you for reading!

Adding a statically-generated RSS feed to a Next.js 9.3+ Blog

Emilio Schepis — Sat, 12 Sep 2020 22:43:58 +0000

Learn how to expose the required files to make your blog RSS-compatible while mantaining full static generation on Next.js 9.3+.

Introduction

Today I updated my website to support RSS reader apps and services.

My goals were to:

Completely support RSS readers as defined by the W3C Feed Validation Service
Keep full static generation working
Make this a fully automatic step without modifying the build and / or bundle configurations

Generating the necessary XML

Note: I already have a method that parses Markdown files to extract metadata about my blog posts. Source

To implement this feature I created two functions: generateRssItem and generateRss.

The first function generates the necessary XML to describe a single blog post according to the specification:

const generateRssItem = (post: Post): string => `
  <item>
    <guid>https://emilioschepis.com/blog/${post.id}</guid>
    <title>${post.title}</title>
    <link>https://emilioschepis.com/blog/${post.id}</link>
    <description>${post.description}</description>
    <pubDate>${new Date(post.date).toUTCString()}</pubDate>
  </item>
`;

The second function generates the necessary XML to describe the whole "channel":

const generateRss = (posts: Post[]): string => `
  <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
      <title>Blog - Emilio Schepis</title>
      <link>https://emilioschepis.com/blog</link>
      <description>[...]</description>
      <language>en</language>
      <lastBuildDate>${new Date(posts[0].date).toUTCString()}</lastBuildDate>
      <atom:link href="https://emilioschepis.com/rss.xml" rel="self" type="application/rss+xml"/>
      ${posts.map(generateRssItem).join('')}
    </channel>
  </rss>
`;

Adding the generated XML to the website

While the previous step was fairly straightforward, I could not find a complete explanation on how to add the generated XML to the website's files.

Existing tutorials either exposed the feed as the result of an API call (which would recalculate the XML each time server-side) or modified Next.js's Webpack configuration or the build function itself.

My solution was to generate the XML in the getStaticProps method of my blog page.

Since this page is statically generated, the method is only executed while building the project itself.
Another benefit of this choice is that the Markdown files are only parsed once, as the getStaticProps needs to extract metadata to build the page itself.

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = getPosts().sort((a, b) => b.date.localeCompare(a.date));
  const rss = generateRss(posts);

  fs.writeFileSync('./public/rss.xml', rss);

  return {
    props: {
      posts,
    },
  };
};

Note: the XML file can be named however you prefer, but it must be written in the public directory.

The last step is to add a link to the RSS feed inside your <head> tag. I added mine in the _document.tsx file to make it available to all pages.

<link
  rel="alternate"
  type="application/rss+xml"
  title="RSS feed for blog posts"
  href="https://emilioschepis.com/rss.xml"
/>

After deploying these changes to your hosting platform you should check that the resulting feed is valid. You can do so using W3C's Feed Validation Service.

Outcome and conclusion

You can find the RSS feed of my blog posts here. The commit for this feature can be found here.

I hope this post will be useful to developers trying to add this feature to their own Next.js websites.

Thank you for reading!

Learning the Go programming language by creating the Amanuense bot

Emilio Schepis — Fri, 24 Jul 2020 10:00:41 +0000

Introduction

Recently I've felt the urge to learn a new programming language.

I believe that learning a new programming language is a great opportunity to see common problems in a different light, solving them in new ways and learning something that can then be applied to languages you already know.

The idea itself comes from The Pragmatic Programmer book and has been discussed by many different programmers and authors.

The Go programming language

After reading about different languages for a while I decided to learn the basics of the Go language.

What inspired me to try this language is its philosophy that favours simplicity over (perceived) completeness, and its concurrency model.

In Go there almost always is only one way of achieving the desired behavior, and that alleviates the cognitive load of deciding how to implement a specific functionality.

This felt a bit weird at first, especially as I always try to write code in a functional style. Using a plain old for-loop instead of a map of for-each took some time to get used to.

This, however, is perfectly in line with their philosophy: I can now read any program written in Go and know how and why each portion of code is written the way it is.

Another fundamental difference is the absence of exceptions. Code that can fail usually returns two values (the result and the error). Using the word "values" is not accidental: errors in Golang are simply values. There is no throwing or catching.

I believe this error handling method will still take some time for me to get used to. Fortunately, I've used a similar structure in the past: Swift's Result type and, before that, handling a tuple of values as the return type of a closure.

Learning the basics

When learning a new programming language I usually follow basic tutorials until I feel confident enough to write code from scratch, and at the same time I try to watch talks and demos about the language to see how expert programmers handle common and uncommon scenarios.

For the first few days I followed Jon Calhoun's
Gophercises, and I absolutely recommend them. It is difficult to come up with so many different projects on our own, and the Gophercises offer very practical advice on how to handle scenarios that come up often while developing a Go program.

After going through the first six exercises of the course I felt ready to write my own program.

Creating the bot

For this project I decided that I wanted to build something using Google's serverless Cloud Functions.

I found out about Google's Speech-to-Text technology, and I knew what I wanted to use it for: a Telegram bot that could transcribe voice messages so that I could read them without interrupting whatever I was listening to.

The bot's name is Amanuense, which is Italian for Amanuensis or Scribe.

The first step to create a Go project is to initialize a module. This is useful even if you're not publishing your code as explained in How to Write Go Code.

Doing so creates the go.mod and go.sum. If you're familiar with NodeJS, you can think of these files as package.json and its lockfile.

Then, I had to add the external dependencies through the go get command: cloud.google.com/go and github.com/go-telegram-bot-api/telegram-bot-api.

Once I finished writing the code for the bot, I simply set up a Telegram webhook to call my Cloud Function with data about the message.

My experience

My experience with Go has been very positive. I have not had the chance to try concurrency-related features, but with this simple project I've been able to get used to the language's basic features and great tooling.

I've particularly enjoyed gofmt, the standard formatter that is automatically applied to every Go program, further reinforcing the simplicity of reading someone else's code.

Other languages' formatters are not as opinionated and are often built by third-parties, thus lowering consistency across different codebases.

Some code

func downloadVoiceMessage(bot *tgbotapi.BotAPI, voice *tgbotapi.Voice) ([]byte, error) {
    url, err := bot.GetFileDirectURL(voice.FileID)
    if err != nil {
        log.Printf("could not get voice file url: %v\n", err)
        return nil, err
    }

    resp, err := http.Get(url)
    if err != nil {
        log.Printf("could not download voice file: %v\n", err)
        return nil, err
    }

    return ioutil.ReadAll(resp.Body)
}

In this snippet you can see the idiomatic way of handling errors, both as the producer (L1, L5) and the consumer (L2, L8).

func transcribeVoice(data []byte) (*transcription, error) {
    // ...

    sr := extractSampleRate(data)

    sc, err := speech.NewClient(ctx)
    if err != nil {
        log.Printf("could not instantiate speech client: %v\n", err)
        return nil, err
    }
    defer sc.Close()

    // ...
}

In this snippet you can see how you can use methods exported by external dependencies. Methods are exported if their name starts with a capital letter.

The defer statement ensures that the speech client gets correctly closed regardless of how / where the function returns.

Next steps

I plan on continuing to learn Go and on using it in some of my side projects.
The next step I want to take is to get familiar with Go's testing suite.

In particular, I'd like to explore the concept of
table-driven tests.

Conclusion

This has been my first experience with the Go programming language.

I especially like the large collection of first-party tools and the "less is more" philosophy that seems to drive the language design since its origins.

If you want to take a look at the Amanuense code you can find it here.

If you want to use the bot and you speak Italian you can find it here. Go's Speech-to-Text library still does not support multiple languages, but I'll make sure to update the bot once that feature is available.

If you are interested in the language I recommend reading the docs and checking out some online resources like the talks on the Gopher Academy, the videos on justforfunc and TutorialEdge, and the Gophercises.

Thank you for reading!

How I used SwiftUI to create Devui, a companion app for DEV authors

Emilio Schepis — Thu, 16 Apr 2020 16:36:40 +0000

1. Introduction

Hi, my name is Emilio. I'm a software developer living in Milan, Italy.

For a few months now I have been thinking about starting to write about software development, new technologies and my personal journey as a developer.

Last year I completed the 100 Days of SwiftUI journey, and I've been thinking about using it to create an app that I could share with the world ever since.

My goal was to create a simple app that would use all the latest technologies in the iOS development world, the best practices I learned in the past few months, and that could be a good "platform citizen".

Also, I wanted it to be completely open source.

2. The app

Meet Devui, a companion app for DEV authors.

Devui shows you the available statistics for all your posts: page views, positive reactions and number of comments.

I've been developing it in my free time over the past week, and now I think I've reached a nice MVP that features pagination, caching, system logging, dark mode support, first-class accessibility and more.

Do you write on DEV? Would you like to try Devui to keep an eye on your articles?

📲 You can join the public TestFlight beta here.

3. Show me some code!

This app utilizes the brand new Combine framework to handle every aspect of the application flow with a reactive approach.

All network requests expose publishers that can be observed, manipulated and then used to define the state of the application at any given time.

// DEVService.swift
//
return session.dataTaskPublisher(for: request)
    .tryMap({ result -> Data in
        // ...
    })
    .decode(type: Profile.self, decoder: decoder)
    .mapError({ (error: Error) -> NetworkError in
        // ...
    })
    .handleEvents(receiveOutput: { profile in
        self.profileCache.insert(profile, forKey: cacheKey)
    })
    .receive(on: DispatchQueue.main)
    .eraseToAnyPublisher()

This, combined with the declarative nature of the SwiftUI framework, allows the entire program to always be in a well-defined and deterministic state.

// ArticlesListViewModel.swift
//
devService.getArticles()
    .replaceError(with: [])
    .assign(to: \.articles, on: self)
    .store(in: &cancellables)

// ArticlesListView.swift
//
List(viewModel.articles) { article in
    ArticlesListItemView(article)
        .padding(.bottom)
        .onAppear { self.onArticleAppear(article) }
}

The UI utilizes system-defined colors to adapt not only to iOS 13's dark mode, but also to the numerous accessibility settings that can be enabled by users.

// ArticlesListItemView.swift
//
var tagsList: some View {
    ScrollView(.horizontal, showsIndicators: false) {
        // ...
        .font(.footnote)
        .foregroundColor(Color(UIColor.secondaryLabel))
        // ...
    }
}

SF Symbols are used throughout the various views to ensure consistency and familiarity with the entire Apple ecosystem.

// ArticlesListItemInteractionsView.swift
//
HStack(spacing: 4) {
    Image(systemName: "bubble.right.fill")
    Text(viewModel.commentsCount)
        .bold()
}

The only external dependency is Resolver, an ultralight dependency injection framework.

// AppDelegate+Injection.swift
//
extension Resolver {
    public static func registerServices() {
        register { AuthService() }.scope(application)
        register { DEVService() }.scope(application)
        register { ImagesService() }.scope(application)
    }
}

The combination of all these features allow for an incredibly small bundle size (less than 800KB as of 1.0.0) and fast performances for all devices.

4. Conclusion

Thank you for reading my first ever DEV article.

I hope you enjoyed a glimpse into this small project. I'm looking forward to reading your comments.

📲 If you'd like to join the public TestFlight beta you can do so here.

💻 If you'd like to take a look at the source code you can do so here.

🌍 If you'd like to help me translate this into as many languages as possible please open a PR or leave a comment.

Until the next one. 👋🏻

- Emilio