Domain Steem with JavaScript: Lesson #5 - Steem Keychain
Hello steemians,
Here is my homework for SLC22 Week 5, with the corresponding tasks assigned by @alejos7ven!
Create a simple app to make transfers using Steem Keychain
I undertook the creation of a web application allowing secure transfers on the Steem blockchain thanks to the integration of the Steem Keychain extension, for this project, I used the XAMPP tool, which integrates a server Apache, in order to test and run the application locally, this allowed me to bypass the limitations of loading HTML files directly into the browser, an essential configuration for Steem Keychain to work correctly.
The user interface I designed included several basic elements. I added input fields to allow the user to enter the information necessary for the transfer. The “Your Account” field was used to enter the sender’s account, while the “Recipient’s Account” field allowed you to indicate the recipient’s account. I also included the “Amount To Transfer ” to select the amount to send as well as the “Memo (optional)” area you provided to allow adding a note or additional information.
To make the interface more interactive, I integrated two buttons, “SBD” and “STEEM” which allowed you to switch between the available currencies. Finally, I implemented a main button, titled “Transfer”, which triggered the transfer process after the user had entered all the required information, by organizing these elements in a clear and accessible way, I sought to provide a smooth and intuitive user experience.
 |  |
|---|
In addition, I applied aesthetic customization via CSS in order to make the application visually pleasing, I used a gradient for the wallpaper and centered the interface elements on the screen for a balanced presentation, I also worked on button interactions, adding visual effects when the user hovers over or selects a button.
 |  |
|---|
The interactive aspect of the application is managed by JavaScript code, where I implemented a function to manage the switch between currencies, this function uses simple logic: when the user clicks on one of the buttons (SBD or STEEM), the selected currency is saved and its button is highlighted, moreover, the transfer function, the heart of the application, retrieves the data entered in the input fields, checks their validity and uses the method steem_keychain.requestTransfer to execute the operation, I also added a condition to detect if Steem Keychain is installed, to alert the user if the extension is missing.
To run the application, I configured the Apache server included in XAMPP, moved my files to the htdocs directory and accessed the application through a browser by typing the corresponding URL, during the first tries, I encountered a problem recognizing Steem Keychain, which was resolved by configuring the Apache port to 1337, as specified by the extension's documentation, once this step was finalized I was able to perform test transfers.
The transfers were validated using SteemWorld, which displays the details of the transactions made on the Steem blockchain, for example, after entering the necessary information and clicking the transfer button, a Steem Keychain pop-up window opened to confirm the operation, once validated, the transaction was visible on SteemWorld, confirming the success of the integration and the correct execution of the transfer.
In the lesson 3 you gave ideas about using the method to hear the blockchain. Select one of these ideas to develop a final project. In this task you will only mention which idea you will use, the objective of the project, how it will benefit the community, and the steps that in your mind would serve to develop it successfully.
I choose to develop the idea of tracking charitable projects and donations in real time, because it highlights transparency and trust in community initiatives on the Steem blockchain, the main objective is to design an ergonomic interface allowing visualize in real time the transactions associated with specific campaigns, while providing clear tracking of funds raised, donors and the impact generated, this project aims to inspire and encourage donations by clearly showing their positive effects while simplifying the management for organizers.
The interface of this dashboard will be intuitive and focused on the user experience, it will display, from the home page, a summary of active campaigns with key indicators such as the total amount collected, the number of donors involved and a progress bar illustrating the achievement of objectives, each campaign will be represented in the form of interactive cards containing essential information and buttons to access details or share the campaigns on social networks, a specific section will display the data of a campaign, with real-time graphs of donations collected, tables detailing transactions, and dynamic filters to search or organize data.
To strengthen community engagement, the interface will highlight key contributors through badges or symbolic rewards, while allowing organizers to post updates illustrated by photos or videos showing the use of funds collected, which module will emotionally connect donors with the impact of their contributions, while increasing the visibility and credibility of campaigns, a fixed side panel will group together shortcuts to access transaction history, archived campaigns, and options allowing 'export detailed reports in PDF or Excel format.
On a technical level, the streamOperations method will make it possible to listen to transactions on the Steem blockchain in real time, by filtering operations by hashtags or specific memos associated with campaigns, the data collected will be displayed instantly on the dashboard thanks to WebSocket for live updating, while a lightweight database will maintain a searchable history, this project will combine functionality and responsive design to fit all devices, providing a practical and engaging solution to support charitable initiatives significant on the Steem blockchain.
Thank you very much for reading, it's time to invite my friends @pelon53, @crismenia, @bossj23 to participate in this contest.
Best Regards,
@kouba01
