This document provides an overview of the technologies used in FarmData2, describes the roles that they play and provides resources for learning the essentials of each.
Interacting with FarmData2 requires a basic familiarity with git and GitHub. FarmData2 development uses a fairly standard web technology stack including HTML, CSS, Bootstrap, JavaScript, and Vue.js. The front-end accesses FarmData2 data through the FarmOS API using the Axios library. End-to-end testing is done using the Cypress framework. The automation, configuration and back-end development of FarmData2 use a number of other technologies including Drupal, drush, FarmOS, Docker, docker-compose and bash scripting.
This document is intended to be used in two ways. When you are new to FarmData2, it is recommended that you work through this document from the top down. However, it is not essential that you fully master every tool and technology on the first pass. Rather once you feel basically comfortable with a tool or technology (or if you already know it) skip to the next one. Then later, while working on FarmData2 you can return to this document and jump directly to the relevant section(s) to find a reference or to learn a little bit more as needed.
Before continuing, If you haven't already, please review the README, the CODE_OF_CONDUCT, the LICENSE and the CONTRIBUTING documents as they provide information that is important to getting started and to maintaining the FarmData2 community.
The FarmData2 community uses Zulip as it communication platform. Zulip is a group chat application that blends the benefits of asynchronous threaded discussions (e.g. a forum) with live chat.
Connecting with the FarmData2 community on Zulip provides a place to ask questions of the project managers and the broader developer community.
- Resources:
- Streams and Topics: An introduction to the two key features of Zulip. Once you understand streams and topics Zulip is relatively easy to use.
- Zulip Home Page: This page has a quick tour of Zulip's features that you can click through.
- User Documentation: A comprehensive set of documentation on Zulip's use and features.
The FarmData2 documentation and resources assume a basic facility with git, GitHub and a familiarity with the GitFlow branching workflow. You'll need to understand the steps outlined in the FarmData2 Workflow.
The following resources can be useful for learning what you'll need to know about git and GitHub:
- Resources:
- Hello World: A first introduction to GitHub that will get you started if you haven't used it before.
- GitFlow Intro: An introduction to an effective way of using GitHub (i.e. a workflow). The followign two guides walk through how to work with existing open source projects and essentially follow GitFlow:
- Git Immersion: A tutorial walks through a series of short hands-on exercises that provide practice with the key features of git.
- Pro Git Book | Learn Git Tutorial: More detailed and comprehensive coverage of git's features and use.
FarmData2 makes use of the following key technologies. HTML, CSS and Bootstrap, JavaScript with Vue.js and Axios, and Cypress for testing. If you are familiar all or most of those it may be sufficient to start by having a look at any of the modules in farmdata2_modules/fd2_tabs. The fd2_example/README.md provides the essential information about how to add and test new FarmData2 features.
FarmData2 has been used in a number of undergraduate computer science courses and activities have been developed to guide students through an introduction to FarmData2 and the technologies that it uses. If you are new to open source and FarmData2 or to any of the technologies that FarmData2 uses, working through these activities will be an efficient way to get up to speed. If you are a more experienced developer you might just pick and choose from these activities, or skip over them completely to the more general resources in the sections below.
The activities will guide you from an introduction to FOSS and FarmData2, through installation of FarmData2 and then through the use of each of the key technologies used in FarmData2. Each activity includes practice using the technologies within the context of FarmData2. Thus, you'll learn not only the technologies, but will get comfortable working within the FarmData2 developer environment as well.
If you use these activities, please keep in mind that they were created for use as assignments in courses. Thus, you shouldn't feel obligated to answer every question and you should skip over any class specific parts that don't make sense outside of a course. When you have completed all of the activities you'll be well on your way to being a FarmData2 developer. In addition, while these activites will be updated as FarmData2 evolves, they may not be fully in synch with the latest code in the repository. If you run in to any issues, use the
- 01 - Introduction to FOSS & The FarmData2 Community [ docx | pdf ]
- 02 - FarmData2 Developer Install [ docx | pdf ]
- 03 - HTML Technology Spike [ docx | pdf ]
- 04 - Vue Data Binding Technology Spike [ docx | pdf ]
- 05 - Vue Events and JavaScript Functions Technology Spike [ docx | pdf ]
- 06 - Web APIs Technology Spike [ docx | pdf ]
- 07 - FarmOS API Technology Spike [ docx | pdf ]
- 08 - Cascading Style Sheets and Bootstrap (in development)
- 09 - Element Selectors and Cypress Testing (in development)
The INSTALL.md file contains the instructions for doing a Developer Install. After you complete the developer install FarmData2 will be setup and ready for you to work on.
The FarmData2 code and documentation can be edited with any editor. However, for convenience, the FarmData2 installation includes a browser-based integrated development environment (IDE) based on Eclipse Theia.
To access the Theia IDE once the FarmData2 development environment is running, just open a browser tab and go to:
http://localhost:3000
When the IDE opens:
- Click "Open Workspace"
- Select the
FarmData2directory - Click "Open"
The explorer on the left will show the contents and structure of the FarmData2 repository. If you are familiar with other IDEs then using Theia should be relatively straight forward.
- Resources:
- How to use Eclipse Theia as an IDE: An overview of Theia and its use ad an Integrated Development Environment.
As FarmData2 matures, utilities (e.g. linters and formatters) will be added to the provided Theia IDE. If you choose to use a different editor, all such utilities will be documented in the INSTALL.md file so that you can install the appropriate plugins for your editor.
The majority of development for FarmData2 is front-end (i.e. browser-based). This section outlines the key technologies that are used for this development.
Hypertext Markup Language (HTML) is the base language that is used to create web pages. It defines the structure of a page and allows page elements (e.g. headings, paragraphs, lists, images, etc.) to be tagged and labeled with attributes. The way that an element is tagged and labeled allows the browser (with CSS) to determine how the content of the element should be displayed. Elements and attributes also allow JavaScript, Vue.js and Cypress to interact with the page style, structure and content.
- Resources:
- HTML Basics: A great place to start if you have not worked with HTML before or want a refresher.
- Your first form: An introduction to HTML forms, which FarmData2 uses to collect input from the user (e.g. plantings, harvests, search criteria, etc.)
- HTML Tables: An introduction to creating tables in HTML, which FarmData2 uses to display many of the different reports that can be generated.
- Introduction to HTML: A collection of guides and assessments that give a comprehensive introduction to HTML.
- HTML Reference: A comprehensive reference to all of the HTML elements and attributes.
Cascading Style Sheets (CSS) is a language for specifying how an HTML document should be presented (i.e. how it is displayed by the browser). CSS uses rules to apply styles to HTML elements. Each CSS rule selects HTML elements to which it applies, specifies the properties of the element that are to be styled (e.g. color, font-family, etc.) and gives a value that indicates how they are to be styled (e.g. blue, cursive). JavaScript can interact with CSS rules, properties and values to dynamically change how (and if) HTML elements are displayed.
- Resources:
- What is CSS?: A (mostly) conceptual introduction to what CSS is and what it does.
- CSS Basics: A great place to start if you have not worked with CSS before or want a refresher.
- Learn to style HTML using CSS: A collection of modules that give a comprehensive introduction to CSS.
- CSS reference: A comprehensive reference to all of the CSS properties and values.
JavaScript is a programming language that can be used to add interactivity to HTML pages. JavaScript can add or remove HTML elements, change CSS styles and respond to events (e.g. button clicks, text entry). JavaScript is also used to produce dynamic content by exchanging information with web services through Application Programming Interfaces (APIs). For example, when a user of FarmData2 saves or retrieves information about plantings or harvests it is done by JavaScript code using an API (see FarmOS API).
- Resources:
- JavaScript Basics: A great place to start if you have not worked with JavaScript before or want a refresher.
- Strings: An introduction to the way that strings are created and used in JavaScript.
- Arrays: An introduction to the way that arrays are created and used in JavaScript.
- JavaScript object basics: An introduction to the way that objects are created and used in JavaScript.
- JavaScript - Dynamic client-side scripting: A collection of modules that give a comprehensive introduction to JavaScript.
- JavaScript Reference: A comprehensive reference to all of the JavaScript language features.
Vue.js is a JavaScript framework for simplifying the creation of interactive web applications. Creating highly interactive applications using HTML, CSS and JavaScript is possible, but some of the details become repetitive and tedious. Vue.js simplifies many of the common operations by allowing parts of the displayed page to be bound to a data object. In that way, when JavaScript code changes the data object the view of that data displayed in the browser is automatically updated.
- Resources:
- Vue.js Fundamentals: A video based course and a great place to start if you have not worked with Vue.js before or want a refresher. Click the "Start Course" button.
- Vue.js Guide: A textual introduction to using Vue.js.
- Vue.js Components: A video based course that introduces the basics of Vue Components.
- Components Basics: A textual introduction to Vue Components.
- FarmData2 Vue Component Details: Information on specifically how FarmData2 uses and tests Vue Components.
The FarmData2 front end exchanges data with the server using the FarmOS API. JavaScript code using the Axios library requests data from FarmOS (e.g. a list of fields) or sends new data to FarmOS (e.g. a new planting). When data is received from FarmOS, the Vue.js object is updated, which in turn updates what is displayed in the browser. Conversely, when the user enters data in the browser, that data updates the Vue.js object and that information is used to make requests to the server.
- Resources:
- What is an API and how does it work?: A video introduction to APIs with a few examples.This is a good place to start if you are new to APIs.
- Using Axios to Consume APIs: A short example of a
GETrequest using Axios and Vue.js. - Axios: Full documentation for the Axios library. This show how to do both
GETandPOSTrequests. - FarmOS API: Documentation for the FarmOS API.
- Hoppscotch: A tool for experimenting with API calls. This can be useful in figuring out how to request what you want from the FarmData2 API and how its responses are formatted.
Bootstrap is a framework and CSS component library used by farmOS, and thus by FarmData2, to provide stylized HTML components. Polished production FarmData2 modules will use Bootstrap components instead of basic html elements so that FarmData2 integrates visually into the farmOS interface.
- Resources:
- Introduction to Bootstrap: Comprehensive documentation for the Bootstrap framework.
The functionality of FarmData2 is tested using the Cypress framework. The tests in FarmData2 consist of end-to-end tests and component tests. The end-to-end tests run against the developer instance of FarmData2 and check the functionality of the pages. The component tests check the behavior of custom components that appear in FarmData2, in isolation from the running instance. FarmData 2 provides support for running both types of Cypress tests in a Docker container that eliminates the need to install or configure Cypress. See the documentation in the farmdata2_modules/fd2_tabs/README.md file for information about runing Cypress tests in FarmData2.
The Cypress end-to-end test framework works by controlling the web browser. A test typically consists of a series of steps that are automated by the Cypress tests, called _spec_s. A typical spec consist of the steps:
- Setup the test (e.g. login, prime the database)
- Visit a specific page
- Query the page for an html element of interest (e.g. button, ext field)
- Interact with that element (e.g. click the button, enter some text)
- Make an assertion about the result (e.g. new information appears on the page)
- Resources
- Introduction to Cypress: As the docs say... "the single most important guide for understanding how to test with Cypress. Read it. Understand it."
- Writing Your First Test: A good overview of how a typical cypress test works, what the code looks like and how to use the cypress test runner.
- Selecting Elements: Best practices for selecting elements that are manipulated and checked by your tests. Following these will make you tests less brittle.
- Selector Playground: A tool within the cypress test runner that will help you find good selectors to use for the elements used in your tests.
- Interacting with Elements: The main commands in cypress for interacting with elements in the page (e.g. click, select, etc.)
- should: Documentation for the
shouldstatement that is used to make assertions in cypress tests. - Assertions: A reference for all of the assertions (e.g. assertions and chainers for should) that can be used in cypress tests.
- FarmData2 Cypress Tests Details: Information on specifically how FarmData2 uses Cypress tests.
Cypress component tests work by mounting a Vue Component into a browser and allowing tests to interact with it in isolation from the application. A typical comonent test will:
- Configuring and mounting the component into the test framework.
- Query the component for an html element of interest (e.g. button, ext field)
- Interact with that element (e.g. click the button, enter some text)
- Make an assertion about the result (e.g. the component emits an event or changes state).
- Resources:
- All of the Cypress resources above are also relevant here.
- Component Testing: An introduction to the component testing in Cypress. Note: With FarmData2 support you will not need to install or setup the component testing framework.
- Vue Test Utils Guides: Cypress component testing is built on top of the Vue Test Utils. So all of their functionality is also available within a Cypress component test. The Getting Started, Common Tips, Testing Key, Mouse and other DOM Events and Testing Asynchronous Behavior sections are most relevant to FarmData2 testing.
- Vue Test Utils API: API documentation for all of the functionality of the Vue Test Utils.
- FarmData2 Cypress Tests Details: Information on specifically how FarmData2 uses Cypress tests.
The developer install of FarmData2 relies on docker containers running:
- the core FarmData2 system including farmOS and Drupal.
- an instance of MariaDB for data storage by farmOS and Drupal.
- an instance of PHPmyAdmin to allow developers to interact directly with the MariaDB instance as necessary.
- an instance of the TheiaIDE.
- an instance of the Cypress testing environment.
All of the docker related configuration and source files are found in the docker directory.
FarmData2 uses docker-compose to build custom docker images for farmOS and the TheiaIDE containers and to start and network all of the containers.
See the docker-compose.yml file in the docker directory.
Bash scripts are provided in the docker directory to simplify the process of bringing up and taking down FarmData2.
FarmData2 is built as a set of customizations to farmOS. The majority of FarmData2's features are added as custom modules displayed in tabs within the farmOS interface. See the README.md in the fd2_example module for a description of how FarmData2 modules are added to farmOS.
farmOS runs on top of Drupal. From the FarmData2 perspective this is largely transparent. As it is discovered that more information is necessary it will be added here.
For a few particular tasks related to initialization and configuration FarmData2 makes use of drush to interact with the Drupal instance on which farmOS is running. As it is discovered that more information is necessary it will be added here.