Forem: Sanket Sahu

Leveraging Flutter Starter to build a Weather App

Sanket Sahu — Wed, 06 Jan 2021 07:47:54 +0000

Hi there! Welcome to the third tutorial for building production-level apps with Flutter Starter. Flutter has been extremely popular with the dev community since its launch but you might have some trouble building production-level apps.

Flutter gives you a simple counter app upon installation which works if you are just starting out. However, in order to build a production-level app, you need State Management, API calls, Styleguide and common widgets. This code is frequently repeated in every project. Our idea was to write all the code and create the necessary files for all your projects. No more rewrites!

Check out our solution- Flutter Starter:

To learn more about this example, visit the Weather App page.

You can find the API URL in api-constants.dart:

Map<String, String> apiConstants = {
  "openweather": "https://api.openweathermap.org/data/2.5",
  "auth": "https://reqres.in/api"
};

We will use an open source Weather API.

In main.dart, we need a function getWeatherforCity. This will take the city name and fetch the weather details for that city.

This is a get method so we will call get from restapihandler as shown below:

static getWeatherforCity(String city) async {
    final response = await RestApiHandlerData.getData(
        '${apiConstants["openweather"]}/weather?q=$city&appid=$appId');
    return response;
  }

The API SDK is now a black box from which we will just call the method getWeatherforCity and it will return a JSON response.

Now that we have the data, it needs to be called, parsed and stored. Proceed to the shared folder which contains blocs, models and resources.

Resources:

The following code snippet in weather_ shows how API SDK functions will be called:

class WeatherApiRepository {
  Future fetchWeather(String city) async {
    final response = await ApiSdk.getWeatherforCity(city);
    return response;
  }
}

The weather_model.dart file in the models folder will store the data from the response:

class WeatherModel {
  dynamic lon;
  dynamic lat;
  String mainWeather;
  String description;
  String temp;
  String minTemp;
  String maxTemp;
  dynamic windSpeed;
  String countryCode;
  String cityName;
  String icon;

  WeatherModel.fromJson(Map<String, dynamic> parsedJson)
      : lon = parsedJson['coord']['lon'],
        lat = parsedJson['coord']['lat'],
        mainWeather = parsedJson['weather'][0]['main'],
        description = parsedJson['weather'][0]['description'],
                // Converted temperature to celcius, you can do this in **a*pp*** also.
        temp = (parsedJson['main']['temp'] - 273.15).toStringAsFixed(2),
        minTemp = (parsedJson['main']['temp_min'] - 273.15).toStringAsFixed(2),
        maxTemp = (parsedJson['main']['temp_max'] - 273.15).toStringAsFixed(2),
        windSpeed = parsedJson['wind']['speed'],
        countryCode = parsedJson['sys']['country'],
        cityName = parsedJson['name'],
        icon = parsedJson["weather"][0]["icon"];
}

In weather_bloc.dart file, we have used the resources to access the data and catch any errors:

final response = await weatherApiRepository.fetchWeather(event.city);
        if (response["cod"] != 200) {
          yield FailureState(
            message: response['message'],
            cod: response['cod'],
          );
        } else {
          WeatherModel weatherModel = WeatherModel.fromJson(response);
          yield SearchSuccessState(weatherModel: weatherModel);
        }
      } catch (e) {
        FailureState(message: e);
      }

In the main app, the WeatherPage widget needs to be wrapped with the Blocprovider widget:

body: BlocProvider(
    create: (context) => WeatherBloc(), 
    child: WeatherPage(),
),

Finally, use BlocBuilder in weather_page.dart to build the required widget according to the states:

BlocBuilder<WeatherBloc, WeatherStates>(builder: (context, state) {
            if (state is SearchSuccessState)
              return BuildWeather(
                weatherModel: state.weatherModel,
              );
            else if (state is InitialSuccessState)
              return Container();
            else if (state is LoadingState)
              return _buildLoadingScreen();
            else if (state is FailureState)
              return _buildErrorPage(state.message, state.cod);
            else
              return Container();
          }),

Your app should look like this:

Congrats! You just successfully built a production-ready Weather App. Interested in more? Take a look at our guide to building a Hacker News app. If you would like to learn more about Flutter Starter, please visit our official documentation.

This article was written by Sumant Raj and Madhav B. Edited by Kavya V.

Flutter Starter: Guide to Building a GitHub Repo List App

Sanket Sahu — Wed, 30 Dec 2020 09:36:58 +0000

As an app developer, you know that creating a production-level mobile app from scratch is time-consuming, tedious and costly. Look no further devs! Flutter Starter is a kit that will accelerate your creation process.

Bootstrap your projects with the required modules such as State Management, API calls, Styleguide, etc and build production-ready apps in a jiffy. Flutter Starter also enables you to handle everything at one place so you don't have to rewrite code. Here's a quick look at the kit:

To learn more about this example, visit the Github Repo List App page.

The API URL is in api-constants.dart. Go to your Github account and create a personal access token:

//For the graphql.
import 'package:graphql/client.dart';

OptimisticCache cache = OptimisticCache(
  dataIdFromObject: typenameDataIdFromObject,
);
GraphQLClient client() {
  final HttpLink _httpLink = HttpLink(
    uri: 'https://api.github.com/graphql',
  );

  final AuthLink _authLink = AuthLink(
    getToken: () => 'Bearer <YOUR GITHUB API TOKEN>',
  );

  final Link _link = _authLink.concat(_httpLink);

  return GraphQLClient(
    cache: cache,
    link: _link,
  );
}

//For the Rest
Map<String, String> apiConstants = {"auth": "https://reqres.in/api"};

The following code in graphql_handler.dart defines the method which will return the QueryResult for getRepositories method:

Future<QueryResult> getRepositories(int numOfRepositories) async {
    final WatchQueryOptions _options = WatchQueryOptions(
      documentNode: parseString(queries.readRepositories),
      variables: <String, dynamic>{
        'nRepositories': numOfRepositories,
      },
      pollInterval: 4,
      fetchResults: true,
    );

    return await client.query(_options);
  }

In main.dart, we need a function fetchGithubRepoGraphQl that takes numOfRespositories as the argument and gets the GitHub repositories as a response:

static fetchGithubRepoGraphQl(numOfRepositories) async {
    final GraphqlQlHandler githubRepository =
        GraphqlQlHandler(client: client());
    final response = await githubRepository.getRepositories(numOfRepositories);
    return response;
  }

The API SDK is now a black box from which we will just call the method fetchGithubRepoGraphQl which will return a JSON response.

Now that we have the data, it needs to be called, parsed and stored. Proceed to the shared folder which contains blocs, models and resources.

Resources:

In github_repo_resouces.dart, the getData function will call API SDK method to fetch GitHub repositories and create a list of Repo models defined in models/repo.dart:

class GithubRepoResources {
  static Future<List<Repo>> getData() async {
    final response = await ApiSdk.fetchGithubRepoGraphQl(10);
    final List<dynamic> repos =
        response.data['viewer']['repositories']['nodes'] as List<dynamic>;

    final List<Repo> listOfRepos = repos
        .map((dynamic e) => Repo(
              id: e['id'] as String,
              name: e['name'] as String,
              viewerHasStarred: e['viewerHasStarred'] as bool,
            ))
        .toList();

    return listOfRepos;
  }
}

The repo.dart file in the models folder contains the following code:

class Repo {
  const Repo({
    this.id,
    this.name,
    this.viewerHasStarred,
    this.isLoading: false,
  });

  final String id;
  final String name;
  final bool viewerHasStarred;
  final bool isLoading;
}

We have used GithubRepoResources to call getData in github_repo_bloc.dart:

if (event is GithubRepoDataLoadingEvent) {
      yield GithubRepoStateLoading();
      var fetchedData = await GithubRepoResources.getData();
      yield GithubRepoDataLoadedState(repositoryData: fetchedData);
    }

Now that we have the data, we will create an instance of GithubRepoBloc in github_repo_bloc_controller.dart as shown below:

class GithubRepoBlocController {
  GithubRepoBlocController._();
  static GithubRepoBlocController _instance = GithubRepoBlocController._();
  factory GithubRepoBlocController() => _instance;

  // ignore: close_sinks
  GithubRepoBloc authenticationBloc = GithubRepoBloc();
}

We can now move on to the app.

In github_repo_list_screen.dart, we will get the instance of GithubRepoBloc in its initState:

void initState() {
    githubRepoBloc = GithubRepoBlocController().authenticationBloc;
    githubRepoBloc.add(GithubRepoDataLoadingEvent());
    super.initState();
  }

Finally, use BlocBuilder in github_repo_list_screen.dart to build the required widget according to the states:

Widget build(BuildContext context) {
    return BlocBuilder<GithubRepoBloc, GithubRepoState>(
        cubit: githubRepoBloc,
        builder: (BuildContext context, GithubRepoState state) {
          if (state is GithubRepoStateLoading) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          if (state is GithubRepoDataLoadedState) {
            return ListView.builder(
              shrinkWrap: true,
              itemCount: state.repositoryData.length,
              itemBuilder: (BuildContext context, int index) {
                return Column(
                  children: [
                    ListTile(
                      title: Text(
                        state.repositoryData[index].name.toUpperCase(),
                        style: Theme.of(context).textTheme.bodyText2,
                      ),
                      trailing: state.repositoryData[index].viewerHasStarred
                          ? Icon(Icons.star)
                          : SizedBox(),
                    ),
                    Divider(
                      height: 10.0,
                    )
                  ],
                );
              },
            );
          }
          return SizedBox();
        });
  }

Your app should look like this:

Ta-da! You've created your very own Github Repo List app. Interested in creating more apps with Flutter Starter? Check out our guide to building a Hacker News app and our other examples. If you would like to learn more about Flutter Starter, please visit our official documentation.

This article was written by Sumant Raj and Madhav B. Edited by Kavya V.

Flutter Starter: Guide to building a Hacker News App

Sanket Sahu — Tue, 22 Dec 2020 10:40:44 +0000

Are you confused about how to get started with Flutter? Use Flutter Starter to create a functional Hacker News App in no time! Flutter Starter is a kit that enables coders to build production-ready apps. It has API configurations, state management, UI style guides and configurations for Flutter projects.

Firstly, use the template from Github. Proceed to the examples folder, go to the hacker-news folder and run it. Now, let us start with the API SDK. Using the rest method, insert the API links in api_constants.dart:

Map<String, String> apiConstants = {
  "hacker_news": "https://hacker-news.firebaseio.com/v0",
  "auth": "https://reqres.in/api"
};

In main.dart, we need 2 functions fetchTopIds and fecthItems. fetchTopIds will get all the top IDs for news and fetchItems will take the ID and give us the content for that news ID.

Both of them are get methods so we will call get from restapihandler as shown below:

static fetchTopId() async {
    final response = await RestApiHandlerData.getData(
        '${apiConstants["hacker_news"]}/topstories.json');
    return response;
  }

static fetchItems(int id) async {
    final response = await RestApiHandlerData.getData(
        '${apiConstants["hacker_news"]}/item/$id.json');
    return response;
  }

The API SDK is now a black box from which we will just call the methods fetchTopId and fetchItems, which will return a JSON response.

Now that we have the data, it needs to be called, parsed and stored. Proceed to the shared folder which contains blocs, models and resources.

Resources
Use a provider as shown below:

class NewsApiProvider implements Source {
  Future<List<int>> fetchTopId() async {
    final response = await ApiSdk.fetchTopId();
    final ids = response;
    return ids.cast<int>();
  }

  Future<NewsItemModel> fetchItems(int id) async {
    final response = await ApiSdk.fetchItems(id);
    final parsedJson = response;
    return NewsItemModel.fromJson(parsedJson);
  }
}

Then, create a repository in which we will call the API SDK functions to get the data. This will be parsed in the models folder.

The news_item_model.dart file in the models folder contains the following code:

import 'dart:convert';

class NewsItemModel {
  final int id;
  final bool deleted;
  final String type;
  final String by;
  final int time;
  final String text;
  final bool dead;
  final int parent;
  final List<dynamic> kids;
  final String url;
  final int score;
  final String title;
  final int descendants;

  NewsItemModel.fromJson(Map<String, dynamic> parsedJson)
      : id = parsedJson['id'],
        deleted = parsedJson['deleted'] ?? false,
        type = parsedJson['type'],
        by = parsedJson['by'] ?? '',
        time = parsedJson['time'],
        text = parsedJson['text'] ?? '',
        dead = parsedJson['dead'] ?? false,
        parent = parsedJson['parent'],
        kids = parsedJson['kids'] ?? [],
        url = parsedJson['url'],
        score = parsedJson['score'],
        title = parsedJson['title'],
        descendants = parsedJson['descendants'] ?? 0;

  NewsItemModel.fromDb(Map<String, dynamic> parsedJson)
      : id = parsedJson['id'],
        deleted = parsedJson['deleted'] == 1,
        type = parsedJson['type'],
        by = parsedJson['by'],
        time = parsedJson['time'],
        text = parsedJson['text'],
        dead = parsedJson['dead'] == 1,
        parent = parsedJson['parent'],
        kids = jsonDecode(parsedJson['kids']),
        url = parsedJson['url'],
        score = parsedJson['score'],
        title = parsedJson['title'],
        descendants = parsedJson['descendants'];

  Map<String, dynamic> toMap() {
    return <String, dynamic>{
      'id': id,
      'type': type,
      'by': by,
      'time': time,
      'text': text,
      'parent': parent,
      'url': url,
      'score': score,
      'title': title,
      'descendants': descendants,
      'deleted': deleted ? 1 : 0,
      'dead': dead ? 1 : 0,
      'kids': jsonEncode(kids),
    };
  }
}

To parse the JSON data, go to the repository folder and open news-repository.dart. We will call the function to parse it like this:

Future<List<int>> fetchTopId() {
    return sources[1].fetchTopId();
  }

  Future<NewsItemModel> fetchItem(int id) async {
    NewsItemModel item;
    var source;

    for (source in sources) {
      item = await source.fetchItems(id);
      if (item != null) {
        break;
      }
    }

    for (var cache in caches) {
      if (cache != source) {
        cache.addItem(item);
      }
    }

    return item;
  }

The data has been parsed using models and resources. Lastly, we will create blocs.

For this example, we used rxdart.
In stories_bloc.dart, we have used the repository to access data as shown below:

_itemTransformer() {
    return ScanStreamTransformer(
      (Map<int, Future<NewsItemModel>> cache, int id, index) {
        cache[id] = _repository.fetchItem(id);
        return cache;
      },
      <int, Future<NewsItemModel>>{},
    );
  }

With help of providers and rxdart, we will send the data to the main app.
In the main app, List widget needs to be wrapped with the provider widget:

body: StoriesProvider(child: NewsList()),

Now in NewsList widget, make the following changes:

class NewsList extends StatelessWidget {
  Widget build(BuildContext context) {
    final storiesBloc = StoriesProvider.of(context);
    storiesBloc.fetchTopIds();
    return topIdList(storiesBloc);
  }
}

The stories bloc is accessed by first we accessing the instance and then calling the fetch function.

Finally, use the l StreamBuilder widget to build the UI:

import 'package:app/src/widgets/news_list_tiles.dart';
import 'package:app/src/widgets/refresh.dart';
import 'package:flutter/material.dart';
import 'package:shared/main.dart';

class NewsList extends StatelessWidget {
  Widget build(BuildContext context) {
    final storiesBloc = StoriesProvider.of(context);
    storiesBloc.fetchTopIds();
    return topIdList(storiesBloc);
  }

  Widget topIdList(StoriesBloc storiesBloc) {
    return StreamBuilder(
      stream: storiesBloc.topId,
      builder: (BuildContext context, AsyncSnapshot<List<int>> snapShot) {
        if (!snapShot.hasData) {
          return Center(
            child: CircularProgressIndicator(),
          );
        }

        return Refresh(
          child: ListView.builder(
            itemCount: snapShot.data.length,
            itemBuilder: (BuildContext context, int index) {
              storiesBloc.fetchItem(snapShot.data[index]);
              return NewsListTile(itemId: snapShot.data[index]);
            },
          ),
        );
      },
    );
  }
}

Your app should look like this:

Congratulations! You've now created your very own Hacker News App. If you would like to learn more about Flutter Starter, please visit our official documentation.

This article was written by Sumant Raj and edited by Kavya V.

Multi-User Todo App Using SyncState

Sanket Sahu — Mon, 21 Dec 2020 12:28:05 +0000

Hi! This article is divided into two parts. Firstly, we will build a Todo app using React and SyncState. Next, we will add a multi-user (shared state) functionality with the help of the remote-plugin of SyncState that works with socket.io.

If you don't already know, SyncState is a general-purpose state-management library for React & JavaScript apps.It can be used for local states and also makes it easy to sync the state across multiple sessions without learning any new APIs.You can read more about it in our official documentation.

You can check out the complete project on Github.

Part 1: Building Todo app with SyncState

Starting the project using Create React App

Let's initialise a basic React app. Make sure that you have node and npm pre-installed.

npx create react-app sync-multi-user-todo

Next, navigate to the project directory:

cd sync-multi-user-todo

Run the project:

npm run start

Navigate to localhost:3000 in your browser.

Your application has now been set-up and you can move on to building the rest of the app.

Styling Your Application

We will use Bootstrap and FontAwesome for nice user interface.

In order to use them, put this in the head section of your public/index.html file:

 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
 />
 <link
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
   integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
   crossorigin="anonymous"
 />

Open App.css and replace the contents with the following:

body {
  background-color: #3f937b;
}
.App {
  text-align: center;
}

.checkbox {
  margin-left: -25px;
}
.caption {
  width: 300px;
}
.addText { 
  width: 350px;
}
button {
  background-color: #61b9a0 !important;
  color: white !important;
}
.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none;
  border-color: #61b9a0 !important;
}
.input-todo:focus,
.input-todo:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: #61b9a0;
}

@media (max-width: 375px) {
  .checkbox {
    margin-left: -35px;
  }
  .caption {
    width: 280px;
  }

  .addText {
    width: 330px;
  }
}

@media (max-width: 320px) {
  .caption {
    width: 180px;
  }

  .addText {
    width: 230px;
  }
}

todoTitle {
  width: "89%";
}

Installing SyncState

Now, let's add syncstate to our react application. Open the terminal and execute the following commands:

npm install @syncstate/core
npm install @syncstate/react

SyncState provides createDocStore and Provider

import { createDocStore } from "@syncstate/core";
import { Provider } from "@syncstate/react";

Import createDocStore and Provider in your index.js file.

Creating the store

SyncState maintains a universal store for your application. In this store, all your data is contained in a single document. SyncState uses JSON patches to update the document.

Since we are building a multi-user todo app, we'll need an empty array as our state.

In your index.js file create a store as follows:

const store = createDocStore({ todos: [] });

Wrap your app with Provider and pass the store prop:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Replace the content of your App.js file with the following code:

import React from "react";
import "./App.css";

function App() {

  return (
    <div className="container mt-5">
      <h2 className="text-center text-white">
        Multi User Todo Using SyncState
      </h2>
      <div className="row justify-content-center mt-5">
        <div className="col-md-8">
          <div className="card-hover-shadow-2x mb-3 card">
            <div className="card-header-tab card-header">
              <div className="card-header-title font-size-lg text-capitalize font-weight-normal">
                <i className="fa fa-tasks"></i>&nbsp;Task Lists
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Let's begin with the CRUD part of our application.

Reading To-Do Items

You can access the store in your components using the useDoc hook:

import { useDoc } from "@syncstate/react";

useDoc hook accepts a path parameter, it returns the state at the path and the function to modify that state. This also adds a listener to the path and updates the component when the state at the path changes.

SyncState uses a pull-based strategy i.e. only those components listen to changes if they are using the data that gets changed in your store.

To get the hold of our todo array, we'll pass the path "/todos" to the useDoc hook:

 const todoPath = "/todos";
 const [todos, setTodos] = useDoc(todoPath);

and to get the hold of a todo item we'll pass the path "/todos/{index}" to the useDoc hook:

const todoItemPath = "/todos/1";
//todoItem at index 1
const [todoItem, setTodoItem] = useDoc(todoItemPath);

For performance reasons, it's recommended to make the path as specific as possible. A thumb rule is to fetch only the slice of doc that you have to read or modify.

Moving forward, in App component use useDoc hook to get the todos.You can now use todos array anywhere in your component. 😁


import React from "react";
import "./App.css";
import { useDoc } from "@syncstate/react";

function App() {

  const todoPath = "/todos";
  const [todos, setTodos] = useDoc(todoPath);

  return (
    <div className="container mt-5">
      <h2 className="text-center text-white">
        Multi User Todo Using SyncState
      </h2>
      <div className="row justify-content-center mt-5">
        <div className="col-md-8">
          <div className="card-hover-shadow-2x mb-3 card">
            <div className="card-header-tab card-header">
              <div className="card-header-title font-size-lg text-capitalize font-weight-normal">
                <i className="fa fa-tasks"></i>&nbsp;Task Lists
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Now, we'll create a component TodoItem which will take the path (todoItemPath) of each todo item as a prop and will show the content of the todo item.

Create a new folder named component in src directory and add a new file TodoItem.js containing the following code:

import React from "react";
import { useDoc } from "@syncstate/react";

function TodoItem({ todoItemPath }) {

  return (
    <div>
      <div className="d-flex align-content-center">
        <div
          className="d-flex align-items-center todoTitle"
        >
          <div style={{ width: "100%" }}>{todoItem.caption} </div>
        </div> 
      </div>
    </div>
  );
}

export default TodoItem;

Revisit App.js and create a new array of items by mapping over the todo items from state and pass each todo's path as a prop to our TodoItem component:

import React from "react";
import "./App.css";
import TodoItem from "./components/TodoItem";
import { useDoc } from "@syncstate/react";

function App() {
  const todoPath = "/todos";
  const [todos, setTodos] = useDoc(todoPath);

  const todoList = todos.map((todoItem, index) => {
    return (
      <li key={todoItem.index} className="list-group-item">
        <TodoItem todo={todoItem} todoItemPath={todoPath + "/" + index} />
      </li>
    );
  });

  return (
    <div className="container mt-5">
      <h2 className="text-center text-white">
        Multi User Todo Using SyncState
      </h2>
      <div className="row justify-content-center mt-5">
        <div className="col-md-8">
          <div className="card-hover-shadow-2x mb-3 card">
            <div className="card-header-tab card-header">
              <div className="card-header-title font-size-lg text-capitalize font-weight-normal">
                <i className="fa fa-tasks"></i>&nbsp;Task Lists
              </div>
            </div>
            <div
              className="overflow-auto"
              style={{ height: "auto", maxHeight: "300px" }}
            >
              <div className="position-static">
                <ul className=" list-group list-group-flush">{todoList}</ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Creating Todo Items

Now, let’s give our app the power to create a new item.

Let’s build the addTodo function in the App component. Basically, the addTodo function will receive a todoItem and add it to our todos state.

In our App.js add the addTodo function:

//generate unique id
  const keyGenerator = () => "_" + Math.random().toString(36).substr(2, 9);
  const addTodo = (todoItem) => {
    setTodos((todos) => {
      let id = keyGenerator();
      todos.push({
        id: id,
        caption: todoItem,
        completed: false,
      });
      document.getElementsByClassName("input-todo")[0].value = "";
    });
  };

It may seem like we are mutating our todos state directly in the setTodo function but we are updating the state using Immer.js which generates JSON patches for our internal reducers.

Now, add another component named AddTodo to the components folder. AddTodo component gives us the functionality of sending the input to the addTodo function.

import React, { useState } from "react";

function AddTodo({ addTodo }) {
  const [input, setInput] = useState("");

  return (
    <div
      className="d-block text-right card-footer d-flex"
      style={{ padding: "0.75rem" }}
    >
      <div className=" position-relative col " style={{ paddingLeft: "13px" }}>
        <input
          type="text"
          className="form-control input-todo"
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
          }}
          onKeyPress={(event) => {
            if (event.which === 13 || event.keyCode === 13) {
              addTodo(input);
              setInput("");
            }
          }}
          placeholder="Enter new todo"
        />

        <i
          className="fa fa-close"
          style={{
            position: "absolute",
            top: "25%",
            right: "25px",
          }}
          onClick={() => setInput("")}
        ></i>
      </div>
      <div className="ml-auto">
        <button
          type="button"
          className="border-0 btn-transition btn btn-outline-danger"
          onClick={(e) => {
            e.preventDefault();
            addTodo(input);
            setInput("");
          }}
        >
          Add Task
        </button>
      </div>
    </div>
  );
}

export default AddTodo;

So far, the src/App.js file looks like this:

import React from "react";
import "./App.css";
import TodoItem from "./components/TodoItem";
import AddTodo from "./components/AddTodo";
import { useDoc } from "@syncstate/react";

function App() {
  const todoPath = "/todos";
  const [todos, setTodos] = useDoc(todoPath);

  //generate unique id
  const keyGenerator = () => "_" + Math.random().toString(36).substr(2, 9);
  const addTodo = (todoItem) => {
    setTodos((todos) => {
      let id = keyGenerator();
      todos.push({
        id: id,
        caption: todoItem,
        completed: false,
      });
      document.getElementsByClassName("input-todo")[0].value = "";
    });
  };

  const todoList = todos.map((todoItem, index) => {
    return (
      <li key={todoItem.index} className="list-group-item">
        <TodoItem todo={todoItem} todoItemPath={todoPath + "/" + index} />
      </li>
    );
  });

  return (
    <div className="container mt-5">
      <h2 className="text-center text-white">
        Multi User Todo Using SyncState
      </h2>
      <div className="row justify-content-center mt-5">
        <div className="col-md-8">
          <div className="card-hover-shadow-2x mb-3 card">
            <div className="card-header-tab card-header">
              <div className="card-header-title font-size-lg text-capitalize font-weight-normal">
                <i className="fa fa-tasks"></i>&nbsp;Task Lists
              </div>
            </div>
            <div
              className="overflow-auto"
              style={{ height: "auto", maxHeight: "300px" }}
            >
              <div className="position-static">
                <ul className=" list-group list-group-flush">{todoList}</ul>
              </div>
            </div>
            <AddTodo addTodo={addTodo} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

We're now able to add and view todo items. 😄

Updating To-Do Items

Let’s add the functionality to cross off an item on your to-do list when they are completed.

Add toggleTodo function and a button to toggle completed property of todoItem to true or false:

import React from "react";
import { useDoc } from "@syncstate/react";

function TodoItem({ todoItemPath }) {
  const [todos, setTodos] = useDoc("/todos", Infinity);
  const [todoItem, setTodoItem] = useDoc(todoItemPath);


  const toggleTodo = (completed) => {
    setTodoItem((todoItem) => {
      todoItem.completed = completed;
    });
  };

 const getTxtStyle = {
    textDecoration: todoItem.completed ? "line-through" : "none",
    marginLeft: "10px",
  };

  return (
    <div>
      <div className="d-flex align-content-center">
        <div
          className="custom-checkbox custom-control d-flex align-items-center"
          style={{ marginBottom: "2px" }}
        >
          <input
            type="checkbox"
            className="form-check-input"
            checked={todoItem.completed}
            onChange={(e) => {
              toggleTodo(e.target.checked);
            }}
          />
        </div>

        <div
          className="d-flex align-items-center todoTitle"
          style={getTxtStyle}
        >
          <div style={{ width: "100%" }}>{todoItem.caption} </div>
        </div>
      </div>
    </div>
  );
}

export default TodoItem;

Deleting Todo Items

Let’s add the functionality to delete an item from your todo list.

Add deleteTodo function and a button to delete todoItem:

import React from "react";
import { useDoc } from "@syncstate/react";

function TodoItem({ todoItemPath }) {
  const [todos, setTodos] = useDoc("/todos", Infinity);
  const [todoItem, setTodoItem] = useDoc(todoItemPath);

 const deleteTodo = (id) => {
    let index;
    for (let i = 0; i < todos.length; i++) {
      if (todos[i].id === id) {
        index = i;
        break;
      }
    }
    setTodos((todos) => {
      todos.splice(index, 1);
    });
  };
  const toggleTodo = (completed) => {
    setTodoItem((todoItem) => {
      todoItem.completed = completed;
    });
  };

  const getTxtStyle = () => {
    return {
      textDecoration: todoItem.completed ? "line-through" : "none",
      marginLeft: "10px",
    };
  };

  return (
    <div>
      <div className="d-flex align-content-center">
        <div
          className="custom-checkbox custom-control d-flex align-items-center"
          style={{ marginBottom: "2px" }}
        >
          <input
            type="checkbox"
            className="form-check-input"
            checked={todoItem.completed}
            onChange={(e) => {
              toggleTodo(e.target.checked);
            }}
          />
        </div>

        <div
          className="d-flex align-items-center todoTitle"
          style={getTxtStyle()}
        >
          <div style={{ width: "100%" }}>{todoItem.caption} </div>
        </div>
        <div className="ml-auto d-flex align-items-center">
          <button
            className="border-0 btn-transition btn btn-outline-danger"
            onClick={() => {
              deleteTodo(todoItem.id);
            }}
          >
            <i className="fa fa-trash"></i>
          </button>
        </div>
      </div>
    </div>
  );
}

export default TodoItem;

In deleteTodo function, we are finding the index of the todoItem we want to delete and then splicing the todos array in setTodo function.

Congratulations, your Todo App using SyncState is complete! 😍

Part 2: Syncing the app state with others using the remote-plugin

Remote plugin is in the experimental stage and not ready for use in production. We're working on it!

Creating a Node server and adding Socket

We need to set up a Socket connection between client and server so that data can flow both ways. We will be using the Express.js server which will be used as our backend for Sockets.

To install Socket, execute the following commands:

npm install socket.io
npm install socket.io-client

Create a server folder in root directory and create a new file index.js in it.

Open the terminal and execute:

npm install express

Set up Socket for your server:

var express = require("express");
var socket = require("socket.io");
const remote = new SyncStateRemote();
var server = app.listen(8000, function () {
  console.log("listening on port 8000");
});

var io = socket(server);

io.on("connection", async (socket) => {

});

Get Socket for client and set it up in your src/index.js file:


import io from "socket.io-client";

//set up socket connection
let socket = io.connect("http://localhost:8000");

Listening to the patches in the front-end and sending it over (via plugin)

Install SyncState Remote plugin for client :

npm install @syncstate/remote-client

Every time you make a change in your state, a JSON patch is generated from your side and is sent to the server. SyncState processes these patches and sends them to other clients.

In your src/index.js file, add the following:

import * as remote from "@syncstate/remote-client";

Initialise remote by passing [remote.createInitializer()] ****as an additional argument in createDocStore function:

const store = createDocStore({ todos: [] }, [remote.createInitializer()]);

Enable remote plugin on the todos path of your document tree:

store.dispatch(remote.enableRemote("/todos"));

Whenever a new user joins, they should get all the patches generated till now:

// send request to server to get patches everytime when new user joins
socket.emit("fetchDoc", "/todos");

If you make any changes in your Doc tree, you need to observe the changes so that you can send them to the server.

store.observe observes the changes at the path and calls the listener function with the new changes/JSON patches:

store.observe(
  "doc",
  "/todos",
  (todos, change) => {
    if (!change.origin) { 
      //send json patch to the server
      socket.emit("change", "/todos", change);
    }
  },
  Infinity
);

The server adds origin to the change object. If a client receives a patch from the server sent by another client, then we shouldn't send that to the server. The client should send its own patches.

After receiving the patches from server, dispatch them:

socket.on("change", (path, patch) => {

store.dispatch(remote.applyRemote(path, patch));

});

The entire src/index.js file will look like this so far:

import React from "react";
import { createDocStore } from "@syncstate/core";
import { Provider } from "@syncstate/react";
import ReactDOM from "react-dom";
import App from "./App.js";
import "./index.css";
import io from "socket.io-client";
import reportWebVitals from "./reportWebVitals";
import * as remote from "@syncstate/remote-client";

const store = createDocStore({ todos: [] }, [remote.createInitializer()]);

//enable remote plugin
store.dispatch(remote.enableRemote("/todos"));

//setting up socket connection with the server
let socket = io.connect("http://localhost:8000");

// send request to server to get patches everytime when page reloads
socket.emit("fetchDoc", "/todos");

//observe the changes in store state
store.observe(
  "doc",
  "/todos",
  (todos, change) => {
    if (!change.origin) {
      //send json patch to the server
      socket.emit("change", "/todos", change);
    }
  },
  Infinity
);

//get patches from server and dispatch
socket.on("change", (path, patch) => {
  // console.log(patch);
  store.dispatch(remote.applyRemote(path, patch));
});

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Consuming patches in the backend and merging it via plugin

Install SyncState Remote plugin for the server:

npm install @syncstate/remote-server

In your server/index.js file, create SyncState Remote instance:

const { SyncStateRemote } = require("@syncstate/remote-server");
const remote = new SyncStateRemote();

We need to store the patches somewhere so that whenever a new client joins, they get all the patches. Here, we'll be using temporary storage for patches. Ideally, it should be a database.

Create a new file PatchManager.js in the server folder and add the following code:

module.exports = class PatchManager {
  // patches;
  constructor() {
    this.projectPatchesMap = new Map();
  }

  store(projectId, path, patch) {
    // console.log("storing patch", patch, this.projectPatchesMap);
    const projectPatches = this.projectPatchesMap.get(projectId);

    if (projectPatches) {
      const pathPatches = projectPatches.get(path);

      if (pathPatches) {
        pathPatches.push(patch);
      } else {
        projectPatches.set(path, [patch]);
      }
    } else {
      const pathPatchesMap = new Map();
      pathPatchesMap.set(path, [patch]);
      this.projectPatchesMap.set(projectId, pathPatchesMap);
    }
  }

  getAllPatches(projectId, path) {
    const projectPatches = this.projectPatchesMap.get(projectId);
    if (projectPatches) {
      const pathPatches = projectPatches.get(path);

      return pathPatches ? pathPatches : [];
    }

    return [];
  }
};

Sending all patches to the client on joining:

socket.on("fetchDoc", (path) => {
    //get all patches
 const patchesList = patchManager.getAllPatches(projectId, path);
  if (patchesList) {
      //send each patch to the client
      patchesList.forEach((change) => {
        socket.emit("change", path, change);
      });
    }
 });

Whenever a patch is received, SyncState handles conflicting updates and broadcasts to other clients:


//patches recieved from the client
  socket.on("change", (path, change) => {
    change.origin = socket.id;

    //resolves conflicts internally
    remote.processChange(socket.id, path, change);
  });

//patches are ready to be sent
  const dispose = remote.onChangeReady(socket.id, (path, change) => {
    //store the patches in js runtime or a persistent storage
    patchManager.store(projectId, path, change);

    //broadcast the pathes to other clients
    socket.broadcast.emit("change", path, change);
  });

The entire server/index.js file will look like this so far:

const express = require("express");
const socket = require("socket.io");
const { v4: uuidv4 } = require("uuid");
const PatchManager = require("./PatchManager");
const { SyncStateRemote } = require("@syncstate/remote-server");
const remote = new SyncStateRemote();
const app = express();
const server = app.listen(8000, function () {
  console.log("listening on port 8000");
});

const io = socket(server);
const projectId = uuidv4();  //generate unique id 

let patchManager = new PatchManager();

io.on("connection", async (socket) => {
  socket.on("fetchDoc", (path) => {
    //get all patches
    const patchesList = patchManager.getAllPatches(projectId, path);

    if (patchesList) {
      //send each patch to the client
      patchesList.forEach((change) => {
        socket.emit("change", path, change);
      });
    }
  });

  //patches recieved from the client
  socket.on("change", (path, change) => {
    change.origin = socket.id;

    //resolves conflicts internally
    remote.processChange(socket.id, path, change);
  });
//patches are ready to be sent
  const dispose = remote.onChangeReady(socket.id, (path, change) => {
    //store the patches in js runtime or a persistent storage
    patchManager.store(projectId, path, change);

    //broadcast the pathes to other clients
    socket.broadcast.emit("change", path, change);
  });
});

Start the server by executing the following command:

cd server
node index.js

Voila! Two browsers, side-by-side and in sync.

React Pluggable: A Quick Guide

Sanket Sahu — Thu, 17 Dec 2020 12:22:51 +0000

This tutorial is designed to quickly get you acquainted with React Pluggable. It includes step by step instructions and examples for extra clarity. For more information, please visit the official documentation.

What is React Pluggable?

React Pluggable is an intuitive plugin system for Javascript & React apps. It focusses on the abstraction of the UI and helps you think of the app as a set of features instead of a set of components. We at GeekyAnts have used React Pluggable for large & complex apps like BuilderX to successfully add independent and dependent features over time.

Why React Pluggable?

While working on BuilderX, we realised that adding and removing features was becoming cumbersome. Furthermore, a lot of knowledge transfer was required for a new member to contribute. This slowed down the overall speed of development. To overcome this hurdle, we came up with a very basic version of what React Pluggable is today.

Features

This plugin system has all your features and can be enabled/disabled with a single line of code.

To add a new feature in your app, you write it's logic and install it in the plugin store.
You can use that feature anywhere in the app by calling that feature using PluginStore rather than importing that feature directly.
If you do not want a particular plugin in your app, you can uninstall it from your plugin store or just comment out the installation.

Installation

Use npm or yarn to install react-pluggable in your app:

# NPM
npm install react-pluggable --save

# Yarn
yarn add react-pluggable

Note: We are using Typescript in all our examples. You can also use it with Javascript without types.

Basic Example

Let us create a plugin that will add an alert functionality to the component.

Create a class ShowAlertPlugin and implement it with IPlugin interface:

ShowAlert*Plugin.tsx*

import React from "react";
import { IPlugin, PluginStore } from "react-pluggable";

class ShowAlertPlugin implements IPlugin {
  public pluginStore: any;

  getPluginName(): string {
    return "ShowAlert Plugin";
  }

  init(pluginStore: PluginStore): void {
    this.pluginStore = pluginStore;
  }

  activate(): void {
    this.pluginStore.addFunction("ShowAlert.doIt", () => {
      alert("Hello from the ShowAlert Plugin");
    });
  }

  deactivate(): void {
    this.pluginStore.removeFunction("ShowAlert.doIt");
  }
}

export default ClickMePlugin;

The init function is used to initialise everything that needs to be initialized from the plugin. The activate function is used to add any function/listener and dispatches an event. The deactivate function is a cleanup method that is used to remove everything that was added in the activate function.

Now, let's add ShowAlertPlugin to our app.

App.tsx

import React from "react";
import "./App.css";
import { createPluginStore, PluginProvider } from "react-pluggable";
import ShowAlertPlugin from "./plugins/ShowAlertPlugin";

const pluginStore = createPluginStore();
pluginStore.install(new ShowAlertPlugin());

function App() {

  return (
    <PluginProvider pluginStore={pluginStore}>
      <Example />
    </PluginProvider>
  );
}

export default App;

The createPluginStore() method returns a new instance of PluginStore class. Plugins are installed using the install() method of PluginStore class. PluginProvider makes the PluginStore available to any nested components wrapped inside it.

Using that plugin in our Target Component:

Example.tsx

import * as React from "react";
import { usePluginStore } from "react-pluggable";

const Example = () => {
  const pluginStore = usePluginStore();

  return (
    <>
      <button
        onClick={() => {
          pluginStore.executeFunction("ShowAlert.doIt");
        }}
      >
        Show Alert
      </button>
    </>
  );
};

export default Example;

The functions which are added to pluginStore are executed by passing their name as the first argument in the executeFunction() of the PluginStore object.

ShowAlertPlugin will get injected into the component as shown:

Todo Example

Let's build a Todo example using React Pluggable.

The Todo list will appear when the login button is clicked. Although we are not doing actual authentication here, let's suppose that authentication is successful. In this case, we dispatch an event Auth.authenticated from AuthPlugin. The event is listened to by the ToDoPlugin which ultimately renders the Todo component.

On clicking the logout button, Auth.loggedOut event is dispatched from the AuthPlugin and listened to by the TodoPlugin, which stops the rendering of the Todo component.

React Pluggable has been rigorously tested during the development of BuilderX. It has helped GeekyAnts make the development of such a complex app a lot simpler. We now want this to help the developer community code more complex apps in a far simpler and feature-oriented way. If you wish to know more about the library, you can visit the official documentation.

This post was written by Aditya J and Amar S. Edited by Kavya V.

Designing NativeBase 3.0: Architecture & Forthcomings

Sanket Sahu — Fri, 24 Apr 2020 13:29:07 +0000

NativeBase 2.0 was built in 2016 and a lot has changed since then. Design Systems, Design guidelines, the way we write components in React Native. Everything has evolved and now it’s time we revisit and rebuild NativeBase from the ground up.

The line between React & React Native is blurring quickly. Controversial CSS-in-JS is making its way into the mainstream web with styled-components & emotion.

With these advancements in mind, we are considering an overhaul of NativeBase that will not only fit the ever-evolving React ecosystem today but it would also be future-ready (we can only hope so.)

In light of this, we have officially started working on the next major release of the UI Component Library for React Native that will ease our development process further.

Nativebase 3.0 is now under development.

Aimed to make development in React Native simpler for the day-to-day dev, NativeBase has gone through two major versions which has guided this library towards sophistication and efficiency. Now, after almost 4 years of the first release and 2.5 years of the second major release, NativeBase 3.0 is on its way to be bigger, better, aesthetically superior and much more flexible.

A little history:

Back in November 2015, when we were introduced to React Native, @sankhadeeproy007 and I built a starter kit as an experiment and called it ‘Native Starter Pro’. It was our first ever paid React Native template for mobile apps and gathered quite a crowd.

On the back of that, we involved ourselves in multiple projects in React Native, during which we felt the need for a UI Component Library. The sheer lack of a button component sparked an idea and on April 15th, 2016, NativeBase was born.

Honestly, NativeBase 1.0 was unpolished but it got the job done and people started to notice. NativeBase 1.0 was heavily inspired by ionic design. We tried to achieve the exact same API that Ionic uses but we realized that it gave away with the ability to customize. So, we decided to make the API easier by arranging components under semantic tags…

...which led us to April 7th, 2017, when NativeBase 2.0 was launched.

NB 2.0 was highly polished on the UI side. We chose to follow Material Design & Ionic Design guidelines specifically and tried to match components with these guidelines to the pixel.

NativeBase 2.0 is by far the most downloaded version in the series’ history, with over 2.9 Million downloads and 13.7k stars on GitHub.

Features of NativeBase 3.0 (so far):

One of the aims of NativeBase 3.0 is to give power to devs and brand owners. Today, the boundary between different design systems for different platforms has been partially erased by branding and the need to achieve consistency. Not many apps in the market today follow strict design guidelines, all in the name of branding and consistency & we’ve noticed that.

// Detect dark theme var iframe = document.getElementById('tweet-1251984802359595008-791'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1251984802359595008&theme=dark" }

The very first thing that you will notice in Nativebase 3.0 is that we don’t have platform-specific designs. The freedom will lie with the end-user to choose how their design looks on different platforms. We want to make it more customisable so that the user can make it look like an android/iOS app with custom styling.

// Detect dark theme var iframe = document.getElementById('tweet-1251770290155085824-593'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1251770290155085824&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1251835650967506950-28'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1251835650967506950&theme=dark" }

To achieve this, Flutter Material is a strong inspiration for us as it has a rich component library and does not have many usage constraints.

// Detect dark theme var iframe = document.getElementById('tweet-1240605404700094464-381'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1240605404700094464&theme=dark" }

What we’re debating on right now is that if people like the idea of a unified API for Material & Cupertino guidelines. We would love to know what you think, so reach out to us and let us know on our Twitter.

NativeBase 3.0 will also use styled-system and styled-components to provide utility classes (as supplied by Tailwind CSS) which will be passed as props and not as CSS styles. This will translate into us having a fixed set of rules defined in our theme files and allow us to make NativeBase available for the web as well (It’s on the roadmap but the current focus is on the mobile end of it.)

Another reason behind this choice is because of its support for React Native (obviously :)).

NativeBase 2.0 saw the use of React Native Easy Grid or creating rows and columns in a grid. NativeBase 3.0 will retain that, with the addition of usage of <Stack> and components to enhance this feature.

Well, folks, that’s all the update we have right now on the new NativeBase. We want to take this moment to thank you all for your continued support and love. It is what drives us to be better and is the real force behind NativeBase 3.0.

Stay tuned with us for more updates as NativeBase progresses.

Also, if you have time, check out our livestream where @sankhadeeproy007, @hanykumar and I discuss the forthcomings and NativeBase of the past below.

Also, stay tuned for more livestreams to come.

I want to give a big shout out to @digvijayw for helping me write this article right from the beginning when it was a vague idea in my head.

BuilderX: The Design tool for React & React Native

Sanket Sahu — Wed, 23 Oct 2019 12:21:19 +0000

I'm super excited 🤩 to announce BuilderX, a browser-based design tool that codes React Native & React.

Design, Collaborate & Get Code — All in the browser! 🎉🥳

First of all, I would like to extend my greatest thanks to the community for sticking with us through this journey. In 2017, we came up with the idea of a Design Tool that uses React (Native) & .js files as its design format.

It took us quite some time to polish and launch BuilderX. There were a lot of ups and downs during development and a lot of ideas took birth and were contested, but all in all, I am extremely excited to share our work with you and the world.

In a nutshell

BuilderX is a design tool that runs in the browser and generates developer-friendly & production-ready code.
You can export the entire project with navigation intact or just the parts as components.
Share designs through links.
Convert Sketch designs to React & React Native in seconds.
Flex & Absolute layouts for Designers and Developers. Take your pick.
A Component Library within the tool to make the design process easier.
Export your own components and re-use them whenever, wherever.

I sincerely hope that you find BuilderX useful. We are here to shake things up in the app development space. We urge you to explore BuilderX as much as you can & if you like BuilderX, leave an upvote and comment. We’ll be waiting to hear from you and make BuilderX even better as time rolls on.

Open BuilderX