<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: FabianBG</title>
    <description>The latest articles on DEV Community by FabianBG (@fabianbg).</description>
    <link>https://dev.to/fabianbg</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F54432%2F7e8534c6-0eb1-4dbf-b532-b0aa8354de0f.jpeg</url>
      <title>DEV Community: FabianBG</title>
      <link>https://dev.to/fabianbg</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/fabianbg"/>
    <language>en</language>
    <item>
      <title>The DDD microservice with GO</title>
      <dc:creator>FabianBG</dc:creator>
      <pubDate>Tue, 08 Sep 2020 19:06:59 +0000</pubDate>
      <link>https://dev.to/fabianbg/the-ddd-microservice-with-go-5cie</link>
      <guid>https://dev.to/fabianbg/the-ddd-microservice-with-go-5cie</guid>
      <description>&lt;h1&gt;
  
  
  Intro
&lt;/h1&gt;

&lt;p&gt;Hi everybody, these last days I decided to star a base project with the basic folder structure and libraries to start easily a new microservice with GOLANG. Right now there is a lot of continuous change in the GOLANG environment so this project uses a specific tech stack but can be adapted to any tech stack due to the architecture of DDD which is an architecture that I think helps a lot to make more refactorable any project.&lt;/p&gt;

&lt;h1&gt;
  
  
  Tech Stack
&lt;/h1&gt;

&lt;p&gt;Basically knowing that the arch gonna be Doman Driven Design I find the best suitable techs to apply this patterns to the project so at the end if you know about the current frameworks on the internet you should know (GOKIT)[&lt;a href="https://github.com/go-kit/kit"&gt;https://github.com/go-kit/kit&lt;/a&gt;] as its definition is not a framework is a bunch of tools to develop microservices it supports a lot of advanced features like services discovering and circuit breakers. SO this is the main reason for me to choose this tech to develop this base project.&lt;br&gt;
For the data persistence, I go for a mongo to keep a simple and versatile data model there is an official mongo connector for GOLANG so it is simple to make the decision of which library use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gorzBDlr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9o4uck63ujn4w351gqxt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gorzBDlr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9o4uck63ujn4w351gqxt.png" alt="Tech stack"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Architecture
&lt;/h1&gt;

&lt;p&gt;The chosen architecture will be Doman Driven Desing to keep the project well organized and very scalable.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--R5euRbMz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/rnpl06p9zfov7zd19td0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--R5euRbMz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/rnpl06p9zfov7zd19td0.png" alt="DDD architecture diagram"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Project
&lt;/h1&gt;

&lt;p&gt;So there is the project it could be found on my GitHub page on clicking this link [&lt;a href="https://github.com/FabianBG/gokit-base"&gt;https://github.com/FabianBG/gokit-base&lt;/a&gt;].&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Qao-3sWV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6wsmha7yx8bwl0fmxqs2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Qao-3sWV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6wsmha7yx8bwl0fmxqs2.png" alt="Project structure"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope it helps you to get into Golang and any comments about how to improve the code it is welcome.&lt;/p&gt;

</description>
      <category>microservices</category>
      <category>go</category>
      <category>ddd</category>
    </item>
    <item>
      <title>Tech your computer to play chrome dino game</title>
      <dc:creator>FabianBG</dc:creator>
      <pubDate>Mon, 25 May 2020 02:47:22 +0000</pubDate>
      <link>https://dev.to/fabianbg/tech-your-computer-to-play-chrome-dino-game-2k08</link>
      <guid>https://dev.to/fabianbg/tech-your-computer-to-play-chrome-dino-game-2k08</guid>
      <description>&lt;h1&gt;
  
  
  Intro
&lt;/h1&gt;

&lt;p&gt;As an AI fanatic I decide to do a simple neural net to learn more about TensorFlow so I do a neural net which plays the offline chrome dino game, It a very simple approach than it is not the best and perfect but as a starter, point to learn AI, it is a funny way to do it.&lt;/p&gt;

&lt;h1&gt;
  
  
  The project
&lt;/h1&gt;

&lt;p&gt;For the common AI learning agents actually exist a lot of playgrounds (like GYM [&lt;a href="https://gym.openai.com/%5D"&gt;https://gym.openai.com/]&lt;/a&gt;) which simplify the way you interact with the game, the playgrounds can be paused and played frame by frame which is very helpful, it has a lot of useful data of each frame of the game such as rewards and game status. But For this I want to make it from a very scratch. So I choose to do it with the famous dino game.&lt;/p&gt;

&lt;p&gt;The project is coded in Python3, to get the actual state of the game it takes screenshots of the chrome window and has a controller for the keyboard to trigger the keypress. It is not a deep reinforcement learning approach, it is more like a supervised approach because first of all I played the game to generate the data then this data is fed to the neural net and finally is used to play.&lt;/p&gt;

&lt;p&gt;For the inpatients, the source code is on GitHub [&lt;a href="https://github.com/FabianBG/dinoplayer-neuralnet"&gt;https://github.com/FabianBG/dinoplayer-neuralnet&lt;/a&gt;]&lt;/p&gt;

&lt;h1&gt;
  
  
  Usage
&lt;/h1&gt;

&lt;p&gt;First of all download the code and open google chrome on [crome://dino].&lt;/p&gt;

&lt;p&gt;Then in the folder of the code execute the next command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;python3 main.py preview&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;It shows the preview of the area in which the code takes the screenshoots so move the navigator with the game to fit the preview.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--i-BuDCgB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/dinoplayer-neuralnet/blob/master/docs/dino1.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i-BuDCgB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/dinoplayer-neuralnet/blob/master/docs/dino1.png%3Fraw%3Dtrue" alt="preview"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When the screenshot area is set, use this command to generate the train data:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;python3 main.py gen-data&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;To start recording data &lt;em&gt;press the key i&lt;/em&gt;, and to stop &lt;em&gt;key e&lt;/em&gt;, finally to save the data on the preview window press the &lt;em&gt;key q&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;It will generate a &lt;em&gt;data-train.pkl&lt;/em&gt; file on the source. This contains the train data for your model.&lt;/p&gt;

&lt;p&gt;Next step is to train the model, so just exec:&lt;br&gt;
&lt;code&gt;python3 main.py train&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--X0aouuAp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/dinoplayer-neuralnet/blob/master/docs/dino2.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--X0aouuAp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/dinoplayer-neuralnet/blob/master/docs/dino2.png%3Fraw%3Dtrue" alt="train"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When all the train is done it saves a &lt;em&gt;model.tf&lt;/em&gt; file which has the trained model.&lt;/p&gt;

&lt;p&gt;Finally, to see how it does, execute&lt;br&gt;
&lt;code&gt;python main.py predict&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And to start predicting press &lt;em&gt;press the key i&lt;/em&gt; start the game and let the computer tries to do its best.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eUVDA00B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://github.com/FabianBG/dinoplayer-neuralnet/blob/master/docs/dino3.gif%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eUVDA00B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://github.com/FabianBG/dinoplayer-neuralnet/blob/master/docs/dino3.gif%3Fraw%3Dtrue" alt="sample"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The net can be improved just modify the file &lt;em&gt;model.py&lt;/em&gt; it has the net definition.&lt;/p&gt;

</description>
      <category>tensorflow</category>
      <category>chromedinogame</category>
    </item>
    <item>
      <title>MIJO chatbot store site manager FINAL PART AND SUBMIT</title>
      <dc:creator>FabianBG</dc:creator>
      <pubDate>Fri, 24 Apr 2020 21:48:19 +0000</pubDate>
      <link>https://dev.to/fabianbg/mmijo-chatbot-store-site-manager-final-part-and-submit-h7h</link>
      <guid>https://dev.to/fabianbg/mmijo-chatbot-store-site-manager-final-part-and-submit-h7h</guid>
      <description>&lt;h1&gt;
  
  
  Previous Post
&lt;/h1&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/fabianbg" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AMWfWfD4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--uuaj9GXv--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/54432/7e8534c6-0eb1-4dbf-b532-b0aa8354de0f.jpeg" alt="fabianbg image"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/fabianbg/mijo-chatbot-store-site-manager-part-2-mn7" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;MIJO chatbot store site manager PART 2&lt;/h2&gt;
      &lt;h3&gt;FabianBG ・ Apr 21 ・ 2 min read&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#twiliohackathon&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#ecommerce&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#chabot&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#gatsby&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  What I built
&lt;/h2&gt;

&lt;p&gt;I created a multi-static site manager for personal stores, managed through a chatbot. All the management of simple store such as create products, remove products and place orders it is done through message texts with a chatbot, it simplifies all the front end development and security because the bot is the only one who can access the API and as a developer, you just focus on the services.&lt;/p&gt;

&lt;p&gt;As a customer you can create your own store with some products than you like to sell and all managed just by sending a Whatsapp text to the chatbot. No application installed just a text.&lt;/p&gt;

&lt;h3&gt;
  
  
  Inspiration
&lt;/h3&gt;

&lt;p&gt;I decide to try this new approach because I think the chatbots have a lot of usages actually, in this case it can completely replace a complex UI and be as simple as an everyday action of sending messages. It simplifies the interaction with the machines and make more simple to use the new technologies for people that are not much into the tech.&lt;/p&gt;

&lt;h3&gt;
  
  
  What MIJO does
&lt;/h3&gt;

&lt;p&gt;It can create a store site with a simple base Gatsby template and deploy a static site on the server, manage a list of products and handle the customer checkout sending a message to the owner telling him about the customer and his order.&lt;/p&gt;

&lt;h4&gt;
  
  
  Category Submission:
&lt;/h4&gt;

&lt;p&gt;Exciting X-Factors is the main category of this project a good usage of the Twilio services to add a new way to manage an application with an AI assistant.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo Link
&lt;/h2&gt;

&lt;p&gt;A sample of the app is deployed on development and very small server of my company, I am moving the app to a personal server with more reliable storage and getting the Whatsapp Bussiness account to go to production, right now as a demo I using this small server.&lt;/p&gt;

&lt;p&gt;Main site:&lt;br&gt;
[&lt;a href="https://1.up-company.dev/"&gt;https://1.up-company.dev/&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;If you want to try a demo join the Whatsapp sandbox let me a comment to give you the message to join my sandbox and give a try.&lt;/p&gt;

&lt;h2&gt;
  
  
  Showcase
&lt;/h2&gt;

&lt;p&gt;Main page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QCX64dJ1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/raw/develop/images/m1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QCX64dJ1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/raw/develop/images/m1.png" alt="MIJO site"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Create an store:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fQMj8jLC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m2.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fQMj8jLC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m2.png%3Fraw%3Dtrue" alt="create a store"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5rUViocA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m6.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5rUViocA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m6.png%3Fraw%3Dtrue" alt="MIJO site with a store"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Add a product and update the site:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BRiZVRWb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m3.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BRiZVRWb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m3.png%3Fraw%3Dtrue" alt="add a product"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iZy_TAIF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m5.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iZy_TAIF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m5.png%3Fraw%3Dtrue" alt="update site"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Generated site:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gjRG9JJf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m7.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gjRG9JJf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m7.png%3Fraw%3Dtrue" alt="store"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Place an order:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xfoT-8HU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m10.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xfoT-8HU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m10.png%3Fraw%3Dtrue" alt="checkout"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FKSDhFg6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m11.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FKSDhFg6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m11.png%3Fraw%3Dtrue" alt="contact info"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IEbekwFR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m13.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IEbekwFR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/FabianBG/mijo-chatbot-store/blob/develop/images/m13.png%3Fraw%3Dtrue" alt="order message"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Link to Code
&lt;/h2&gt;

&lt;p&gt;All the code is on [&lt;a href="https://github.com/FabianBG/mijo-chatbot-store"&gt;https://github.com/FabianBG/mijo-chatbot-store&lt;/a&gt;]&lt;/p&gt;

&lt;h2&gt;
  
  
  How I built it (what's the stack? did I run into issues or discover something new along the way?)
&lt;/h2&gt;

&lt;p&gt;The main stack is NodeJS and Express for the compatibility with Gabsty which is the static site generator for the stores.&lt;br&gt;
Over the Twilio integration, it was pretty simple all the info is in the documentation, right now the bot is very simple I want to improve it and add more languages support.&lt;/p&gt;

&lt;h2&gt;
  
  
  Next steps
&lt;/h2&gt;

&lt;p&gt;I enjoyed the development and the idea is to keep working in this project adding more features and maybe more usages. Integrate a database to manage the store owner data and have more historic data to generate insights with it. Add more templates and improve the existing one.&lt;/p&gt;

&lt;p&gt;Actually Twilio Autopilot juts support English which is a problem related to my location so I hope they add more support to other languages in the future.&lt;/p&gt;

</description>
      <category>twiliohackathon</category>
      <category>ecommerce</category>
      <category>chabot</category>
      <category>mijo</category>
    </item>
    <item>
      <title>MIJO chatbot store site manager PART 2</title>
      <dc:creator>FabianBG</dc:creator>
      <pubDate>Tue, 21 Apr 2020 23:29:31 +0000</pubDate>
      <link>https://dev.to/fabianbg/mijo-chatbot-store-site-manager-part-2-mn7</link>
      <guid>https://dev.to/fabianbg/mijo-chatbot-store-site-manager-part-2-mn7</guid>
      <description>&lt;h1&gt;
  
  
  Previous Post
&lt;/h1&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/fabianbg" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AMWfWfD4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--uuaj9GXv--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/54432/7e8534c6-0eb1-4dbf-b532-b0aa8354de0f.jpeg" alt="fabianbg image"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/fabianbg/mijo-chatbot-store-site-manager-part-1-1j5j" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;MIJO chatbot store site manager PART 1&lt;/h2&gt;
      &lt;h3&gt;FabianBG ・ Apr 19 ・ 2 min read&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#twiliohackathon&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#ecommerce&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#chabot&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#mijo&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


&lt;h1&gt;
  
  
  Goals
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;Create the ExpressJS project DONE&lt;/li&gt;
&lt;li&gt;Customize Gabsty Ecommerce template &lt;/li&gt;
&lt;li&gt;Integrate with Twilio API&lt;/li&gt;
&lt;li&gt;Improvements&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Progress
&lt;/h2&gt;

&lt;p&gt;This article covers the second and third goals, I refactored the project to organize better the code so I divided on domain and application. For the domain is all the business logic and for application all the endpoints.&lt;br&gt;
The project has two kinds of endpoints Twilio and app.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LRLZ76Ew--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/eid1bzwmg5bdjvcak6mt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LRLZ76Ew--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/eid1bzwmg5bdjvcak6mt.png" alt="Project structure"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Twilio endpoints expose:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create store create a new gatsby site based on a template&lt;/li&gt;
&lt;li&gt;Add a product add products to the Gatsby site&lt;/li&gt;
&lt;li&gt;Updates store site Deploy the static site&lt;/li&gt;
&lt;li&gt;Delete a product removes a product&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;App endpoints expose:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Place order which sends a message to the store owner with the details and contact info.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Gatsby theme
&lt;/h3&gt;

&lt;p&gt;I customized the Gatsby site and it gonna be the first theme for the site, in the future I expect to add more themes.&lt;br&gt;
The final result of the custom theme:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--i3bCTZzT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/4nwo3zwfdi3sjwn7smxq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i3bCTZzT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/4nwo3zwfdi3sjwn7smxq.png" alt="Store theme 1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;All the created sites gonna have this theme.&lt;/p&gt;

&lt;h3&gt;
  
  
  Twilio Integration
&lt;/h3&gt;

&lt;p&gt;For the integration in the app I defined a folder that contains all the integration logic of sending a message through WhatsApp, and a body parse for Twilio chatbot requests.&lt;/p&gt;

&lt;p&gt;I used the &lt;em&gt;Programmable SMS&lt;/em&gt; and &lt;em&gt;Autopilot&lt;/em&gt; services to generate a simple bot that can take some basic commands and send a request to the API.&lt;/p&gt;

&lt;p&gt;The bot has an action for each endpoint:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UMwr_j0Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p8w7t7n70ir44qirl44f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UMwr_j0Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p8w7t7n70ir44qirl44f.png" alt="Bot tasks"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I tested all with the Watsapp sandbox and exposing my app with Ngrok and all the integration is simple and very easy. All the info is in the documentation of Twilio.&lt;br&gt;
The bot is very simple but does what I want with more time it can be improved and make more human-like.&lt;/p&gt;

&lt;p&gt;I think the media handler for images gonna be a headache but it was pretty simple Twilio do the bigger part of handling the media and asking for it, the validation is done it too.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Gq2AsoVW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3vbcxuu6fpvk0kb1y9d9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Gq2AsoVW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3vbcxuu6fpvk0kb1y9d9.jpg" alt="Bot chat"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--75OVRpXn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5lfkinjvj4czawkpbdf3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--75OVRpXn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5lfkinjvj4czawkpbdf3.png" alt="Created store item"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Next steps
&lt;/h3&gt;

&lt;p&gt;All the core idea is implemented, so the next step is to deploy the app so I gonna dockerize the app and add some improvements and bug fixes.&lt;/p&gt;

</description>
      <category>twiliohackathon</category>
      <category>ecommerce</category>
      <category>chabot</category>
      <category>gatsby</category>
    </item>
    <item>
      <title>MIJO chatbot store site manager PART 1</title>
      <dc:creator>FabianBG</dc:creator>
      <pubDate>Sun, 19 Apr 2020 23:47:27 +0000</pubDate>
      <link>https://dev.to/fabianbg/mijo-chatbot-store-site-manager-part-1-1j5j</link>
      <guid>https://dev.to/fabianbg/mijo-chatbot-store-site-manager-part-1-1j5j</guid>
      <description>&lt;h1&gt;
  
  
  Intro
&lt;/h1&gt;

&lt;p&gt;I decide to try this new approach because I think the chatbots are becoming more valuable becoming very good personal assistance. And this can be a new way to develop the front end of many services in the future.&lt;/p&gt;

&lt;h2&gt;
  
  
  What MIJO gonna do
&lt;/h2&gt;

&lt;p&gt;It can create a store site with a simple base gatsby template and deploy a static site. When the customer checkout in the store it sends a message (through the chatbot) to the owner telling him about the customer and his order.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;p&gt;The main stack is NodeJS because of the compatibility with Gatsby which is the static site generator for the stores. And has the SDK for Twilio. For the server and REST API manager the beloved ExpressJS.&lt;/p&gt;

&lt;h2&gt;
  
  
  Goals
&lt;/h2&gt;

&lt;p&gt;I defined the next goals to end the project:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create the ExpressJS project&lt;/li&gt;
&lt;li&gt;Customize Gabsty Ecommerce template&lt;/li&gt;
&lt;li&gt;Integrate with Twilio API&lt;/li&gt;
&lt;li&gt;Improvements&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  Progress
&lt;/h1&gt;

&lt;p&gt;I already have the NodeJS Express project generated and working on the customization of the Gabsty e-commerce template to support custom product management with son files and on the checkout, action sends data to the express server.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ovM3CWEF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lqqdi8ufkxxtcvkgvddh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ovM3CWEF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lqqdi8ufkxxtcvkgvddh.png" alt="ExpressJS project"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I chose [&lt;a href="https://github.com/parmsang/gatsby-starter-ecommerce/tree/master/src"&gt;https://github.com/parmsang/gatsby-starter-ecommerce/tree/master/src&lt;/a&gt;] Gabsty starter for the store template I liked the minimalistic design (THANKS TO parmsang for this beautiful design), but for the site, It has to be customized to remove some functionality and add custom functionality to support the new way of managing the site.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VgCHKliR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/mffxzp8q9oj8r3z5mufy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VgCHKliR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/mffxzp8q9oj8r3z5mufy.png" alt="Gabsty e-commerce starter"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A tricky part here is I want to reuse the node modules folder for the express project and the Gabsty generated sites because of the space consumption of having a lot of sites and each one with its owns node modules.&lt;/p&gt;

&lt;h1&gt;
  
  
  Next step
&lt;/h1&gt;

&lt;p&gt;I have to make ExpressJS generate a new Gatsby site and publish it in a static folder, the endpoints to add and remove products and the checkout handler. So wait for the next update.&lt;/p&gt;

</description>
      <category>twiliohackathon</category>
      <category>ecommerce</category>
      <category>chabot</category>
      <category>mijo</category>
    </item>
    <item>
      <title>Add the CI to your project with Azure DevOps</title>
      <dc:creator>FabianBG</dc:creator>
      <pubDate>Sat, 14 Mar 2020 01:32:03 +0000</pubDate>
      <link>https://dev.to/fabianbg/add-the-ci-to-your-project-with-azure-devops-2p70</link>
      <guid>https://dev.to/fabianbg/add-the-ci-to-your-project-with-azure-devops-2p70</guid>
      <description>&lt;h2&gt;
  
  
  DevOps
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;DevOps&lt;/strong&gt; stuff is everywhere right now, and as developer, it is important to known about it, actually it is more than a bunch of tools is a culture of automatization that you should develop in every project you made, so in this post, I am going to show a little example of a simple &lt;strong&gt;DevOps&lt;/strong&gt; automatization.&lt;/p&gt;

&lt;p&gt;So if you have a side project you can found a lot of tools to apply the &lt;strong&gt;DevOps&lt;/strong&gt; philosophy, a lot of people use (CircleCI)[&lt;a href="https://circleci.com/"&gt;https://circleci.com/&lt;/a&gt;] or (TravisCI)[&lt;a href="https://travis-ci.com/"&gt;https://travis-ci.com/&lt;/a&gt;] which are pretty the same idea of create a script to automatize a flow defined by you.&lt;/p&gt;

&lt;p&gt;I chose Azure DevOps (I gonna do a post for the other tools too) which allows you to have a private or public project by free, it can be useful if you don't want to have a public repository to apply a CI pipe, &lt;strong&gt;Azure DevOps&lt;/strong&gt; can integrate with different source version control providers such as &lt;strong&gt;GitHub(Microsoft)&lt;/strong&gt; and &lt;strong&gt;Bitbucket&lt;/strong&gt; or if you want, you can use the Azure Repo tool integrated in &lt;strong&gt;Azure Devops&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  PROJECT DESCRIPTION
&lt;/h2&gt;

&lt;p&gt;For the project I gonna use a Github repo with a base project of micronaut-java[&lt;a href="https://github.com/FabianBG/microservice_micronaut_base"&gt;https://github.com/FabianBG/microservice_micronaut_base&lt;/a&gt;], the automatized process will be like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;push code to branch:

     =&amp;gt; if branch updated
           =&amp;gt; test
           =&amp;gt; build
           =&amp;gt; dockerize
           =&amp;gt; push to DockerHub
           =&amp;gt; use everywhere
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Let's do it
&lt;/h2&gt;

&lt;p&gt;First of all, we need a project to deploy so choose a project that you want to automatize, but be careful about the technology, sometimes the technology is hard to automatize or build. For this case I gonna use a &lt;strong&gt;Micronaut java project&lt;/strong&gt; if you want to know more about it see this page [&lt;a href="https://fabianbg.netlify.com/posts/micronaut--introduction-tutorial-article/"&gt;https://fabianbg.netlify.com/posts/micronaut--introduction-tutorial-article/&lt;/a&gt;] is an article written by me(when I started writing in Spanish &lt;br&gt;
:P). This is a base project that connects to a Postgres database and exposes some REST services.&lt;/p&gt;

&lt;p&gt;The second step is to create the test, build and dockerize scripts this gonna be the tricky part because it depends on the technology than you are using but actually a lot of technologies come with a helpful client which can do a lot easier the job. In the case of micronaut-java you have &lt;strong&gt;maven&lt;/strong&gt; or &lt;strong&gt;gradle&lt;/strong&gt;, if you use a more complex process in your build or test you should have to create a script in the root of your project folder to tell the pipe that executes the script to easily deploy your app.&lt;/p&gt;

&lt;p&gt;The third step is an account in &lt;strong&gt;Azure Devops&lt;/strong&gt;[&lt;a href="https://azure.microsoft.com/es-es/services/devops/%5D:"&gt;https://azure.microsoft.com/es-es/services/devops/]:&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AZKt6I03--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/jonflgesiwedefxp80lz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AZKt6I03--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/jonflgesiwedefxp80lz.png" alt="Azure Page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you have the account, the next step is to create a project, you can choose if you want to have and private or public project so choose what is more useful for you.&lt;/p&gt;

&lt;p&gt;After the project is created, you can see the dashboard of the project. There are a bunch of tools that can be helpful for a development like a Jira board of tasks, repos, pipes, tests and artifacts but the most important part is the repos and pipes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ax01hiXA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1iff8l0cab1ijwy2bhht.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ax01hiXA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1iff8l0cab1ijwy2bhht.png" alt="Azure DevOps dashboard"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Import a repo
&lt;/h2&gt;

&lt;p&gt;Ok, now start the fun part, in this case, I want to have the code in azure repos too, for this reason, I have to sync with my existing repo on GitHub for this in the repo view I select IMPORT.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: It is not necessary to create an azure repo or import it, **you can define directly a pipe and connect to a repo (Bitbucket, GitHub, Subversion and so).&lt;/em&gt;*&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GVk5xLWG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ocnzrpgovh0qzfsicmvz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GVk5xLWG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ocnzrpgovh0qzfsicmvz.png" alt="Repo Import"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I paste the repo URL and let Azure do the import, in the end it shows you the imported repo.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---kTHqQ2r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/34wj2rd863h009xmvcbd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---kTHqQ2r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/34wj2rd863h009xmvcbd.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Create the pipe
&lt;/h2&gt;

&lt;p&gt;Ok, so this far the project is on &lt;strong&gt;Azure Repos&lt;/strong&gt; now and it is time to configure the pipe, in the pipelines section you can create a new pipe, first you have to choose the repo provider if you have you code in another repo and don't want to have two repos one in Azure and another on you preferred provider you can skip the import repo part if you choose a different provider than azure repos you have to give access Azure DevOps to your repo. Once connected with your provider you chose the repo and it is time to configure your pipe:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LI70_7CN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/r05o08uy1ttawgmy91h8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LI70_7CN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/r05o08uy1ttawgmy91h8.png" alt="Pipe"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These are the templates with basic pipes configurations, I gonna define my own pipe so I choose the &lt;strong&gt;Existing Azure Pipeline File&lt;/strong&gt; option. The pipe file gonna contain all the configuration to tell Azure how to run the project and for my project is the next configuration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

variables:
  imageName: 'fabianbg/micronaut-base'


steps:
- task: Gradle@2
  displayName: Test
  inputs:
    workingDirectory: '$(Build.SourcesDirectory)/base'
    gradleWrapperFile: '$(Build.SourcesDirectory)/base/gradlew'
    gradleOptions: '-Xmx3072m'
    javaHomeOption: 'JDKVersion'
    jdkVersionOption: '1.8'
    jdkArchitectureOption: 'x64'
    publishJUnitResults: true
    testResultsFiles: '**/TEST-*.xml'
    tasks: 'test'

- task: Gradle@2
  displayName: Build
  inputs:
    workingDirectory: '$(Build.SourcesDirectory)/base'
    gradleWrapperFile: '$(Build.SourcesDirectory)/base/gradlew'
    gradleOptions: '-Xmx3072m'
    javaHomeOption: 'JDKVersion'
    jdkVersionOption: '1.8'
    jdkArchitectureOption: 'x64'
    publishJUnitResults: true
    testResultsFiles: '**/TEST-*.xml'
    tasks: 'build'

- task: Docker@2
  displayName: Build and Push docker image
  inputs:
    containerRegistry: 'DockerHUB'
    command: buildAndPush
    repository: $(imageName)
    dockerfile: '$(Build.SourcesDirectory)/base/Dockerfile'
    tags: |
      $(Build.BuildNumber)
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This pipe has three tasks, *&lt;em&gt;the test task with gradle test, the build task with gradle build and docker build and push task *&lt;/em&gt;. Azure provides a kind of task templates to exec commonly tasks such as gradle and docker you just have to provide the basic configuration to each one, which in some cases are the access credentials to the service.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Save the pipe but not RUN THE PIPE YET&lt;/strong&gt;, it has no service connection configured so it gonna thrown an error because it can not access the DockerHUB repo to push the image before the run it is necessary to configure the service connection.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--w8VXNsIm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/woe1r4ks9zm86y8dix9y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--w8VXNsIm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/woe1r4ks9zm86y8dix9y.png" alt="Save pipe"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Service Connections
&lt;/h2&gt;

&lt;p&gt;A service account is a way to protect our credentials to access external services such as a private docker hub repository or a server, with this we &lt;strong&gt;AVOID TO PUT CREDENTIALS ON OUR CODE&lt;/strong&gt;, so instead just put the service account name and Azure do the binding to the credentials.&lt;/p&gt;

&lt;p&gt;To create a service account, at the left side of the dashboard click on &lt;strong&gt;Project Settings&lt;/strong&gt;, and then on service connections, you can create a new one:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9eMUIUi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fetdf8wd8cgqg96rgbs6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9eMUIUi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fetdf8wd8cgqg96rgbs6.png" alt="Service connections"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There I created a service account to DockerHUB with the name of 'DockerHUB', so use this name to define the access in the pipe.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pipe automatic trigger
&lt;/h2&gt;

&lt;p&gt;As it is defined in the pipe, I have a trigger with the master branch, so if any change is sent to master it gonna trigger the build and notify by email.&lt;/p&gt;

&lt;p&gt;For testing purposes, you can do a change to the project then push to the master branch and see what it happens.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Note: Remember to push to the repo that you choose when you create the pipe if it is an imported one push to azure repos.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vM6w2mZa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7vbxytbcksyucn0uxpgb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vM6w2mZa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7vbxytbcksyucn0uxpgb.png" alt="Running pipe"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If everything is right the pipe executes successfully and will send you a notification to your mail.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bx8W3zVv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/k7qf3l07nsx40u0tadn0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bx8W3zVv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/k7qf3l07nsx40u0tadn0.png" alt="Running complete"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we can see the built image on my DockerHUB account.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--93pxQYn7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/xhp4cgmipckpzsuwmk03.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--93pxQYn7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/xhp4cgmipckpzsuwmk03.png" alt="Docker image pushed"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Azure DevOps&lt;/strong&gt; is an easy tool to apply some automatization to our projects it can be done in a private way for free, the pricing starts at the second project and for free it is a limit of execution run time of the pipes. &lt;/p&gt;

&lt;p&gt;The hardest part of automatization a project is not the CI pipes is the project itself as we can see if we use tools that help us like micronaut-java which create projects with all the docker configuration, it is easy to apply a CI/CD pipe, but if the project requires more scripting and configuration it gonna be a pretty hard job.&lt;/p&gt;

</description>
      <category>devops</category>
      <category>azure</category>
      <category>micronaut</category>
    </item>
    <item>
      <title>Three days of Ionic, React Native and Flutter</title>
      <dc:creator>FabianBG</dc:creator>
      <pubDate>Thu, 27 Feb 2020 22:01:05 +0000</pubDate>
      <link>https://dev.to/fabianbg/three-days-of-ionic-react-native-and-flutter-2044</link>
      <guid>https://dev.to/fabianbg/three-days-of-ionic-react-native-and-flutter-2044</guid>
      <description>&lt;h1&gt;
  
  
  Intro
&lt;/h1&gt;

&lt;p&gt;As developers, We always have the difficult desition to find the right tool to fit customer expectations, in mobile development actually exist a lot of ways to achieve the desired results but wich one you have to use, if you go to internet you found a lot of articles about wich is better and an endless fight for the best one and defining it as the silver bullet framework, but as always the best way to be sure of the pros of any technology is better to give a try. That is what I decided to do a little experiment on this 3 frameworks to understand better each one.&lt;br&gt;
This article is not about wich one is better is about to identify the best qualities of each one and in wich cases are better.&lt;/p&gt;
&lt;h1&gt;
  
  
  Project definition
&lt;/h1&gt;

&lt;p&gt;As a simple test I defined a simple application with a native integration to the camera, so the project is composed of four views, a native integration to read a qr code, JSON API service consumption and a view wich renders a long list of items.&lt;/p&gt;
&lt;h2&gt;
  
  
  Views
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Item list: The main view wich one get data from a custom service and show 10 or the full list with a toggle button to show all or just 10.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Item form: a very simple form to insert a new item, wich redirects to item list and shows a modal with the id of a new item.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Item detail: A detail view of the item wich one consumes a get one service.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;QR scaner: An integration with the device camera to read a qr code with an item id, after it succedd it redirect to item detaill view.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Day one - React Native
&lt;/h2&gt;

&lt;p&gt;I decided to start with react native in wich one I have more experience, to develop for react native you should know javascript and for keeping things simple this sample app do not use the full react native stuff, like no redux no sagas just simple react.&lt;/p&gt;
&lt;h3&gt;
  
  
  Development
&lt;/h3&gt;

&lt;p&gt;To star a new project refer to the official page wich has all the requirements. (react native page)[&lt;a href="https://facebook.github.io/react-native/docs/getting-started" rel="noopener noreferrer"&gt;https://facebook.github.io/react-native/docs/getting-started&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;I wanted to use type script so for the initialization of the project with ts support:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;react-native init AwesomeTSProject --template react-native-template-typescript&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And to run the project directly on an android device to start the development:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;react-native run android&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;React native supports hot reloading and remote debug just shake the phone and see how the magic happen.&lt;/p&gt;

&lt;p&gt;In this project I used these libraries:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React navigation to move between views for the installation I used the next commands: &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;npm install @react-navigation/native @react-navigation/stack&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For the complete guide of installation and device specific configurations refer to the official page. [&lt;a href="https://reactnavigation.org/docs/en/getting-started.html" rel="noopener noreferrer"&gt;https://reactnavigation.org/docs/en/getting-started.html&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;QR code scanner library to use the device camera and scan qr codes, for the installation I used the next commands: &lt;br&gt;
&lt;code&gt;npm install react-native-camera --save&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install react-native-qrcode-scanner --save&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For more documentation refer to this page [&lt;a href="https://github.com/moaazsidat/react-native-qrcode-scanner" rel="noopener noreferrer"&gt;https://github.com/moaazsidat/react-native-qrcode-scanner&lt;/a&gt;]&lt;/p&gt;
&lt;h4&gt;
  
  
  Code repo
&lt;/h4&gt;

&lt;p&gt;The full code of the sample can be founded in this repo:&lt;br&gt;
[&lt;a href="https://github.com/FabianBG/three-days-with-ionic-reactNative-flutter/tree/master/simpleQR_reactNative" rel="noopener noreferrer"&gt;https://github.com/FabianBG/three-days-with-ionic-reactNative-flutter/tree/master/simpleQR_reactNative&lt;/a&gt;]&lt;/p&gt;
&lt;h4&gt;
  
  
  App
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-showcase.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-showcase.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Day two - Ionic
&lt;/h2&gt;

&lt;p&gt;The second day of work is for Ionic; I had previous experiences on Ionic with angular, but I realized Ionic has changed a lot as angular changed too, they added new native integration engine named capacitor and a bunch of things, so for the Ionic development is the same javascript requirement of knowledge. As the react native app the same applies, a very simple app with the basic libraries. &lt;/p&gt;
&lt;h3&gt;
  
  
  Development
&lt;/h3&gt;

&lt;p&gt;To install ionic and start a new project refer to the official documentation in their web page (ionic page)[&lt;a href="https://ionicframework.com/docs/angular/your-first-app" rel="noopener noreferrer"&gt;https://ionicframework.com/docs/angular/your-first-app&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;Ionic is not just a mobile framework it work as a multiplatform this is important because for the mobile support it is necessary to use native integration engine, in this case I am going to use the new one.&lt;/p&gt;

&lt;p&gt;To configure or to add a mobile platform do the next config:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;ionic build&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npx cap add android&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And finally you can develop the project in the web browser if you don't have any native component usage with:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;ionic serve&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And if you want to install the app on a device like an android&lt;/p&gt;

&lt;p&gt;&lt;code&gt;ionic capacitor run android&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For the qr reader I used bar code scanner wich can scan qr codes too, for to install it:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;ionic cordova plugin add phonegap-plugin-barcodescanner&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install @ionic-native/barcode-scanner&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This plugin has compatibility with capacitor, so it can run with the new engine.&lt;/p&gt;

&lt;p&gt;For ionic the routing library is already included, in this case angular router, you can choose form vue and react to start an ionic project. We can use the client ionic to create pages, components and services fore more info refer to [&lt;a href="https://ionicframework.com/docs/cli/commands/generate" rel="noopener noreferrer"&gt;https://ionicframework.com/docs/cli/commands/generate&lt;/a&gt;]&lt;/p&gt;
&lt;h3&gt;
  
  
  Code repo
&lt;/h3&gt;

&lt;p&gt;The full code repo of this sample is on this url [&lt;a href="https://github.com/FabianBG/three-days-with-ionic-reactNative-flutter/tree/master/simpleQR_ionic" rel="noopener noreferrer"&gt;https://github.com/FabianBG/three-days-with-ionic-reactNative-flutter/tree/master/simpleQR_ionic&lt;/a&gt;]&lt;/p&gt;
&lt;h3&gt;
  
  
  App
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-showcase.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-showcase.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Day three - Flutter
&lt;/h2&gt;

&lt;p&gt;And finally for the last day the new boy in the neightboir, I don't know anything about dart of flutter so in this project I am going to keep very simple and just the necesary not complex architectures.&lt;/p&gt;
&lt;h3&gt;
  
  
  Development
&lt;/h3&gt;

&lt;p&gt;To create a new project I refered to the oficial page (flutter page)[&lt;a href="https://flutter.dev/docs/get-started/install" rel="noopener noreferrer"&gt;https://flutter.dev/docs/get-started/install&lt;/a&gt;]&lt;br&gt;
Install all languaje support of dart before start coding an maybe some dart quickstart. &lt;/p&gt;

&lt;p&gt;To star the project on a device use this command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;flutter run&lt;/code&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Development
&lt;/h3&gt;

&lt;p&gt;For this development we have to include the http libray an injectable just to keep things clean.&lt;br&gt;
To add dependencies to a flutter project add the library to the pubspec.yaml&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  http: any
  provider: ^4.0.2
  injectable: ^0.1.0
  get_it: ^3.1.0
  qrscan: ^0.2.17

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner:
  injectable_generator: ^0.1.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then execute:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;flutter pub get&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;An for the qr scaner I installed a plugin fore more info refer to it page [&lt;a href="https://pub.dev/packages/qrscan" rel="noopener noreferrer"&gt;https://pub.dev/packages/qrscan&lt;/a&gt;]&lt;/p&gt;

&lt;h3&gt;
  
  
  Code repo
&lt;/h3&gt;

&lt;p&gt;The full code repo of this sample is on this url&lt;br&gt;
[&lt;a href="https://github.com/FabianBG/three-days-with-ionic-reactNative-flutter/tree/master/simple_qr_flutter" rel="noopener noreferrer"&gt;https://github.com/FabianBG/three-days-with-ionic-reactNative-flutter/tree/master/simple_qr_flutter&lt;/a&gt;]&lt;/p&gt;

&lt;h2&gt;
  
  
  App
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-showcase.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-showcase.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Results
&lt;/h2&gt;

&lt;p&gt;At the end of these three days I am writing this article, I enjoyed the app development on the diferent ways, and all the three frameworks has it own strongest points and use cases.&lt;/p&gt;

&lt;h3&gt;
  
  
  Development
&lt;/h3&gt;

&lt;p&gt;In the development all start with the installation where all of them have a lot of information about it and not so hard, the hardest part is to configure the android or ios environment after that it is very simple. The create a new project part could be a bit different for each one but everyone has it own client and project generator.&lt;/p&gt;

&lt;p&gt;So how hard is to develop in the react native project, all the basic app it took me about an average of 5 hours, I faced some issues with the navigation router installation and in the design of the app, I have to admit, I am not a very good designer. React has his own component for the visuals so not working with html and css can be a hard part, but react native has a lot of third party design frameworks wich provides a bunch of well designed components.&lt;/p&gt;

&lt;p&gt;On the Ionic project the full app took me like an average of 4 hours in total more simple than react native and flutter (maybe because I know more JavaScript than dart) the designs are simpler because Ionic has a set of prebuilt components and is easy to design over html and css. The hardest part is the integration with capacitor because is new and has it complications, if you are usisng cordova maybe the same it has it owns complications.&lt;/p&gt;

&lt;p&gt;At the end flutter was interesting to learn, dart and the way the flutter development flow was an fascinating way to create an app, the design it is a kind of different no html and css neither JSX just code, but if you like to design with code flutter is your framework. At the end It took me like an average of 7 hours, but I someway it was a new languaje for me. Flutter in the library import gave me an easy time and in the android integration too.&lt;/p&gt;

&lt;p&gt;All of them support hot reloading on a real device or emulator and a good console log for print some debug stuff. The JSON API consumption was easy in react and ionic but in dart a kind of frustrating the json mapping to dart objects.&lt;/p&gt;

&lt;h3&gt;
  
  
  Performance
&lt;/h3&gt;

&lt;p&gt;To measure the performace I used the Android Studio profiler tool, it provides a bunch of very interesting metrics. For all the testing I used a Xiaomi mi9 lite.&lt;/p&gt;

&lt;p&gt;First of all, each framework has it own ways to improve the performace with a little twerks and stuff but requires a lot of fine tuning and at the end every one of them can perform better but it is not like the performance is going to incease substantially.&lt;/p&gt;

&lt;p&gt;The first impression to me to ses how well performant is the app is the launching time, the time the app took to be ready to use, so flutter is the quicker one, then is react and at the end is ionic with the slowest start up.&lt;/p&gt;

&lt;p&gt;For each app I get a full test cicle, wich is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open the app&lt;/li&gt;
&lt;li&gt;Show all items of the list&lt;/li&gt;
&lt;li&gt;Scroll and tap to the detail view&lt;/li&gt;
&lt;li&gt;Go to new view and add a new item&lt;/li&gt;
&lt;li&gt;Go to scan view and scan a qr code&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  React native results
&lt;/h3&gt;

&lt;h4&gt;
  
  
  CPU
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-cpu.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-cpu.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Memory
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-mem.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-mem.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Energy
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-energy.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2FreactNative%2Frn-energy.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Ionic Results
&lt;/h3&gt;

&lt;h4&gt;
  
  
  CPU
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-cpu.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-cpu.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Memory
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-mem.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-mem.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Energy
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-energy.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fionic%2Fio-energy.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Flutter results
&lt;/h3&gt;

&lt;h4&gt;
  
  
  CPU
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-cpu.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-cpu.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Memory
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-mem.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-mem.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Energy
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-energy.png%3Fraw%3Dtrue" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FFabianBG%2Fthree-days-with-ionic-reactNative-flutter%2Fblob%2Fmaster%2Fdocs%2Fflutter%2Ffl-energy.png%3Fraw%3Dtrue" alt="Alt text of image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusions
&lt;/h2&gt;

&lt;p&gt;At the end the three frameworks offer what they promised a hybrid mobile development with easy integration to both main mobile platforms with an unified codebase. All of them has a decent performance on this simple app, and the development was a kind of easy but if you don't know dart it is going to be a slow start.&lt;/p&gt;

&lt;p&gt;At the memory level flutter like everybody says, has the best performance, followed by react native and at the end ionic. &lt;/p&gt;

&lt;p&gt;At cpu usage react has the biggest usage, of cpu maybe for the native render and ionic because all of the render was by the web view, and flutter very good perform ae at cpu level even if has to use native components. &lt;/p&gt;

&lt;p&gt;The energy usage for ionic is the lowest wich means than the web view render consumes less battery than a native rendering.&lt;/p&gt;

&lt;p&gt;I feel like flutter has a little bit of slow performance on the JSON API requests, maybe the mapping of json to dart objects or the fast view rendering of flutter is quicker than the request response.&lt;/p&gt;

&lt;p&gt;At the development level the ionic way of develop a mobile app is like you are developing a web app and I think it is a kind of wrong, because the behavior of a mobile app it is different of a web app. So in React Native and flutter the architecture of state management out of the box is more helpful.&lt;/p&gt;

&lt;p&gt;So which is the best? All of them has their own strengths and in my opinion and based on my past experiences these are my final thoughts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Ionic: Very easy and flexible framework for small and a kind of informative apps, when you don't have many resources to do a specialised mobile development and need to create a mobile app with an existing web app as main concept. So you can easily get you mobile app reusing the web elements. And the final mobile app is just a helpful tool for you business.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;React Native: Scales in complexity over Ionic, it requires a bit more effort than Ionic because it handles other concepts, if you are a react web developer it is easier to jump to react native, but the main difference is the component design it different form the traditional html and css it tries to keep the css attributes and html tags but wit native components so the design change and it took a bit of more effort, but with a better performance and recommended for applications with more responsibilities than can be the core of the business. It requires more resources and efforts for a team to develop an app but with more better user experience at the end.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Flutter: The new one who cames with a lot of advantages and improvements, as the case of react native you can use this for an app with can be the core business, but keep in mind the dart learning curve and the small community, flutter is pretty new but with a very high potential. I specially recommend dart for starter projects than are going to grow to be complete mobile apps, and for resources it requires more than the other two because flutter requires a kind of more time due to the new things and changing ecosystem than surround it framework.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for reach down there, sorry about the malformed redaction not an native speaker and I hope you enjoyed this article. :D&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>ionic</category>
      <category>flutter</category>
      <category>sampleproject</category>
    </item>
  </channel>
</rss>
