DEV Community: Microsoft Student Ambassadors - Kenya

Imagine Cup World Champions 2021

Sonia Lomo — Mon, 02 Aug 2021 06:26:19 +0000

The Imagine Cup World Champions are a team of 4 members from United States International University - Africa. All Computer Science Finalists:

Khushi Gupta - @khushi-gupta
Jeet Gohil - @jeet-g
Abdihamid Ali - @abdihamid-ali
Dharmik Karania - @dharmik-karania

They created REWEBA - remote well-baby. A remote infant monitoring system, which incorporates use of Internet of Things and Machine Learning.

Consolata: What is REWEBA about?

Khushi: REWEBA in full is Remote Well-Baby. It's an IOT device that helps mothers monitor their babies. It acts as an alarm system.

Consolata: How did you get into tech?

Khushi: My interest in tech sparked when I was young and it grew throughout my high school life. I always knew that computers were my thing.

Jeet: I grew up with tech around me. In my early days in high school, I started developing websites and apps. I knew what I wanted to do after high school. I've been growing since then.

Abdi: My story is the same as Jeet's. My interest in tech began in high school and persisted through to my university education.

Consolata: How did you get into Imagine Cup?

Abdi: We stumbled into Imagine Cup because of a friend. We had already began building the project before that. We got a chance to showcase our project through Imagine Cup.

Consolata: How did you settle on REWEBA as your Imagine Cup project?

Khushi: When applying to Imagine Cup, we had a couple of projects in mind. Imagine Cup is all about the potential impact of the project and how it can be inclusive for everyone and REWEBA made that judging criteria.

Consolata: Why did you venture into babies' Health Care?

Khushi: We happened to take a community service class together. We went to a local hospital to do the same.

When doing community service in that hospital, we realized how mothers, especially who live in the rural areas, have to walk long distances every month to get their newborns screened. This is the normal testing that is done every month to monitor the baby's development.

It was really difficult for the mothers to walk the long distances to get access to medical facilities and good doctors. When we did more research, we found out that this is one of the main causes of the high infant mortality rates in Kenya and throughout Africa. We got drawn to that pressing problem and thought that we could remedy it.

Consolata: How was the Imagine Cup application process like?

Khushi: Just so you know, Imagine Cup 2022 application submissions are open.

Our application process started around September - at that time, the deadline was in December. That was the initial process where you have to submit a report, the actual working software and a three minute pitch video.

We had a great mentor from USIU, Dr. Leah Mutanu, who helped us a lot. Her expertise helped us with problems like drafting the reports. Nonetheless, if you know your project well, I don't think you will face that many challenges.

I think the biggest challenge for us was the three minute pitch in the start because you are passionate about your project. You want to say everything you know and that could appeal, but you only have three minutes. We had to squeeze everything in three minutes.

Consolata: How did Microsoft assist you to get to the World Championships?

Khushi: Essentially there were four rounds in the judging process.

The first round was the online semifinals that we submitted in December. We were required to report our software documentation and the pitch. There were hundreds of teams from all around but they only chose 42. We were informed about our qualification around January.

The next round was to choose the top 12 out of the 42 in March. There were 4 categories and they chose three teams for each category.

Then from every category, they only chose one team on April. Lastly, the remaining 4 teams competed for the world championship in May.

For the second and third round, we got mentorship from Microsoft employees, which really helped us get our pitch together.

Consolata: Did Microsoft supply any equipment you needed to build REWEBA?

Khushi: Microsoft was very considerate, they didn't necessarily provide us with hardware parts for REWEBA. However, if you qualified through round 2 or round 3, you got Azure Credits.

We were allocated a boardroom from USIU but it had poor lighting. Microsoft sent us lighting equipment since the events were online. Proper lighting was vital. And it was online. It's all about turning on your video and you should have proper lighting and all that.

Consolata: How did you guys manage time between school and the competition?

Khushi: For me, it was all about planning. Having your schedule and tasks you want to accomplish in mind, in the morning and feeling satisfied after accomplishing everything by night - was my motto.

Jeet: I used to have classes almost every day. I created a proper timetable of what I needed to do and what's supposed to be done every week. I also made sure that I had regular meetings with my team members to discuss our progress.

We really came together. We met physically to build the IOT device and divided the software workload among ourselves to try work on it from home.

Abdi: It all circles back to wise time management. If you manage your time properly, you'll be able to complete all the tasks for a specific day. If not, you can just get extra time off of your free time to cover the rest.

Consolata: Have you ever participated in another hackathon before?

Khushi: We have participated in a three day hackathon organized by USIU. That's where we started building our project.

We participated in the Dell Technologies Envision the Future competition and won first place. It had about 4 or 5 rounds which took almost an year. As we went through these competitions, we tried to make REWEBA even better. We've had several iterations and our project has improved drastically.

Consolata: What would you advise someone who wants to participate in their first hackathon?

Abdi: The first step is to find a team or a person with the same passion as you if possible.

Many competitions require at least a minimum of two to three people. Find a competition or a small hackathon to participate in and see how your idea will be received.

Another critical step is to find a mentor. Preferably a suitable lecturer since you are university students. They'll help you in terms of planning and correcting you before you even pitch your idea to others.

Also believe in yourself. You never know how things will go. Who knows, it might be the next million dollar idea. Keep pushing.

Jeet: Try to also have a general knowledge on the technology you'll use.

Consolata: What challenges did you faced during the Imagine Cup Competition?

Khushi: The first challenge we faced was the whole COVID pandemic. Our device was actually kept in the hardware lab in our university. That was because we used some equipment from the university, so we weren't really allowed to take it home. We had to find ways of getting into the university - despite the restrictions - and work on it.

The second challenge was getting sensors. All of the sensors that were used in our device were not from Kenya, we had to import them. This presented more difficulties with time and finances. We also had to look for sensors that could be integrated together.

Jeet: We only had 3 minutes present our pitch. Trying to cramp everything under that time period was a bit challenging.

Consolata: What opportunities did your participation in Imagine Cup give you?

Khushi: We got a lot of recognition. at a global level. We even have mentorship sessions with the CEO of Microsoft - Satya Nadella.

Jeet: More companies that are trying to work with us. Hopefully in the future, we only get to make this project something better than it is right now.

Abdi: We've gotten a lot of networking opportunities as well. We just need to take advantage of that.

Consolata: Are you planning to turn your product into a start-up?

Khushi: Of course. We do have plans to turn this into a startup and we're working towards that. We're already looking for appropriate stakeholders or partners.

Abdi: We're still working on stuff like patenting. For an IOT device these are a lot of stuff to consider such as the security and privacy. We're just sorting out these few kinks.

Consolata: Did any of you have a medical background?

Khushi: All of us have an IT background, . No one has a medicine background. But we got to know about this problem because of the community service we did. This was just a technical solution. So we did not have to research much about the medical part of it. Furthermore, doctors will still come in to check for how healthy the baby is.

Abdi: We consulted our school doctor and took her through the solution. We used her knowledge and expertise to go through the entire process of the product. We still had her expertise as a guide when making the product for the babies.

Jeet: We got feedback from doctors at the USIU medical center. We also had some professors who teach medicine there. We met with some of them and we told them about our idea. They really give us invaluable feedback.

Consolata: How did you settle on the tech that you used for your project?

Jeet: When we started out this project, we didn't really use Azure. But once we started progressing we had to use Azure as a requirement for the competition. That was a bit difficult because we were not really used to it. It had a bit of a learning curve. But they have really extensive courses on their website.

When watching those videos, we got to know what we need to use, what we can use and how it was better than what we had. Some of the technologies from Azure IOT hub that we used were Azure app service, Azure customers, DB Asia and DevOps.

We used Twilio to communicate to mothers using SMS. For the AME we used Azure custom vision, which came in handy. It doesn't need code. It just requires images to be trained with.

For the backend, we used Express and our IDE was VS Code. For the IOT side, we basically went with the raspberry PI. Those were some of the technologies that we used during Imagine Cup.

Consolata: Khushi, how does it feel to be the only lady in the team?

Khushi: I must say the experience is amazing especially with teammates I have. They are always by my side. They never make me feel like I am the "only girl". Everyone is considerate of each other and the team.

Consolata: What's your advice to ladies getting into tech?

Khushi: Nowadays, female techies are increasing. Companies like Google, IBM, Microsoft, are all trying to encourage women in the field of technology. This field is no longer only for men. I think women can also make a great impact in it. And there are also many events like the Grace Hopper conference, held annually only for women.

So, you know, there are many opportunities out there that are trying to encourage and empower women in this field. Women should take advantage of these opportunities. I encourage all the women out there to get out of their comfort zone.

In Conclusion

It was an honor to have Team Reweba share their experience on our Imagine Cup Building Series. Follow them on twitter @reweba You can get the full interview video on our YouTube channel:

Please share your feedback on this interview. Reach out to us if you'd like us to interview a team of your liking next!

The brains behind the most efficient tracker in the market, Zed Engineering Limited.

Victor Maina — Mon, 12 Jul 2021 22:06:58 +0000

Meet Zed Engineering, a trio that created a tracking device (Astra), that monitors potential malicious activity from your vehicle or motorbike. We got to interview the team of creatives and innovators from Dedan Kimathi University of Technology, in our 3rd building series with this amazing product that will blow your mind.

Joy @wht_snow - Marketing and Public Relations Microsoft Learn Student Ambassador
Stephen @stinekaguri- Software Development, Server Management
Brian @blasius_brian - Deals with Firmware for microcontrollers, Designs electronics, and runs simulations

Sonia: What led you to start Zed Engineering?

Brian: Vehicle and motorcycle theft has been a problem for decades everywhere and there have been trackers made to combat this. Normal trackers did not have real-time notifications, and we got ahead of that by creating an android app that links our tracker to your phone. When your vehicle is in motion you'll get notified.

We also have a battery protection feature. People's batteries get stolen from cars in garages and get exchanged for old ones. The battery protection system was tested by one of our technicians from campus and he was able to detect battery theft from his car. We are glad we were able to solve a major problem.

Sonia: Do you customize your trackers for every customer you get?

Brian: No. They are more or less the same for all types of vehicles.

Sonia: What's the inspiration behind the name "Zed Engineering"?

Joy: There is a very funny story behind it because last year we had chosen a name for our company but we didn’t have the funds to register it. Luckily this year we got the money but unfortunately, the name had already been taken by another company. So we chose from a list of names and went with ZED.

Sonia: How has the MLSA program impacted your success?

Joy: I have been exposed to many resources and skills, one being the ability to connect and interact with people. It's made it very easy for us to sell our product. Microsoft Learn's vast resources and benefits like Azure for storage, have come in handy too.

Sonia: What challenges did you face working as a team during the pandemic?

Stephen: Due to geographical differences and the technicalities of the product, progress was slower. Also, shipping components from China got slackened due to the lockdowns and the pandemic.

Sonia: Is there a reason why you shipped your hardware from China?

Stephen: Shipping costs from China are relatively cheaper. There is also more variety in the Chinese market because that's where most of the hardware is fabricated.

Julia: Have you encountered any new or threatening competitors in the industry and how do you plan on attaining a competitive advantage?

Brian: Yes. In fact, there are so many competitors in the market. One of the challenges we’ve encountered is having small-scale production. A large-scale company could produce a thousand pieces at a go. If we produced twenty pieces at a time and we both sold our pieces at a thousand shillings, we won't make as much profit. We ought to work twice as hard as the bigger companies and perfect our art. We have to make sure there are no technical mistakes from the get-go to compel our customers to stay for the quality work.

Sonia: If you could go back in time, is there anything you would want to change?

Joy: Nothing really. We just move forward and learn from our mistakes, what’s done is done!

Sonia: Joy, have you faced any challenge being the only female in the team and what advice would you give to other women who might be in your position?

Joy: These guys have been awesome and I'm comfortable working with them. My advice would be when interacting with people or rather when making friends, make sure you choose people who have the same drive and or motivation as yourself. This will help in the future. In case you get stuck, those people will push you to levels you never imagined.

Sonia: How did you guys get together and decide to be a team?

Joy: Steve was the first person I met and talked to in my class. Steve eventually met Brian and later on, Steve introduced me to Brian. Before we knew it, we were a trio.

Sonia: How do you guys raise funds to run the business?

Steve: We have been having a few issues with funds. Yes, investors have come who want to buy shares (apparently we don’t know how many shares we have). So the money mostly comes from our pockets, we enjoy funding the project.

Sonia: where do you guys see yourselves in the future?

Brian: We have a prototype already, both software and hardware revision is being done. We are doing designs for manufacture. We want to do a mass production making our product cheaper with high quality. Our target is to have one hundred units by August.

We intend to deal with more products other than trackers. Every product will have a specific name just like how our tracker is called Astra.

Sonia: How can we send potential customers in case they want to contact you?

Joy: For now, we do not have a company contact, we are using our contacts. So if you want to reach us you could contact us personally.

Sonia: What advice would you give someone who has an idea but they do not know where to start?

Steve: Just start small, and you'll grow eventually. Taking the first step is key.

Julia: What is the most important piece of advice you’ve received in your journey?

Brian: I have been sharing this with my teammates. One of the most motivational tweets for me is thanks to Elon Musks' Twitter page.

The best thing about engineering is feedback, never expect positive feedback. This will come a long way in your journey.

In Conclusion

Imagine Cup Kenya would like to thank Zed Engineering for sharing their journey with us. Please leave a comment on what you'd want to see next or any feedback you might have for us. Catch the full interview on our YouTube Channel:

Meet Imagine Cup World Finalists, Team CafriLearn

Sonia Lomo — Mon, 31 May 2021 12:28:05 +0000

On this next showcase on Microsoft Imagine Cup Community Kenya, we'll be highlighting two members from a team among the 2021 Imagine Cup World Finalists - Team Cafrilearn. They are a team of four from the Dedan Kimathi University of Technology namely:

Humphry Shikunzi - Fullstack Developer, co-founder, in charge of managing the general app infrastructure and also a Microsoft Learn Student Ambassador.
Clinton Oduor - IoT enthusiast.
Lillian Patience - Team Manager, specialized in the hardware and a Microsoft Learn Student Ambassador.
Collins Emasi - majors in Machine learning and App development

Bethany: What's Team Cafrilearn all about?

Lillian: Cafrilearn is a team that built a project to help children, especially from marginalized communities with no access to the internet and live in areas with low electricity penetration. We created Makini - an offline learning device that allows for an interactive session at a low cost. Through the device, students can have access to learning materials through speech without relying on the internet.

Bethany: What technologies do you use to ensure that students get access to learning materials offline?

**Lillian: The majority of our platform is majorly on Microsoft Azure. Since storage is actually our main focus, we're using Azure Blob Storage because we have to store most of our material there. We're also making use of data analytics to be able to get feedback from the device when it's in use and adjust our product accordingly.

Bethany: How does Makini work?

Humphry: Well, we've also used Microsoft Azure to host the website itself, the APIs, the databases and blob storage that Lillian mentioned. What motivated us initially was that we wanted to avail materials to students living in remote areas. All that is required is a teacher with a smartphone to log into the mobile app and download the learning materials then share via Bluetooth to the device. The students can then interact with Makini or someone can read out the content out loud.

We then get feedback from the students through the device and this information gets stored in our databases and from there on, know how to improve our device.

Cafrilearn

@cafrilearn

Here's a small snippet of what Cafrilearn is all about😃
#education4all #elearning #imaginecup #technology #MicrosoftEDU #Kenyatotheworld
@DeKUTkenya @MSFTImagine @ImagineCupKE

05:30 AM - 16 Mar 2021

Bethany: How did you conduct market research for the product?

Lillian: As the Team Manager, I was playing multiple roles within, one of them being market research. I went ahead to form a partnership with a local school around our area called Moringa II Primary School. Not only did we get incite from teachers on the product, but we also tested the device with the children themselves to properly get feedback on the same. That allowed us to create a better product and help in terms of the business aspect and marketability.

Bethany: What's the current or future impact of your product?

Lillian: From the market research, we could clearly see that our product was an avenue that was yet to be explored. Yes, there have been tablets and other bridges to create a link between children and access to education, but most of them tend to rely on internet connectivity. In reality, a lot of people in Kenya, Africa and beyond, don't have access to the internet and even in some places, electricity penetration. As such, we believe our project is very viable. We're looking forward to creating a better prototype and launching it through our start-up.

Bethany: What are the skills required to launch your product?

Humphry: We needed a mobile app developer for the teachers to gain access to the learning materials. We also needed skills to develop APIs used to manage our users and also access information. For the main device used by the students, we required some skills in electronics and firmware. We got lucky because most of us are electrical engineers, and we could build the whole pipeline from end to end.

We also got help with marketing from one of our managers - Mr. Ken. He was the one who helped us with the marketing design and how to work as a team towards building a product that'd be viable for the end-user.

Bethany: How has MLSA and Imagine Cup program contributed to your product?

Humphry: After passing the first round of the competition and joining the World Championship, we were given access to resources like Azure Cloud credits for building our start-up.

Lillian: Participation in the Imagine Cup has helped our project get more attention and traction. We've also gained more insight into our process's strengths and understand the potential of our project. In addition to attending the Imagine Cup challenge, we've become more motivated and gained exposure as a team, and gain insight on how to make our product better. Making it past the first round was also a huge achievement for us.

Bethany: What challenges did you face while working during the COVID pandemic and how did you respond to them?

Lillian: When you're dealing with hardware during the pandemic, it's a bit hectic to work with people in different locations performing different roles. Linking them simultaneously to form a pipeline that actually works is difficult because there are deadlines to be met and sacrifices to be made to make up for the time that we have. Especially when we were participating in the Imagine Cup, there were times when we could sleep very late because we'd be working on all the things that were required.

I'd say one of the greatest tasks that came with COVID would be working as a team - teamwork is very important and each member being able to deliver on their tasks. In this pandemic, you can't work properly and complete a project on time unless everyone plays their part as they should be and are willing to work towards the main team objective. The best part of our team is that we're diverse in what we can do and that helped us work together and create a pipeline to work properly.

Bethany: What's one thing you regret doing in your project and how did you overcome it?

Humphry: I don't regret anything because it was the first time we were doing this. However, I'd advise anyone who'd want to build a similar product from scratch, not to repeat the same mistakes we did. The materials we used are supposed to be stored in blob storage for teachers to download them and share via Bluetooth with the device for the students to interact with it. Everyone was searching for learning materials from different websites we could find. After going through all that, we realized that you must be certified by bodies like the Ministry of Education or the Kenya Institute of Curriculum Development(KICD) to relay such materials to students or any learning institutions. Therefore, this meant that although we'd gotten valid learning material, we weren't permitted to use it.

So, if you're doing such a thing, try to look for 2 or 3 materials just to test if your product works, and then start partnering with relevant education bodies. That was one of the things we spent a lot of time working on at the beginning of the project although it was unnecessary.

Another thing was preparation for making presentations at the Imagine Cup. If it's possible, try doing the presentations when everyone is in the same location. PRACTICE! PRACTICE! PRACTICE! Do this as much as possible to be prepared for any questions you might be asked.

Bethany: What were the most exciting moments while creating the project and also during the Imagine Cup Competition?

Humphry: I enjoy the thrill of programming and building things - seeing all those lines of code on your screen and at the end of it, compiling code that runs. Also, I enjoyed working with a dedicated team that's very skilled in what they're doing. I got to see their potential, something I had never seen before despite some of us being classmates.

When we were selected for the Imagine Cup World Finals, we saw that we were competing with teams from Japan, Canada, Turkey and such. That brought our team and our whole university to a global level and I'd like to continue experiencing this - doing things at a global level.

Lillian: For me, the first one would be when our participation in AU Africa was confirmed, that was the first platform we ever presented our project to. It was a nice opportunity and I was excited because it showed the potential for what we were doing.

The second one would be when our program first ran. It's such an intense feeling to see your idea finally come to life and in action. It's a feeling that can't be compared to anything else.

The other part was seeing how the children responded to our product; it was so amazing. They were so excited, asking Makini questions to give them information. It felt like we were really doing something huge for them.

Bethany: How soon can we expect to see Makini on the market?

Lillian: Currently, the devices we have aren't that many and we're still working on them and doing test runs with students. We're also trying to finish up on some tweaks needed in order to be sure of when the final product will be launched.

Bethany: Do you have funding for your project?

Humphry: We haven't started looking for funding for the project yet because we're still doing Beta tests on the hardware and software to get it to the next level. However, we still have plans in place to look for funding when the time comes.

Bethany: How has your process been?

Humphry: During the COVID lockdown in September 2020, the whole team was working remotely from different locations. Fortunately, the restrictions were lifted, we went back to school and started working on the mobile and web apps. Then, we ordered some hardware on Amazon before returning home for Christmas. We then assembled everything in January after the delivery, wrote the firmware, and integrated the whole pipeline for the device.

Right now, we're in the process of improving the systems in charge of interactivity in terms of cognitive services and getting feedback from the students and teachers. We've been trying to improve the UI of our applications and adding some features. We plan to continue testing our product with students once they get back in session. We also want to partner with authorized local content providers to help us get good learning material that' up to standard and within the legal bounds.

Bethany: What's your parting shot for students wanting to get into hackathons?

Lillian: Once you've created your product or your idea, that's a manifestation of your intellect, your skill, your everything. Don't be afraid to give it a go at many competitions. There are situations where we apply but don't get in or you don't win; it's all part of the process. But at the same time, you gain more experience.

I'd like to encourage more people to participate in the Microsoft Imagine Cup, you'll get access to so much like field experts to give you advice. It opens up a world of opportunities that you would otherwise not have been able to get. You also get perks like Azure credits to further develop your product. Believe in your product, trust in it and give it a go!

Humphry: If you want to build something successful from scratch, you should look at the main objective. For us, we are solving a problem. Look at your surroundings and choose a problem that you can focus on and solve.

Then, build a team of about 2 to 3 people to help you with development; it's hard to do everything alone. Look for dedicated teammates, people who won't stop attending your meetings after the third day or won't get preoccupied with other things.

Also, find potential customers for your solution to test it out. Nurture a relationship with them to get their feedback. After you've built the first version, it doesn't need to be working perfectly because you won't have all the requirements and resources. When the first version of Windows was brought into the market, it wasn't a complete product. It had bugs and could occasionally crash but they improved on it over time. Just start with what you have and keep on improving on it.

Show us some love:

You can watch the full interview on the MLSA Kenya YouTube channel. We'd like to thank Team Cafrilearn for accepting our interview. Be sure to follow them on Twitter @cafrilearn.

Building Data Science East Africa with Harun Mwenda.

Sonia Lomo — Mon, 19 Apr 2021 07:28:39 +0000

Harun Mbaabu is a Microsoft Student Learn Ambassador from the Murang'a University of Technology. He is a Data Scientist and Software Engineer with more than 3 years of experience in full-stack web development. He's been involved in many design thinking panels and conferences like the recently concluded CityJS Conference 2021.

He's founded two communities: Data Science East Africa and Lux Tech Academy, based in Nairobi, Kenya. He also doubles as a Machine Learning Instructor at Ubunifu College.

Julia: How did you get into tech?

Harun: I got into tech back in 2017 when I was still a first-year student in university. I started with web development: HTML, CSS and JavaScript. Later on, in 2018, my interest in data science spiked after watching a friend do it.

Julia: What's DSEA all about?

Harun: It's a community comprised majorly of people from East and West Africa who have an interest and enthusiasm for all things Data Science and Machine Learning. We bring them up, match them with mentors with industrial experience for training. We hold free boot camps for the learners. For instance, we're currently enrolling in the first 2021 boot camp.

We also help people to get started on projects related to Data Science. We're currently building a project called Next Africa. It's more of a start-up that uses AI and modern web development tools to create solutions for Agricultural and Health centers in Africa.

Julia: Who's eligible to join DSEA and how do they get started?

Harun: Our program and community is open to anyone with passion in data science and Machine Learning or Artificial Intelligence as a whole. Be it a software engineer, campus student or a high school graduate.

Julia: What impact do you think you've made in the society?

Harun: Currently, we have students from East and West Africa. The ongoing boot camp has learners enrolled from about 10 different countries i.e. Kenya, Uganda, Tanzania, Rwanda, Burundi and Nigeria. We also have some from Cameroon, Ghana and India.

I'm proud of having few people placed for jobs. From the last boot camp we held in 2020, we had more than five people getting job placements as data scientists.

We're also trying to develop solutions for two problems in the largest sector in Kenya: Agriculture. One of them is a PWA app developed with JavaScript and Tensor flow JS. We're trying to make it light (about 100-200kb). It can take photos of maize and cassava and classify the disease and the necessary treatment required.

Julia: How did you come up with your mission statement and tie it up to DSEA community?

DSEA Mission: Bringing together the East African Data Science community to help foster the exchange of innovative ideas and encourage the growth of open source software.

Harun: Our main target was to train the people who can't afford the expenses associated with joining a paid boot camp. We wanted to train them using projects; therefore, we got mentors from all over the world including, the US and UK. One of our most active mentors is a Ph.D. holder in data science from the US. The mentors help them learn and use their skills to innovate real-world solutions.

Our mission statement speaks for itself - we're bringing together the East Africa data community that'll foster the exchange of innovative ideas and encourage the growth of open-source software in the Data Science field.

Julia: How has the Microsoft Learn Student Ambassador program contributed to the success of your community?

Harun: I've been able to get in touch with other mentors and built a network with other MLSAs who've helped me spread the word. I've also had access to personal mentors who've pushed me to to the next level. I've gotten access to learning resources available in Microsoft - like LinkedIn learning courses. I've met a lot of people who've impacted me and the growth of DSEA at large.

Julia: Is DSEA apart of Lux Tech Academy?

Harun: Well, DSEA branched out from Lux Tech Academy. I founded Lux Academy back in 2019 December but, we held our first boot camp in mid-2020. When we first had our boot camp, many people showed interest in python, data science and machine learning. At the time, we were only focusing on basic programming skills in Python and JavaScript. We also did modern web development like building Progressive Web Apps, modern JavaScript and single-page applications.

We're trying to build something as big as MIT but as affordable as a gym subscription fee.

We're a free coding school based in Kenya. We have campus ambassadors and hope to enroll about 30 of them.

We also have Ladies of Lux as an effort to bridge the gender disparity gap in our learners. We aim to have a 50-50 enrollment of both genders.

Consolata: When did you know that it was the right time to start DSEA and Lux Tech Academy?

Harun: I followed one of the best pieces of advice that my dad has ever given me:

The only secret is starting, it doesn't matter if you'll fail or succeed.

Any plans that you might have, make sure that you start implementing them as soon as possible. The "right time" is an illusion. It's either now or never.

Bethany: What do you do outside coding?

Harun: I spend a lot of my free time going out for nature walks or sometimes hikes. I also relax with my friends and family when I can.

Bethany: Where do you see DSEA community in the next two to five years?

Harun: Our first target in the next five years is to train more than 20,000 data scientists from Africa. We're also actively recruiting partners who can help out with training and reaching out to more learners who're passionate about data science.

We also have learners without stable internet access. We're trying to accommodate them by looking into a cheaper internet connection for them.

We're actively developing projects with the help of our learners. We hope to have built at least implemented three projects in the next two years.

Bethany: What's your parting shot?

Harun: My greatest joy was joining tech. Your field doesn't matter. If you're in tech and you work smart, you'll always be proud of your achievements. The greatest secret is working smart in tech and trying as much as possible to help others along the way.

Stay in Touch:

Check out this full interview with Harun Mbaabu on our You Tube channel.

You can join the DSEA Slack channel or Discord server. Follow them on Twitter and LinkedIn to stay updated on upcoming events and boot camps. If you also want to be part of their community, you can email at datascienceeastafrica@gmail.com or join their WhatsApp group.

You can also catch up with their journey on Medium.

Riveting Success of The Plant Signal Team

Sonia Lomo — Mon, 08 Feb 2021 04:12:38 +0000

Want to know why your team hasn't taken off yet? It would help if you learned from the success of The Plant Signal Team. They've made huge milestones in the Agricultural industry in Kenya to the point of getting recognition from the UK High Commissioner to Kenya, Her Excellency Jane Marriot.

Plant_Signal

@plant_signal

It was an honour getting to interact with Her Excellency British HC @JaneMarriottUK at @dehub_dekut, we thank @UKinKenya for the support they have shown to us.
@myles_shadrack @AarKip @njorogemaria_ @delivce @k_njihia @MHUBKENYA twitter.com/JaneMarriottUK…

18:01 PM - 04 Feb 2021

Jane Marriott @JaneMarriottUK
Plant 🌱 Signal is helping local farmers asses the health of their crops 💚 - one of the amazing entrepreneurs supported by our 🇬🇧🇰🇪 COVID hackathon last year at DeHub in Nyeri! https://t.co/hrlxiLsL1M

Imagine Cup Kenya had the privilege of interviewing this amazing team from Dedan Kimathi University of Technology, taking a peek into their journey.

They've created an app to improve agricultural production through its services while contributing to zero hunger SDG goal. The Plant Signal mobile app detects plant diseases and pests and offers remedy recommendations to salvage the plant.

A Signal is a medium conveying information. The app revolves around plants and their products' information hence the name, Plant Signal.

Getting the remedies has never been easier. The app provides a market section where you can buy and order the products from verified agrovet stores; in partnership with Plant Signal. Rest assured that the items will be delivered in due time.

The team is made up of:

Maria Njoroge - the Chief Executive Officer, currently in her final year undertaking Geospatial Engineering and web developer.
Aaron Kipkoech - the Chief Technical Officer, a Microsoft Learn Student Ambassador, and an android developer.
Shadrack Kiprotich - the Chief Operating Officer, an Android enthusiast, C# developer, and also a Microsoft Learn Student Ambassador.
Delvice Ndegwa - Chief Public Relations Officer, a web developer and data science enthusiast.

Sony: How did the team come up with the idea?

The Team: Plant Signal came to life during the 2019 Engineer's Hack. We were running out of time and we just had to attend the Engineer's Hack because of all the hype; we also didn't want to let down the main organizer.

Majority of the residents around Dedan Kimathi University are farmers. Over the years, a lot of them have had a hard time with pests and diseases. For instance, the effects of fall armyworms destroying maize plantations for about 86% of farmers across the country by 2018; I bet you didn't know all the nerdy stats. Many farmers still don't know what to do about it.

Besides that, we noted that farmers are often victims of purchasing counterfeit chemicals, which is frustrating. That's why we came up with the whole idea of building the solution to curb all the difficulties.

Sony: Does the team have any plans on monetization?

The Team: Yes. Plant Signal plans to generate money through the e-commerce platform where professional agrovet stores have to pay a fee for their products to be displayed in the application.

Sony: What challenges have you faced while trying to advance the project?

Maria: Our marketing strategy. Most farmers are still "analog" tech-wise.

Aaron: One major challenge is insufficient development and maintenance funds. This staggers the growth of the product.

Shadrack: Team management could be better. We sometimes find ourselves not achieving what we set out to do before a deadline and we end up lagging.

Delvice: Shortage of funds. Plant Signal app relies on a well-trained model to be able to detect diseases in crops. However, training a model for more accurate results is expensive. The Plant Signal app would be more accurate and support more plants if there were enough funds to sustain model training.

Sony: What's the biggest take away from the team?

Maria: Aha... getting recognition from the President, we didn't expect that.

Aaron: All ideas are good. When it doesn't seem possible, look for a better angle.

Shadrack: Every stage of the startup counts and we should embrace every stage. They will come with their lessons, challenges, best moments and we need to learn how to tackle them and overcome the challenges.

Delvice: Growth comes with exposure. Attending various tech events and interacting with different mentors is what challenged us to make Plant Signal better.

Sony: Do you have any regrets?

Maria: Yes. Not having a marketing team. Had we known, we would have come this far. We would have had marketing personnel. Too bad we're all nerds.

Aaron: No regrets at the moment, LOL.

Shadrack: I don't think so.

Delvice: There are no regrets about how things have turned out so far. We are growing consistently.

Sony: What has been your lowest moment as a member of Plant Signal?

Maria: Well, having to deal with an external member who demanded to be included in the group. I felt it was so urgent that I had to ask a lawyer what to do. I felt as if it was a burden I was now carrying for the company. And when we registered, I realized it's now real. We had a company to build.

Shadrack: As a team, we tend to have disagreements. One of the lowlight moment as a member was a disagreement between myself and one of the members on something that I felt was right.

Delvice: Public speaking. It gives me the heeby-jeebies.

Sony: What about your highlights?

Maria: Meeting different people through Plant Signal and learning a lot about machine learning. I'd never thought of it.

Aaron: Not sure how to answer this...

Shadrack: Being recognized by the President during the Fursa Vs Virus Challenge organized by the National Youth Council. It came unexpectedly.

Delvice: I've been running Plant Signal social media accounts.

Sony: What other projects are you working on?

Maria: We, as Kenova - led by the CEO Aaron Rono - have developed more products like DeChat, a music player, a spinning game, and a gaming hub.

Aaron: Apart from Plant Signal, I've been involved in some startups as well, including AjiraAdi and ConVas.

Shadrack: Yep, we have closely worked with the team on DeChat, a solution where DeKUT students can engage, solve issues within the fraternity and bring togetherness within the ecosystem.

Delvice: I have been freelancing and developing websites for businesses.

Sony: What's your advice to anyone in your shoes right now?

Maria: It doesn't have to work right away, but it will work out when you take the first step.

Aaron: Technology is at its best when it solves problems.

Shadrack: Take every opportunity that comes your way. You never know what's in store for you, then work on the opportunity until you achieve the end goal. This will help you learn and have that growth mindset.

Delvice: Be aggressive with the idea you hold, and be patient through the journey.

Stay in touch.

Show some love to the team on Twitter @plant_signal and
LinkedIn @plant-signal.
Thank you, Plant Signal, for agreeing to do this with us. More power to you.

Hey... please don't be shy. I'd like to hear your thoughts on this piece 👇.

Azure in Mobile Apps - Setting Up Flutter Environment.

Aaron Kipkoech — Mon, 18 Jan 2021 11:13:01 +0000

What is flutter environment?

This is where all the flutter magic is done.
It entails IDEs and plugins necessary for flutter development.

IDEs

IDEs are editors used to write code.
IDEs that support flutter at the moment of writing this article are;

Visual Studio Code
Android Studio

We're going to discuss installation of flutter in both of these software.

Before diving into the software, let's get the necessary basic installation first.
We'll need to install flutter sdk.
Refer to the official flutter documentation for installation in various platforms here: https://flutter.dev/docs/get-started/install

Visual Studio Code

Install VS Code

VS Code is a lightweight editor with Flutter app execution and debug support.

VS Code, latest stable version: https://code.visualstudio.com/

Install the Flutter and Dart plugins

Start VS Code.
Invoke View > Command Palette….
Type “install”, and select Extensions: Install Extensions.
Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.

Validate your setup with the Flutter Doctor

Invoke View > Command Palette….
Type “doctor”, and select the Flutter: Run Flutter Doctor.
Review the output in the OUTPUT pane for any issues. Make sure to select Flutter from the dropdown in the different Output Options.

Android Studio

Install Android Studio

Download and install Android Studio : https://developer.android.com/studio
Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.

Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation; https://developer.android.com/studio/debug/dev-options
Windows-only: Install the Google USB Driver.
Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

Enable VM acceleration on your machine; https://developer.android.com/studio/run/emulator-acceleration
Launch Android Studio, click the AVD Manager icon, and select Create Virtual Device…
In older versions of Android Studio, you should instead launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device…. (The Android submenu is only present when inside an Android project.)
If you do not have a project open, you can choose Configure > AVD Manager and select Create Virtual Device…
Choose a device definition and select Next.
Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
Under Emulated Performance, select Hardware - GLES 2.0 to enable hardware acceleration.
Verify the AVD configuration is correct, and select Finish.

For details on the above steps, see Managing AVDs; https://developer.android.com/studio/run/managing-avds

In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

Azure in Mobile Apps - Introduction to Flutter

Aaron Kipkoech — Wed, 13 Jan 2021 15:46:55 +0000

Hello and welcome to another blog in this series.
This series is about implementing azure technologies into mobile apps.
We'll be using flutter mobile sdk for the development, and hence the need for introduction.

What is flutter?

Flutter is an open-source UI software development kit used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Easy right?
Let's scoot over to the fun part!

How does flutter work?

Flutter is built in a whole new way, compared to other frameworks, working more like a gaming engine, than a traditional application framework.
From a very high level, your app is composed of Widgets(mark this), that are rendered onto a Skia canvas, and sent to the platform. The platform shows the canvas, and sends events back as required.
Your app runs on the platform natively, Ahead of Time complied.

Confused? No worries. Just note that flutter apps are composed of widgets.

Widgets?

A widget is a basic UI element.
Lets take a look at some examples.
Example 1
You want to add text to your app. You'll create a Text widget in flutter and pass in a string as a parameter like this:

Text('Hello world')

Example 2
How to add a button. There are many types of buttons in flutter, FlatButton being among them. Let us create a FlatButtonWidget:

FlatButton(  
     child: Text('LogIn'),  
     color: Colors.blueAccent,  
     textColor: Colors.white,  
     onPressed: () {},  
)

Note the parameters of the Flatutton widget. We have a 'child' parameter with its value as a Text widget. This means we can nest other widgets as children inside other widgets. Cool right?
Other parameters you can add are 'color', 'textColor' and 'onPressed' which is a function that will be triggered when the button is pressed. These parameters are separated by commas.

Creating a simple app

Below is a flutter app code that displays 'hello world'

step 1
This line of code imports dart material package that is responsible for providing all widgets.

import 'package:flutter/material.dart';

step 2
Creating the main method. This is the starting point of the app, and will be :

import 'package:flutter/material.dart';

void main() {

}

step 3

The first function is the runApp() function, which accepts a Widget as parameter. Let's add it to the main method, and pass in a MaterialApp() widget.
Flutter provides a number of widgets that help you build apps that follow Material Design.
The MaterialApp() widget provides all it's children widgets with these material design components.
This widget takes in multiple parameters, but we'll stick to two in this case i.e title and home The code becomes:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: ,
      home: ,
      ),
    ),
  );
}

Step 4
The title parameter requires a string, which is basically the app's name.
The home parameter requires a widget, and acts more like the child parameter.
After filling in the string as title, we'll place a Text widget into the home parameter.
The resulting code will be:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'MyApp',
      home: Text('Hello World'),
      ),
    ),
  );
}

step 5
Let's run the app and see the results:

The UI is...

... crappy.

Let's see what we can do about that.

step 6

In the home parameter from the MaterialApp widget, let's add in a widget called a Scaffold before the text, and add the text as it's child.
The Scaffold widget simply adds appBar, body and other necessary elements to the application.
This prevents widgets placing themselves in unnecessary positions (as in the previous code), by specifying which part you want to place them.
In this case, we want the text widget to be in the body. Let's add it and see it in action:

void main() {
  runApp(
    MaterialApp(
      title: 'MyApp',
      home: Scaffold(
        appBar: AppBar(),
        body: Text('Hello World'),
      ),
    ),
  );
}

Now that's better.
Now you understand how flutter works, I'll leave it there for you to absorb the content.
Stick around to learn on how we can add more widgets to make more beautiful and interesting apps.

Conclusion

Building an app in flutter is easy. You can see how we created a simple layout in few lines of code.
For further understanding of flutter, visit the official documentation site: https://flutter.dev/docs

Next: Setting up your flutter environment.

A Few Quick Tips About CyberSecurity for Teens

consolata gicheru — Sun, 01 Nov 2020 18:16:18 +0000

Have you ever mentioned cyber security and your audience thought of a hacker like what they see in movies ? Well the real truth Is that we all are targets of cyber crime and we all need cybersecurity follow along to learn how to be safe online.

1.Enjoy the Online space, whether its reading,playing video
games,exploring new tech,chatting etc

However,If you are talking to someone , or visit sites online and they make you uncomfortable, remember you don’t have to talk back to them and you can always leave the site.

2.Do not give up your name and address information unless it’s from a trusted site. be keen also on the spelling of the trusted sites as some scammers may be posing as the legitimate site where as they are not.

3.Do not click on links blindly without knowing what they contain.An Example is you may just be reading an article online and suddenly you get a popup like :

kindly don't click, there are no free gifts being offered online unless the vendor advertises them on their official site.In relation to this kindly stay away from this chained messages

The people creating this chained messages are out to collect data which may be used for malicious attacks.
Incase your not sure kindly consult an adult or older sibling before clicking on this links.

4.Do not post pictures of your house or contact information including your location without your parents consent.
This may attract unnecessary attention and attract thieves to your house since the pictures may expose certain areas of interest and give them a clear view of planning their attack.

5.Do not agree to meet physically with people you've met online and if its really necessary to meet them consult your parents.This people may kidnap you and use the information you've shared during your interaction to extort your parents.They may also harass you physically and sexually.

6.When joining social media sites,it is advisable to keep your profile private and be cautious on who you add as your friend ,be respectful with your comments online and most importantly remember to share with care,Don't share anything that will hurt or embarass anyone.

For more information on types of cyber security threats and how to avoid them kindly visit:
https://www.microsoft.com/en-us/security

https://preyproject.com/blog/en/what-are-cyber-threats-how-they-affect-you-what-to-do-about-them/

Get That Unique Hackathon Idea From Open Government Data.

Sonia Lomo — Sun, 01 Nov 2020 14:01:44 +0000

One of the main challenges of participating in Hackathons is finding an innovative idea to work on. With hackathons being designed to identify solutions to real-world problems, most aim to enhance use of open data which will benefit both the government and its citizens.

The Slow Elevator Problem...

A hotel manager receives a complaint from his tenants about the elevator being too slow. He then goes to confront the engineer in-charge to get a plausible solution to this problem. Obviously, the engineer gives him a technical solution that would need him to take down the elevator and result in tanking lots of cash making renovations.

Not being satisfied with this answer, he outsources for ideas from a wide range of people. Fortunately, a psychologist offers a different perspective saying that the problem isn't the elevator being too slow, but rather the wait (in the elevator) is too long. The solution: placing a mirror costing about 4 dollars, inside the elevator for its users to occupy themselves.

What's My Point? 🤔

The point is, extending our capacity by availing open data allows more people to come in and redefine the problem into something more actionable and tractable. The hotel manager did the same by opening the problem to be solved by anyone. The psychologist ended up redefining the problem and provided a better solution.

Defining a problem isn't enough, we also need open data to understand problems more effectively by finding patterns and establishing solid evidence.

Let Me Break It Down For You. 😉

Open Government Data (OGD) plays a huge role in increasing a country's capacity to solve problems, since it's a Source of Open Data. OGD fosters innovation that's data driven for building citizen-centric solutions through apps. Building local solutions for local problems by potential local entrepreneurs (that's you as a hackathon participant). Who better to relate, understand and handle the country's problems, than its own citizens?

In Kenya, for instance, the government decided to avail data publicly in efforts to increase accountability and transparency. You can find this data in the Kenya Open Data Website.

A great place to start would be going through different categories for the datasets then... wait for an epiphany.

Once you find a category that interests you, browse through the available data.

Choose Your Weapon...

Search for a format that would be most useful to you CSV, PDF, JSON, XML, HTML etc. You could also look for any APIs available for your data.

The above data shows Monthly Summary of Road Fatalities in Kenya between 2011 - 2014 ; you could use it to flag blackspots in the country or causes of fatalities in potential danger zones to alert passengers in those areas.

The downside to OGD is that a lot of it is outdated and hence might not be as useful. But it might still be good enough for a project for your portfolio.

Of course, you could also go international and have a look at leading OGD sites from the US and Canada. Innovation knows no bounds...or at least that's what I believe.

If using government data for your projects won't work for you, don't be lazy, checkout Project ideas: How to come up with one by Faith Tanui.

OTHER RESOURCES...

*China and US compete to dominate big data
*An Open Analysis on Open Data
*Open Source Government: How AI, crowdsourcing & open data can build a smarter state

Project Implementation.

Victor Maina — Thu, 15 Oct 2020 09:38:51 +0000

There are usually so many moving parts in a project. I’d better get started the sooner. Have you ever had this very awesome idea? Well mine was one that I had after a long argument with a friend (I still think it's awesome so I’d better not jinx it). It gave me chills thinking of how we’d pitch the idea, get the app running and roll with the big fish. I even started looking for amazing sports cars around, spoiler alert; I settled for this dope Mitsubishi Lancer, with spoilers of course.

The point is, due to lack of prior knowledge about the whole process the only lancer I got was a freelancer job telling people how I almost made a million bucks. I know better now and this, my friends, is all you need to do.

Before anything, I would like to caution you not to get overly excited about your idea. Simply because building an app or any other thing requires focus and patience. Without these two, your idea will always remain a pipe dream.

Identify the problem your app solves.

There are so many apps in the market. And for you to outperform your competitors, you need to solve a problem that they haven’t. Shocked? Don’t be. Assume that you aren’t the only person who has thought of that idea. The difference will lie ultimately on how you design your app to problem solve. Just so you know Facebook was not the first social media platform.

Identify your target audience.

There are very many prospective customers, scholars, professionals and potential job candidates. It is important to always assume you have competitors. That way you will find a way to meet your clients' needs in a way your competitors can't.

Decide on features and basic design elements of your app.

Do you want a bot to query users once they land on your site? Do you want to put animations or specialized text? For instance, if you develop an app that receives text as the input, you may want to consider some languages like Arabic which uses the RTL format.

Layout your vision clearly so that you can communicate with the design and development team effectively.

Figure out who will develop your app.

Are you going to do it alone? Are you going to hire freelancers or will you look for an in-house team? Should you choose a team to develop your app, make sure that you communicate with them and come up with a strategic plan in place to see the app through development to finally launching. Every part of your project being put together is done behind the scenes.

Accomplish small tasks at a time. Trying to build the whole app in one go is very overwhelming. Take
your time to celebrate each task completed and get the morale to move on to the next task.

Test your app.

Try out building a demo app or a prototype for your app. It will enable the developer to know the glitches and the bugs that are in the code. While testing, you could get key info on the demographics of the market your targeting. This will help make the app customized to the desire of the user.

Search Engine Optimization(SEO)

SEO can be seen as how you choose to brand your app. It involves a lot of things such as name of the app, keywords used in the app, images and graphics, google analytics score, safety of the app and a lot more. A good SEO can make your downloads increase exponentially.

Launch your app.

Engage the marketing team. At this juncture, your app is ready to be shared with your audience. TA-DA! Your dream just came true.

Type-safe React using TypeScript

Ruheni Alex — Tue, 13 Oct 2020 11:19:42 +0000

A little background

For the past 4 months, I've been learning React and using it to build applications in a professional context. To spice things up, I've been using TypeScript with it. The type system TypeScript offers is phenomenal, coming from a JavaScript world. Combining the two just makes everything simple (didn't say it was going to be easy). This article isn't going to solve all your problems either. This is an attempt give a gentle introduction to React and TS, in a way that will not be overwhelming too.

I've had lots of happy-sad moments too. Sad, because I was rethinking my career choices (thought about being a farmer) because I could not understand error messages and throwing around the any type (take my advice, do not even think of trying this if you know what the data type is 😂). Happy too, because it helped me avoid mistakes, I would classify as stupid, like typos and using array methods on what I think is an array but is actually an object and save lots of hours swearing at JavaScript.

How I like to think of JS is, it's the parent who would see their child make a mistake and be, "Meh... they will learn from their mistakes", and TS as the overprotective parent who will do their best to make sure they have a smooth childhood. If you would like to share some of your tips on this topic, share it in the comments, I would be glad to learn from you too 😁.

As you can tell, I'm by no means no expert at these two topics, but I'm learning new things in an attempt to improve the quality of my code. It will not be comprehensive either, just short and sweet too. I will leave links to resources that have helped me get a deeper understanding.

The Ground work

The assumptions I'm making while writing this is that you are knowledgeable in React and just got started with TS, and would like make the most out of both worlds. We are going to use create-react-app and using TS in your project will still be possible while using frameworks and libraries such as Next.Js and Gatsby.

Starting a new React project with TypeScript is pretty straightforward..

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

If you would like to add TS to your existing project, add the following dependencies and rename your .js or .jsx files to .tsx. This will allow us to take advantage of TypeScript in our project.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Let's say you are working an e-commerce app, and you'd like to create a product component. This component will receive some props, the product details such as an id, the name, description, price availability and the image. The example might be a little crude, but bear with me here...

Enough talk, let's just dive into the code.

Interfaces and Types

Interfaces and types are used to describe the structure of data, or a "blueprint". In this case, it's a product, so let's go ahead and create an interface.

interface ProductProps {
    id: string;
    name: string;
    description: string;
    price: number;
    availability: "SOLD OUT" | "IN STOCK";
    imageUrl: string | null; // this means imageUrl can return either a string or null
}

// this is how the type would look like
type ProductProps = {
    id: string
    name: string;
    description: string;
    price: number;
    availability: "SOLD OUT" | "IN STOCK";
    imageUrl: string | null;
}

I'll be honest, I don't know the difference between the two. Even after lots of googling. But they pretty much work the same, from how I understand it. The difference is their syntax and implementation. If you happen to understand this difference, feel free to explain it to me in the comments

React.FC or FC

Now that we have our interface/type ready, let's create our Product component. I prefer functional components to class components because makes everything simple and clean... oh, and hooks too, the best thing that's happened to React so far 😀.

Let's create our functional component here.... let's not forget it will expect some props too, ProductProps,

import React, { FC } from 'react'

export interface ProductProps {/**...*/}

export const ProductComponent: FC<ProductProps> = (props) => {
    return (
        {/** some jsx here... div soup probably, guilty as charged 😂*/}
    )
}

From the above example, FC represents the functional component and <ProductProps> represents the props passed to our component. You may choose to destructure the props, and you will notice that the intellisense will suggest properties found inside your interface or type.

API requests

Your React app will most likely communicate with an API and send or receive some data. It would be nice to know what will be in this data instead of trying to guess what's in it...right? So, let's try reduce the tears you might shed here 😅.

The common pattern method of making network requests without any external library using fetch. I'd love to talk about how life changing react-query is but that's for another day.

When a network request is made, it returns a promise. We can extend the promise to return data that will be of a specific type. For our example, we'd like to receive a list of objects that are of the type Product:

export const getProducts = async (): Promise<ProductProps[]> =>
  await fetch('https://some_backend.api/products').then(data => data.json())

Call the API

If you've gotten this far bear with me, we are almost done, for now.

The last thing left is inferring type to the useState hook. useState is mostly used to manage component state. We will wrap everything together by having a component that will fetch data using the function we just created and useEffect (no dependencies since we'd like it to run only on mount) and pass the data fetched to the component we had just created.

import React, { FC, useState, useEffect } from 'react';
import { ProductProps, ProductComponent } from './ProductComponent';
import { getProducts } from './api/products';

const ProductsPage: FC = () => {
    const [products, setProducts] = useState<ProductProps[]>([])
    /** you could probably create an abstraction of this into a custom hook or use react-query but let's keep this simple...*/
    const [error, setError] = useState(false)
    const [isLoading, setLoading] = useState(false)

    useEffect(() => {
    setLoading(true)
    getProducts()
      .then(data => {
        setProducts(data)
        setLoading(false)
      })
      .catch(error => {
        setLoading(false)
        setError(error)
      })
  }, [])

    return(
        <>
            <h1>Next Gen Consoles</h1>
            <p>This is a dummy example </p>
            {products.length ? 
                    products.map(product => (
                    <ProductComponent key={product.id} {...product} />
                        ))
                : <p>Check in again pretty soon</p>}    
        </>
    )
}

... and that is it, for now. I hope this article helped you as you create a type-safe React application ... less any types in your codebase 😉.

Resources

The TypeScript Handbook

Write a React component with TypeScript by Kati Frantz

React + TypeScript Cheatsheets

Ultimate React Components patterns with TypeScript 2.8

React Hooks in TypeScript

Making Inclusive Web Apps.

Sonia Lomo — Mon, 05 Oct 2020 13:37:34 +0000

On June this year, Twitter added a voice tweets feature for IOS users. It was more of a test run but it put Twitter on the spotlight for excluding some people with disabilities (specifically, hearing impairment). Furthermore, when the voice tweets played, the user's profile pics flashed; which could cause photosensitive reactions like seizures. Some of the experts said that accessibility shouldn't be an afterthought in product design, because ignoring the needs of people with disabilities invariably leads to creation of bad products that don't serve all users.

So, what exactly is Accessibility? It's basically whether a product can be used by people of all abilities. Be it somebody with low vision or someone who doesn't understand the speaker's language in a video.

Accessibility and inclusiveness ought to be a priority because approximately 15% of the world population is living with some sort of disability. Failure to make your App more accessible is equivalent to preventing 1 billion people from accessing your app. Why would you want to prevent your awesome app from flourishing and reaching millions of users?

There are ways to tackle these accessibility barriers when developing your web app. The Web Accessibility Initiative (WAI) and World Wide Web Consortium (W3C) published the Web Content Accessibility Guidelines in efforts to encourage development of more accessible apps.

The guidelines consist of some Principles of accessibility as the foundation. I've briefly explained them below:

1. Perceivable

This means that the content of a web app can be perceived equally using more than one sense. For instance, having alternative text for images, inserting captions in video content or having transcripts for videos. Text alternatives are generally the core of perceivable content on web apps.

2. Operable

Websites should be able to function correctly, regardless of the device used to access them. Whether it's using a touch-screen, mouse or even a keyboard, navigation through the app is expected to be as smooth as possible for its users.

3. Understandable

The content in your website should be easily understood and readable to the widest audience possible. This is made possible by defining unusual words, phrases and abbreviations. Having error messages and giving descriptive instructions for any forms in your website, especially for users who won't easily understand the website's functionality.

4. Robust

Websites have to work with assistive technologies like browsers and other user agents. Ensure your code is up to date and will be compatible with current and future browsers.

Web Accessibility Evaluation Tools

If you want to know how accessible your website is, you can check out some auditing tools suggested by W3C right here. Or better yet, try out these tools mentioned below. On the plus side, they can all be added as extensions in your Chrome browser.

Despite the common use of these tools, we shouldn't fully rely in automation for accessibility testing. They also have their limits. You can read more about it in this article (Building the most inaccessible site possible with a perfect Lighthouse score) by Manuel Matuzovic.

We should enable everyone to participate equally by being mindful of these minute but essential details in our Web Apps. Hence, in efforts to make their services more accessible, Twitter is planning on introducing automated captioning by 2021. This might seem like a small thing to some people but they'll be empowering more users in the long run.

More Resources...

You can check out Microsoft Learn's, Accessibility Fundamentals to learn more about Accessibility and Inclusiveness.

If you're more of a hardcore reader, you can check out W3C's site on Accessibility here.