React

Development

At first, the transition seemed scary since the two fields appeared to be worlds apart. However, as I delved deeper, I realized that embedded and mobile development share more similarities than I initially thought. So, let's explore how these two fields intersect and the skills you can use to excel in both.

# Things in common:

## Hardware limitations

Embedded developers are accustomed to working in a resource-constrained environment where every byte of memory and every clock cycle counts. This not only helps in writing efficient and optimized code but also develops a valuable skill set that can be leveraged in mobile development. Similarly, mobile development also requires optimizing battery life and processing power, making the transition from embedded to mobile development easier.

## Debugging skills

Debugging skills are essential for any type of software development. While there are several debugging tools available, such as logic analyzers or JTAG, what separates the experts from the novices is their methodical and analytical way of thinking, combined with patience and focus. A great developer can navigate through the maze of code, identifying and resolving issues efficiently and effectively, regardless of the technology.

## Knowledge of hardware interfaces

As an embedded developer, understanding hardware components and configurations is necessary for dealing with real-time issues. Power optimization is a key objective, given that embedded devices often rely on battery power. Similarly, mobile developers need to understand hardware configuration to troubleshoot communication failures and connectivity issues. Also, battery-related issues can bring down mobile applications, and knowledge of power optimization is essential to help track and resolve battery-related issues, as it can be the difference between a successful or underperforming app. 

## Handling interrupts and callbacks

Handling interrupts is common in embedded development, where a single device can handle multiple events, such as timers, buttons, and sensors. Since every interrupt is important and any of them can happen at any time, it is essential to have strong knowledge and a deep understanding of how to handle them properly. In mobile development, user inputs are handled as interrupts. Therefore, experience in embedded development is useful in learning how to handle user events in the mobile app properly. 

Callbacks are another fundamental concept in embedded development, where they can be categorized as synchronous and asynchronous. Mastering callback handling enables developers to manage events more effectively. In mobile development, asynchronous programming is crucial since most of the user interrupts in the mobile app are event-based.

# Biggest differences:

## UI

The focus of embedded development is creating software that integrates with the system hardware. Usually, the user interface on the embedded device doesn't exist and the user can interact with the device through small screens or buttons. However, in mobile development, creating an intuitive and appealing user interface is a focused aspect of the development process. As mobile applications heavily rely on user interaction, designing a user-friendly interface is key to delivering an enjoyable user experience.

## Devices

Embedded development focuses on designing and creating software that runs on one specific device, usually having a resource-constrained environment. Most of the embedded devices are very different so the software can be used only on the device that it's made for. On the other hand, mobile development is focusing on creating software that can work on a range of devices with different hardware specifications. The user might have different devices with different screen sizes, resolutions, and processing power, so the software must be flexible enough to work on all of them. Mobile development requires more consideration of device compatibility, while embedded development can be more tailored to the specific device it's running on.

# Challenges I faced when learning mobile development

As an embedded developer, I started my career mainly using C and C++ programming languages. For mobile development, I used [JavaScript](https://www.javascript.com/) and [React Native](https://reactnative.dev/) which were unfamiliar territories. Learning a new language is always tricky at first, but as they say, practice makes perfect, and with every new task, I gained more experience and confidence in the language.

Another challenge was making an application that is working on both iOS and Android platforms. In the end, as an embedded developer, I was focused exclusively on hardware development, so there were a lot of interesting challenges with creating user interfaces. But hey, what's life without a little challenge, right? 

# Advice to embedded developers interested in learning mobile development

As always, start by focusing on the fundamentals of mobile development. Take a common framework like React Native and learn its syntax. Then, try your hand at developing a simple app like a memory game or notes app, where you can learn more about user interface and asynchronous programming. After that, give yourself a bigger challenge and make an app that uses multiple screens, databases or even a hardware integration like BLE. Remember, the best way to learn is through trial and error, so don't be afraid to make mistakes and learn from them.

In conclusion, don't let the differences between embedded and mobile development discourage you from exploring new horizons. Instead, see mobile development as an opportunity to expand your programming skills and add another layer of expertise to your repertoire. Many of the skills you've acquired as an embedded developer are transferable to mobile development, such as memory management, power optimization, and debugging techniques. Embrace this challenge and use your experience to your advantage. Good luck on your mobile development journey!

Learning JavaScript and React Native as an Embedded Developer

large_Embedded to Mobile.jpg

medium_Embedded to Mobile.jpg

small_Embedded to Mobile.jpg

thumbnail_Embedded to Mobile.jpg

Embedded to Mobile.jpg

Picture this: I'm an embedded developer who's used to working on exciting projects involving smart building management. But after some time, I decided to shake things up and venture into the world of mobile development. 

Embedded Developer's Guide To Transitioning To Mobile Development

## What and why? 👀

For starters, what exactly is Expo? Expo is a bundle of tools created around React Native to help you start an app very fast. It gives you the means to simplify the creation and testing of React Native App. With Expo, there is no need to directly use Xcode or Android Studio. That means you can finally develop for iOS even if you are not a Macbook lover.

What’s more, if you choose Expo, you will never have to touch any native Swift, Objective-C or Kotlin or Java code. This means you can rely on just your Javascript skills for developing a real-feel native app, ready to be used on both iOS and Android!
However, sometimes you still need to add some native code. We will go over the steps on how to do that as well!

## Setting up the project 💻

You can read all about getting started on [this link](https://docs.expo.dev/get-started/installation/), here we will do just a quick overview so you can get right into the important stuff.
The first step should be downloading the Expo Go app on your phone as well as installing the Expo CLI on your computer:
```bash
npm install --global expo-cli
```

Then you should enter the following command in the terminal and choose one out of four templates:
```bash
expo init-my-app
```

After installing the project, you can start the app by entering 
```bash
expo start
```

A QR code will now pop up on the screen, then you can scan the code from within the Expo Go app if you’re using Android, or directly from the phone's camera if you're using iOS.
Now you can see all the changes you’ve made within the app right as you make them.

## Adding native modules using plugins 📌

Sometimes during your development, you will need to use native modules not directly supported by React Native. Before switching to the bare workflow, you should check if there is a plugin available for the module you need. Expo uses plugins to generate and configure all the native code for a managed project. 

If there is a plugin available, you can easily add it to your project following these instructions.
First, you need to install the plugin of your choice. After installation finishes, edit the app.config.json or app.json file. Edit the expo key and put in the following code: 
```json
{
  "expo": {
    "plugins": ["@config-plugins/name-of-your-plugin"]
  }
}
```
Before being able to fully use the native module, you need to build the application in the development mode using EAS. You can read up more about building later in the article.
Now you can start your app with:
```bash
expo start –dev-client
```

## Permissions ☑️ 

Some native modules require the user to give his permission. With Expo, you don’t have to dig into the native code to handle permissions. It is again enough to just edit the app.config.json file. Here we will be adding [this Bluetooth plugin](https://github.com/dotintent/react-native-ble-plx), but the process is the same for any available plugin. 
For Android, you need to add a new permission field like this
```json
{
   "android": {
      "permissions": ['BLUETOOTH', 'BLUETOOTH_ADMIN'],
    },
}
```
For iOS, you need to do a bit more work. 
```json
{
"ios": {
      "bundleIdentifier": 'your.bundle.identifier',
      "infoPlist:" {
        "NSBluetoothAlwaysUsageDescription":
          'Our app uses bluetooth to find, connect and transfer data between different devices',
      },
    },
}
```
And that's it! Now your app will ask the user for his/hers permission on startup.

## Adding native modules with no plugins available 🖇️

Even though by using Expo we try to stay away from native coding, occasionally there is no other way to achieve some functionality. <br/> Up until recently, if you wanted to add native code, you needed to eject Expo altogether. That means that you wouldn't be able to use the Expo Go app anymore, but more importantly, you would need to remove all your plugins and add them to the native code by hand! Luckily, now there is a workaround and that is using Expo's new feature - the bare workflow!

If you want to use custom native code that isn't already in the Expo Go app, you will need to generate the native iOS and Android projects. To do that, first, you need to switch from managed to bare workflow. You do this by running
```bash
expo run:android
```
and
```
expo run:ios
```

Using the run commands will initially prebuild your project to generate all of the native code within your project directory. Keep in mind that you need to have both Xcode and Android Studio installed to do this. 
Now, you can test your native code on simulators, and continue to use the Expo Go for all other testing and development. You can’t access native code while using the Expo Go app, but you can still access and keep all of your plugins. 

After adding a plugin to the bare workflow, you need to run expo prebuild so Expo CLI adds required permissions to the Info.plist and AndroidManifest.xml. As before, anytime you add a new plugin, you need to build the app again.

## Building the app 🔨

To build the app, we will use [EAS Build](https://docs.expo.dev/build/introduction/). EAS Build allows you to build a ready-to-submit binary of your app for the Apple App Store or Google Play Store.
First, you will need an Expo Dev account. You can register [here](https://expo.dev/).

At the root of your project, you have eas.json, where you can find the four types of builds: dev-ios-simulator, development, preview, and production.
<ul>
<li>Development builds include developer tools, and they are never submitted to an app store.</li>
<li>️Dev-ios-simulator build is used to create the development build for the iOS simulator.</li>
<li>Preview builds don't include developer tools, they are intended to be installed by your team and other stakeholders, to test out the app in production-like circumstances.</li>
<li>️Production builds are submitted to the app store, they are meant for release to the general public or as part of a store-facilitated testing process such as TestFlight.</li>
</ul>


You can change the default value of the bundle identifier in the app.config.js file. By default, the build will be of production type. You can also specify the build type in your command.
```bash
eas build --profile development
```
After that, you can select the platform for which you want to build or you can skip that step by specifying the platform directly in the command.
```
eas build --profile development --platform all
```
The Android build will start immediately. If you chose iOS, log in to your Apple account.

When the build is over, go to the given link or scan the QR code and install the app.
Keep in mind that the app won't run with build types Development and Preview on iOS devices that are not registered on your Apple account.

In the development and preview build, the result for an Android build is the .apk file, while for the production build the result is the .aab file. If you want to change the type of build file, you will need to edit the eas.json file.
```json
{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}
```

You only need to make a new build if you add new native dependencies, or if you register a new Apple device in your provision profile and you want to run the build on it. 

## Conclusion 📝

With Expo's new features, you can finally use it for the whole development process. Adding plugins and native code has never been easier. Since the building process lasts only a few minutes, your clients can now get day-to-day updates on your progress! Other than that, definitely check out [the documentation](https://docs.expo.dev/) for other commonly used features.

Have fun and stay tuned for more! 📻 😊





large_expo.png

medium_expo.png

small_expo.png

thumbnail_expo.png

expo.png

See how Expo helps you in your development and takes care of native things for you.

Using Expo with React Native

Internship



Prior to starting, I felt a little nervous because I wasn't sure if I would be able to contribute and work well with my new team. However, a few days beforehand, my team made me feel welcomed by giving me the materials needed for preparation.

**Joining the full-stack team**

The team was just starting to build a brand new website from scratch. For the first couple of days, I was learning about new technologies that I was going to use throughout the project. I was also learning about the project itself by participating in conversations, discussing features that we were going to implement and brainstorming optimal solutions.
I got an insight into front-end, content management systems, publishing and UI/UX design. The focus was on Strapi, Next.js and Figma with React being the main point of interest.
I have to admit things were challenging in the beginning, but after some time and help from my colleagues, I was able to write a clean code on my own!


> I feel like everyone at Suprabit has an open mind and a passion for helping others! The management is flexible and attentive to the needs of the developers. If you're thinking of becoming a member of the Suprabit team or are even given an opportunity to be one, I hope you take it!

**Gaining confidence**

I realized I was able to do more than I thought I could! At the beginning of the summer, I was worried that I wasn't going to contribute enough. I never would have thought that by the end of the internship, I would become a valuable member of my team. Gaining confidence also meant talking about new concepts with my colleagues and finding the courage for pitching new ideas. One of the most important things that I learned was not to be afraid to ask questions! Asking questions meant that I'm curious and that I care about the quality of the work I'm doing. Furthermore, I learned not to ask the same question twice and to make sure the time I spent asking questions was valuable to everyone involved.


**Connecting theory and practice**

Before I started my internship, I thought I had a lot of knowledge on software development from my university.  However, as soon as I started to put such knowledge into practice, I realized that there was still so much to learn! At my university, I usually had to write small programs or projects, so working on such a big project was certainly new to me. The internship had a really positive effect on my studies as it had taught me how to write clean and understandable code and work in a team, but more importantly, it had given me hands-on experience in my field which is priceless.

**Conclusion**

I feel this internship program is well planned and adapted to students with no working experience. Throughout the entire experience, everyone was open, honest and understanding. No one ever made me feel like I was any less just because I had less experience than my fellow colleagues. I'm grateful for the things I learned during my internship and I'm so happy to be able to stay at Suprabit even after the internship has finished. I know that Suprabit will continue to support me and challenge me to be a better software developer!

large_about.jpg

medium_about.jpg

small_about.jpg

thumbnail_about.jpg

about.jpg

Interning at Suprabit has been one of the most challenging summers of my life, but it's been well worth it! Besides teaching me skills and giving me an insight into the functioning of a software company, it has forced me to learn and grow like never before.

My internship at Suprabit!

Design

# We needed a change

People say that the website is the face of the company, and that is indeed true. The website is often the first thing somebody sees about your company and if they see an IT company with a bad, ugly or non-functioning website, imagine what they will think about the company itself.

Our old website was kind of out of date and since Suprabit is a company working with cutting edge technologies and following modern trends, we had to update our website to better represent us - what we do and who we are.

# Choosing what we want

Before doing a project like this, we had to agree on what we want to show on our website, how to package it and how to put emphasis on things we think are the most important. After the agreement had been made, our designer had to make a design prototype and web development team had to design application architecture and select the technologies to work with.

# Development

Our designer used **Figma**, a vector graphics editor and prototyping tool, to create the design which our development team would have to follow. For content management, we selected **Strapi**. Strapi is one of the best headless Content Management Systems, it is open source, 100% built in JavaScript and very simple to set up. **Next.js** is an open-source development framework built on top of Node.js enabling **React** based web applications functionalities such as server-side rendering and generating static websites. Since we are already experienced in developing Next.js applications, it was an easy decision to select this technology for building our website.

Following the design in Figma, the development team built React components. Next.js was important here to render as much as possible on the server side, and then serve the client with components already populated with content from Strapi. This increases user experience as the client has much fewer requests per page and pages load much faster.

# Deployment

For deployment of our web application and even through the development process, we used **Docker** containers for both Strapi API and for Next.js app. **Docker Compose** came in handy for easier management of both containers with only few command lines in the terminal. **Digital Ocean** is our selected cloud service provider and during the development phase, we had set up a dev environment and deployed our application iteratively as it was being built and as new features were being added. To do that without connecting to the server and running several commands lines every time, we created a **GitHub Action** to do all of that for us, deploying the application version on the main branch.

Once the app was ready, we needed to make it run over HTTPS protocol, instead of HTTP, and finally update DNS servers to route www.suprabit.eu to our server. 

large_Suprabit-web-1440x810.jpg

medium_Suprabit-web-1440x810.jpg

small_Suprabit-web-1440x810.jpg

thumbnail_Suprabit-web-1440x810.jpg

Suprabit-web-1440x810.jpg

Designing a new look for our website. Selecting technologies and principles to build our website on, implementing them and finally deploying the website to cloud.

Embedded Developer's Guide To Transitioning To Mobile Development

Using Expo with React Native

My internship at Suprabit!

Building our own website