AppFollow

appfollow

​​Easily Scale Real-Time Updates with Firestore: A Maintenance-Free Alternative to WebSockets

MVP Game Development With Flutter and Flame

ফ্লটার এবং ফ্লেম সহ MVP গেম ডেভেলপমেন্ট

MVP-Spieleentwicklung mit Flutter und Flame

Desarrollo de juegos MVP con Flutter y Flame

Développement de jeux MVP avec Flutter et Flame

फ़्लटर और फ्लेम के साथ एमवीपी गेम डेवलपमेंट

Flutter と Flame を使用した MVP ゲーム開発

Flutter 및 Flame을 사용한 MVP 게임 개발

Desenvolvimento de jogos MVP com Flutter and Flame

Разработка игр MVP с Flutter и Flame

Flutter ve Flame ile MVP Oyun Geliştirme

Phát triển trò chơi MVP với Flutter và Flame

使用 Flutter 和 Flame 进行 MVP 游戏开发

Maggie: The Saga of a Baby Translator AI Startup

Maggie: The Saga of a Baby Translator AI স্টার্টআপ

Maggie: Die Saga eines Startups für KI-Babyübersetzer

Maggie: La saga de una startup de IA para traductores de bebés

Maggie : la saga d'une startup d'IA pour bébés traducteurs

मैगी: एक बेबी ट्रांसलेटर एआई स्टार्टअप की गाथा

マギー：赤ちゃん翻訳AIスタートアップの物語

매기: 아기 번역기 AI 스타트업의 이야기

Maggie: A Saga de um Bebê Tradutor AI Startup

Мэгги: Сага о детском переводчике, стартапе по искусственному интеллекту

Maggie: Bebek Tercüman Yapay Zeka Girişiminin Efsanesi

Maggie: Câu chuyện về một em bé dịch thuật khởi nghiệp AI

Maggie：婴儿翻译器 AI 初创公司的传奇

Startups of The Year 2023 Winners: Europe

Hi everyone, my name is Max Nechaev. I'm an iOS developer and a startup founder. Over the last six months I've traveled a really interesting path, which is full of complexity, uncertainty, trial, error, and fan. We've all thought about our own business at some point. What if you don't work for someone else? What if you could try starting something of your own? Would I be able to do it? I run into these questions quite often. But what's the reasoning here? The point is that if you put your fears aside and try to answer this question as truthfully as possible, you most likely won't be able to give a clear and concise answer. This is where we run into that winged phrase "You won't know until you try". It was after this realization that a seed settled in my mind that sprouted and gave me more and more food for thought each day and each week. Eventually, I realized that I was going to try and create my startup in the IT industry. Market preparation and analysis The first thing that was important to me was mental preparation. I read books on management and business. I spent a lot of time watching videos on different niches, analyzing entrepreneurs and their strategic decisions. Before starting work on any project, it is very important to be ready for it from the inside, not just "think of something and do it". YouTube Second, analyze the market. You can't just take and make any application, because the market is big, there are prevalent trends, there are leaders and outsiders, there are money niches, and there are niches where there is no money in general, no matter how much marketing budgets you pour into it. There are plenty of niche analytics sites out there, at first I used . It helps us in finding apps in different niches in different countries. Moreover, you can see who is earning how much (the only issue I have is that it doesn't show how much someone spends on marketing, so you won't see the real net profit). SensorTower In this article, I would like to share the steps we have taken, not a specific case study, so I will not go into the details of the research. We are not a million-dollar company yet, so there are no working cases yet, but those who are interested in this topic will find a lot of useful tips here. So I will say this. We've settled on a niche of apps that help content creators and SMM specialists. Team building "One man can't fight alone." I keep bombarding you with catchphrases. But in the 21st century, this is the purest truth. I am not used to hearing "success stories" about how some programmer from the village did something and became a millionaire. Because even if there are such cases, it is rather an exception to the rule. It is very important not to fall into the "survivor's syndrome". Don't get me wrong, every good developer can write his first alone. But only if we are talking about real commercial success, multiple financial growth, and high productivity, we are talking about a team. MVP In the first stages, we don't need a big office and several development departments. We need to cover several areas: frontend, backend, design, marketing. You don't necessarily need 4 people, because, often, many mobile apps don't need a backend, plus one person can fulfill multiple roles. I'm lucky here, I have a background as a marketer. I understand how metrics work, ad rooms, what creatives are, what they should look like, and what it takes to get the whole thing up and running. I'm not saying I'm the best at it, but this level is enough for the first stages of a startup's life. So I've been doing iOS development and marketing for the project. Going through a cool school from I realized that a co-founder is needed. A person who will share my values and move in the same direction as me. Startups with co-founders are many times more likely to succeed than those with a single founder. This is shown by the statistics that the folks at have compiled. If you're interested in specific numbers, I encourage everyone to go to their school. Y Combinator Y Combinator My co-founder (surprise surprise) is a backend developer. This means in addition to some business decisions, he'll be able to take on that role as well. This will greatly simplify iOS development (because most of the logic will be put on the backend). And of course, it will increase our speed a lot. We are both senior developers, which means that we will be able to think through everything competently and do it optimally with minimal financial and time investments. There is one last role left uncovered. UX/UI Designer. Because of where I am in the IT industry, I have a lot of talented people around me. So to be honest, I found the designer even earlier than the co-founder. She will also get a share of ownership of the startup and the head designer position when the staff grows. So together we are covering all the initial needs. With a team like this, we can make neither one nor two apps. Maybe we will expand our team and take new people. For now, we plan to take only some temporary outsourcing for adequate money (if necessary). From the start, we build in processes. Set goals and objectives. We make development boards, put up milestones, and spread everything out by dates. We calculate the economics of projects, plan investments, how much, and at what stages. In general, operational activities are also starting to go full speed. Design development At this stage, we have started on the application’s UI. Our goal is style, usability, and beauty from the user's point of view. We have thoroughly analyzed the competitors and identified the weaknesses of each. After that, by improving their apps we create our own. As part of the design, I also laid out a set of objectives. The designer has deadlines for working out each screen. She has a description of the functionality. The goals of the app and the problem it solves. We average 4-5 days of work (not full-time) per screen. Again, some people will find it too long, and some will find it too fast, but at this stage, it works and we are satisfied with it. We work out the entire design in . All task descriptions, boards, and project descriptions are in . Figma Notion Our application allows users to create and generate text content for social networks. That's why we developed the most simple and understandable design, which will completely cover the problem with writing posts, scripts, their organization, etc. Application Architecture Now I'm not talking about the architecture of the iOS part, but mostly about the architecture in general. I'll be honest, initially, the app was made only for the iOS platform and stores everything locally. I didn't intend to add a backend, but later on, I reconsidered my decision. For this purpose, I had to rewrite parts of the functionality. At the same time, it was an important note not to break the existing one. So, it turns out that we are making a full-fledged client-server application, so everything becomes clearer with the architecture. We have a "service" that is responsible for user registration and authorization, it simplifies the work of the iOS application because you just need to send a couple of requests to the backend and the "magic" begins. For the next step, we needed to pull up the database. That's where we will store users, their IDs, data, and content. Separate from that, we need to create a service for working with the database. Because the application should synchronize well with it every time the user opens the application. Yes, yes, you heard right. For now, we are running with somewhat limited functionality of full synchronization, as we don't need it that much. The main point of creating a backend and pulling user-generated content there is to preserve progress. No one wants to delete an app or change phones and lose all their data and all their content. So at this stage, it's still the goal to preserve, not to make seamless instant synchronization for cross-platforming. This is where I'd like to bring up the topic of "optimality". Often, aspiring startups (like us) make a huge mistake of trying to make the perfect product. They spend a huge amount of time (and some even financial resources) to make an ideal product to beat everyone else in the market. But the truth is, it's likely that they'll never make it to release. With limited resources, the word "perfect" is inapplicable. Even the first versions of were pretty ridiculous (not to mention ). I, on the other hand, am a stickler for the word "optimality". It's much more important and more succinct. Instead of making the perfect product, the perfect design, the perfect architecture, and the perfect servers that can handle colossal loads, I will make an optimal solution. It will work fine. NORMAL. And no more. I can refine everything else gradually, as long as the optimal solution generates some cash for me. Facebook Amazon The iOS architecture Now for the most interesting part. Since I'm an iOS developer, I'd like to write more technical "stuff" here. What we used, why, and what problems we encountered. SwiftUI Oh, yeah. We gave up on UIKit. It's even more accurate to say that "I gave up". I decided that since I'm starting to write something from scratch, let it be new and promising technologies. Moreover, SwiftUI is quite easy to layout, screens are made fast. Animations are also easy to implement. Moreover, SwiftUI is reactive, we are working with the Combine framework and it works quite well, no matter what anyone says. Moreover for future hiring, I believe this will be a big plus. There are a huge number of talented developers who already really want to move to 100% SwiftUI but are not yet able to do so. The overwhelming number of apps are still on UIKit. Rewriting them to a new framework is long and expensive, and businesses don't like those words. Did I regret choosing ? SwiftUI To be honest, despite all the pluses of the new framework, there are some outright minuses. For example, navigation. Yes, most developers have problems with it. It's not obvious enough how to take the routing logic into a separate entity, encapsulate it there, and take this responsibility away from the UI (like we're used to in UIKit). With iOS 16 this has gotten a lot easier and clearer, but the problem is that we're still supporting iOS 15 after all. Some guys write their extensions and somehow find a way to bring out the logic of routing through several levels of abstraction, we didn't have the resources for that. That's why we got the classic SwiftUI routing. We also encountered problems with the custom TabBar, which did not want to work correctly. Spent about 4 days doing everything competently. Is reactivity a pain? For many developers, creating reactive applications is a challenge. Especially for those who have never worked with this paradigm. I had a pretty good experience working with RxSwift, so in general, the approach was familiar. I just needed to understand how it all worked inside SwiftUI and how to build the architecture. At the dawn of SwiftUI's launch, everyone was talking about how MVVM was the perfect design pattern for it. Over the last six months, I've been hearing the opposite viewpoint, that MVVM is not suitable for SwiftUI, but that MVI is already laying down quite interestingly. I took the classic approach that Apple recommends. I had several managers that were needed in many places in the application, created one instance, and passed it throughout the UI hierarchy as an Environment variable. Admittedly, I made separate ViewModels for screens a couple of times, as I didn't see the point of making the class an observable manager. Conclusions So, I would like to summarize the above and the results of the first launch. Would I choose SwiftUI for my next application? Most likely yes. But while writing the application, I will be more careful in writing code, create more reusable UI components, and adhere to MVI architecture more strictly. Is a team really necessary? Yes, when you are not alone, you feel more confident, and you feel responsible not only for your destiny but also for your guys. It is always more interesting and precise to think through business or technical architecture together. Plus the saying "one head is good, but two are better" works perfectly here. Now the desire is only to increase the company's staff. What about the finances? It would be foolish to expect big income at the start of the project, so I consider only investments, investments, and once again investments. Of course, a small income begins to appear, and people buy subscriptions, but it is not comparable to the amount of money that comes from investments. I understand these risks and take them into account. Building your own business is a long-term game, full of risks and costs. Emotionally, I am ready for it. It is not an easy path, but I think it is quite realistic for me. Would I advise all developers to follow this path? Of course not. There are dozens of talented developers around me, they are happy, and they earn a lot of money with rather low responsibility. They have a lot of free time. They travel and spend money on whatever they want. Do they need to throw money into the bonfire of a business that could go out at any moment? Probably not. Everyone chooses their own way. I, for example, can't live without it all, and for some people, it's a real hell. I do not condemn either of them, and I am very glad that each person chooses his own way. Thanks for your time, for any questions you can contact me by mail or on Telegram (@maxnech) (or ). LinkedIn

How We Launched Our First MVP in the iOS App Market

It’s Tuesday at 8:32 a.m. Sarah, a facilities manager, is darting off to work. She offers a quick goodbye to her twelve-year-old daughter, who’s texting a friend and listening to music on her Bluetooth headphones. Sarah gets into her EV, which automatically connects to her phone, and begins playing a song from her 80’s playlist. Upon Sarah’s entry, the car adjusts the seats and steering column height according to her preferences. On the drive to work, she uses a virtual assistant to call her husband to remind him of a dinner commitment that night. Finally, Sarah gets to work and wants to run an energy consumption report for two of her buildings. However, her submeter app and her energy dashboard don’t connect natively. Frustrated, Sarah calls her integrator for help. They give her an estimate of a week. Most of us understand Sarah’s frustration. It’s almost absurd how much connectivity, personalization, and power we possess in our ordinary lives that isn’t translated to working with buildings. Like Sarah, we often think: “ is ” Why the hell is this so hard to do when using our personal devices so easy! There’s a reason why Sarah and many of us in the automated buildings industry have this experience. All our everyday gadgets and technology today use cloud-native architecture. Imagine if your building gave you as much power to connect, to manage, and to create as your smartphone did. In general, the automated buildings industry has been slow to adopt cloud-native technology, and our buildings and stakeholders like Sarah are paying the costs. But there’s a way for the industry to embrace the power of cloud-native and transform our properties into powerhouses of integration and automation. It’s the Interoperable Building Box or IBB from the Coalition for Smarter Buildings ( ). C4SB Why Do We Need an IBB? Today, the smart buildings industry is facing an onslaught of challenges and disruptions from multiple sides. Building information systems are getting increasingly complex—more sensors, more points, more systems, AI, and digital twins. We have a flood of information and streams of data, yet no single nozzle that will do the work of putting out the fire. We also have incredible applications that do wonderful things, but getting them to work and communicate with each other seems to always be a Herculean task. The amount of effort and time is a major pain point for folks like Sarah, who expect things to work as easily as everything else in their lives. For most, the benefits of integration outweigh the level of effort. This is the main reason for the slow adoption rate. only just The industry’s slow shift to cloud-native is revealing a serious skills gap. Cloud-native has been the standard architecture for IT departments for years now, and the onboarding of OT into the cloud-native space is beginning to blur the lines between the two. IT and OT are converging, and knowledge of both is becoming a prerequisite. Today, it’s difficult to find enough workers with the skills and knowledge level to tackle both. All these challenges hobble the goal of delivering smart technology at scale. Overcoming these obstacles requires technology that facilitates app integration while also improving the experience of industry stakeholders like Sarah. Instead of retooling our entire workforce, we can retool the way we interface with building systems. What is an Interoperable Building Box or IBB? Let’s start with a technical definition: The IBB (Interoperable Building Box) is orchestration software running on a physical or virtual machine that exists on-prem; the IBB acts as a standardized interface to connect a building’s local network to the . The IBB runs containerized cloud-native applications and services based on the Open Container Initiative ( ) standard. The IBB makes deploying and managing containerized software easier and more secure and provides an automated way for systems to discover and connect with systems having matching capabilities both within the IBB or in the Cloud in a plug-and-play manner. Internet Cloud OCI The purpose of the IBB is to make a building cloud native. That is, all its technologies and apps are built to work within (i.e., “native to”) a cloud environment. It must also support standard cloud functionalities like containerization, dockers, and orchestration (Kubernetes). By functioning like a standard cloud provider, the IBB allows the building to reap the advantages of localized control, namely better resiliency, security, and faster access. inherently Imagine “A Smartphone for Your Building” In a way, you can think of the IBB as a “smartphone for your building.” Consider all the ways your phone expands your capacity to do things. You can talk to anyone, anywhere, at any time. You can download, install, and run almost an unlimited number of apps. You can connect to the internet, access cloud storage, store local data, share files with your computer, and connect to wireless devices. In the same way, the IBB expands your building’s potential by providing it greater power to communicate and connect. Overall, your property becomes exponentially more efficient and productive. And because the IBB is located on-prem (i.e., in your building’s “pocket”), it can reliably deliver secure local storage of sensitive data and low latency times. For example, data from equipment sensors need not make the long round-trip to a cloud platform and back again. Data storage and computation are already . Such local processing makes storage of sensitive information more secure, while low latency times help protect critical systems and sensitive equipment, while the cloud connection automatically creates a copy of such data for backup and analysis in the cloud. This is analogous to taking a picture on your smartphone; you can see the image immediately, and it is also stored in your cloud photo album. in the building Parts of the IBB At the heart of IBB is containerization—a technology for packaging, distributing, and managing applications in a self-contained unit (i.e., “containers”). Containers house everything an app needs to run, and this isolation makes them lightweight, portable, and consistent. Since multiple containers can run on the same IBB, they share the required computing resources (CPU, memory, etc.). cloud-native The IBB consists of three main parts: , , and . These parts function together to make deploying and managing containerized apps easier and more secure. Operating System (OS) Administration IBB Apps (OS) Operating System Like a great deal of cloud-native computing environments, IBB runs on Linux, either on bare metal hardware or on a suitable Virtual Machine. The OS layer of the IBB also includes the open-source Kubernetes (often known as k8s) orchestration platform that manages IBB App containers. The OS layer of the IBB also includes other open-source software to further automate the management of IBB Apps. Administration The admin area of the IBB provides the tools for administrators to install and manage containerized applications. This includes software for the management of IBB Apps installed in the IBB, as well as user access and security policies and management. These admin tools provide admins access to the IBB remotely, using secure proxying mechanisms. IBB Apps These are the Apps and services provided by Independent Software Vendors (ISVs) that are installed in the IBB by admin users using the Admin tools provided. Each IBB App exists in its own container environment and thus operates separately from other containers (as if in its own hardware environment). Each IBB App communicates with other IBB Apps using IP networking with the help of IBB orchestration. Improving Stakeholder Experience IBB implementation improves the experience for all stakeholders because it simplifies the integration process. Currently, building owners and managers like Sarah need to employ capable folks with specialized knowledge to get things to work together. The process is complex, time-consuming, and expensive. The IBB takes the complexity out of the process by facilitating plug-and-play workflows. Let’s see how this works by following the process of installing and configuring an IBB using two different personas. IBB Installation Both HVAC and IT engineers can use familiar workflows and tools when installing and configuring an IBB. Here are the steps for installing an IBB for an HVAC Engineer and a DevOps: —Jake is tasked with installing a physical IBB device. He orders a suitably specified IBB-compatible device from his trusted vendor (CPU, memory, storage, etc.), takes it to the site, fastens it to a wall, connects it to the network, and on his browser, navigates to the IBB’s address and the IBB “Welcome” page. Jake (HVAC Engineer) —Mandy is tasked to install an IBB in a Virtual Machine on-prem. She navigates to the IBB repository on GitHub, looks over the IBB installation instructions, downloads the code, installs the IBB in the VM using her standard DevOps tools, and navigates to the IBB’s address and to the IBB “Welcome” page. Mandy (DevOps) Both Jake and Mandy were able to work in ways comfortable with their respective experience and skillset to achieve similar results; Jake through physical “box” installation that he was comfortable with, and Mandy used online “virtual” tools she uses daily. These flexible workflows and tools speed up the integration process. IBB Configuration Once installed, Jake and Mandy will need to configure the IBB to their specific needs for the building. On the IBB “Welcome” page, Jake/Mandy find a list of management platforms that support the IBB. They select the platform being used for their building project. In this example, they choose . Next, they login into the portal. The IBB is now installed and configured to the appropriate management platform. Acme X Cloud Acme X Cloud Acme X Cloud Now, let’s continue the configuration, considering Jake’s workflow. App Installation Once the configuration is complete, Jake can install and manage applications. He begins by choosing the “Install IBB App” option in the management platform (i.e., ). Next, he selects the app he wants to install. In this case, he wants to install a Haystack IDL (Independent Data Layer). Jake configures the app as necessary. The IDL app is installed, and Jake is presented with its UI. Acme X App Integration Next, Jake wants to install a dashboard required for the IDL. He uses the same IBB management system to install and configure the dashboard. The dashboard is then automatically connected to the IDL and runs the way Jake configured it. That is, the dashboard is running in the IBB, and it’s also connected to the IDL because they have compatible capabilities. Both Jake and Mandy can work efficiently and productively using their own skills and knowledge. Jake knows the apps he installed are compatible and already comply with IT policies. Mandy knows that the IBB is either a well-managed physical device or a virtual device she herself can oversee. More importantly, both engineers work within the purview of their own skill set. That is, they need not know anything about what the other does. In this way, the IBB helps ameliorate the industry’s skills gap. Instead of retooling our entire workforce, we can retool the way we interface with building systems. Vendors and End Users As was stated earlier, the idea of cloud-native architecture and containerization isn’t new; it’s only newly applied to the building automation industry. For years, app developers and the IT industry have built massive ecosystems that support and expand these technologies. Every time you use the Internet or your smartphone, you are using cloud-native. Everyone benefits, and now buildings can reap these benefits with the IBB. For example, mobile app developers follow common standards and protocols within both the iOS and Android platforms. The standards give developers dependable and consistent guidelines that make app deployment easy. Moreover, markets like Apple Store and Google Play ensure these standards are followed. Customers who download these apps can trust they are secure, reliable, and compatible with their devices. There’s no need to call someone to integrate your Instagram app to your iPhone. It just works. Now, contrast the above with today’s automation industry workflows, where thousands of vendors and developers create apps built with a disparate collection of proprietary standards, protocols, and guidelines that run on different platforms. Some are cloud-native, but most aren’t. With the support of vendors and the automation community, we can adopt the IBB and cloud-native architecture to create a collaborative ecosystem that would unleash the functionality and creativity of the entire industry. Conclusion The IBB not only holds the promise of streamlined integration and enhanced efficiency for the smart buildings industry, but it also addresses the very frustrations experienced by stakeholders like Sarah. For her, the dream of plug-and-play apps for her building is in reach. The IBB will result in a disruption to the entire industry by changing the way we develop, deploy, and manage our apps and data. Cloud-native offers the freedom and power our industry needs to leap forward and meet Sarah’s expectations. Moreover, the IBB’s benefits ultimately trickle down to the building’s users, tenants, and occupants. Also published . here

Introductory Guide to the Interoperable Building Box (IBB)

In this simple tutorial, we will explore creating a Telegram Bot using Node JS. We will Create a Telegram Bot that will send a random Chuck Norris Joke. By following along, you'll learn how to use Node.js, connect to APIs, and add some fun to your Telegram chats. Prerequisites: You should have Node.JS installed in your system, preferably the LTS version. A Telegram account so you can create a Bot Creating the Telegram Bot: First and Foremost step, we need to create a Telegram bot in the telegram App. Follow the below steps to create the Telegram bot. Open the Telegram App. Now Search for and open it. It is like the bot admin for the whole of Telegram. @BotFather If you are creating a bot for the first time, Click on . /start Next, click on and follow the on-screen instructions to create the bot. /newbot Once the bot has been created, copy the Bot API key and save it for later. Setting up the Bot in Node JS: Next, let's set up our development environment. mkdir chuck-norris-telegram-bot
npm init -y Let’s install the necessary dependencies from npm npm i node-telegram-bot-api dotenv axios node-telegram-bot-api - This provides all the necessary API functions to set up and run our telegram bot. dotenv - To read the .env file secret keys. axios - To make HTTP Rest API calls with the chuck norris jokes API. Coding the Bot: Let’s add the API key to the file .env TELEGRAM_BOT_API_KEY=<Your_API_Key> We will be using ES6 modules to code the bot. So add the below line in package.json {
  // rest of the package.json
  "type": "module" // Add this line to use ES6 modules in our code
  // rest of the package.json scripts and dependencies
} Create an file and copy the contents below index.js import dotenv from "dotenv";
import TelegramBot from "node-telegram-bot-api";
dotenv.config();

const TELEGRAM_BOT_API_KEY = process.env.TELEGRAM_BOT_API_KEY;
const telegramBot = new TelegramBot(TELEGRAM_BOT_API_KEY, { polling: true });

telegramBot.onText(/\/start/, (msg) => {
  telegramBot.sendMessage(msg.chat.id, `Welcome ${msg.chat.first_name}`);
}); In the above code, we are loading the env keys from the file using library. Then we are creating an instance of Telegram Bot passing the api key. .env dotenv The function of the telgram api takes in two arguments, where the first argument is a regular expression that matches the input command. The second argument is a callback function that executes when the regExp is matched. onText() Here we are just greeting the user once they click start in the bot. Let’s test it. Start our bot running the below command npm start Now, Head over to Telegram and Open the Bot that we created and click start. As expected, our bot responded with a Welcome message. Now Let’s move on to creating the bot command for getting the Jokes. Creating the Bot Command: Now, let’s create a bot command that will be used by the users to send commands to the bot.
To create a command, open the BotFather App in Telegram. Send command to the BotFather and Select your father in the button displayed. /mybot Then Click on → . Edit Bot Edit Commands Create the following command as shown below and send it to the bot.
joke - Send a random Chuck Norris Joke That’s it. The command is created. Now let’s move on to create the bot response for that command. /joke Creating the Bot Response: Open in vs code and add the below code to it. index.js telegramBot.onText(/\/joke/, async (mesg) => {
  // To implement the functionality to fetch the Joke from the API
}); Whenever the user sends the command this function will be executed. Let’s move into implementing the functionality now. /joke Let’s create a separate file that will be used to fetch Jokes from the Chuck Norris API. api.js import axios from "axios";

export const getJoke = async () => {
  try {
    const response = await axios.get("https://api.chucknorris.io/jokes/random");
    const data = response.data;
    return data.value;
  } catch (error) {
    console.log(error);
    return "No Jokes";
  }
}; The function will fetch a random Joke by hitting the Chuck Norris API. getJoke() Let’s import this function in and use it as our bot response. index.js // Import it at the top
import { getJoke } from "./api.js";

// let's complete the bot response
telegramBot.onText(/\/joke/, async (msg) => {
  const joke = await getJoke();
  telegramBot.sendMessage(msg.chat.id, joke);
}); So, whenever the user sends the command, our bot will fetch a random Joke from the Chuck Norris API and send the response back to the user. /joke Note: We need to import the *getJoke* from *./api.js* (with extension) not just *./api* . Else it will throw an error Let’s test it. Open the Command Prompt and start the app by running the below command. npm start Now, open our bot and send the command. /joke Yes! As you can see, the bot responds with a funny(?) Chuck Norris joke. Conclusion: That’s it. Our Bot is ready. Feel free to add more bot commands and play around. To summarize, In this tutorial, we learned how to create a telegram bot using Node.JS and also how to create bot commands and how to send bot responses back to the user. You can find the source code of this article in my . GitHub Also published . here

How to Create a Telegram Bot That Tells Chuck Norris Jokes

198 Stories To Learn About Technology

In this blog post we will explore the Ockam command line interface, and see how we can connect a traditional web app to a PostgreSQL database, with minimal / no code changes. We will create a very basic Python Flask app that simply increments a counter in a PostgreSQL database. Then we will move the connection between the application and database through an Ockam secure channel. ockam What is Ockam? is a suite of libraries, command line tools, and managed cloud services for orchestrating end-to-end encryption, mutual authentication, key management, credential management, and authorization policy enforcement — all on a massive scale. Ockam's end-to-end guarantee authenticity, integrity, and confidentiality of all data-in-motion at the application layer. Ockam Rust secure channels If you store your data in a relational database, , graph database, or something similar, that data is probably private. And you probably don't want to expose it to the Internet. So you can resolve this issue by placing it inside a private subnet. However, now you have to manage network access control lists, security groups, or route tables to allow other machines to open a connection to the database. That is a lot of overhead. NoSQL With Ockam, network administrators don't have to update network access control lists, security groups, or route tables. Ockam applies fine-grained control to your services via Attribute-Based Access Control. And you can even like Okta to restrict who can access your services. integrate with an external identity provider In this blog post, we will explore the Ockam command line interface, and see how we can connect a traditional web app to a PostgreSQL database, with minimal / no code changes. We will create a very basic Python Flask app that simply increments a counter in a PostgreSQL database. Then we will move the connection between the application and database through an Ockam secure channel. ockam Our journey Before we get started, let's take a look at the steps we'll perform in this blog post. Use to install the Ockam application and create an Ockam project. This is the first prerequisite. ockam enroll Set up the PostgreSQL database. This is the second prerequisite. Then configure an Ockam "outlet" to the database server. We will learn more about this in the "connect the database" section below. Set up the web app (Python Flask). This is the third prerequisite. Then configure an Ockam "inlet" from the Python app. We will learn more about this in the "connect the web app" section below. Prerequisites In order to follow along, please make sure to install all the prerequisites listed below. Ockam Command Run to install this via . You'll then be able to run the CLI app in your terminal. brew install build-trust/ockam/ockam brew ockam Python, and libraries: Flash, psycopg2 Run to install this via . You'll then be able to run the command in your terminal. brew install python brew python3 Instructions on how to get the dependencies ( , ) are in the section below. Flask psycopg2 Python Code Postgresql Run via . You'll then be able to run the PostgreSQL database server on your machine on the default port of . Please make sure to follow 's instructions and add PostgreSQL to your path. brew install postgresql@15 brew 5432 brew Run to start the PostgreSQL server. brew services start postgresql@15 Then you can set a new password for the database user . Set this password to . The Python Code below uses as the connection string for the db driver. postgres password postgres:password@localhost The instructions below allow you to do this on and macOS: Linux In a terminal run to login to the database locally as the user. sudo -u postgres psql --username postgres --password --dbname template1 postgres Then type this into REPL: , and finally type . ALTER USER postgres PASSWORD 'password'; exit The Web App - Python Code The Python Flask web app increments a counter in a PostgreSQL database. The entire app fits in a single file. Create a file on your machine and copy and paste the code below into it. main.py import os
import psycopg2
from flask import Flask

CREATE_TABLE = (
    "CREATE TABLE IF NOT EXISTS events (id SERIAL PRIMARY KEY, name TEXT);"
)

INSERT_RETURN_ID = "INSERT INTO events (name) VALUES (%s) RETURNING id;"

app = Flask(__name__)
pg_port = os.environ['APP_PG_PORT'] # 5432 is the default port
url = "postgres://postgres:password@localhost:%s/"%pg_port
connection = psycopg2.connect(url)

@app.route("/")
def hello_world():
    with connection:
        with connection.cursor() as cursor:
            cursor.execute(CREATE_TABLE)
            cursor.execute(INSERT_RETURN_ID, ("",))
            id = cursor.fetchone()[0]
    return "I've been visited {} times".format(id), 201 In this script, we use to establish a connection to the database. "postgres://postgres:password@localhost:%s/"%pg_port gets its value from the environment variable . pg_port APP_PG_PORT We will set the environment variable to before we run the Python script (instructions below). APP_PG_PORT 5432 So the database connection string simply points to . localhost:5432 Please make a note of the Python variable and environment variable. In production, we usually load the port from an environment variable and it is not hardcoded in the source. pg_port APP_PG_PORT Run the web app Follow the instructions below to run the web app. First, make sure to add the required Python dependencies with: # Install flask.
pip3 install flask
# Install psycopg2.
pip3 install psycopg2-binary Then start the app ( ) with: Flask main.py export APP_PG_PORT=5432
flask --app main run Finally, in a web browser open this URL: . http://localhost:5000/ Install Ockam Now that we have set up our web app and database let's do this next: Add Ockam to the mix. Update our environment variable so that it connects to a new port (not which is the where the PostgreSQL server runs). APP_PG_PORT 5432 First, let's run . Make sure that you've already installed the Ockam CLI as described in the prerequisites section above. ockam enroll In a terminal window, run this command and follow the prompts to complete the enrollment process (into Ockam Orchestrator). ockam enroll This is what the command does: ockam enroll It checks that everything is installed correctly after successful enrollment with Ockam Orchestrator. It creates a Space and Project for you in Ockam Orchestrator and provisions an End-to-End Encrypted Relay in your project at . default /project/default Connect the database Next, let's set up a that allows us to send raw TCP traffic to the PostgreSQL server on the port . Then create a relay in our default Orchestrator project. To do this, run these commands in your terminal. tcp-outlet 5432 export PG_PORT=5432
ockam tcp-outlet create --to $PG_PORT
ockam relay create Notes: We use environment variable here, and not (which is used in our web app). It points to the default PostgreSQL port of . In the section below we will change to a different value. PG_PORT APP_PG_PORT 5432 APP_PG_PORT We'll create the corresponding in the next section. tcp-inlet Relays allow you to establish end-to-end protocols with services that operate in remote private networks. They eliminate the need to expose ports on the remote service (to a hostile network like the Internet). Connect the web app Finally, let's setup a local so we can receive raw TCP traffic on port before it is forwarded. tcp-inlet 5433 export OCKAM_PORT=5433
ockam tcp-inlet create --from $OCKAM_PORT Notes: The new environment variable points to a new port . $OCKAM_PORT 5433 This is the port that the will listen on. And it is different from the default PostgreSQL port. tcp-inlet A TCP inlet is a way to define where a node listens for its connections. And then where it should forward that traffic to. An inlet and outlet work together to form a portal. Next, start your web app again with the commands below. export APP_PG_PORT=$OCKAM_PORT
flask --app main run Finally, connect to this URL again from your web browser . http://localhost:5000/ We have changed the to the same value as ( ). Our web app ( script) does not directly connect to the unsecure database server (on port ). It now goes through the secure channel 🔐. $APP_PG_PORT $OCKAM_PORT 5433 main.py 5432 The counter will continue to increment just as it did before, with zero code changes to your application. But the web app now communicates with the database through an Ockam secure channel 🎉. Multiple machines You can also extend this example and move the PostgreSQL service into a Docker container or to an entirely different machine. Once the nodes are registered (after runs), this demo will continue to work, with no application code changes and no need to expose the PostgreSQL ports directly to the Internet. ockam enroll Also, you can run the web app and the database on different machines. To do this: Change in the script to the IP address of the machine that hosts the database. localhost main.py Run on both machines (the web app machine and the database server machine). ockam enroll Explore other commands Now that you've completed this example, here are some commands for you to try and see what they do. You can always look up the details of what they do in the . As you try each of these, please keep an eye out for things you may have created in this exercise. manual Try . Do you see the nodes that you created in this exercise? ockam node list Try . These are shorter examples for you to get familiar with commands. ockam node --help Try . Do you see the that you created in this exercise? ockam node show web tcp-inlet Try . Do you see the that you created in this exercise? ockam node show db tcp-outlet Try . Do you see the identities you created in this exercise? ockam identity list Also published here.

Securely connect a web app to a remote Postgres database

Conexión de una aplicación web tradicional a una base de datos Postgres

Connexion d'une application Web traditionnelle à une base de données Postgres

एक पारंपरिक वेब ऐप को पोस्टग्रेज डेटाबेस से कनेक्ट करना

従来の Web アプリを Postgres データベースに接続する

Conectando um aplicativo Web tradicional a um banco de dados Postgres

Kết nối ứng dụng web truyền thống với cơ sở dữ liệu Postgres

将传统 Web 应用程序连接到 Postgres 数据库

Creating reliable and practical applications is of the utmost importance in modern web development. Frameworks and tools that not only speed up the development process but also provide better functionality and performance are constantly sought after by developers. In this situation, the pairing of Appwrite and Svelte stands out as a complete toolkit that enables programmers to create feature-rich web applications quickly. Appwrite, an open-source backend as a service (BaaS) platform, provides developers with many services like managing user authentication, data storage, file storage, and more with its intuitive APIs that abstract complex backend operations, allowing developers to focus on building scalable frontend applications. Svelte is a free and open-source frontend component framework used to build user interfaces by compiling components at build time without needing a resulting in faster rendering. virtual DOM In this article, you will learn how to use Appwrite’s API to create a list app with features like task creation and deletion and storing the data in leveraging Appwrite, Svelte, and for styling. Appwrite Cloud Tailwind CSS Source Code The complete source code for this project is in this . GitHub repo Demo To try out the live demo, check it . out here Prerequisites Throughout this tutorial, you will need the following: Have the JavaScript runtime, , installed on your local machine Node.js Basic JavaScript knowledge and understanding of Svelte An Appwrite Cloud account. is free Sign-up Setting up Appwrite Cloud With Appwrite Cloud, you do not need to run a local instance on your system using Docker. Everything happens in the cloud. For setup, go to your Appwrite Cloud admin console and create a new project by clicking the button. + Create project Creating a database The database section allows you to edit, create, and view your collections. Navigating into the completed project, click the Databases tab on the console's left pane and create a new database. Creating collections Once you have created the database, it is time to add a new collection to your project. Under the tab, click the button and give it a name. Collections + Create collection Navigate into the to define and create your data structure by adding attributes. Collections Here’s what your attributes should look like: Attribute Key Attribute type Size Default value Required item string 255 - Yes Still in the menu, under the tab, change the read and write permissions and the delete permission for your collection. Collections Settings Adding platforms to your project This step is vital as it would validate the requests coming from the client side into the Appwrite Cloud console. On the console home page, click on the tab and scroll to the section . Click on the Add platform and select one of the options from the drop-down. Overview Integrations : For this application, select the option. PS Web App Web To add the web platform, give it a and . The can be anything you desire, and the can be the domain under which the web project has access during development. The can use the asterisk ( ) symbol to locally test the web app. Name Host Name Host Host * Creating a new Svelte Project To create a new Svelte project, run this command in the command line interface (CLI) to scaffold the app. npm create svelte@latest list-app Follow the instructions on the terminal as described below: Accept the installation with the flag y Select the Skeleton project from the Svelte app template For type checking with TypeScript, choose No. If otherwise, and you are comfortable using TS, select it The last option is optional if you decide to add it to the project Use the following command below to begin the next steps: cd listsApp

npm install (or pnpm install, etc)

git init && git add -A && git commit -m "Initial commit" (optional)

npm run dev The command above does the following: : navigate to the created Svelte project directory cd The second command installs all the dependencies using the package manager, npm The commands initialize, stage, and save a snapshot of the current project state and keep track of your changes git Start the development server on port to preview the app 5173 Installation Appwrite SDK Launch your terminal and type the following command to install the Appwrite Web SDK to your project: npm install appwrite Tailwind CSS Tailwind is a utility-first CSS framework packed with classes directly in your markup. The best way to install Tailwind CSS onto your project is by using the Tailwind CLI tool. Check out the Sveltekit framework guide and follow . this process Creating the user interface The UI for the list app will display all the data from the documents in Appwrite Cloud and can delete an item with a click. Create a new folder called in the directory. Next, create a new file named, ItemList.svelte. lib src Now, update these components ItemList.svelte and +page.svelte with the following code: src/lib/ItemList.svelte <script>
  export let list;
</script>

<button type="button">
  {list}
</button> The above code snippets do the following: The section uses the export let syntax used to declare a named export in a component which exposes the variable list accessible in the component script ItemList Pass the variable list in the element button src/routes/+page.svelte <script>
  import ItemList from "../lib/ItemList.svelte";
</script>

<div
  class="w-4/5 mx-auto max-w-6xl flex flex-col lg:w-6/12 select-none min-h-screen"
>
  <p class="text-center my-6">Delete an item with a click.</p>
  <img
    src="assets/app-launch.svg"
    alt="Launch rocket"
    class="mx-auto w-3/4 lg:w-2/4"
  />
  <input
    type="text"
    placeholder="enter item"
    class="bg-gray-200 p-4 border-0 text-slate-600 rounded-lg text-center text-xl my-3"
  />
  <ul class="flex p-0 flex-wrap gap-3 mt-4">
    <li
      class="md:text-4xl lg:text-2xl bg-slate-100 p-5 rounded-lg grow text-center shadow hover:bg-orange-200 cursor-pointer"
    >
      <ItemList list={"Watch the superbowl half-time show"} />
    </li>
  </ul>
  <footer class="mt-auto">
    <div class="mt-10 text-center text-gray-500">
      <address>
        Built by
        <span class="text-blue-600">
          <a href="https://twitter.com/terieyenike" target="_">Teri</a>
        </span>
        &copy; 2023
      </address>
      <div>
        <p>
          Fork, clone, and star this
          <a
            href="https://github.com/Terieyenike/appwrite-svelte-list-app"
            target="_"
            rel="noopener noreferrer"
            class="text-blue-600">repo</a
          >
        </p>
      </div>
      <p class="text-sm">Appwrite x Svelte x Tailwind CSS</p>
    </div>
  </footer>
</div> In the code snippets above, the following occurs: Import the component, ItemList Throughout the markup, Tailwind CSS classes beautify the UI For the image, use any image of your choice saved in the folder inside the folder as well static assets Declare the value as in the component props list ItemList Here’s what you should see: PS: So far, the app is static. Creating environment variables Environment variables are dynamic values set in a program, operating system (OS), or application accessible in a runtime environment. They keep sensitive information away from the application code. Create a new file, , in the root of the project directory and copy-paste this code: .env .env PUBLIC_DATABASE_ID="<DATABASE_ID>"
PUBLIC_COLLECTION_ID="<COLLECTION_ID>"
PUBLIC_PROJECT_ID="<PROJECT_ID>"
PUBLIC_INSTANCE_URL="https://cloud.appwrite.io/v1" Replace all the values in the quotation marks with the actual values from your Appwrite Cloud admin console. Connecting to Appwrite backend Initializing the Appwrite client Let’s create a file named in the directory. Copy-paste this code: utils.js src utils.js import {
  PUBLIC_DATABASE_ID,
  PUBLIC_COLLECTION_ID,
  PUBLIC_PROJECT_ID,
  PUBLIC_INSTANCE_URL,
} from "$env/static/public";
import { Client, Databases, ID, Query } from "appwrite";

const client = new Client();

const databases = new Databases(client);

client.setEndpoint(PUBLIC_INSTANCE_URL).setProject(PUBLIC_PROJECT_ID);

export const create = (data) =>
  databases.createDocument(
    PUBLIC_DATABASE_ID,
    PUBLIC_COLLECTION_ID,
    ID.unique(),
    data
  );

export const getList = databases.listDocuments(
  PUBLIC_DATABASE_ID,
  PUBLIC_COLLECTION_ID,
[Query.orderDesc("$createdAt")]

);

export const deleteList = (database_id, collection_id, data) =>
  databases.deleteDocument(database_id, collection_id, data); The code above won’t allow your application to run in development. But when you want to push your project code to GitHub, use this instead and place the .env file in the .gitignore file. For now, let’s use this method with the code instead: utils.js import { Client, Databases, ID, Query } from "appwrite";

const client = new Client();

const databases = new Databases(client);

client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("PROJECT_ID");

export const create = (data) =>
  databases.createDocument(
    "[DATABASE_ID]",
    "[COLLECTION_ID]",
    ID.unique(),
    data
  );

export const getList = databases.listDocuments(
  "[DATABASE_ID]",
  "[COLLECTION_ID]",
  [Query.orderDesc("$createdAt")]
);

export const deleteList = (database_id, collection_id, data) =>
  databases.deleteDocument(database_id, collection_id, data); The code above does the following: Import the Appwrite package and initialize the new instance of the web SDK Pass the with the endpoint and project details client Export the function with the parameter, responsible for creating the document listing all the document data on the client side. This request generates a unique create data ID Export the function, which uses the list documents databases API with the database ID and collection ID, as well as utilizing the query endpoint to show the recent item first when added by a user getList Finally, the function deletes a document by its unique with the data parameter deleteList ID Creating data using Appwrite APIs Since this is a CRUD application, let’s handle sending a new item to Appwrite Cloud. Before updating the page, create another file named in the directory. +page.svelte store.js src Copy-paste this code: src/store.js import { writable } from "svelte/store";

export const data = writable({
  name: "",
}); In Svelte, the writable function is a built-in store creator that enables you to create a writable store with values from a component. outside Now that is taken care of, update the components: +page.svelte src/routes/+page.svelte <script>
  import { create } from "../utils";
  import { data } from "../store";
  ...

  function addToList(e) {
    if (!$data.name) {
      return;
    } else if (e.key !== "Enter") {
      return;
    }
    create({
      item: $data.name,
    }).then(
      function (response) {
        window.location.reload();
      },
      function (error) {
        console.log(error);
      }
    );
    $data.name = "";
  }
</script>

<div
  class="w-4/5 mx-auto max-w-6xl flex flex-col lg:w-6/12 select-none min-h-screen"
>
  <p class="text-center my-6">Delete an item with a click.</p>
  
  <input
    type="text"
    placeholder="enter item"
    on:keydown={addToList}
    bind:value={$data.name}
    class="bg-gray-200 p-4 border-0 text-slate-600 rounded-lg text-center text-xl my-3"
  />
  <ul class="flex p-0 flex-wrap gap-3 mt-4">
    <li
      class="md:text-4xl lg:text-2xl bg-slate-100 p-5 rounded-lg grow text-center shadow hover:bg-orange-200 cursor-pointer"
    >
      <ItemList list={"Watch the superbowl half-time show"} />
    </li>
  </ul>
  
</div> At this point, the code above does the following: Import the function as well as the data create store In the function, nothing happens if no value is present in the input field. Also, with the function, the key reads the value, , which is saved in Appwrite if successful. After that, the page reloads immediately. addToList create item $data.name The input element with the action event that listens to the enter key on the keyboard and binds the empty value keydown Let’s try sending an item to Appwrite Cloud. Head over to your Appwrite console to confirm the value is stored. Displaying the list items This section displays the list of items stored in Appwrite on the client side. Again, update the code in the component. +page.svelte src/routes/+page.svelte <script>
  import { onMount } from "svelte";
  import { getList, create } from "../utils";
  ...

  let lists = [];

  onMount(() => {
    getList.then(
      function (response) {
        lists = response.documents;
      },
      function (error) {
        console.log(error);
      }
    );
  });

  // addToList function

</script>
<div
  class="w-4/5 mx-auto max-w-6xl flex flex-col lg:w-6/12 select-none min-h-screen"
>
  
 
  <ul class="flex p-0 flex-wrap gap-3 mt-4">
    {#if lists.length == 0}
      <p class="m-auto mt-8">No data in the database</p>
    {:else}
      {#each lists as list (list.$id)}
        <li
          class="md:text-4xl lg:text-2xl bg-slate-100 p-5 rounded-lg grow text-center shadow hover:bg-orange-200 cursor-pointer"
        >
          <ItemList {list} />
        </li>
      {/each}
    {/if}
  </ul>
  
</div> In the code snippet above, the following occurs: Import the lifecycle function, as well as the getList function onMount Declare an empty array with the variable lists The function is called immediately when a component is first rendered and inserted into the DOM onMount Since it is an asynchronous task, the method returns a promise then() In the element, loop through the lists array using the expression <ul> #each Pass the props, in the component list ItemList View the entire code for the file in this : +page.svelte gist Over in the component, update the file: ItemList src/lib/ItemList.svelte <script>
  import { deleteList } from "../utils";

  ...

  function handleDeleteListItem() {
    deleteList(list.$databaseId, list.$collectionId, list.$id).then(
      function (response) {
        console.log(`${list.item} successfully deleted`);
        window.location.reload();
      },
      function (error) {
        console.log(error);
      }
    );
  }
</script>

<button type="button" on:click={handleDeleteListItem}>
  {list.item}
</button> In this scenario, the code above does this: Import the function deleteList The function will delete an item from the list array on click of a button handleDeleteListItem The page reloads when the action occurs with the method reload() Before now, in the button element, the text was not dynamic; replaced with the passed props Wrapping it up Building a list app using the powerful combination of Svelte and Appwrite brings together the best in frontend development and backend services. In conclusion, the connection between Svelte and Appwrite enables developers to build web applications efficiently with enhanced performance and robust backend functionality. Try using today, and you will keep coming back for more, just like this . Appwrite Cloud demonstration list app Resources Using Environment Variables With SvelteKit Appwrite’s Databases APIs Svelte/Store writable function

Sveltekit and Appwrite Cloud: How to build a list app

Stories, News & Mentions about APPFOLLOW

Appfollow’s Stories on HackerNoon